Pages

Homepage

Homepage is a blank page where you can add widgets. Widgets are selected and managed on the Omnitron administration panel.

With the help of the automatically controlled pageContainer structure in the mobile application, the selected widgets are brought from the backend and added to the main page under the name of "widget" under props.

How to Use Widgets?

Widgets that are transmitted to the homepage under props are transformed into components that will be visible on the screen with the help of therenderWidget function.

const renderWidget = (
 { widget_type: type, widget_slug: slug, widget_id: categoryId },
 index,
 scrollViewRef,
) => (
 <HomeWidget
   type={type}
   navigation={navigation}
   slug={slug}
   categoryId={categoryId}
   key={`widget_${index}`}
   scrollViewRef={scrollViewRef}
 />
 );

Then, these components are turned into scenes with the help of the renderScenes function so that they are a part of a stack structure. In the render method of the page, you can render and use widgets with the help of the renderScenes() function. Based on requests, custom components can also be used on the page.

What is Scene?

Scene is the structure used to make vertical or horizontal alignments between these components when more than one component is asked to be displayed in React Native.

The renderScenes function helps us with this.

const renderScenes = () => {
 return scenes.map((scene, i) => (
   <Content className="homePage.gridElements.content" tabLabel={scene} key={i}>
     {widgets[scene].map((widget, j) => renderWidget(widget, j, refs[i]))}
   </Content>
 ));
};

Omnitron Widget Management

Find a detailed description of the management of widgets on the Omnitron administration panel in this link.

Creating Widgets

Please see the Custom Widget Manual below to create widgets rendered on the homepage. In order to create a widget, the code must be developed first. A new addition will be made such as the default widgets defined on the boilerplate application. After development, a schema will be defined to create Widget Type and Widget Content via Omnitron.

Creating Container Widget

Container widgets are the widgets that specify the ones to be rendered on the homepage. This widget is created once, and its content is updated with the addition of new widgets. Please follow the steps explained in Widget Type and Widget Content to create a container widget. When creating the Widget Type, a schema must be created similar to the json file below:

{
  "element": {
    "multi": true,
    "schema": {
      "widget_type": {
        "data_type": "text",
        "key": "widget_type",
        "label": "Widget Types"
      },
      "widget_id": {
        "data_type": "text",
        "key": "widget_id",
        "label": "Widget ID"
      },
      "widget_slug": {
        "data_type": "text",
        "key": "widget_slug",
        "label": "Widget Slug"
      }
    },
    "data_type": "nested",
    "key": "element",
    "label": "Mobile Widgets"
  }
}

! This created container Widget Content must have the same value in the slug field as the value of the “WIDGETS” field under platformConfigs/urls.json.

Custom Widget Manual

In the boilerplate application, the default widgets are located within the widgets folder in the folder that contains the HomePage page. This folder contains widgets such as story, categorylist, etc. Below you can find an example in which a folder named customWidget is created for a widget named customWidget, and the index.js is added to this folder.

The code base of the created index.js file must be similar to the one below:

…
import { useWidgetFetch } from '_hooks';
import { BaseWidgetModel } from '../_baseWidgetModel';
…
const CustomWidget = ({ slug }) => {
 const { data, loading, error } = useWidgetFetch(slug);
 const [customWidgetData, setCustomWidgetData] = useState([]);
 ...
 const getCustomData = (fetchResult) => {
   const customDatas = fetchResult.data.attributes.customData;
   const mappedCustomData = customData.map((customData) => new BaseWidgetModel(customData));
   setCustomWidgetData(mappedCustomData);
 };
…
 useEffect(() => {
   if (data) getCustomData(data);
 }, [data]);
 
 if (loading) return <Spinner styleName="centerPadding" />;
 
 if (error || !customWidgetData?.length) return null;
 
 return (
   <View className="homePage.widgets.customView.wrapper">
     {customWidgetData.map(data => (
             …
       ))}
     …
   </View>
 );
};
CustomWidget.propTypes = {
 slug: PropTypes.string.isRequired,
};
export default CustomWidget;

Slug

This is the URL extension of the widget created on the Omnitron - Widget Management panel. Let's take the base URL demo.akinon.net as an example. A request is sent with demo.akinon.net/widgets(WIDGET_BASE)/mobile-widgets(SLUG) to fetch the widgets defined when the homePage is rendered to this URL and access is given to the widgets rendered on the page. These widgets can be called the container of the widgets created. Similarly, when the request demo.akinon.net/widgets/custom-widget(slug) is sent for a widget with a defined type, the returning result is based on the schema defined via Omnitron.

Fetching

As in the example given above, pass the slug parameter with the useWidgetFetch hook to fetch the widget data.

Data Mapping - Widget Modeling

As in the example given above, the fetched widget data is constructed in the getCustomData function with the BaseWidgetModel class in order to be used to work from a single base. If a custom model is to be added, it can be defined and used in the widgets/_baseWidgetModel folder. Example: _baseWidgetModel/homeRecommendationProduct.js

Import to Render

The customWidgets is imported to the widgets/index.js folder in order to render the created widget named customWidget, and is added, as shown below, to the widgets object. Thus the renderScenes function on the HomePage page maps based on the defined widgets key (custom_widget (slug)) and renders the widget.

import { React } from '_dependencies';
import CustomWidget from './customWidget;
 
const widgets = {
…
 custom_widget: CustomWidget,
…
};
 
const HomeWidget = ({ type, ...restProps }) => {
 if (type in widgets) {
   const Component = widgets[type];
   return <Component {...restProps} />;
 } return <></>;
};
 
export default HomeWidget;

Passing Custom Props

The HomeWidget component rendered on the HomePage passes the props below. Follow the steps below if an additional x prop needs to be passed to the widgets.

<HomeWidget
     type={type}
     navigation={navigation}
     slug={slug}
     categoryId={categoryId}
     key={`widget_${index}`}
     scrollViewRef={scrollViewRef}
     containerHeight={containerHeight}
…
     x={`customPropValue`}
   />

Creating Widget Type (Omnitron)

After adding a new widget type, the added widget type must also be added to the container widget. Otherwise, the application wouldn’t be able to tell which widgets should be rendered on the page. Since schema is specified with the finalization of development, a schema can be defined to the customWidget by following the steps below via Omnitron.

1. Log into Omnitron.

2. Click Content Management under Sales Channels in the left menu.

3. Then click Widget Schema Management on the page that opens.

4. Click the + Add Widget Schema button in the upper right corner of the page to add a Scheme/Type.

5. Enter Widget Type (e.g. Custom Widget Type)

6. Enter Schema (e.g. json data)

7. Lastly, click the Save button to create a Widget Schema.

Creating Widget Content (Omnitron)

After creating Widget Type, the next step is to create Widget Content based on the created schema (unless it’s Recommendation widgets). This page enables creating dynamic content based on the created schema. Follow the steps below to create the customWidget data:

1. Log into Omnitron.

2. Click Content Management under Sales Channels in the left menu.

3. Then click Widget Management on the page that opens.

4. Click the + Add New Widget button in the upper right corner of the page to add widget content.

5. Enter Widget Name (e.g. Custom Widget Content)

6. Enter Widget Slug (e.g. custom_widget)

7. Enter Widget Type (e.g. Custom Widget Type)

8. Enter Template (e.g. /)

9. A button appears at the bottom left section of the form (e.g. + Custom Content) to add Dynamic Content to the schema of the selected type. Click this button to fetch another form based on the created schema and create unlimited content.

Recommendation - Collection Widgets

In this example, Widget Content is selected from collections. First, a Widget Type needs to be created. Enter Type, and leave Schema empty (since the collection schema is used). Follow the steps below to map widget type with product collection:

1. Log into Omnitron.

2. Click Content Management under Sales Channels in the left menu.

3. Click Recommendation System on the page that opens.

4. Click the + Add New Collection Widget button in the upper right corner of the page.

5. A form will appear on the new page.

6. Enter Widget Name.

7. Select Widget Type (the one created without a schema).

8. Enter Template (e.g. /).

9. Select Collection (e.g. x collection).

10. Enter Collection Limit (e.g. 24).

11. Collections can be added/edited in the Collections page under Products and Catalogs in the left menu.

12. Click the Save button.

Widget List

The data of each widget is fetched during rendering. This fetching is carried out by the useWidgetFetch hook.

Story

It’s the component that lists widgets in the type of story.

Recommendation

It’s the component that lists widgets in the type of home_recommendation.

Category List

It’s the component that lists widgets in the type of category_list.

Swiper

It’s the component that lists widgets in the type of home_swiper.

Category Banners

It’s the component that lists widgets in the type of image_link_category_banner.

Product Detail Page

On the product detail page, you can access detailed information about the product, add it to favorites, select variant and quantity, and add it to the cart.

If you need information on how to create a Product in Omnitron, follow the steps at this link.

Based on requests, custom components can also be used on the page.

The entire page is managed with detail page container. The productDetail and basket data containers are sent to the page container via parameter.

ProductDetail(productDetailGrid, pageOptions, {
 productDetail: dataContainers.productDetail,
 basket: dataContainers.basket,
});

How to Use Page Context?

The available parameters received via page container

Actions

Name	Task	Parameter
addToCart	Used when you wish to add the product to the cart
addToFavouriteHandler	Used to add the product to favorites	pk, product
removeFromFavouriteHandler	Used to remove the product from favorites	favouritePk, product
handleChangeVariant	Used to select variant	searchKey, variant, status
handleFavouriteError	Used to turn off favorite modal
hideProductAddedModalHandler	Used to turn off added to cart modal
setQuantity	Used to update product quantity	quantity
validationReset	Used to reset the errors created while adding to cart

Data

Name	Task	Type
state	The react state of the page	object
props	The data coming from store and modal	object

Info & Favorites

In this section display the images, name, brand, and stock availability of the product and update favorite status.

<CarouselImageViewer
  images={props.product.images}
  carouselOptions={imageViewer.carouselOptions}
  carouselImageCropSizes={imageViewer.carouselImageCropSizes}
  zoomViewerOptions={imageViewer.zoomViewerOptions}
  zoomImageCropSizes={imageViewer.zoomImageCropSizes}
  pagination
/>
<FavouriteButton
  favourite={props.favourite}
  product={props.product}
  removeFromFavouriteHandler={removeFromFavouriteHandler}
  addToFavouriteHandler={addToFavouriteHandler}
  navigation={props.navigation}
  isLogin={props.isLogin}
  pending={props.pending}
  favouritePending={props.favouritePending}
/>
<ProductTitle product={props.product} />
<ProductBrand product={props.product} />
<NoStockInfo product={props.product} />

Variants & Quantity

In this section, color, size and quantity selection is made for the product. If the user does not make mandatory selections, the ModalVariant component is created in Variants.

<Variants
  colorVariantOptions={variants.colors}
  modalVariantOptions={variants.modalVariant}
  modalVariantDrawerOptions={modals.contentDrawer}
  variants={props.product.variants}
  status="productDetail"
  navigation={props.navigation}
  product={props.product}
  onSelect={handleChangeVariant}
/>
<QuantityButtons
  quantity={state.quantity}
  product={props.product}
  onPress={(count) => setQuantity(count)}
/>

Price & Add To Basket

In this section, the product can be added to cart along with the price and discount information. If the user successfully adds a product to cart, AddedToCartModal is displayed.

import { ProductPrice } from '_components/productDetail/productPrice';
import { ProductRetailPrice } from '_components/productDetail/productRetailPrice';
import { ProductDiscountPercentage } from './views/productDiscountPercentage';
import { AddToCartButton } from './views/addToCartButton';
import { AddedToCartModal } from '_components/productDetail/modals/addedToCartModal/modal';
 
<ProductRetailPrice product={props.product} />
<ProductPrice product={props.product} />
<AddToCartButton 
  pending={props.basketPending}
  product={props.product}
  onPress={addToCart}
/>
<AddedToCartModal
  visible={props.productAddedModalBasket}
  hideModal={hideProductAddedModalHandler}
>
  ...
</AddedToCartModal>

Basket Page

Basket page comprises the features below:

• Displaying the products added to cart,

• Updating product quantity,

• Removing from cart,

• Removing the product from cart by swiping (swipeToDelete),

• Displaying discounts and total price information,

• Confirming the cart and checkout.

• Displaying the “Cart is Empty” warning if no product is added to cart

Basket page is managed with basketContainer. As you can see below, the basket and checkout dataContainers are sent from the Basket page as parameters. Thus basketContainer can manage the functions, actions, and states to be used on the UI, making a differentiation between UI and logic.

export default Basket(basketGrid, {
 basket: dataContainers.basket,
 checkout: dataContainers.checkout,
});

Page Context

The props information received via page container.

Name	Task	Parameter
navigation	Used to manage react navigation.
route	Includes the information related to the page’s navigation route
handleDiscount	Used to apply discounts and vouchers	couponCode, discountRemove
handleSubmitGiftNote	Used to submit a product-based gift note	pk, giftNote
handleRemoveGiftNote	Used to remove a product-based gift note	pk
handleChangeQuantity	Used when the number of products in cart changes	pk, quantity, basketItem
handleAddToFavourite	Used when the product removal modal is opened and the product is added to favorites	pk, product
confirmBasket	Used when the cart is confirmed
hasFavourite	The HAS_FAVOURITE field value under platformConfigs/app.json
basket	Includes the fields related to the cart, which are listed below
basket.amounts	Includes the price information of the products in the cart. The contents are explained below.
basket.amounts.getTotalAmount()	Presents the total amount by applying discount and campaign calculations
basket.amounts.getTotalDiscountAmount()	Total discount amount
basket.amounts.getTotalProductAmount()	Total product amount
basket.amounts.getCampaignTotalAmount()	Total campaign amount
basket.products	Products added to cart
basket.upsell	Campaign messages
basket.voucherCode	Voucher code applied to cart
basket.discounts	Discounts applied to cart
basket.totalQuantity	Total product quantity added to cart
basket.quantity	Product quantity added to cart
basket.totalDiscountAmount	Total discount amount applied to cart
pending	This returns true when any network request is made, and the Spinner is loaded in this state. If it returns false, the page has been loaded.
validation	This checks validity when a coupon or a voucher is applied to the cart and submitted.
apiError	If an error occurs as a result of any network request, an error message returns to this object.
Example: apiError.nonFieldErrors
initialSuccess	This field returns true when the cart is fulfilled (loaded without error).
favourites	This returns to the products added to favorites. A “move to favorites” actionSheet is opened if the product that is requested to be removed has not been added to favorites.
isLogin	The information whether the user has logged in

Components

CampaignSwiper

This component displays campaigns that are exclusive to the cart. The upsell series within the basket object fetched from pageContainer includes campaign messages. This component enables the rendering of messages on the basket page as shown below.

BasketItem

This component renders the products in the products series returning from the basket object. This component renders the sections where you can update quantity, remove, remove by swiping, warn with modal when removed, and display information about the product. This component renders certain components we can describe as children, and distributes the props transmitted to the components to the subcomponents. Subcomponents are explained below.

• If the swipeToDelete feature is to be used, the swipeToDelete flag in the path below should be switched to True.

• openModalForDelete: If a modal is to be opened as a warning when swipeToDelete is triggered, the openModalForDelete flag should similarly be switched to True.src/rules/basket/basketItem.js

ItemImage

This component renders the image of the product. The product image path (product.image) is accessed via the props from the BasketItem component and rendered. If the image is clicked, the user is guided to product detail. Since image size may vary, it can be changed from the object in the path below. src/rules/basket/itemImage.js

ItemName

This component renders the name of the product. The product name path (product.name) is accessed via the props from the BasketItem component and rendered. Similarly, if the name is clicked, the user is guided to product detail.

ItemVariants

This component renders the characteristics of the product (size, color, etc.). The product variants path (product.variants) is accessed via the props from the BasketItem component and rendered. It’s rendered in the form of key and value. Color: Black Size: M

ItemRetailPrice

This component renders the retail sales price of the product. The retail sales price of the product path (product.retailPrice) is accessed via the props from the BasketItem component and rendered. The options object added to the component checks whether the total retail price will be displayed and rendered accordingly. You can switch the showTotalPrice flag in the path below.src/rules/basket/itemRetailPrice.js

ItemPrice

This component renders the sales price of the product. The price of the product path (product.price) is accessed via the props from the BasketItem component and rendered. The options object added to the component controls whether the total price is displayed and rendered accordingly. You can switch the showTotalPrice flag from the following path.src/rules/basket/itemPrice.js

ItemQuantitySelector

This component displays and updates product quantity. The stock information of the product path is accessed via the props from the BasketItem component and rendered. If product stock is larger than 1, a selection modal is opened (actionSheet), and, if not, it’s displayed as “disabled.” If the number of stock is larger than 15, an option is offered to select up to 15, and, if not, to select the number of stock.

<ItemQuantitySelector />

ItemRemoveButton

This component renders the button used to remove the product from the cart.

<ItemRemoveButton />

SummaryTotalCount

<SummaryTotalCount totalQuantity={products.length} />

SubTotalPrice

This component renders the total price amount (including discounts, campaigns, etc.) for products.

<SubTotalPrice amounts={basket.amounts} quantity={products.length} />

Discounts

This component renders the discounts applied to cart.

DiscountOrGiftVoucher

This component renders the form with which discounts or vouchers are submitted. If the discount or the voucher is valid, a discount is applied to the total price.

<DiscountOrGiftVoucher
  voucherCode={basket.voucherCode}
  validation={validation}
  apiError={apiError}
  handleDiscount={handleDiscount}
/>

TotalPrice

This component renders the total price of the products in the cart as well as the discounts and campaigns applied.

<TotalPrice amounts={basket.amounts} />

EmptyBasketView

This component renders a button with the text “Cart is Empty” and the subheading “Shop by Category” to inform the user when there is no product in the cart, and the cart page opens.

<EmptyBasketView />

CheckoutButton

This component renders the button used to confirm the cart and proceed to checkout. The login page is called if the user hasn’t logged in.

Profile Page

Profile page comprises the features below;

• Displaying the user information below

• Updating this information

• Using two-factor authentication when updating the form with an SMS code

User Information;

• First Name

• Last Name

• Phone

• Date of birth

• Sex

The Profile page is managed with a page container. The profile data container is sent as a parameter from the Profile page as shown below. Thus, the profile page container can distinguish between UI and logic by managing the functions, actions, and states to be used in the UI.

import dataContainers from '../../dataContainers';
..
const dataContainer = { profile: dataContainers.profile };
..
export default Profile(
..
 dataContainer,
);

Page Context

The props information received via page container.

Name	Task	Parameter
props	The object that includes certain features that will be used on the page
props.validation	The object that includes the limitations of the fields within the profile form (first and last name, etc.)
props.apiError	If an error occurs as a result of any network request, an error message returns to this object. Example: apiError.first_name
props.pending	This returns true when any network request is made, and the Spinner is loaded in this state. If it returns false, the page has been loaded.
props.isSuccess	This state switches to true when the profile page form is updated, and an informative message is displayed for success.
props.navigation	Used for react navigation management
props.smsVerificationModal	If this field is true, an SMS verification modal is opened, and the form is verified with an SMS code.
props.route	Includes the information about the navigation route of the page
handleOnChange	Since forms have a dynamic structure, not each field is given a state. Instead, form fields are accessed via the form state. This function enables the updating of the form state when the fields in the form (SMS code, etc.) are updated.	key (example: ‘first_name’), value
handleOnSmsFormChange	Since forms have a dynamic structure, not each field is given a state. Instead, form fields are accessed via the form state. This function enables the updating of the form state when the fields in the form (SMS code, etc.) are updated.	key (example: ‘code’), value
getFormValue	Used to get the value of any field in the form	key (example: ‘first_name’)
hideSmsModal	The function called to close the SMS verification modal
hasResendSms	This flag is checked if resending SMS is requested on the SMS verification modal.HAS_RESEND_SMS under platformConfigs/app.json
resendSms	The function called to resend SMS via the SMS verification modal
handleSubmit	The function that enables the posting of the form by running the necessary validations upon clicking the Save button on the profile form
handleSubmitSmsForm	The function that enables the posting of the form by running the necessary validations upon entering the SMS code in the SMS verification form and clicking the Verify button
getOptions	The function used to get the options in multiple-choice fields in the profile form	key (i.e.; ‘gender’)
state	The object that includes the properties of the profile page
state.seconds	Show how many seconds remain for verification when the timer on the SMS verification modal starts running
state.form	The object that includes the form fields on the profile page
state.smsForm	The object that includes the form fields on the SMS verification form
state.countDownStarted	The flag which indicates whether the timer has started after the opening of the SMS verification form

ChangeEmail Page

This page is used to update the email addresses of users who have logged in.

There are three form fields on the page. These are:

• New Email

• Reenter New Email

• Password

After the completion and submitting of the form, the validity of the fields are checked via validations. If no errors are found, the form is posted. Finally, if it’s successful (isSuccess), the form on the page is hidden and replaced with a success message.

The ChangeEmail page is managed with a page container. The data container is sent as a parameter from the ChangeEmail page, as shown below. Thus, the change email page can manage the functions, actions and states to be used in the UI and distinguish between the UI and logic.

import dataContainers from '../../dataContainers';
..
const dataContainer = {
 email: dataContainers.email,
 profile: dataContainers.profile,
};
 
..
export default ChangeEmail(
..
 dataContainer,
);

Page Context

The props information received via page container.

Name	Task	Parameter
props	The object that includes certain features that will be used on the page
props.email	The reducer object on the change email page
props.email.isSuccess	This state switches to true when the form on the page is submitted, and an informative message is displayed for success.
props.pending	This returns true when any network request is made, and the Spinner is loaded in this state. If it returns false, the page has been loaded.
props.navigation	Used for react navigation management
props.validation	The object that includes the limitations of the fields within the form on the page (email, password, etc.) Example: It’s checked whether the input entered for validation.email is an email address.
props.apiError	If an error occurs as a result of any network request, an error message returns to this object. Example: apiError.email
props.currentEmail	The user’s current email address returns.
props.route	Includes the information about the navigation route of the page
handleOnChange	Since forms have a dynamic structure, not each field is given a state. Instead, form fields are accessed via the form state. This function enables the updating of the form state when the fields in the form (email, password, etc.) are updated.	key (example: email), value
sendForm	The function that enables the posting of the form by running the necessary validations upon clicking the Save button of the form on the page
state.form	The object that includes the information filled in the form (email, repeat_email, password)

ChangePassword Page

This page is used to update the passwords of users who have logged in.

There are two form fields on the page. These are:

• Old Password

• New Password

• Reenter New Password

After the completion and submitting of the form, the validity of the fields are checked via validations. If no errors are found, the form is posted. Finally, if it’s successful (isSuccess), the form on the page is hidden and replaced with a success message.

The ChangePassword page is managed with a page container. The data container is sent as a parameter from the ChangePassword page, as shown below. Thus, the password change page can differentiate between the UI and the logic by managing the functions, actions, and states to be used on the UI.

import dataContainers from '../../dataContainers';
..
const dataContainer = { password: dataContainers.password };
..
export default ChangePassword(
..
 dataContainer,
);

Page Context

Name	Task	Parameter
props	The object that includes certain features that will be used on the page
props.password	The reducer object on the change password page
props.password.isSuccess	This state switches to true when the form on the page is submitted, and an informative message is displayed for success.
props.pending	This returns true when any network request is made, and the Spinner is loaded in this state. If it returns false, the page has been loaded.
props.navigation	Used for react navigation management
props.validation	The object that includes the limitations of the fields within the form on the page (old password, new password, etc.) Example: It’s checked whether the input entered for validation.password matches the old password.
props.apiError	If an error occurs as a result of any network request, an error message returns to this object. Example: apiError.password
props.route	Includes the information about the navigation route of the page
handleOnChange	Since forms have a dynamic structure, not each field is given a state. Instead, form fields are accessed via the form state. This function enables the updating of the form state when the fields in the form (old password, new password etc.) are updated.	key (example: ‘password’), value
sendForm	The function that enables the posting of the form by running the necessary validations upon clicking the Save button of the form on the page

Notifications Page

This page is used to update the notification settings of users who have logged in.

There is a form on the page with two radio buttons. These radio buttons are:

• Email

• SMS

The Notifications page updates the information whether the user will be notified and, if so, through which channels. Users who do not want to receive notifications can disable these radio buttons. Otherwise, notifications are included in channels.

Notifications page is managed with a page container. As shown below, the data container is sent as a parameter from the Notifications page. Thus, the notifications page container can manage functions, actions, and states to be used in the UI and distinguish between UI and logic.

import dataContainers from '../../dataContainers';
..
const dataContainer = { notifications: dataContainers.notifications };
..
export default Notifications(
..
 dataContainer,
);

Page Context

The props information received via page container.

Name	Task	Parameter
navigation	Used for react navigation management
route	Includes the information about the navigation route of the page
handleSubmit	The function that enables the posting of the form by running the necessary validations upon clicking the Save button of the form on the page
pending	This returns true when any network request is made, and the Spinner is loaded in this state. If it returns false, the page has been loaded.
setEmailChecked	The function used to update the active status of notification via email thanks to the switch radio button on the form
setSmsChecked	The function used to update the active status of notification via SMS thanks to the switch radio button on the form
emailChecked	The boolean variable that indicates whether email notifications are active
smsChecked	The boolean variable that indicates whether SMS notifications are active

Vouchers Page

This page is used to display the vouchers of users who have logged in, in the states specified below.

States

• Active Vouchers

• Future

• Used

• Expired

Vouchers page is managed with a page container. As shown below, its data container is sent from the Voucher page as a parameter. Thus, the voucher page container can manage the functions, actions, and states to be used on the UI, making a differentiation between UI and logic.

import dataContainers from '../../dataContainers';
..
const dataContainer = { coupons: dataContainers.coupons };
..
export default Coupons(
..
 dataContainer,
);

Page Context

The props information received via page container.

Name	Task	Parameter
navigation	Used for react navigation management
route	Includes the information about the navigation route of the page
pending	This returns true when any network request is made, and the Spinner is loaded in this state. If it returns false, the page has been loaded.
basketOffers	The array that includes vouchers with active status
discountOffers	The array that includes vouchers with used status
expiredOffers	The array that includes vouchers with expired status
futureOffers	The array that includes vouchers with future status

Components

CouponCard

This component is used to render the vouchers received via pageContainer.

<CouponCard
           title={$T.BASKET_COUPONS}
           headers={[$T.COUPON_CODE, $T.COUPON_CREATED, $T.COUPON_AMOUNT]}
           offerData={discountOffers}
           selector="orderNumber"
           emptyMessage={$T.EMPTY_BASKET_COUPONS}
         />

Name	Task	Type
title	The status title of the voucher	object
headers	This indicates the equivalent of each data (key) while rendering voucher data and is defined via platformConfigs/coupons.json.	array
offerData	Vouchers	array
selector	While rendering vouchers, the “expireDate” is by default rendered next to the voucher date. If this data is to be overridden with another field, that key needs to be written in this props. The example above uses “orderNumber”.	string
emptyMessage	If no vouchers can be found in an X situation defined for the user, this props is given a message such as “No Voucher Found”.	object

Contact Page

This page enables the user to communicate by filling out a contact form.

There are five form fields on the page. These are:

• First and Last Name

• Email

• Phone

• Subject

• Message

Fields other than subject are reserved for text input. The subject is selected with the help of a selector. Here are a few examples for the subjects.

Exemplary Subjects

• Complaint

• Suggestion

• Order

• Product

• Online Store

After the form is filled out and submitted, the validity of the fields are checked via validations. If all works well and is finalized (isSuccess), the form on the page is hidden, and an informative message is displayed for success.

The Contact page is managed with a page container. The data container is sent as a parameter from the Contact page, as shown below. Thus, the contact page container can manage functions, actions, and states to be used in the UI, making a distinction between UI and logic.

import dataContainers from '../../dataContainers';
..
const dataContainer = {
 contact: dataContainers.contact,
 orders: dataContainers.orders,
};
..
export default Contact(
..
 dataContainer,
);

Page Context

Name	Task	Parameter
props	The object that includes certain features that will be used on the page
props.pending	This returns true when any network request is made, and the Spinner is loaded in this state. If it returns false, the page has been loaded.
props.isSuccess	This state switches to true when the form on the page is submitted, and an informative message is displayed for success.
props.navigation	Used for react navigation management
props.route	Includes the information about the navigation route of the page
props.validation	The object that includes the limitations of the fields within the form on the page (first and last name, email, etc.) Example: It’s checked whether the input entered for validation.email is an email address.
props.apiError	If an error occurs as a result of any network request, an error message returns to this object. Example: apiError.email
hasLocalError	This field switches to true if any error occurs while fetching the orders during picker selection on the form.
getFormValue	This function is used to access the value of any field from form fields.	key (example: ‘full_name’)
handleOnChange	Since forms have a dynamic structure, not each field is given a state. Instead, form fields are accessed via the form state. This function enables the updating of the form state when the fields in the form (first and last name, email etc.) are updated.	key (example: ‘full_name’), value
handleFormSubmit	The function that enables the posting of the form by running the necessary validations upon clicking the Save button of the form on the page
errors	This object receives error messages in case of any error on the form on the page, and it’s displayed below the Submit button at the bottom of the form.
getPickerData	Used to retrieve the data of the pickers on the form	key (example: ‘subjects’
state	The object that includes the data within the page
state.localNonFieldErrors	This field receives a validation message if the orders are selected via the picker, and the user hasn’t logged in.
state.form	This is the form object within the page and includes form fields.

GuestLogin Page

This page is displayed when the user wishes to proceed to checkout without login. After login, the user is directly taken to checkout.

Features

• Login with email and password.

• Login with Apple (on iOS platforms).

• Login with Facebook

• Guest Login (directs to GuestLoginForm)

• “Proceed as Guest” button

After successfully logging in, the user is directed to the Checkout page or can click the Proceed as Guest button and create an order simply by entering an email address.

GuestLogin page is managed with a page container. The data container is sent as a parameter from the GuestLogin page, as shown below. Thus, the GuestLogin page container can manage functions, actions, and states to be used in the UI and distinguish between UI and logic.

import dataContainers from '../../dataContainers';
..
const dataContainer = {
 auth: dataContainers.auth,
 checkout: dataContainers.checkout,
};
..
export default GuestLogin(
..
 dataContainer,
);

Page Context

The props information received via page container.

Name	Task	Parameter
validation	The object that includes the limitations of the fields within the form on the page (email, password, etc.) Example: It’s checked whether the input entered for validation.email is an email address.
apiError	If an error occurs as a result of any network request, an error message returns to this object. Example: apiError.non_field_errors
navigation	Used for react navigation management
route	Includes the information about the navigation route of the page
pending	This returns true when any network request is made, and the Spinner is loaded in this state. If it returns false, the page has been loaded.
handleAppleLogin	This function runs if the platform is iOS and the user clicks the Login with Apple button. It dispatches the necessary action to open the Apple Signin Modal.
handleFBLogin	This function runs if the user clicks the Login with Facebook button. It dispatches the necessary action to open the modal for Facebook login.
handleLogin	This function runs if the user clicks the Login with Email and Password button. It posts the submitted values (email, password).
setEmail	This works when data is entered into the email text input and sets the email state.
setPassword	This works when data is entered into the password text input and sets the password state.

Components

AppleSignin

If the platform is iOS, this component creates the button to login with the Apple Authentication package provided by the expo. If the user clicks the button, the handleAppleLogin function in the login prop will run. The login mode is displayed, allowing the user to log in with their Apple credentials.

{ios && <AppleSignIn login={handleAppleLogin} />}

GuestLoginForm Page

If the user wishes to proceed to checkout without logging in on the cart page, the GuestLogin page is displayed. Upon clicking the Proceed as Guest button, the user is directed to this page. There’s a form on the page with two fields: a text box (email) and a checkbox (Clarification Text).

After the form is filled and successfully submitted, the user is redirected to the Checkout page.

The GuestLoginForm page is managed with a page container. The data container is sent as a parameter from the GuestLoginForm page, as shown below. Thus, the GuestLoginForm page container can manage functions, actions, and states to be used in the UI and distinguish between UI and logic.

import dataContainers from '../../dataContainers';
..
const dataContainer = {
 checkout: dataContainers.checkout,
};
..
export default GuestLoginForm
(
..
 dataContainer,
);

Page Context

The props information received via page container.

Name	Task	Parameter
navigation	Used for react navigation management
route	Includes the information about the navigation route of the page
sendForm	This function enables the posting of the form by handling the necessary validations upon filling out the form data on the page and clicking the Save button.
validation	The object that includes the limitations of the fields within the form on the page (email, checkbox, etc.) Example: It’s checked whether the input entered for validation.email is an email address.
apiError	If an error occurs as a result of any network request, an error message returns to this object. Example: apiError.userEmail
handleFormChange	Since forms have a dynamic structure, not each field is given a state. Instead, form fields are accessed via the form state. This function enables the updating of the form state when the fields in the form (email, confirm, etc.) are updated.
getFormValue	This function is used to access the value of any field from form fields.	key (example: ‘user_email’

ForgotPassword Page

If the user forgets their password, they can enter their email on this page and click the Send button A password reset email is sent to the user to reset password and to log in.

After the form is filled out and submitted, the validity of the fields are checked via validations. If all works well and is finalized (isSuccess), the form on the page is hidden, and an informative message is displayed for success.

The ForgotPassword page is managed with a page container. The data container is sent as a parameter from the ForgotPassword page, as shown below. Thus, the ForgotPassword page container can manage functions, actions, and states to be used in the UI and distinguish between UI and logic.

import dataContainers from '../../dataContainers';
..
const dataContainer = { auth: dataContainers.auth };
..
export default ForgotPassword(
..
 dataContainer,
);

Page Context

The props information received via page container

Name	Task	Parameter
props	The object that includes certain features that will be used on the page
props.pending	This returns true when any network request is made, and the Spinner is loaded in this state. If it returns false, the page has been loaded.
props.isSuccess	This state switches to true when the form on the page is submitted, and an informative message is displayed for success.
props.apiError	If an error occurs as a result of any network request, an error message returns to this object. Example: apiError.non_field_errors)
props.navigation	Used for react navigation management
props.validation	The object that includes the limitations of the fields within the form on the page (email) Example: It’s checked whether the input entered for validation.email is an email address.
props.route	Includes the information about the navigation route of the page
handleOnChange	Since forms have a dynamic structure, not each field is given a state. Instead, form fields are accessed via the form state. This function enables the updating of the form state when the fields in the form (email) are updated.	key (i.e.; email), value
handleFormSubmit	The function that enables the posting of the form by running the necessary validations upon clicking the Save button of the form on the page

Languages Page

This page is used to make a selection among the languages to be used on the application. It renders the languages defined in Platform Configs - Languages and enables a selection.

If more than one language is defined on the platform, a button appears to represent the selected language on the left menu. This button directs the user to the Languages page. If the user selects one of the defined languages (Turkish, English, etc.), the application is reset, and the user is redirected to the homepage, with the language of the application changed.

The static texts used within the application (platformConfigs/staticTextMaps) should be defined based on the language. If a static text is defined only in “tr” and without “en”, the rendered texts will display a “Missing_Translation” message when English is selected as the language. The Languages page is managed with a page container.

export default Languages(languagesGrid);

Page Context

The props information received via page container

Name	Task	Parameter
props.navigation	Used for react navigation management
props.route	Includes the information about the navigation route of the page
currentLanguage	The object that is the equivalent of the current language
handleChange	This function sets the language selected from among rendered languages and resets the application. It receives the language object from the platform as a parameter.	language

Sign In Page

This is the page where the user signs in. The email and password information received from the user are transferred to the system. If the user successfully logs in, they are directed to the application.

A form structure can be created with the handleOnChange function sent from pageContainer. This function receives two parameters entitled key and value and can send the values of this function in the specified input structures. The form object is dynamically created with this key and value. The login method only works with key values entitled email and password.

<Input
              …
              …
              placeholder={$T.EMAIL}
              onChangeText={(text) => handleOnChange('email', text)}
            />

Login

This is the login process with the email and password values received from the user. If the values fail the validity check, the user receives an error message. The values cleared for validation are sent to the LOGIN URL. If the response is unsuccessful, the user receives an error message. If the user successfully logs in, the user information is stored in the auth.user object.

 <Button
              …
              …
              onPress={() => handleLogin()}
              text={$T.LOGIN}
            />

Validation

The validation of the inputs on this page are in the type of email and password. If the validation object from the dataContainer returns full, error messages are displayed in the Input component. The validation object is filled if an error is detected as a result of checking the data sent from input.

Facebook Login

This method enables the user to log into the application with Facebook. The RN_FACEBOOK_BUILD module needs to be activated to use this method.

 <Button
              …
              …
              onPress={() => handleFBLogin()}
              text={$T.FBLOGIN}
            />

Apple Login

This method enables the user to log into the application with Apple.

 <Button
              …
              …
              onPress={() => handleAppleLogin()}
              text={$T.APPLELOGIN}
            />

FaceID Login

This method enables the user to log into the application with FaceID structure if their device is compatible.

 <Button
              …
              …
              onPress={() => handleFaceIdLogin()}
              text={$T.APPLELOGIN}
            />

Sign Up Page

This page enables the users to register. It collects the information required for registration and sends them to the registration system on the application.

Register

It receives the information from the user and sends them to the register method after validation checks. If an SMS verification is requested in the settings, an SMS is sent to the phone number specified by the user for verification. If the process is successful, the user is registered and redirected to the application.

Address Page

From this page the user sees a list of addresses and edit/remove an address.

Set As Default

Sets the selected address as default and uses the handleAddress method from the page container.

 <AddressListItem
    …
    onSetAsDefault={() => handleAddress(address)}
/>

Remove

Removes the selected address and uses the removeAddress method from the page container.

 <AddressListItem
    …
    onDelete={() => removeAddress(address.pk)}
/>

Account Page

This page displays the user’s account information. The JSON file entitled menuItems is parsed, and the pages where the user will be directed are presented. On this page, the user can log out or be redirected to the languages page.

 {menuItems.map((menuItem, index) => (
        <Menu key={`${menuItem.title + index}`} menuItem={menuItem} />
      ))}

Logout

This process runs when the user logs out. The auth.user value is erased, and the user session is terminated on the application. The user’s cart information is also erased if available.

LanguageInfo

This component redirects the user to the screen where they can change the language. The screen is displayed if there’s more than one available language.

Product List

Product List page includes a list of products. Users can filter or sort the listed products based on certain parameters. This page comprises four components:

• Product Sort : Enables the sorting of products based on certain parameters.

• Total Count : Indicates the number of products listed.

• Product List : The main component where products are listed.

• Product Filter : Enables the filtering of products within the Product List based on various parameters.

Product List page sends basket and productList dataContainers to page container as parameters.

 export default ProductListContainer(productListGrid,
 {
   basket: dataContainers.basket,
   productList: dataContainers.productList,
 });

Page Context

The props information received via page container.

Name	Description	Parameter
selectedSortOption	This should be used when the products are sorted based on certain features.	param
handleSelectFilter	This should be used when any filter is selected.
handleApllySelectedFilters	This should be used to apply filters.
handleRemoveFilter	This should be used when any filter is removed.
addToCart	This should be used to add the product to cart.	product
getCurrentFilters	Used to bring the current filters
addToFavouriteHandler	Used to add the product to favorites	pk, product
removeFromFavouriteHandler	Used to remove the product from favorites	pk, product

Product Sort

This enables the sorting of listed products based on certain filters.

 <ProductSort 
sorts={sorts} 
onSort={(val) => selectedSortOption(val)} 
/>

Prop Types

Name	Description	Parameter
sort	Includes sorting options	Array
onSort	This is triggered if no sorting option is clicked.	Function

Total Count

This shows the number of products on the list.

 <TotalCount 
count={pagination.totalCount}
text={$P.TOTAL_COUNT} 
/>

Prop Types

Name	Description	Parameter
count	Indicates the number of products on the list	Number
text	This is the text that will be placed next to the number of products.	Object

Product List

This enables the listing of products.

<ProductList
 containerClassName={}
 contentContainerClassName=""
 items={}
 navigation={}
 handleEndReached={}
 onRefresh={}
 scrollToTop
scrollToTopButtonClassName=""
scrollToTopIconClassName=""
 scrollToTopIconName=""
 numberOfColumns={2}
 itemTemplate={(data, options) => ()}
 ListFooterComponent={() => }
 ListEmptyComponent={() => }
/>

Prop Types

Name	Description	Parameter
containerClassName	A custom className can be specified for the Container.	String or Array
contentContainerClassName	A custom className can be specified for the Content Container.	String or Array
scrollToTopButtonClassName	A custom className can be specified for the button that takes the user back to the top of the list.	String or Array
scrollToTopIconClassName	A custom className can be specified for the icon within the button.	String or Array
scrollToTopIconName	An icon type can be specified for the scroll button.	String
numberOfColumns	The number of columns can be selected for the grid view.	Number
itemTemplate	An item template can be specified for the data to be listed.	React.Component
ListFooterComponent	A custom component can be specified in the footer area of the list.	React.Component
ListEmptyComponent	A custom component can be specified to be displayed when no data is available on the list.	React.Component

Product Item

This component lists each product by rendering them within the ProductList component. It’s possible to display any message related to the product’s price, image, variants, or current campaigns on this component. It can also run processes to add the products to cart and to favorites.

<ProductItem
 item={data.item}
 options={options}
 addToCart={handleAddToCart}
 favouritePending={favouritePending}
 favouriteAdd={addToFavouriteHandler}
 favouriteRemove={removeFromFavouriteHandler}
 isLogin={isLogin}
/>

Prop Types

Name	Description	Parameter
item	Requires the information of the product to be rendered	Object
addToCart	The function that needs to be triggered to add the product to cart	Function
favouriteAdd	Triggered to add the product to favorites	Function
favouriteRemove	Triggered to remove the product from favorites	Function
isLogin	Requires the user’s login status	Boolean
navigation	Used for react navigation management
favouritePending	Indicates the pending status for the product’s addition to favorites	Boolean

Product Filter

This filters listed products based on certain parameters.

<Filter
 facets={facets}
 currentFilters={getCurrentFilters()}
 pending={pending}
 clearFilters={initialProducts}
 selectFilter={handleSelectFilter}
 applyFilters={handleApllySelectedFilters}
/>

Prop Types

Name	Description	Parameter
facets	Retrieves filtering types and options	Array
currentFilters	Retrieves active filters	Array
applyFilters	Triggered to apply the filters based on the user’s selection	Function
selectFilter	Triggered when any filtering option is selected	Function
pending	Indicates the pending status for the application of filtering options	Boolean

onFilterSelect : Triggered to add any filters

const onFilterSelect = (searchKey, choice, item) => {
 selectFilter(searchKey, choice.value);
 item && setActiveFilter(item);
};

onClear : Triggered when all filters are cleared

const onClear = () => {
 setActiveFilter(facets);
 clearFilters();
};

onApplyButtonClick : Activates selected filters and closes the modal

const onApplyButtonClick = () => {
 applyFilters();
 setActiveFilter(facets);
 setModalVisibility(false);
};

Filtering options are rendered within Flatlist

<View className='productList.views.filter.filterButtonContainer'>
 <FlatList
   data={facets}
   renderItem={filterButton}
   keyExtractor={(item) => item.name}
 />
</View>

const filterButton = ({ item }) => {
 return (
   <TouchableOpacity onPress={() => onFilterSelect(item.searchKey, item.choices, item)}
                     className={'productList.views.filter.filterButton'}>
     <Text safelyTranslation
className={'productList.views.filter.filterButtonText'}>
{item.name} {isActive(item, activeFilter) && `(${(item.choices.length)})`}</Text>
   </TouchableOpacity>
 );
};

If any of the filtering options is clicked, related options are rendered in the FilterItem component.

<Content className='productList.views.filter.content'>
 <FilterItem onSelect={onFilterSelect} currentFilter={activeFilter} />
</Content>

Orders Page

This page enables listing created orders, searching by order number, and accessing order details.

Based on requests, the page can use custom components.

The entire page is managed with the Orders page container. The orders data container is sent to the page container via the parameter.

export default Orders(orderGrid, {
 orders: dataContainers.orders
});

How to Use Page Context?

The available parameters received via page container.

Actions

Name	Task	Parameter
handleOnPress	Used to trigger searching with order number
handleOnChange	Used to update the orderNumber data	value
handleEndReached	Used to load more orders

Data

Name	Task	Parameter
orders	Includes the data for all created orders	array
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pending	Indicates the pending process for loading orders	boolean
infinitePending	Indicates the pending process for loading more orders	boolean
initialSuccess	Indicates the successful retrieval of orders	boolean
orderNumber	The react state that is used when searching with order number	string
next	The data that indicates the capacity to load more orders	boolean

List

This is where orders are listed.

{
  orders.map((order, index) => (
    <MultiItemCard key={index} order={order} navigation={navigation} />
  ))
}

Search

This is where orders can be searched with an order number.

<Input
  value={orderNumber}
  onChangeText={text => handleOnChange(text)}
/>

Load More

This is used to load more orders.

{!infinitePending && next && (
  <TouchableOpacity onPress={handleEndReached}>
    <Text>{$T.ALL_ORDERS}</Text>
  </TouchableOpacity>
)}

Order Detail Page

This page enables displaying detailed information about the order, listing ordered products, and accessing order cancellation page.

Based on requests, custom components can also be used on the page.

The entire page is managed with the OrderDetail page containerı. The orders data container is sent to the page container via parameter.

export default OrderDetail(orderDetailGrid, {
 orders: dataContainers.orders
});

How to Use Page Context?

The available parameters received via page container

Actions

Name	Task	Parameter
goToOrderCancel	Used for directing to order cancellation page
goToWebView	Used for directing to the WebView page which displays order invoice
goToShippingDetail	Used for directing to the WebView page which displays order tracking

Data

Name	Task	Parameter
order	The detail data of the order	object
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pendingOrderDetail	Indicates the pending process for loading order data	boolean

Track Shipping

This is used for directing to shipping tracking for shipped orders.

{!!order.trackingUrl && !!order.trackingNumber && (
  <Button onPress={goToShippingDetail} /> 
)}

List

This is used to list ordered products.

{!!order.items && order.items.map(({ attributes = {}, ...item }, i) => (
  <DetailItem
    item={item}
    attributes={attributes}
    order={order}
    index={i}
    navigation={navigation}
  />
))}

Order Cancel

This is used for directing the user to the Order Cancel page if the order is canceled.

{(!!order.isCancellable || !!order.isRefundable) && (
  <Button
    onPress={goToOrderCancel}
    disabled={!order.isRefundableActive}
  />
)}

Invoice URL

This is used for directing the user to Order Invoice if the order has one.

{!!order.invoiceUrl && (
  <TouchableOpacity onPress={goToWebView}>
    <Text>{$T.INVOICE}</Text>
  </TouchableOpacity>
)}

Order Cancel Page

This is the page where orders are canceled.

Based on requests, custom components can also be used on the page.

The entire page is managed with the CancelRefund page container. The orders data container is sent to the page container via parameter.

export default CancelRefund(cancelRefundGrid, {
 orders: dataContainers.orders
});

How to Use Page Context?

The available parameters received via page container.

Actions

Name	Task	Parameter
setAgreementIsChecked	Used to confirm order cancellation	status
postOrderCancel	Used to initiate order cancellation
setReasonModal	Used to check the visibility status of the modal used in selecting reason for cancellation	status
handleOnChange	This method enables retrieving a written reason for cancellation	value
handleItem	Used when a product is selected. Sends product ID and selection status	id, value (example: 7283, false )
handleSelectedItem	Used to select a product’s reason for cancellation. Sends product ID as parameter	id
selectedReason	Used to update reasons for cancellation for selected products. Sends the data for reasons for cancellation as parameter	object

Data

Name	Task	Parameter
order	The detail data of the order	object
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pendingReasons	Indicates the pending process for loading reasons for cancellation	boolean
cancelled	Indicates whether the order is canceled	boolean
reasons	The data for reasons for cancellation	array
agreementIsChecked	The approval status for the agreement that needs to be approved to create an order	boolean
reasonModal	The visibility status of the modal where the reason for cancellation can be selected for order product	boolean

Cancel Item & Reason

This is where the ordered products are listed. It is a component that creates a cancellation request for each element. A cancellation reason must be selected for each order and this selection is managed by the ReasonsModal component.

{order.items.map((item, i) => (
   <CancelItem
     product={item}
     handleSelectedItem={handleSelectedItem}
     openModal={setReasonModal}
     handleOnChange={handleOnChange}
     handleItem={handleItem}
/>
))}
<ReasonsModal
  reasonModal={reasonModal}
  setReasonModal={setReasonModal}
  order={order}
  reasons={reasons}
  selectedReason={selectedReason}
/>

Agreement

An approval is required to create order cancellations for users. This approval logic is resolved with the CheckBox component.

<CheckBox
  onStatusChange={status => setAgreementIsChecked(status)}
  value={agreementIsChecked}
  modalTitle={$T.AGREEMENT_TITLE}
  modalContent={() => { }}
  modalApprove={$T.AGREEMENT_CONFIRM}
  modalDisapprove={$T.AGREEMENT_CANCEL}
  content={openModal => (
   <View>
     <Text onPress={openModal}>{$T.AGREEMENT}</Text>
   </View>
  )}
/>

Create Order Cancel

When the user selects the order(s) they wish to cancel and approve the cancellation, an order cancellation needs to be created. This creation is done with the postOrderCancel action.

<Button
   disabled={!itemSelected}
   text={$T.CONFIRM}
   onPress={() => {
    if (agreementIsChecked) postOrderCancel();
   }}
/>

Old Orders

This page lists the orders created before Akinon and provides access to their details.

Based on requests, custom components can also be used on the page.

The entire page is managed with the OldOrders page container. The orders and oldOrders data containers are sent to the page container via parameter.

export default OldOrders(oldOrdersGrid, {
 orders: dataContainers.orders,
 oldOrders: dataContainers.oldOrders
});

How to Use Page Context?

The available parameters received via page container.

Actions

Name	Task	Parameter
handleEndReached	Used to load more orders

Data

Name	Task	Parameter
oldOrders	The data of orders	array
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pending	Indicates the pending process for loading orders	boolean
infinitePending	Indicates the pending process for loading more orders	boolean
initialSuccess	Indicates the successful retrieval of all orders	boolean
next	The data that indicates the capacity to load more orders	boolean

List

This is where orders are listed.

{oldOrders.map((order) => (
  <MultiItemCard 
    order={order}
    navigation={navigation}
    isOldOrder 
  />
))}

Load More

This is the section used to load more orders.

{!infinitePending && next && (
  <TouchableOpacity onPress={handleEndReached}>
    <Text>{$T.ALL_ORDERS}</Text>
  </TouchableOpacity>
)}

Old Order Detail Page

This page displays detailed information about the orders created before Akinon, lists ordered products, and provides access to the order cancellation page.

Based on requests, custom components can also be used on the page.

The entire page is managed with the OldOrderDetail page container. The orders data container is sent to the page container via parameter.

export default OldOrderDetail(oldOrderDetailGrid, {
 oldOrders: dataContainers.oldOrders
});

How to Use Page Context?

The props information received via page container.

Data

Name	Task	Parameter
order	The detail data of the order	object
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pending	Indicates the pending process for loading the order	boolean

List

This is where ordered products are listed. The OldDetailItem component is used to list all products.

{order.items.length > 0 && order.items.map((item, i) => (
  <OldDetailItem item={item} order={order} index={i} />
))}

Refunds Page

This page lists refunded products.

Based on requests, custom components can also be used on the page.

The entire page is managed with the Refunds page container. The orders data container is sent to the page container via parameter.

export default Refunds(refundsGrid, {
 orders: dataContainers.orders
});

How to Use Page Context?

The available parameters received via page container.

Actions

Name	Task	Parameter
handleEndReached	Used to load more refunds.	pk, product

Data

Name	Task	Parameter
order	The detail data of the order	object
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pending	Indicates the pending process for loading the order	boolean
infinitePending	Indicates the pending process for loading more orders	boolean
initialSuccess	Indicates the successful retrieval of all orders	boolean
next	The data that indicates the capacity to load more orders	boolean

List

This is where refunded orders are listed.

{oldOrders.map((order) => (
  <MultiItemCard 
    order={order}
    navigation={navigation}
  />
))}

Load More

This section is used to load more refunded orders.

{!infinitePending && next && (
  <TouchableOpacity onPress={handleEndReached}>
    <Text>{$T.ALL_ORDERS}</Text>
  </TouchableOpacity>
)}

Favourite List Page

This page enables displaying the products added to favorites, removing products from favorites, and adding products to cart.

Based on requests, custom components can also be used on the page.

The entire page is managed with the FavouriteList page container. The basket and favouriteList data containers are sent to the page container via parameter.

export default FavouriteList(FavouriteListGrid, {
 basket: dataContainers.basket,
 favouriteList: dataContainers.favouriteList
});

How to Use Page Context?

The available parameters received via page container.

Actions

Name	Task	Parameter
handleRemoveProduct	Used to remove the product from favorites. Sends product pk and product data as parameter	pk, product
handleEndReached	Used to load more products added to favorites
onRefresh	Used to reload all products added to favorites
handleAddToCart	Used when the product added to favorites is to be added to cart	product

Data

Name	Task	Parameter
favourites	Indicates all products added to favorites	object
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pending	Indicates the pending process for loading the order	boolean
infinitePending	Indicates the pending process for loading more orders	boolean
initialSuccess	Indicates the successful retrieval of all orders	boolean

Products

The ProductList component is used to list the products added to favorites.

<ProductList
  items={favourites}
  navigation={navigation}
  handleEndReached={handleEndReached}
  onRefresh={onRefresh}
  numberOfColumns={2}
  itemTemplate={(data, options) => (
    <ProductItem
      onRemoveProduct={handleRemoveProduct}
      item={data.item}
      options={options}
      addToCart={handleAddToCart}
    />
  )}
/>

Combine Detail Page

If a product has a combination, this page displays the product and other products that can be combined with it.

Based on requests, custom components can also be used on the page.

The entire page is managed with the Combine page container. The combineDetail data container is sent to the page container via parameter.

export default Combine(CombineGrid, {
 combineDetail: dataContainers.combineDetail
});

How to Use Page Context?

The available parameters received via page container.

Data

Name	Task	Parameter
product	The data for the main product	object
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pending	Indicates the pending process for loading the order	boolean
combineProducts	Indicates other products that can be combined	array

Image List

This section lists the images of the main product.

<ImageViewer
  images={product.images}
  swiperOptions={imageViewer.swiperOptions}
  swiperImageCropSizes={imageViewer.swiperImageCropSizes}
  zoomViewerOptions={imageViewer.zoomViewerOptions}
  zoomImageCropSizes={imageViewer.zoomImageCropSizes}
/>

Price

This section displays the price of the main product.

<Price
  price={product.getPrice()}
  currency={product.currency}
/>

Combine List

This section lists other products that can be combined. The CombineItem component is used to list all products.

{combineProducts.map((combineProduct) => (
  <CombineItem 
    navigation={navigation}
    product={combineProduct} 
  />
))}

Checkout Page

This page is used for purchase processes, which are managed with WebView.

The entire page is managed with the WebCheckout page container. The webCheckout data container is sent to the page container via parameter.

export default WebCheckout(webCheckoutGrid, {
 webCheckout: dataContainers.webCheckout
});

How to Use Page Context?

The available parameters received via page container.

Actions

Name	Task	Parameter
onNavigationStateChange	Used to detect and process the change of URL location on the web page	webViewState
onMessage	Used to handle and process the data received from the web page. onMessage, postMessage	message

Data

Name	Task	Parameter
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
loading	Indicates the loading status for the WebView initial events	boolean

WebView

This section displays the checkout page. onMessage and onNavigationStateChange methods check whether the order is successfully completed on the web page. If the order is successfully completed, the user is directed to the CheckoutSuccess page.

<WebView
  onNavigationStateChange={onNavigationStateChange}
  startInLoadingState
  source={{ uri: $urls.BASE_URL + $urls.CHECKOUT }}
  onMessage={onMessage}
/>

Cookie

The user’s cookie information is embedded in the checkout page that is opened with the injectedJavascript and sharedCookiesEnabled parameters. Thus, the web page can tell which cart data to display based on the user, and which user has completed the order.

import { getCookie } from '../../request';
 
const jsCode = `
 document.cookie='${getCookie()}';
 window.isMobileApp = true;
 if(window.localStorage){
   window.localStorage.setItem('isMobileApp',true)
 }
 $(document).on('click', '.checkout__summary__item a', function(e) {
   e.preventDefault();
 });
 $('.thank-you-page a').on('click', function(e){
   e.preventDefault();
 });
`;
 
<WebView
  ...
  injectedJavaScript={jsCode}
  sharedCookiesEnabled
/>

Checkout Success Page

This page is displayed when the user successfully completes the purchase.

Based on requests, custom components can also be used on the page.

The entire page is managed with the CheckoutSuccess page container. The webCheckout and orders data containers are sent to the page container via parameter.

export default CheckoutSuccess(checkoutSuccessGrid, {
 webCheckout: dataContainers.webCheckout,
 orders: dataContainers.orders
});

How to Use Page Context?

The available parameters received via page container.

Actions

Name	Task	Parameter
goToHome	Used to return to the homepage

Data

Name	Task	Parameter
order	The detail data of the order	object
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pending	Indicates the pending process for loading the order	boolean

Components

Order Items

This is used to list ordered products.

<OrderItems
  orderItems={order.items}
/>

Prop Types

Name	Task	Parameter
orderItems	The parameter required to list order items	Array

Category Page

This page is used to list product categories.

The entire page is managed with the Category page container.

export default Category(categoryGrid);

How to Use Page Context?

The available parameters received via page container.

Actions

Name	Task	Parameter
listDirector	The method used to prepare the parameters that will be send to product listing page	title, url, id
getItems	The method used to prepare scene elements for rendering	level, parent

Data

Name	Task	Parameter
categories	The data of all categories	array
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pending	Indicates the pending process for loading the categories	boolean

Components

Animated List

This component lists items in an animated way.

const animatedListRef = useRef();
const [item, setItemVal] = useState({});
const [index, setIndexVal] = useState(0);
 
<AnimatedList
  ref={animatedListRef}
  navigation={navigation}
  getItems={getItems}
  categories={categories}
  setItemVal={(val) => setItemVal(val)}
  setIndexVal={(val) => setIndexVal(val)}
  className="category.gridElements.sceneWidth"
  depth={DEPTH}
  sceneWidth={deviceWidth}
>
 ...
</AnimatedList>

Prop Types

Name	Task	Parameter
ref	The parameter when the component is to be controlled externally. useRef, useImperativeHandle	React.Ref
ref.goToBackScence	The method used to go back to the previous slide scene	Function
ref.handleSlide	The method used to go to the next scene. It should only be used for parent items.	Function (scene, pk, id, title, url)
ref.isParentButton	Checks whether the item is a parent item	Function (scene, subItem)
ref.goToHome	Used to return to the main scene	Function
navigation	Used for react navigation management	object
sceneWidth	The parameter to specify the width of each scene	Number
depth	The parameter to specify the required number of intertwined scenes	Number
categories	Used to check isParentButton. It’s the data of the categories listed on the page.	Array
setItemVal	Used to update the data of the current scene within the container.	Function (item)
setIndexVal	Used to update the index of the current scene within the container.	Function (index)
className	Used to update the container class name	String

Item List

This section lists category items in the form of buttons. Button types can be learned via the isParentButton method where processes are also specified.

{getItems(item.id, item.currentParentPk).map((subItem, subIndex) => (
  <View key={subIndex}>
    {animatedListRef.current.isParentButton(item.id, subItem) ? (
      <TouchableOpacity
        onPress={() =>
          animatedListRef.current.handleSlide(
            item.id,
            subItem.pk,
            subItem.id,
            subItem.label,
            subItem.url,
          )
        }
      >
        <Text safelyTranslation>
          {subItem.label}
        </Text>
      </TouchableOpacity>
    ) : (
      <TouchableOpacity
        onPress={() => 
          navigation.navigate('ProductList', {
            title: subItem.label,
            url: subItem.url,
            safelyTranslation: true,
          })
        }
      >
       <Text safelyTranslation>
         {subItem.label}
       </Text>
     </TouchableOpacity>
   )}
  </View>
))}

Search Page

This page enables users to search products and categories.

Based on requests, custom components can also be used on the page.

The entire page is managed with the Search page container. The search data container is sent to the page container via parameter.

export default Search(searchGrid, {
 search: dataContainers.search
});

How to Use Page Context?

The available parameters received via page container.

Actions

Name	Task	Parameter
handleOnChangeText	Used to change the searchText state when the data in search input is changed	value
barcodeScanner	Used to visit the Barcode Scanner page

Data

Name	Task	Parameter
categories	The data of the categories in the search result	array
menuCategories	The data of all the categories in the menu	array
products	The data of the products in the search result	array
groups	The group data of the data types in the search result	array
searchText	The react state that determines the text in search input	React.State
inputRef	The react ref created to enable controlling search input	React.State
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
pending	Indicates the pending process for loading process for searching	boolean

Components

Category Menu

This component lists all categories in the form of horizontal cards.

<CategoryMenu 
  navigation={navigation} 
  menus={menuCategories} 
  route={route} 
/>

Prop Types

Name	Task	Parameter
navigation	Used for react navigation management	object
route	Includes the information about the navigation route of the page	object
menus	The menu items to be listed	array

Category Results

This component lists the categories in search results.

<CategoryResults 
  navigation={navigation} 
  group={group} 
  productListNavigateUrl={productListNavigateUrl} 
  searchText={searchText}
/>

Prop Types

Name	Task	Parameter
navigation	Used for react navigation management	object
productListNavigateUrl	The URL of the data to be fetched in the category list	object
group	The group item in category type	array
searchText	Indicates the data of search input	string

Product Results

This component lists the products in search results.

<ProductResult 
  navigation={navigation} 
  group={group} 
/>

Prop Types

Name	Task	Parameter
navigation	Used for react navigation management	object
group	The group item in category type	array

Search Input

This input is used for searching.

<Input
  fwRef={inputRef}
  value={searchText}
  placeholder={searchKey}
  onChangeText={handleOnChangeText}
/>

Group List

This section lists groups data based on type in search results.

{!!searchText && groups.map((group, i) => {
  if (group.type === 'Category' && !!group.entries.length) {
    return (
      <CategoryResults
        navigation={navigation}
        group={group}
        productListNavigateUrl={productListNavigateUrl}
        searchText={searchText}
      />
    );
  }
  if (group.type === 'Product' && !!group.entries.length) {
    return (
      <ProductResults
        navigation={navigation} 
        group={group} 
      />;
    )
  }
)}

Redirector Page

This page is used for redirection.

The entire page is managed with the RedirectorPage page container.

export default RedirectorPage(redirectorPageGrid);

MapView

Displays the locations of the stores on the application on a map. Markers are uploaded to the system via platformConfig.

The renderMarker function takes the callout function as a parameter. Based on requests, the actions required for the callout process can be added as parameters.

BarcodeScanner

This page enables the user to scan product barcodes. After scanning the barcode, the user is redirected to the screen with scanning results via the specified navitageAfterScan parameter.

WebViewVideo

This page enables the user to watch videos within WebView. When redirecting the user to this page, the video link within the URL parameter will be automatically opened within the page.

WebViewPages

This page enables the user to examine the product and add it to cart within WebView. After the user adds any product to cart, the onMessage function is triggered from the related pageContext. This function sends the data of related events as parameters and triggers basket actions.

Router

There are two navigation flows defined with React Navigation v5. These are linear flow and bottom tab flow and can be added with new screens and navigators. The function that returns stack navigator is sent to the createApp function as a parameter via router key.

Linear Flow

The flow is linear. A menu icon is added to the header on the home screen (default HomePage). While navigating the pages, the user can return to the homepage by clicking the button on the header.

The initial screen of the application is the index screen. Other scenes of the application should be created with a different Stack Navigator called App.

export default function Router() {
  return (
    <Stack.Navigator headerMode=”none”>
      <Stack.Screen name="Initial" component={Index.component} />
      <Stack.Screen options={{ animationEnabled: false }} name="App" component={appNavigator} />
    </Stack.Navigator>
  )
}

All the screens in the app navigator are defined, and the initial screen is set as HomePage. Since a custom header is used in the application, the created Stack Navigators are given the headerMode=”none” parameter.

import Screens from './screens';

const appNavigator = () => {
  const screens = Object.keys(_Screens)
  return (
    <Stack.Navigator initialRouteName="HomePage" headerMode="none">
      {screens.map((Screen, i) => {
        return (
          <Stack.Screen key={i} name={Screen} component={_Screens[Screen].component} />
        )
      })}
    </Stack.Navigator>
  )
}

The HomePage screen is overridden as Drawer Navigator instead of component.

import Screens from './screens';

import DrawerNavigator from './drawerNavigation';

const _Screens = {
  ...Screens,
  HomePage: {
    component: DrawerNavigator
  }
}

const appNavigator = () => {
  const screens = Object.keys(_Screens)
  return (
    <Stack.Navigator initialRouteName="HomePage" headerMode="none">
      {screens.map((Screen, i) => {
        return (
          <Stack.Screen key={i} name={Screen} component={_Screens[Screen].component} />
        )
      })}
    </Stack.Navigator>
  )
}

The drawerContent props are added to define custom components to the drawer navigator. The custom UI component and drawer navigator props are assigned from Akinon mobile framework to the SidebarContainer.

The initialParams={{ isDrawerScreen: true }} parameter is added to the home screen to display the menu icon and to open the menu.

import { React, Navigation } from "_dependencies";
import SidebarContainer from '_components/navigatorComponents/sidebar';
import Screens  from './screens';
import { Sidebar } from '../components';

const { createDrawerNavigator } = Navigation
const Drawer = createDrawerNavigator();

const HomeDrawerNavigator = () => (
  <Drawer.Navigator drawerContent={(props) => SidebarContainer(Sidebar, props)}>
    <Drawer.Screen name="Home" component={Screens.HomePage.component} initialParams={{ isDrawerScreen: true }} />
  </Drawer.Navigator>
)

Bottom Tab Flow

There’s a submenu on the home screen (default HomePage). This menu can be edited in any way; for instance, with only icons or icons with titles. The submenu can offer quick access to various screens; for instance, a banner on the HomePage screen can open a product list and a search icon in the submenu can open a product list page for a quick process regarding product list on two different screens.

Similar to a linear flow, a nested stack navigator structure is established and the InitialPage (HomePage) is defined as Tab Navigator.

A custom component is defined for the submenu with the tabBar props. The custom UI component is given from Akinon mobile framework to the BottomTabBarContainer as a parameter and is assigned to the tabBar props.

The parameters are sent to the custom component with the tabBarOptions props. The list of parameters can be seen here.

The screens added to the tab navigator can be given the following values as initialParams.

label

Type: Object

This key defines the label of the screens displayed in the submenu.

<Tab.Screen
  name="Home"
  component={HomeStack}
  initialParams={{
    label: {
      en: 'Home',
      tr: 'Anasayfa'
    }
  }}
/>

icon

Type: String

This defines the icons displayed in the submenu.

<Tab.Screen
  name="Home"
  component={HomeStack}
  initialParams={{
    icon: 'home'
  }}
/>

authRequired

Type: Boolean

This defines the screens required for authentication.

<Tab.Screen
  name="Home"
  component={HomeStack}
  initialParams={{
    authRequired: true
  }}
/>

redirect

Type: Object

This is defined to redirect unauthorized users. The redirected screen is specified with the route key, and a parameter can be sent to the redirected screen with the params value.

<Tab.Screen
  name="Home"
  component={HomeStack}
  initialParams={{
    authRequired: true,
    redirect: {
      route: "SignIn",
      params: {
        title: {
	en: “Sign In”
        }
      }
   }
  }}
/>

routeName

Type: String

If there are more than one ProductList screens in the Stack navigators created in the Tab navigator, add values such as “HomeProductList” and “SearchProductList” on the ProductList screens.

The routeNames specified for the ProductList screens are sent to the product list’s base reducer as a parameter.

Screens

Path: src/router/screens.js

The pages of the application are imported to this file and exported to be defined in navigation.

import pages from '../pages';

export default {
  ProductList: {
    component: pages.ProducList
  }
}

Create New Screen

A component is added to the src/pages path about the new screen:

// pages/_newPages/index.js

import { React } from '_dependencies';
import { Text, Container } from '@elements';
import Header from '_components/header';

const NewScreen = ({ navigation, route }) => (
    <Container>
      <Header navigation={navigation} route={route} />
      <Text safelyTranslation>
        New Screen
      </Text>
    </Container>
  );

The new component is exported from the src/pages/index.js path.

export default {
    NewScreen: require('./_newPage').default,
}

The page that is newly added to the src/router/screens.js path is exported and added to the App navigator as Stack screen.

import pages from '../pages';

const {
  ….
  NewScreen,
} = pages;

export default {
  ….
  NewScreen: {
    component: NewScreen
  }
}