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.

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:

! 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:

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.

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.

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.

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.

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.

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.

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.

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.

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.

ItemRemoveButton

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

SummaryTotalCount

SubTotalPrice

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

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.

TotalPrice

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Apple Login

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

FaceID Login

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

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.

Remove

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

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.

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.

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.

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.

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.

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.