# Framework
This document provides a comprehensive overview of the Akinon App Maker Framework used by the mobile app development platform. Akinon App Maker Framework is a software architecture that provides a set of components to simplify and speed up the development of applications. It provides a structure and guidelines for designing, building, and deploying software applications while customizing these applications tailored to specific business needs.
Key features of the Akinon App Maker framework are covered, including its modular design, extensibility, and support for various platforms such as iOS and Android through out this document. An insight into the framework's architecture, component hierarchy, and the role of reusable components in creating scalable and maintainable apps are also provided.
By the end of this document, a comprehensive understanding of the Akinon App Maker framework should be acquired by developers, equipping them with the knowledge needed to embark on their mobile app development journey with the platform.
## Elements
### Button
```javascript
import { Button } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ------------------- | ---------------------------------------------------- | ------------ | ----------------------------------- |
| className | The style used by the component | string,Array | ‘forms.button.regular’ |
| text | The text on the button | string | undefined |
| activeOpacity | The opacity value when the component is active | number | 0.2 |
| textClassName | The style used for button text | string,Array | ‘forms.button.buttonText’ |
| iconClassName | The style used for button icon | string,Array | ‘’ |
| textProps | The properties used by button text | TextProps | Default text props |
| onPress | The function to be called after pressing the button | function | undefined |
| validation | Validation messages | string,Array | \[] |
| validationClassName | The style used for validation messages | string,Array | ‘forms.button.buttonValidationText’ |
| disabled | Disables the button component | boolean | false |
| disabledClassName | The style used when the button component is disabled | string,Array | ‘forms.button.disabled’ |
### CheckBox
```javascript
import { CheckBox } from '@elements';
(
Label
)}
/>
```
#### **Properties**
| Property | Description | Type | Default |
| ------------------- | ----------------------------------------------------------------------------- | --------------------------------------- | --------------------------------- |
| onStatusChange | The function to be called after changing the CheckBox status | function | undefined |
| boxClickable | If false, the CheckBox is disabled | boolean | true |
| validation | Validation messages | string,Array | \[] |
| validationClassName | The style to be used for validation messages | string,Array | 'forms.checkBox.validationText’ |
| defaultValue | Default value | boolean | false |
| modalTitle | The title of the modal page | string | ModalComponent.title |
| modalContent | The content of the modal page | React.Component | undefined |
| modalFooterVisible | Indicates whether the footer component on the displayed modal page is visible | boolean | ModalComponent.modalFooterVisible |
| modalApprove | The approval text on the modal page | string | ModalComponent.approveText |
| modalDisapprove | The disapproval text on the modal page | string | ModalComponent.disapproveText |
| value | The value of the CheckBox | boolean | false |
| isSelectable | If false, CheckBox is disabled. | boolean | true |
| circle | Renders the CheckBox component as a circle | boolean | false |
| content | The label content next to the CheckBox | (openModal: function) ⇒ React.Component | undefined |
### Container
```javascript
import { Container } from '@elements';
Hello World
```
#### **Properties**
| Property | Description | Type | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------- | -------------- |
| className | The style used by the component | string, Array | ‘’ |
| bgImageName | The name of the component’s background image | string | undefined |
| bgImageSource | The source object of the component’s background image | object | undefined |
| children | The content to be displayed within the component | React.Component | undefined |
| defaultStyle | The default style object of the component | StyleProp (ViewStyle) | undefined |
| topBg | Changes the SafeArea background color within the component. It also changes the StatusBar background if the device is Android. | string | '#fff’ |
| excludeEdges | | Array | \[] |
| barStyle | barStyle feature for the StatusBar | string | 'dark-content’ |
| statusBarTransparent | Makes the StatusBar background transparent if the device is Android | boolean | false |
### Content
```javascript
import { Content } from '@elements';
Hello World
```
#### **Properties**
| Property | Description | Type | Default |
| --------------------------- | ---------------------------------------------------------- | --------------- | -------------- |
| children | The content to be displayed within the component | React.Component | undefined |
| className | The style used by the component | string, Array | ‘’ |
| scrollTopContainerClassName | The style used by the Scroll Top component | string, Array | ‘’ |
| scrollTopIconClassName | The style used by the icon within the Scroll Top component | string, Array | ‘’ |
| options | Component settings | object | ContentOptions |
| scrollEnable | If true, the content is displayed within a ScrollView. | boolean | true |
#### **ContentOptions**
```javascript
{
scrollTop: false,
bounces: true,
showScrollIndicator: true,
pagingEnabled: false,
nestedScrollEnabled: false,
}
```
### Datepicker
```javascript
import { DatePicker } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ------------------- | -------------------------------------------------------------------------------- | ------------- | ------------------------------- |
| onChange | The function to be called when the value changes | function | undefined |
| placeholder | Placeholder | string | undefined |
| value | The value of the component | Date | undefined |
| maximumDate | The maximum value of the component | Date | undefined |
| validation | Validation messages | string, Array | \[] |
| validationClassName | The style used by the validation messages | string, Array | 'forms.checkBox.validationText’ |
| iconName | The name of the icon to the right of the component | string | undefined |
| title | The title of the displayed Datepicker | string | undefined |
| iconVisible | Indicates whether the icon to the right of the component is visible | boolean | true |
| seperator | The character between day-month-year while formatting the value of the component | string | ‘.’ |
### HtmlContent
```javascript
import { HtmlContent } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ----------- | ------------------------------------------------------------------ | -------- | --------- |
| content | The HTML content to be displayed | string | undefined |
| onLinkPress | The function to be called after clicking the links within the HTML | function | undefined |
### Icon
```javascript
import { Icon } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ------------ | ----------------------------------------------------- | --------------------- | --------- |
| name | The name of the icon | string | undefined |
| className | The style used by the component | string, Array | ‘’ |
| defaultStyle | The default style object of the component | StyleProp (ViewStyle) | undefined |
| onPress | The function to be called upon clicking the component | function | undefined |
| size | The size of the icon | number | 12 |
### IconButton
```javascript
import { IconButton } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ------------- | ----------------------------------------------------- | --------------- | --------- |
| icon | The name of the icon | string | undefined |
| className | The style used by the component | string, Array | ‘’ |
| iconClassName | The style used by the icon | string, Array | ‘’ |
| onPress | The function to be called upon clicking the component | function | undefined |
| disabled | Indicates whether the button is active | boolean | false |
| badge | The component displayed within the button | React.Component | undefined |
### Image
```javascript
import { Image } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ------------ | ----------------------------------------- | --------------------- | --------- |
| source | The object that indicates image source | object | undefined |
| className | The style used by the component | string, Array | ‘’ |
| defaultStyle | The default style object of the component | StyleProp (ViewStyle) | undefined |
### Input
```javascript
import { Input } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ------------------------------ | ---------------------------------------------------------------------- | ------------- | ------------------------------------------ |
| placeholder | Placeholder | string | undefined |
| containerClassName | The style used by the container that wraps the Input | string, Array | ‘’ |
| className | The style used by the component | string, Array | ‘forms.input.regular’ |
| disabledClassName | The style used when the component is inactive | string, Array | ‘forms.input.disabled |
| validation | Validation messages | string, Array | \[] |
| validationClassName | The style used by the validation messages | string, Array | 'forms.input.inputValidationText’ |
| label | The title seen above the Input | string | undefined |
| labelWrapperClassName | The style used by the container that wraps the title on the component | string, Array | undefined |
| labelClassName | The style used by the title on the component | string, Array | 'forms.input.inputLabelText' |
| mask | | | |
| maskOptions | | | |
| maskType | | | |
| value | The value of the component | string | undefined |
| editable | Indicates whether the component can be edited | boolean | true |
| fwRef | | | |
| secureTextEntry | Displays the content of the component as the password field | boolean | false |
| secureTextIconClassName | The style used by the Show/Hide Password icon | string, Array | 'forms.input.secureTextIcon' |
| secureTextIconWrapperClassName | The style used by the component that wraps the Show/Hide Password icon | string, Array | De'forms.input.secureTextIconWrapper'fault |
| passwordVisibleIcon | The name of the Show Password icon | string | ‘eye’ |
| passwordHideIcon | The name of the Hide Password icon | string | 'eye-blocked’ |
| options | The settings used by the component | object | options: {placeholderColor: ‘#FFF’,} |
### Picker
```javascript
import { Picker } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ------------------- | ------------------------------------------------------- | ----------------- | ------------------------------ |
| placeholder | Placeholder | string | undefined |
| selectedItem | The selected item | any | undefined |
| headerTitle | The title of the displayed modal | object | undefined |
| data | The data array with the options | Array | \[] |
| label | The title on the picker | string | undefined |
| onSelect | The function to be called when an option is selected | function | undefined |
| threeDotText | The three-dot setting when options don’t fit the picker | boolean | undefined |
| visibleOnEmpty | No picker is shown if there are no options. | boolean | true |
| validation | Validation messages | string, Array | \[] |
| validationClassName | The style to be used by the validation messages | Tystring, Arraype | 'forms.picker.validationText', |
| iconName | The name of the icon to the right of the picker | string | undefined |
### RadioGroup
```javascript
import { RadioGroup } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ------------------- | ---------------------------------------------------- | ------------- | ---------------------------------- |
| options | The options to be displayed | Array | \[] |
| onSelect | The function to be called when an option is selected | function | undefined |
| value | The selected item | any | undefined |
| title | The title seen on RadioGroup | object | undefined |
| validation | Validation messages | string, Array | \[] |
| validationClassName | The style to be used by the validation messages | string, Array | 'forms.radioButton.validationText' |
### SafeArea
```javascript
import { SafeArea } from '@elements';
Hello World
```
#### **Properties**
| Property | Description | Type | Default |
| ------------ | ---------------------------------------------- | --------------------- | --------- |
| children | The component to be shown within the component | React.Component | undefined |
| className | The style used by the component | string | ‘’ |
| defaultStyle | The default style object of the component | StyleProp (ViewStyle) | undefined |
### SafeAreaView
```javascript
import { SafeAreaView } from '@elements';
Hello World
```
#### **Properties**
| Property | Description | Type | Default |
| --------- | ---------------------------------------------- | --------------- | --------- |
| children | The component to be shown within the component | React.Component | undefined |
| className | The style used by the component | string | ‘’ |
### ScrollView
```javascript
import { ScrollView } from '@elements';
Hello World
```
#### **Properties**
| Property | Description | Type | Default |
| ------------ | ---------------------------------------------- | --------------------- | --------- |
| children | The component to be shown within the component | React.Component | undefined |
| className | The style used by the component | string | ‘’ |
| defaultStyle | The default style object of the component | StyleProp (ViewStyle) | null |
| fwRef | The reference indicating the component | - | - |
### Spinner
```javascript
import { Spinner } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ------------------ | ------------------------------------------------------ | --------------------------------------------- | --------- |
| color | The color of the Spinner | string | ‘black’ |
| containerClassName | The style used by the component that wraps the Spinner | string | ‘’ |
| children | The component to be shown within the component | React.Component | undefined |
| transparent | Makes the component that wraps the Spinner transparent | boolean | false |
| styleName | The style of the component that wraps the Spinner | ‘center’, ‘centerPadding’, ‘centerFullHeight’ | ‘center’ |
| indicatorSize | The size of the ActivityIndicator | string | ‘small’ |
### Switch
```javascript
import { Switch } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| --------------- | ------------------------------------------- | ------- | ---------------------------- |
| activeClassName | The style used when the component is active | string | 'forms.switch.switchActive' |
| className | The style used by the component | string | 'forms.switch.switchPassive' |
| value | The value of the component | boolean | undefined |
| fwRef | The reference indicating the component | - | - |
### TabView
```javascript
import { TabView } from '@elements';
```
#### **Properties**
| Property | Description | Type | Default |
| ------------------ | ---------------------------------------------- | --------------- | ---------------------------- |
| children | The component to be shown within the component | React.Component | undefined |
| className | The style used by the component | string | 'forms.switch.switchPassive' |
| value | The value of the component | boolean | undefined |
| bgColor | The background color of the component | string | ‘transparent’ |
| txColor | The color of the tab text | string | ‘#000’ |
| activeTxColor | The color of the text when the tab is active | string | ‘#000’ |
| underLineClassName | The style used by the indicator under the tab | string | ‘’ |
| textClassName | The style of the tab text | string | ‘’ |
## Components
### StaticPages
#### **EmptyView**
```javascript
```
#### **Properties**
| Property | Description | Type | Default |
| ---------- | ---------------------------------- | ------------ | --------- |
| moduleName | The name of the unsupported module | string | undefined |
| navigation | Navigation object | object | undefined |
| route | Description | Route object | undefined |
### ActionSheet
```javascript
events[buttonIndex]()}
options={options}
visible={isModalOpen}
icons={[]}
destructiveButtonIndex={0}
cancelButtonIndex={2}
title={$T.DELETE_MODAL_TITLE}
message={$T.DELETE_MODAL_DESCRIPTION}
/>
```
#### **Properties**
| Property | Description | Type | Default |
| ---------------------- | ----------------------------------------------------------- | -------- | ---------- |
| destructiveButtonIndex | Recommended for deletion, to change the option color to red | number | undefined |
| onPress | Action press handler | Function | () => null |
| cancelButtonIndex | For cancelling and separating the option from other options | number | undefined |
| options | For creating actions | Array | undefined |
| message | For adding content to action sheet | string | undefined |
| visible | For opening the action sheet | boolean | undefined |
| title | For adding titles to action sheet | string | undefined |
| icons | For adding icons to options | Array | undefined |
### Address
#### **AddressLabel**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| --------- | -------------------------------------------- | ------ | --------- |
| className | The name of the class with the defined style | string | undefined |
| address | The name of the address | text | undefined |
#### **AddressLine**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| --------- | -------------------------------------------- | ------ | --------- |
| className | The name of the class with the defined style | string | undefined |
| line | Line text | text | undefined |
#### **AddressTitle**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | ------------------ | ------ | --------- |
| title | Address title text | string | undefined |
#### **PhoneNumber**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ----------- | ----------- | ---- | --------- |
| phoneNumber | Phone text | text | undefined |
### Basket
#### **CampaignSwiper**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | ---------------------------------------------- | ----- | ------- |
| items | The campaigns object array used for the Swiper | array | \[ ] |
#### **BasketItem**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------------------- | ----------------------------------------------------------- | -------- | --------- |
| product | The displayed product object | object | undefined |
| handleChangeQuantity | The method triggered when quantity changes | Function | undefined |
| handleSubmitGiftNote | The method triggered when gift note changes | Function | undefined |
| handleRemoveGiftNote | The method triggered when the gift note is removed | Function | undefined |
| handleAddToFavourite | The method triggered when the product is added to favorites | Function | undefined |
| isInFavourites | The status of the product added to favorites | boolean | undefined |
| isLogin | The status of login | boolean | undefined |
| navigation | Navigation object | object | undefined |
| options | The basketItem settings sent from Rules | object | undefined |
| isFavouriteActive | The availability status for adding the product to favorites | boolean | undefined |
#### **CampaignTotalAmount**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ------------- | ----------------------------------- | -------- | --------- |
| confirmBasket | The function that confirms the cart | Function | undefined |
#### **CheckoutButtonPrice**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | ------------------------------- | ------ | --------- |
| amounts | The object that stores quantity | object | undefined |
#### **ContinueShoppingButton**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ---------- | ----------------- | ------ | --------- |
| navigation | Navigation object | object | undefined |
#### **CouponCode**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------------- | --------------------------------------------- | -------- | --------- |
| voucherCode | Voucher code | string | undefined |
| validation | Validation object | object | undefined |
| apiError | API error object | object | undefined |
| handleDiscount | The method triggered when discount is applied | Function | undefined |
#### **DeleteModal**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ------------------------- | ---------------------------------------------- | -------- | --------- |
| isModalOpen | The visibility of the Modal | boolean | undefined |
| pending | The pending status for loading | boolean | undefined |
| product | Product object | object | undefined |
| closeModal | The method to close the modal | Function | undefined |
| removeItem | The method to remove the product | Function | undefined |
| isInFavourites | The status of adding to favorites | boolean | undefined |
| isFavouriteActive | The availability status of adding to favorites | boolean | undefined |
| type | Modal type | string | ‘default’ |
| animationType | Animation status | string | ‘none’ |
| handleMoveItemToFavourite | The method triggered when added to favorites | Function | undefined |
#### **Discounts**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| --------- | --------------- | ----- | --------- |
| discounts | Discounts array | Array | undefined |
#### **ItemBrand**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------- | ------ | --------- |
| product | Product object | object | undefined |
#### **ItemGiftNote**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------------------- | ---------------------------------------------------------- | -------- | --------- |
| product | Product object | object | undefined |
| handleSubmitGiftNote | The method triggered when gift note is added | Function | undefined |
| handleRemoveGiftNote | Product The method triggered when the gift note is removed | Function | undefined |
#### **ItemImage**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ------------ | ----------------- | ------ | --------- |
| navigation | Navigation object | object | undefined |
| $imageWidth | Image width | number | undefined |
| $imageHeight | Image height | number | undefined |
| product | Product object | object | undefined |
#### **ItemName**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ---------- | ----------------- | ------ | --------- |
| navigation | Navigation object | object | undefined |
| product | Product object | object | undefined |
#### **ItemPrice**
{% code fullWidth="false" %}
```javascript
```
{% endcode %}
**Properties**
| Property | Description | Type | Default |
| -------- | ------------------- | ------ | --------- |
| options | Price config object | object | undefined |
| product | Product object | object | undefined |
#### **ItemQuantityButtons**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------------------- | ------------------------------------------------------------- | -------- | --------- |
| handleChangeQuantity | The method triggered when the quantity of the product changes | Function | undefined |
| product | Product object | object | undefined |
#### **ItemRemoveButton**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ------------------- | ------------------------------------------------ | -------- | --------- |
| handleRemoveProduct | The method triggered when the product is removed | Function | undefined |
#### **ItemRetailPrice**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------------------- | ------ | --------- |
| options | Retail price config object | object | undefined |
| product | Product object | object | undefined |
#### **ItemSku**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------- | ------ | --------- |
| product | Product object | object | undefined |
#### **ItemSwipableContent**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ------------- | ---------------------------------------- | ------- | --------- |
| swipeToDelete | The status of the Swipe to Delete option | boolean | undefined |
#### **ItemVariants**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------- | ------ | --------- |
| product | Product object | object | undefined |
#### **OrderSummaryTitle**
```javascript
```
#### **TotalAmount**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | ------------------------------- | ------ | --------- |
| amounts | The object that stores quantity | object | undefined |
#### **TotalCount**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ------------- | ------------------------------------- | ------ | --------- |
| totalQuantity | The object that stores total quantity | object | undefined |
#### **TotalDiscountAmount**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | ------------------------------------- | ------ | --------- |
| amounts | The object that stores total quantity | object | undefined |
#### **TotalPayable**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | ------------------------------------- | ------ | --------- |
| amounts | The object that stores total quantity | object | undefined |
### CarouselImageViewer
```javascript
```
#### **Properties**
| Property | Description | Type | Default |
| ----------------------------------- | ------------------------------------------------------------------------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------- |
| images | The list of images displayed in the carousel component | Array | \[ ] |
| carouselOptions | The config settings of the carousel component | object | { itemHeight: deviceHeight / 1.6, itemWidth: deviceWidth - 80, sliderWidth: deviceWidth, style: {marginBottom: 10}} |
| carouselImageCropSizes | The size object of the images displayed in the carousel component | object | {width: 400, height: 400,} |
| zoomViewerOptions | The settings of the object used to zoom | object | {backgroundColor: '#fff',}, |
| zoomImageCropSizes | The size object of the images displayed in the zoom component | object | {width: 600, height: 600,} |
| carouselImageWrapperClassName | The className value of the component that wraps the images | string | 'components.carouselImageViewer.carouselImageWrapper' |
| carouselImageClassName | The className value of the component that displays the images | string | 'components.carouselImageViewer.carouselImage' |
| carouselDotsContainerClassName | The container className of the Dots in the carousel component | string | 'components.carouselImageViewer.carouselDotsContainer' |
| dotClassName | The className value of the Dots | string | 'components.carouselImageViewer.dot' |
| dotClassNameActive | The className value of the Dots with active status | string | 'components.carouselImageViewer.dotActive' |
| zoomViewerDotsContainerClassName | The className value of the Dots with zoom status | string | 'components.carouselImageViewer.zoomIndicatorsContainer' |
| zoomViewerCloseIconWrapperClassName | The className value of the component that wraps the close icon in the zoom component | string | 'components.carouselImageViewer.zoomViewerCloseIconWrapper' |
| zoomViewerCloseIconClassName | The className value of the close icon in the zoom component | string | 'components.carouselImageViewer.zoomViewerCloseIcon' |
| zoomViewerLoadingRender | The loading status of the zoom component | boolean | () => < Spinner styleName="centerFullHeight" /> |
| zoomViewerRenderHeader | The header component of the zoom component | React.Component | null |
| zoomViewerRenderIndicator | The indicator component of the zoom component | React.Component | null |
| zoomViewerRenderFooter | The footer component of the zoom component | React.Component | () => null |
| defaultSlideIndex | The index of the image displayed as default | number | 0 |
| pagination | Pagination status | boolean | true |
| snapItem | snapItem status | boolean | undefined |
### ErrorBoundary
```javascript
…
…
…
```
#### **Properties**
| Property | Description | Type | Default |
| -------- | ----------------------------------------------------- | --------------- | --------- |
| children | The child component to be comprised by error boundary | React.Component | undefined |
### Header
```javascript
```
#### **Properties**
| Property | Description | Type | Default |
| -------------- | -------------------------------------- | --------------- | --------- |
| leftContent | The component places on the left | React.Component | null |
| bodyContent | The component places in the center | React.Component | null |
| rightContent | The component places on the right | React.Component | null |
| body | The central component | React.Component | null |
| left | The left-hand component | React.Component | null |
| right | The right-hand component | React.Component | null |
| excludeLeft | The hiding status of the left side | boolean | false |
| excludeRight | The hiding status of the right side | boolean | false |
| autoCenterBody | The auto-aligning status of the center | boolean | undefined |
### ImageViewer
```javascript
```
#### **Properties**
| Property | Description | Type | Default |
| ----------------------------------- | ------------------------------------------------------------------------------------ | --------------- | ----------------------------------------------------------------------- |
| images | The list of images displayed in the carousel component | Array | \[ ] |
| swiperOptions | The config settings of the swiper component | object | { horizontal: true, height: deviceWidth, paginationStyle: { bottom: 5}} |
| swiperImageCropSizes | The size object of the images displayed in the swiper component | object | {width: 400, height: 400,} |
| zoomViewerOptions | The settings of the object used to zoom | object | {backgroundColor: '#fff',}, |
| zoomImageCropSizes | The size object of the images displayed in the zoom component | object | 'components.imageViewer.swiperImageWrapper' |
| swiperImageWrapperClassName | The className value of the component that wraps the images | string | 'components.imageViewer.swiperImageWrapper' |
| swiperImageClassName | The className value of the component that displays the images | string | 'components.imageViewer.swiperImage' |
| dotClassName | The className value of the Dots | string | 'components.imageViewer.dot' |
| dotClassNameActive | The className value of the Dots with active status | string | 'components.imageViewer.dotActive' |
| zoomViewerDotsContainerClassName | The className value of the Dots with zoom status | string | 'components.imageViewer.zoomIndicatorsContainer' |
| zoomViewerCloseIconWrapperClassName | The className value of the component that wraps the close icon in the zoom component | string | zoomViewerCloseIconWrapper' |
| zoomViewerCloseIconClassName | The className value of the close icon in the zoom component | string | 'components.imageViewer.zoomViewerCloseIcon' |
| zoomViewerLoadingRender | The loading status of the zoom component | boolean | () => < Spinner styleName="centerFullHeight" /> |
| zoomViewerRenderHeader | The header component of the zoom component | React.Component | null |
| zoomViewerRenderIndicator | The indicator component of the zoom component | React.Component | null |
| zoomViewerRenderFooter | The footer component of the zoom component | React.Component | () => null |
### LanguageInfo
```javascript
```
#### **Properties**
| Property | Description | Type | Default |
| ----------- | ----------------------------------------------------- | -------- | --------- |
| renderLabel | The render function that can be specifically defined | Function | null |
| label | Text above | string | null |
| endLabel | Text below | string | null |
| navigation | Navigation object | object | undefined |
| showSingle | The status of displaying language support as singular | boolean | false |
### NavigatorComponents
#### **BottomTabBar**
```javascript
const TabBar = BottomTabBar(bottomTabBarObject)
```
**Properties**
| Property | Description | Type | Default |
| ------------------ | ------------------------------ | ------ | --------- |
| bottomTabBarObject | Bottom Tab Bar stack component | object | undefined |
#### **SideBar**
```javascript
const Side = SideBar(sideBarObject)
```
**Properties**
| Property | Description | Type | Default |
| ------------- | ------------------------ | ------ | --------- |
| sideBarObject | Side Bar stack component | object | undefined |
### Order
#### **Status**
```javascript
const TabBar = BottomTabBar(bottomTabBarObject)
```
**Properties**
| Property | Description | Type | Default |
| ------------- | ------------------------------- | ------- | -------------------- |
| status | Order status object | object | undefined |
| iconVisible | The visibility of the Icon | boolean | true |
| iconRight | The position of the Icon | boolean | false |
| iconClassName | The className value of the Icon | string | 'orders.status.icon' |
| textClassName | The className value of the Text | string | 'orders.status.text' |
### Partials
#### **Alert**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------------- | ------ | --------- |
| options | Alert options object | object | undefined |
#### **NetworkModal**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ----------- | -------------------------- | ------- | --------- |
| isConnected | Internet connection status | boolean | undefined |
#### **Popup**
```javascript
```
#### **Price**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| --------- | ----------------------------------- | ------ | --------- |
| price | Price value | number | undefined |
| currency | Currency value | string | undefined |
| className | The class name with the given style | string | ‘ ’ |
| format | Price format value | number | undefined |
#### **Product**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ---------------- | ----------------------------------------------- | ------ | --------- |
| imageWidth | Image width | number | undefined |
| imageHeight | Image height | number | undefined |
| product | Product object | object | undefined |
| wrapperClassName | The class name of the item that wraps the image | string | undefined |
| imageClassName | The class name of the image item | string | undefined |
#### **SnackBar**
```javascript
```
#### **PickerModal**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ---------------------------- | ---------------------------------------------- | -------- | --------------------------------------------- |
| visible | Visibility status | boolean | false |
| handleModalVisibility | The handler function used to change visibility | Function | undefined |
| title | Title value | string | undefined |
| iconName | The name of the close icon | string | close |
| pickerItems | Picker data | Array | |
| onItemPicked | The method triggered when selecting an item | Function | Default |
| containerClassName | Container class name | string | 'components.pickerModal.modal' |
| itemsContainerClassName | The class name that wraps the items | string | 'components.pickerModal.modalItemsContainer' |
| headerContainerClassName | Header class name | string | 'components.pickerModal.modalHeaderContainer' |
| headerCloseIconClassName | The class name of the icon used for closing | string | 'components.pickerModal.modalHeaderCloseIcon' |
| scrollViewClassName | The class name used for Scrollview | string | 'components.pickerModal.scrollView' |
| pickerItemContainerClassName | The container class name of the items | string | 'components.pickerModal.pickerItemContainer' |
| pickerItemTextClassName | The class name of the text values of the items | string | 'components.pickerModal.pickerItemText' |
### ProductDetail
#### **Modals / AddedToCartModal**
**Modal**
```javascript
…
…
…
```
**Properties**
| Property | Description | Type | Default |
| ---------- | ----------------------------------------------- | ------- | --------- |
| visible | Modal visibility | boolean | undefined |
| …restProps | The props to be transferred to child components | | undefined |
#### **ModalBasketButton**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ---------- | ------------------------------------ | -------- | --------- |
| navigation | Modal visibility | boolean | undefined |
| hideModal | The function used to close the modal | Function | undefined |
#### **ModalCloseButton**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------------- | -------------------------------------------------------- | -------- | --------- |
| decorationLine | The decoration value of the text used to close the modal | string | undefined |
| hideModal | The function used to close the modal | Function | undefined |
#### **ModalInfo**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------- | ------- | --------- |
| quantity | Quantity | boolean | undefined |
| product | Product object | object | undefined |
#### **ModalTitle**
```javascript
```
### **Modals**
#### **QuickAddToCart**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ------------------------- | ------------------------------------------------ | -------- | --------- |
| validation | Validation object | object | undefined |
| product | Product object | object | undefined |
| validationReset | The function sent to reset the validation values | Function | undefined |
| onVariantSelection | The method triggered when selecting variants | Function | undefined |
| isEnable | Activity status | boolean | undefined |
| navigation | Navigation object | object | undefined |
| colorVariantOptions | Color variant settings | object | undefined |
| modalVariantOptions | Modal variant settings | object | undefined |
| modalVariantDrawerOptions | Modal drawer settings | object | undefined |
#### **ContentDrawer**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ---------------- | -------------------------------------------- | -------- | --------- |
| data | Content data | object | { } |
| variantSelection | The method triggered when selecting variants | Function | () => { } |
| status | Status value | | undefined |
| closeModal | The function used to close the modal | Function | () => { } |
| options | Config object | object | undefined |
#### **ErrorModal**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------------- | --------------------------------- | -------- | --------- |
| errorModal | Modal value | boolean | undefined |
| onRequestClose | The method triggered when closing | Function | () => { } |
| error | Error message | string | undefined |
#### **ProductAddedToBasketModal**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ---------- | --------------------------------- | -------- | --------- |
| dispatch | Redux dispatch function | Function | undefined |
| hideAction | The method triggered when closing | Function | undefined |
| quantity | Quantity object | object | undefined |
| navigation | Navigation object | object | undefined |
| product | Product object | object | undefined |
| visible | Visibility value | boolean | undefined |
#### **ProductAddedToFavouriteModal**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ---------- | --------------------------------- | -------- | --------- |
| dispatch | Redux dispatch function | Function | undefined |
| hideAction | The method triggered when closing | Function | undefined |
| navigation | Navigation object | object | undefined |
| product | Product object | object | undefined |
| visible | Visibility value | boolean | undefined |
#### **ProductValidationModal**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| --------------- | ------------------------------------------------ | -------- | --------- |
| validation | Validation object | object | undefined |
| validationReset | The function sent to reset the validation values | Function | undefined |
| isEnable | Activity status | boolean | false |
### **Variants**
#### **Variants**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ------------------------- | -------------------------------------------- | -------- | --------- |
| variants | Variant data | Array | undefined |
| status | Status value | object | undefined |
| product | Product object | Function | undefined |
| navigation | Navigation object | object | undefined |
| onSelect | The method triggered when selecting variants | Function | undefined |
| colorVariantOptions | Color variant settings | object | undefined |
| modalVariantOptions | Modal variant settings | object | undefined |
| modalVariantDrawerOptions | Modal drawer settings | object | undefined |
#### **AddToCartButton**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------- | -------- | --------- |
| product | Product object | object | undefined |
| pending | Pending status | boolean | undefined |
| onPress | Press event | Function | undefined |
#### **FavouriteButton**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------------------------- | ------------------------------------------------- | -------- | --------- |
| favorite | Favorite object | object | undefined |
| product | Product object | object | undefined |
| pending | Pending status | boolean | undefined |
| removeFromFavouriteHandler | The method triggered when removing from favorites | Function | undefined |
| addToFavouriteHandler | The method triggered when adding to favorites | Function | undefined |
| navigation | Navigation object | object | undefined |
| isLogin | Login status | boolean | undefined |
| pending | Pending status | boolean | undefined |
| favouritePending | The pending status for favorites | boolean | undefined |
#### **NoStockInfo**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------- | ------ | --------- |
| product | Product object | object | undefined |
#### **ProductBrand**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------- | ------ | --------- |
| product | Product object | object | undefined |
#### **ProductPrice**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ------------------ | -------------------------------- | ------ | ------------------------------------------- |
| product | Product object | object | undefined |
| containerClassName | The class name of the container | string | "productDetail.productPrice.priceContainer" |
| contentClassName | The class name of the price item | string | "productDetail.productPrice.priceContent" |
#### **ProductRetailPrice**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ------------------ | -------------------------------- | ------ | ------------------------------------------- |
| product | Product object | object | undefined |
| containerClassName | The class name of the container | string | "productDetail.productPrice.priceContainer" |
| contentClassName | The class name of the price item | string | "productDetail.productPrice.priceContent" |
#### **ProductSKU**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------- | ------ | --------- |
| product | Product object | object | undefined |
#### **ProductTitle**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | -------------- | ------ | --------- |
| product | Product object | object | undefined |
#### **QuantityButtons**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | --------------- | -------- | --------- |
| product | Product object | object | undefined |
| onPress | Press event | Function | undefined |
| quantity | Quantity object | object | undefined |
#### **ShareButton**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | ------------ | ------ | --------- |
| route | Route object | object | undefined |
### ProductList
```javascript
```
#### **Properties**
| Property | Description | Type | Default |
| -------------------------- | ------------------------------------------------------ | --------------- | ---------- |
| items | List data | Array | undefined |
| navigation | Navigation object | object | undefined |
| itemTemplate | The data component to be listed | React.Component | undefined |
| handleEndReached | The method triggered when reaching the end of the list | Function | undefined |
| onRefresh | The method triggered when refreshing the list | Function | undefined |
| scrollToTop | The control value to scroll to the top of the list | boolean | false |
| numberOfColumns | Number of data columns | number | 2 |
| containerClassName | The class name of the list container | string | ‘ ‘ |
| contentContainerClassName | The class name of the data container | string | ‘ ‘ |
| scrollToTopIconName | The name of the Scroll to Top icon | string | ‘up-arrow’ |
| scrollToTopButtonClassName | The class name of the Scroll to Top button | string | ‘ ‘ |
| scrollToTopIconClassName | The class name of the Scroll to Top icon | string | ‘ ‘ |
| ListEmptyComponent | Empty list component | React.Component | null |
| ListHeaderComponent | The header component of the list | React.Component | null |
| ListFooterComponent | The footer component of the list | React.Component | null |
### Promotion
```javascript
```
#### **Properties**
| Property | Description | Type | Default |
| -------- | -------------------------------------------- | -------- | --------- |
| content | The content data placed within the component | Function | undefined |
### Search
```javascript
```
#### **Properties**
| Property | Description | Type | Default |
| -------------- | ----------------------------------------------- | ------- | --------- |
| route | Route object | object | undefined |
| navigation | Navigation object | object | undefined |
| barcodeVisible | The visibility value of the barcode scan option | boolean | undefined |
### **SignIn**
#### **AppleSignIn**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | ----------- | -------- | --------- |
| login | Login event | Function | undefined |
#### **FacebookSignIn**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | ----------- | -------- | --------- |
| login | Login event | Function | undefined |
#### **SignInWithFaceId**
```javascript
```
**Properties**
| Property | Description | Type | Default |
| -------- | ----------- | -------- | --------- |
| login | Login event | Function | undefined |
### UnsupportedModule
```javascript
```
**Properties**
| Property | Description | Type | Default |
| ---------- | ---------------------------------- | ------ | --------- |
| moduleName | The name of the unsupported module | string | undefined |
### **Checkout**
#### **Payment / Options / MasterpassRest**
You can use the `MasterPassRest` component to handle Masterpass payments via the REST API integration. This component manages the SDK interaction, OTP verification, and payment proccess.
```jsx
// src/pages/checkout/payment/index.js
import MasterPassRest from '_components/checkout/payment/options/masterpassRest';
const Payment = (props) => {
return (
<>
// Other Components
);
};
export default Payment;
```
**Properties**
| Prop | Type | Default | Required | Description |
| ---------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------- | -------- | ------------------------------------------------------------ |
| `serviceUrl` | `string` | `'https://mp-sdk.masterpassturkiye.com'` | No | MasterPass SDK service URL |
| `additionalParams` | `Object` | `{}` | No | Additional parameters to be sent to SDK |
| `locale` | `string` | App's locale | No | Language setting. If not provided, uses app's default locale |
| `currency` | `string` | App's currency | No | Currency code. If not provided, uses app's default currency |
| `customErrorModalComponent` | [`React.Component`](https://react.dev/reference/react/Component) | `MasterPassErrorModal` | No | Custom error modal component |
| `customOtpModalComponent` | [`React.Component`](https://react.dev/reference/react/Component) | `MasterPassOtpModal` | No | Custom OTP modal component |
| `customLinkModalComponent` | [`React.Component`](https://react.dev/reference/react/Component) | `MasterPassLinkModal` | No | Custom account linking modal component |
| `customThreeDVerificationModalComponent` | [`React.Component`](https://react.dev/reference/react/Component) | `MasterPassThreeDVerificationModal` | No | Custom 3D verification modal component |
| `customInformationModalComponent` | [`React.Component`](https://react.dev/reference/react/Component) | `InformationModal` | No | Custom information modal component |
| `config` | `Object` | `undefined` | No | Advanced configuration settings |
**Config Object**
`config` prop accepts the following properties:
| Property | Type | Default | Description |
| --------------- | --------- | ----------- | ------------------------------------------------ |
| `useAutoRetry` | `boolean` | `undefined` | Automatic retry on authentication failure |
| `paymentParams` | `Object` | `undefined` | Extra parameters to be sent to payment operation |
**Default Behaviors**
When `useAutoRetry` is not specified:
* Automatic retry mechanism is **disabled**
* In case of an authentication-related error (e.g. token expiration, `AUTHENTICATION_FAILED`)
* The Information Modal is displayed to inform the user about the issue
* No automatic token refresh or retry attempt is made
* Recommended: Set `useAutoRetry` to `true` to provide a smoother user experience
When `paymentParams` is not specified:
* In the normal flow, the payment parameters are sent as usual. If any of the sent payment parameters need to be overridden for example, to change a `directPayment` property this should be used.
When `config` is not specified at all:
* All configuration options remain at their default values
* Component works with basic functionality
* Auto retry is disabled
* Authentication issues are handled via Information Modal
**Additional Params Properties**
The `additionalParams` object is used to send extra optional information to the Masterpass SDK.
| Property | Type | Description |
| ---------------- | -------- | ---------------------------- |
| `cardHolderName` | `string` | Full name of the card holder |
| `browserWidth` | `string` | Width of the user's browser |
| `browserHeight` | `string` | Height of the user's browser |
| `email` | `string` | Email address of the user |
| `linkName` | `string` | |
| `linkUrl` | `string` | |
```jsx
```
**mpRef**
`mpRef` global ref provides direct access to MasterPass SDK methods.
```javascript
import { mpRef } from '@components/checkout/payment/options/masterpassRest';
const PaymentComponent = () => {
const handleRegisterCard = async () => {
try {
const result = await mpRef.current.registerCard({
"accountKey": "905061666069",
"accountKeyType": "Msisdn",
"cardNumber": "4546711234567894",
"cardHolderName": "Test Test",
"expiryDate": "2612",
"cvv": "000",
"accountAliasName": "Test Test",
"userId": "zoAkXD4a88W/v9aLlsydjGJdEWN3CRWWkTa1QSJF2LqpeLsiDJT+s2tyG3n5pmvK",
"isMsisdnValidatedByMerchant": false,
"authenticationMethod": "None"
});
if (result.success) {
console.log('Card registered successfully');
} else if (result.requiresOTP) {
console.log('OTP verification required');
} else if (result.requires3D) {
console.log('3D Secure verification required');
}
} catch (error) {
console.error('Card registration error:', error);
}
};
return ;
};
```
**mpRef Methods**
1. `decodeJwt(token)`
* `token` (string)
2. `setToken(token)`
* `token` (string)
3. `setMerchantId(merchantId)`
* `merchantId` (string)
4. `accountAccess({ accountKey, accountKeyType, userId })`
* `accountKey` (string)
* `accountKeyType` (string)
* `userId` (string)
5. `linkToMerchant(accountKey)`
* `accountKey` (string)
6. `verifyOtp(otp)`
* `otp` (string)
7. `directPayment(paymentData)`
* `paymentData` (object) including:
* `requestReferenceNo` (string, optional)
* `cvc` (string)
* `cardNumber` (string)
* `cardHolderName` (string)
* `expiryDate` (string)
* `accountKey` (string)
* `amount` (number or string)
* `orderNo` (string)
* `currencyCode` (string)
* `paymentType` (string)
* `acquirerIcaNumber` (string)
* `installmentCount` (number)
* `authenticationMethod` (string)
* `secure3DModel` (string)
* `terminalGroupId` (string)
* `additionalParameters` (object, optional)
8. `registerCard(cardData)`
* `cardData` (object) including:
* `requestReferenceNumber` (string, optional)
* `accountKey` (string)
* `accountKeyType` (string)
* `cardNumber` (string)
* `cardHolderName` (string)
* `expiryDate` (string)
* `cvv` (string)
* `accountAliasName` (string)
* `userId` (string)
* `isMsisdnValidatedByMerchant` (boolean)
* `authenticationMethod` (string)
9. `deleteCard(cardData)`
* `cardData` (object) including:
* `accountKey` (string)
* `cardAlias` (string)
10. `payment(paymentData)`
* `paymentData` (object) including:
* `requestReferenceNo` (string, optional)
* `cardAlias` (string)
* `accountKey` (string)
* `amount` (number or string)
* `orderNo` (string)
* `currencyCode` (string)
* `paymentType` (string)
* `acquirerIcaNumber` (string)
* `installmentCount` (number)
* `authenticationMethod` (string)
* `secure3DModel` (string)
* `terminalGroupId` (string)
* `additionalParameters` (object, optional)
11. `resendOtp(token)`
* `token` (string)
**Error Handling**
* **AUTHENTICATION\_FAILED**: Automatic token refresh if `useAutoRetry` is active
* **ACCOUNT\_NOT\_FOUND**: Switch to direct purchase mode
* **ACCOUNT\_NOT\_LINKED\_TO\_MERCHANT**: Show link modal
* **Other errors**: Show error modal
**Notes**
* Component is only rendered when `payment_type === 'masterpass_rest'`
* All modals are not shown until SDK is ready
* Redux state is managed automatically
* Different behaviors may occur on iOS and Android due to WebView usage
* WebView is used for 3D Secure verification
* For test environment: `https://mp-test-sdk.masterpassturkiye.com` should be used as `serviceUrl`
## Data Containers
### Actions
#### **Address**
**-addressFullFilled**
Indicates success to fetch the address from backend
**Action Type:** FETCH\_ADDRESS\_FULLFILLED
**-cityFullFilled**
Indicates success to fetch the cities list information from backend
**Action Type:** FETCH\_ADDRESS\_CITY\_FULLFILLED
**-townshipFullFilled**
Indicates success to fetch the townships list information from backend
**Action Type:** FETCH\_ADDRESS\_TOWNSHIP\_FULLFILLED
**-districtFullFilled**
Indicates success to fetch the district list information from backend
**Action Type:** FETCH\_ADDRESS\_DISTRICT\_FULLFILLED
**-fetchAddressRejected**
Indicates error to fetch the cities list information from backend
**Action Type:** FETCH\_ADDRESS\_REJECTED
**-rejected**
Indicates error in communication with backend
**Action Type:** ADDRESS\_REJECTED
**-pending**
Indicates that the result of communication with backend is pending
**Action Type:** FETCH\_ADDRESS\_PENDING
**-success**
Indicates success for address processes
**Action Type:** ADDRESS\_SUCCESS
**-setClearState**
Updates the success and pending values within the state to default values
**Action Type:** CLEAR\_STATE
**-countryAction**
Indicates success to fetch the countries list information from backend
**Action Type:** FETCH\_ADDRESS\_COUNTRY\_FULFILLED
**-cityAction**
Sends a request to backend for the cities list and submits the response to the **cityFullFilled** action
**-townshipAction**
Sends a request to backend for the townships list and submits the response to the **townshipFullFilled** action
**-districtAction**
Sends a request to backend for the districts list and submits the response to the **districtFullFilled** action
**- addressChanged**
Indicates that the address information is changed
**Action Type:** ADDRESS\_CHANGED
**-clearState**
Dispatches the **setClearState** action to update the success and pending values within the state to default values
**-initialAddressState**
Dispatches the methods **cityAction**, **townshipAction**, and **districtAction** actions in that order
**-selectAddress**
Sets the selected address as default address
**-sendAddress**
Adds a new address
**-removeAddress**
Removes the selected address
**-fetchAddress**
Sends a request to backend for the addresses list and dispatches the related actions
**-fetchCountry**
Dispatches the **countryAction** action
**-fetchCity**
```javascript
dispatch(this.actionRunner([this.cityAction()], _OVERWRITE));
```
**-fetchTownship**
```javascript
dispatch(this.actionRunner([this.townshipAction(cityId)], _OVERWRITE));
```
**-fetchDistrict**
```javascript
dispatch(this.actionRunner([this.districtAction(townshipId)]));
```
#### **Auth**
**-currentUserFulfilled**
Indicates success to fetch the data of the currently logged-in user
**Action Type:** FETCH\_CURRENT\_USER\_FULFILLED\_FOR\_INDEX
**-currentUserFulfilledLogin**
Indicates success to fetch the data of the currently logged-in user
**Action Type:** FETCH\_CURRENT\_USER\_FULFILLED\_FOR\_LOGIN
**-rejected**
Indicates error in communication with backend
**Action Type:** FETCH\_AUTH\_REJECTED
**-pending**
Indicates that the result of communication with backend is pending
**Action Type:** FETCH\_AUTH\_PENDING
**-loginSuccess**
Indicates success for user login
**Action Type:** LOGIN\_SUCCESS
**-loginSuccessFulfilled**
Indicates success for user login
**Action Type:** LOGIN\_SUCCESS\_FULFILLED
**-passwordFulfilled**
Indicates success for password reset
**Action Type:** SET\_PASSWORD\_FORM
**-passwordFormRejected**
Indicates error for password reset
**Action Type:** PASSWORD\_FORM\_REJECTED
**-passwordFormPending**
Indicates that the process of password reset is pending
**Action Type:** PASSWORD\_FORM\_PENDING
**-clearAuthState**
Sets the authentication state to default state
**Action Type:** CLEAR\_AUTH\_STATE
**-logoutPending**
Indicates that the process of user logout is pending
**Action Type:** LOGOUT\_PENDING
**-logoutRejected**
Indicates error for user logout
**Action Type:** LOGOUT\_REJECTED
**-getCsrf**
Retrieves the CSRF Token from backend
**-getCurrentUser**
Retrieves the current user from backend
**-getCurrentUserForLogin**
Retrieves the current user from backend
**-faceIdHandler**
Handles login with FaceId
**-login**
Handles login with password
**-facebookLogin**
Handles login with Facebook
**-appleLogin**
Handles login with Apple
**-passwordInitialState**
Sets the forgot my password form values to default values
**-setPasswordForm**
Sends a request to backend for password reset
**-logOut**
Sends a request to backend for user logout
#### **Basket**
**-fulfilled**
Indicates success to fetch the cart content from backend
**Action Type:** FETCH\_BASKET\_FULFILLED
**-fulfilledToUpdate**
Updates the cart when a change is made and fetches a **response** parameter. This action is dispatched in the *setQuantity* and *addToCart* actions.
**Action Type:** FETCH\_BASKET\_FULFILLED + \_TO\_UPDATE
**-rejected**
Indicates error to fetch the cart content from backend
**Action Type:** FETCH\_BASKET\_REJECTED
**-pending**
Indicates that the process of fetching the cart content from backend is pending
**Action Type:** FETCH\_BASKET\_PENDING
**-fulfilledDiscount**
Sets the discount applied to cart and fetches a response parameter
**Action Type:** FETCH\_BASKET\_DISCOUNT
**-productAddedModal**
Displays the product added to cart modal
**Action Type:** PRODUCT\_ADDED\_MODAL\_SHOW
**-productAddedModalHide**
Hides the product added to cart modal
**Action Type:** PRODUCT\_ADDED\_MODAL\_HIDE
**-addToCartRejected**
Indicates error to add product to cart
**Action Type:** ADD\_TO\_CART\_REJECTED
**-addedToCartFullFilled**
Indicates success to add product to cart
**Action Type:** ADDED\_TO\_CART\_FULFILLED
**-handledUpdate**
Updates the isUpdate field within the state as false
**Action Type:** HANDLED\_UPDATE
**-clearError**
Hides the error message
**Action Type:** CLEAR\_ERROR
**-cleanBasket**
Clears the cart
**Action Type:** CLEAN\_BASKET
**-pendingFavouriteStatus**
Indicates that the process of fetching the favorite products content is pending
**Action Type:** BASKET\_FETCH\_FAVOURITE\_STATUS\_PENDING
**-fulfilledFavouriteStatus**
Indicates success to fetch the favorite products content
**Action Type:** BASKET\_FETCH\_FAVOURITE\_STATUS\_FULFILLED
**-rejectedFavouriteStatus**
Indicates error to fetch the favorite products content
**Action Type:** BASKET\_FETCH\_FAVOURITE\_STATUS\_REJECTED
**-fulfilledAddToFavourite**
Indicates success to add the product to favorites
**Action Type:** BASKET\_ADD\_TO\_FAVOURITE\_FULFILLED
**-rejectedAddToFavourite**
Indicates error to add the product to favorites
**Action Type:** BASKET\_ADD\_TO\_FAVOURITE\_REJECTED
**-setQuantity**
Updates the quantity of products in the cart
**-addToCart**
Adds product to cart
**-setDiscount**
Applies discount
**-fetchBasket**
Fetches the cart content
**-setGiftNote**
Adds gift note
**-removeGiftNote**
Removes gift note
**-fetchFavouriteStatus**
Fetches the favorite status of the products in cart from backend
**-addToFavourite**
Adds product to favorites
#### **Checkout**
**-loginFulfilled**
Indicates success for guest login and fetches a response parameter
**Action Type:** GUEST\_LOGIN\_FULFILLED
**-checkoutFulfilled**
Indicates success for checkout
**Action Type:** CHECKOUT\_FULFILLED
**-pending**
Indicates that the process of checkout is pending
**Action Type:** FETCH\_CHECKOUT\_PENDING
**-rejected**
Indicates error to fetch the checkout data
**Action Type:** CHECKOUT\_REJECTED
**-loginRejected**
Indicates error for guest login and fetches a error parameter
**Action Type:** CHECKOUT\_GUEST\_LOGIN\_REJECTED
**-getState**
Fetches the initial values of the checkout state
**Action Type:** CHECKOUT\_GUEST\_LOGIN\_INITIAL\_STATE
**-fetchCheckout**
Fetches checkout
**-guestLogin**
Fetches guest login
**-initialState**
Reloads the initial values of the state
**-mpRestTokenPending**
Indicates that the request to fetch the Masterpass REST token is pending.
**Action Type:** MP\_REST\_TOKEN\_PENDING
**-mpRestTokenFulfilled**
Indicates success in fetching the Masterpass REST token from the backend.
**Action Type:** MP\_REST\_TOKEN\_FULFILLED
**-mpRestTokenRejected**
Indicates an error occurred while fetching the Masterpass REST token.
**Action Type:** MP\_REST\_TOKEN\_REJECTED
**-mpRestSetToken**
Updates the Masterpass token value within the state.
**Action Type:** MP\_REST\_SET\_TOKEN
**-mpRestSetTokenData**
Saves the decoded Masterpass token data (JWT) into the state.
**Action Type:** MP\_REST\_SET\_TOKEN\_DATA
**-mpRestSetCards**
Saves the list of cards registered to the Masterpass account into the state.
**Action Type:** MP\_REST\_SET\_CARDS
**-mpRestSetReady**
Updates the readiness status of the Masterpass REST SDK.
**Action Type:** MP\_REST\_SET\_READY
**-mpRestSelectedCard**
Sets the specific Masterpass card selected by the user for the payment.
**Action Type:** MP\_REST\_SET\_SELECTED\_CARD
**-mpRestSetBinNumberFulfilled**
Indicates success in retrieving installment and card type info based on the BIN number for Masterpass REST.
**Action Type:** MP\_REST\_SET\_BIN\_NUMBER\_FULFILLED
**-mpRestSetBinNumberRejected**
Indicates an error occurred during the BIN number query for Masterpass REST.
**Action Type:** MP\_REST\_SET\_BIN\_NUMBER\_REJECTED
**-mpRestSetIsDirectPurchase**
Determines whether the payment is a direct purchase (new card) or using a registered Masterpass card.
**Action Type:** MP\_REST\_SET\_IS\_DIRECT\_PURCHASE
**-mpRestSetCompletePage**
Saves the payment completion context data required for the finalization step.
**Action Type:** MP\_REST\_SET\_COMPLETE\_PAGE
**-mpRestSetAdditionalParams**
Updates additional optional parameters to be sent to the Masterpass SDK.
**Action Type:** MP\_REST\_SET\_ADDITIONAL\_PARAMS
**-mpRestSetLocale**
Sets the language setting for the Masterpass REST components.
**Action Type:** MP\_REST\_SET\_LOCALE
**-mpRestSetCurrency**
Sets the currency code for the Masterpass REST transaction.
**Action Type:** MP\_REST\_SET\_CURRENCY
**-mpRestSetAccountStatus**
Updates the user's Masterpass account status (e.g., linked, not linked).
**Action Type:** MP\_REST\_SET\_ACCOUNT\_STATUS
**-mpRestSetError**
Writes errors occurred during Masterpass REST processes into the state.
**Action Type:** MP\_REST\_SET\_ERROR
**-mpRestShowOtpModal**
Displays the OTP (One-Time Password) verification modal.
**Action Type:** MP\_REST\_SHOW\_OTP\_MODAL
**-mpRestHideOtpModal**
Hides the OTP verification modal.
**Action Type:** MP\_REST\_HIDE\_OTP\_MODAL
**-mpRestShowLinkModal**
Displays the account linking modal for Masterpass.
**Action Type:** MP\_REST\_SHOW\_LINK\_MODAL
**-mpRestHideLinkModal**
Hides the account linking modal.
**Action Type:** MP\_REST\_HIDE\_LINK\_MODAL
**-mpRestErrorLinkModal**
Updates the state with errors encountered during the account linking process.
**Action Type:** MP\_REST\_ERROR\_LINK\_MODAL
**-mpRestReset**
Resets the Masterpass REST state to its initial default values.
**Action Type:** MP\_REST\_RESET
**-mpRestOpenThreeDVerificationModal**
Displays the modal for 3D Secure verification.
**Action Type:** MP\_REST\_OPEN\_THREE\_D\_VERIFICATION\_MODAL
**-mpRestCloseThreeDVerificationModal**
Hides the 3D Secure verification modal.
**Action Type:** MP\_REST\_CLOSE\_THREE\_D\_VERIFICATION\_MODAL
**-mpRestSetPaymentParams**
Sets specific operational payment parameters (e.g., bankIca) for the transaction.
**Action Type:** MP\_REST\_SET\_PAYMENT\_PARAMS
**-mpRestShowInformationModal**
Displays an information modal to the user (e.g., for authentication problems).
**Action Type:** MP\_REST\_SHOW\_INFORMATION\_MODAL
**-mpRestHideInformationModal**
Hides the information modal.
**Action Type:** MP\_REST\_HIDE\_INFORMATION\_MODAL
**-mpRestSetPendingCardRegistration**
Updates the pending status for card registration processes.
**Action Type:** MP\_REST\_SET\_PENDING\_CARD\_REGISTRATION
**-masterPassRestGetToken**
Sends a request to the backend to retrieve the Masterpass REST token and dispatches related fulfill/reject actions.
**-mpRestSetBinNumber**
Sends the BIN number to the backend to determine card type and available installments for Masterpass REST.
**-completeMasterpassRestPayment**
Initiates the payment or direct purchase process using the Masterpass REST SDK reference.
**-finalizeMasterpassRestOrder**
Submits the successful Masterpass payment result to the backend to complete and finalize the order.
#### **Combine Detail**
**-fulfilled**
Fetches combined products from backend and fetches a response parameter
**Action Type:** FETCH\_COMBINE\_DETAIL\_FULFILLED
**-pending**
Indicates that the process of fetching combined products from backend is pending
**Action Type:** FETCH\_CHECKOUT\_PENDING
**-rejected**
Indicates error to fetch the combined products from backend and fetches an error parameter
**Action Type:** CHECKOUT\_REJECTED
**-fetchProduct**
Fetches the related product from backend
**-getInitialProduct**
Fetches the main product from backend
#### **Contact**
**-contactUsFulfilled**
Contact successful
**Action Type:** CONTACT\_FULFILLED
**-subjectsFulfilled**
Indicates success to fetch contact subjects from backend
**Action Type:** FETCH\_CONTACT\_SUBJECTS
**-rejected**
Indicates error to fetch contact subjects from backend
**Action Type:** FETCH\_CONTACT\_SUBJECTS
**-pending**
Indicates that the process of sending contact form to backend is pending
**Action Type:** CONTACT\_PENDING
**-setContactForm**
Sends the contact form to backend
**-fetchContactSubjects**
Fetches contact subjects from backend
#### **Coupons**
**-basketOffersFulFilled**
Fetches active vouchers from backend and fetches a response parameter
**Action Type:** FETCH\_BASKET\_OFFERS
**-discountItemsFulFilled**
Fetches discount products from backend and fetches a response parameter
**Action Type:** FETCH\_DISCOUNT\_ITEMS
**-expiredOffersFulFilled**
Fetches expired vouchers from backend and fetches a response parameter
**Action Type:** FETCH\_EXPIRED\_BASKET\_OFFERS
**-futureBasketOffersFulFilled**
Fetches future vouchers from backend and fetches a response parameter
**Action Type:** FETCH\_FUTURE\_BASKET\_OFFERS
**-basketOffersActions**
Fetches active vouchers from backend
**-discountItemsActions**
Fetches discount products from backend
**-expiredOffersActions**
Fetches expired vouchers from backend
**-futureOffersActions**
Fetches future vouchers from backend
**-pending**
Indicates that the process of loading all vouchers is pending
**Action Type:** FETCH\_COUPONS\_PENDING
**-rejected**
Indicates error to fetch the vouchers from backend
**Action Type:** FETCH\_COUPONS\_REJECTED
**-fulfilled**
Indicates success to fetch the vouchers from backend
**Action Type:** FETCH\_COUPONS\_FULFILLED
**-fetchCoupons**
Fetches the vouchers from backend
#### **Favourite List**
**-fulfilled**
Indicates success to fetch the favorites list from backend
**Action Type:** FETCH\_FAVOURITE\_FULFILLED
**-rejected**
Indicates error to fetch the favorites list from backend
**Action Type:** FETCH\_FAVOURITE\_REJECTED
**-pending**
Indicates that the process of fetching the favorites list from backend is pending
**Action Type:** FETCH\_FAVOURITE\_PENDING
**-fulfilledRemoveProduct**
Indicates success to remove a product from the favorites list
**Action Type:** FL\_REMOVE\_FROM\_FAVOURITE\_FULFILLED
**-rejectedRemoveProduct**
Indicates error to remove a product from the favorites list
**Action Type:** FL\_REMOVE\_FROM\_FAVOURITE\_REJECTED
**-clearError**
Clears the error message
**Action Type:** CLEAR\_ERROR
**-fetchFavourites**
Fetches the favorites list from backend
**-getInfiniteFavourites**
Fetches the favorites list from backend
**-getInitialFavourites**
Fetches the favorites list from backend
**-removeFromFavourite**
Removes a product from the favorites list
**-refreshFavorites**
Re-fetches the favorites list from backend
#### **Map Marker**
**-fullfilled**
Indicates success to fetch the markers list from backend and writes the result in the state
**Action Type:** FETCH\_MARKER\_FULLFILLED
**-rejected**
Indicates error to fetch the markers list from backend
**Action Type:** FETCH\_MARKER\_REJECTED
**-pending**
Indicates that the process of fetch the markers list from backend is pending
**Action Type:** FETCH\_MARKER\_PENDING
**-fetchMarkers**
Fetches the markers list from backend
#### **Menu**
**-fullFilled**
Indicates success to fetch the menu list from backend and writes the result in the state
**Action Type:** FETCH\_MENU\_FULLFILLED
**-rejected**
Indicates error to fetch the menu list from backend
**Action Type:** FETCH\_MENU\_REJECTED
**-pending**
Indicates that the process of fetch the menu list from backend is pending
**Action Type:** FETCH\_MENU\_PENDING
**-fetchMenu**
Fetches the menu list from backend
#### **Product Detail**
**-fulfilled**
Indicates success to fetch the product’s detail data from backend and writes the result in the state
**Action Type:** FETCH\_PRODUCT\_DETAIL\_FULFILLED
**-rejected**
Indicates error to fetch the product’s detail data from backend and writes the result in the state
**Action Type:** FETCH\_PRODUCT\_DETAIL\_REJECTED
**-pending**
Indicates that the process of fetching the product’s detail data from backend is pending
**Action Type:** FETCH\_PRODUCT\_DETAIL\_PENDING
**-clear**
Resets the product detail state
**Action Type:** CLEAR\_PRODUCT\_DETAIL
**-fulfilledFavouriteStatus**
Indicates success to fetch the favorite status of the product’s detail data from backend and writes the result in the state
**Action Type:** PD\_FETCH\_FAVOURITE\_STATUS\_FULFILLED
**-rejectedFavouriteStatus**
Indicates error to fetch the favorite status of the product’s detail data from backend and writes the result in the state
**Action Type:** PD\_FETCH\_FAVOURITE\_STATUS\_REJECTED
**-fulfilledAddProduct**
Indicates success to add the product to favorites and writes the result in the state
**Action Type:** PD\_ADD\_TO\_FAVOURITE\_FULFILLED
**-rejectedAddToFavourite**
Indicates error to add the product to favorites and writes the result in the state
**Action Type:** PD\_ADD\_TO\_FAVOURITE\_REJECTED
**-fulfilledRemoveProduct**
Indicates success to remove the product from favorites and writes the result in the state
**Action Type:** PD\_REMOVE\_FROM\_FAVOURITE\_FULFILLED
**-rejectedRemoveProduct**
Indicates error to remove the product from favorites and writes the result in the state
**Action Type:** PD\_REMOVE\_FROM\_FAVOURITE\_REJECTED
**-rejectedVariantValidation**
Indicates error to select product variant and writes the result in the state
**Action Type:** VARIANT\_VALIDATION\_REJECTED
**-resetVariantValidation**
Resets the errors occurred during variant validation
**Action Type:** VARIANT\_VALIDATION\_RESET
**-pendingFavouriteStatus**
Indicates that the process of communication with backend is pending while adding to/removing from favorites
**Action Type:** PD\_FETCH\_FAVOURITE\_STATUS\_PENDING
**-clearFavouriteStatus**
Indicates the clearing of favorite status and updates the state
**Action Type:** PD\_CLEAR\_FAVOURITE\_STATUS
**-clearFavouriteError**
Indicates the clearing of errors occurred while updating favorites and updates the state
**Action Type:** PD\_CLEAR\_FAVOURITE\_STATUS\_ERROR
**-fetchFavouriteStatus**
Fetches the product’s favorite status from backend
**-fetchProduct**
Fetches the product from backend
**-buildQueryParam**
Creates the appropriate query string parameters to fetch the product from backend
**-setVariant**
Updates variant selections
**-getInitialProduct**
Fetches the main product data from backend
**-addToFavourite**
Adds the product to favorites
**-removeFromFavourite**
Removes the product from favorites
**-variantValidation**
Confirms variant selections
**-resetValidation**
Clears the errors occurred while selecting variants
#### **User Settings**
**Email**
**-fulfilled**
Indicates success to update email
**Action Type:** SEND\_EMAIL\_FORM
**-rejected**
Indicates error to update email and writes the result in the state
**Action Type:** SEND\_EMAIL\_FORM\_REJECTED
**-pending**
Indicates that the process of communication with backend is pending while updating email
**Action Type:** SEND\_EMAIL\_FORM\_PENDING
**-getState**
Indicates the initial state data of the reducer
**Action Type:** EMAIL\_INITIAL\_STATE
**-initialState**
The action that updates the reducer state to the initial state
**-sendEmailForm**
Used to update user email
**Notifications**
**-fulFilledProfile**
Indicates success to fetch/update the user profile information from backend and writes the result in the state
**Action Type:** FETCH\_PROFILE
**-rejected**
Indicates success to fetch/update the profile data from/in backend and writes the result in the state
**Action Type:** FETCH\_NOTIFICATIONS\_REJECTED
**-pending**
Indicates that the process of communication with backend is pending while fetching/updating profile data
**Action Type:** FETCH\_NOTIFICATIONS\_PENDING
**-fetchProfile**
Used to fetch the user’s profile data from backend
**-setProfile**
Used to update the user’s profile data in backend
**Password**
**-fulFilledProfile**
Indicates success to update user password in backend and writes the result in the state
**Action Type:** SEND\_PASSWORD\_FORM
**-rejected**
Indicates error to update user password in backend and writes the result in the state
**Action Type:** SEND\_PASSWORD\_FORM\_REJECTED
**-pending**
Indicates that the process of communication with backend is pending while updating the user’s password data
**Action Type:** SEND\_PASSWORD\_FORM\_PENDING
**-getState**
Indicates the initial state data of the reducer
**Action Type:** PASSWORD\_INITIAL\_STATE
**-initialState**
The action that updates the reducer state to the initial state
**-sendPasswordForm**
Used to update the user’s password data in backend
**Profile**
**-profileFulfilled**
Indicates success to update the profile data in backend and writes the result in the state
**Action Type:** SET\_PROFILE
**-fetchProfileFulfilled**
Indicates success to fetch the profile data from backend
**Action Type:** FETCH\_PROFILE
**-rejected**
Indicates error to fetch/update the profile data or for SMS verification and writes the error in the state
**Action Type:** PROFILE\_REJECTED
**-pending**
Indicates that the process of communication with backend is pending while updating/fetching the profile data in/from backend
**Action Type:** PROFILE\_PENDING
**-resetProfile**
Used to reset the initial state data in the reducer
**Action Type:** RESET\_PROFILE
**-showSmsVerificationForm**
Used to display the SMS verification modal
**Action Type:** PROFILE\_SMS\_VERIFICATION\_FORM\_SHOW
**-hideSmsVerificationForm**
Used to hide the SMS verification modal
**Action Type:** PROFILE\_SMS\_VERIFICATION\_FORM\_HIDE
**-setProfileForm**
Updates the user’s profile data in backend
**-resendSms**
Used to resend SMS for phone verification
**-fetchProfile**
Fetches the user’s profile data from backend
#### **Web Checkout**
**-opened**
Indicates the opening of the checkout page
**Action Type:** WEB\_CHECKOUT\_OPENED
**-complete**
Indicates the finalization of checkout
**Action Type:** COMPLETE\_ORDER
**-getUrl**
Indicates the URL of successful checkout
**Action Type:** WEB\_CHECKOUT\_URL
**-checkoutPending**
Indicates that the process of fetching the complete checkout data from backend is pending
**Action Type:** FETCH\_CHECKOUT\_COMPLETED\_PENDING
**-checkoutCompleted**
Indicates success to fetch the complete checkout data from backend
**Action Type:** FETCH\_CHECKOUT\_COMPLETED\_SUCCESS
**-checkoutRejected**
Indicates error to fetch the complete checkout data from backend
**Action Type:** FETCH\_CHECKOUT\_COMPLETED\_REJECTED
**-firstPurchaseOrdered**
Indicates the user’s first purchase
**Action Type:** FIRST\_PURCHASE\_ORDERED
**-getCheckoutCompleted**
Fetches the complete checkout data from backend
**-webCheckoutOpened**
Indicates the opening of the checkout page
**-checkoutSuccess**
Indicates the finalization of checkout
**-handleFirstPurchase**
Indicates the user’s first purchase
#### **Widgets**
**-fulfilled**
Indicates success to fetch the widget data from backend and to write the result in the state
**Action Type:** FETCH\_WIDGETS\_FULFILLED
**-rejected**
Indicates error to fetch the widget data from backend and writes the error in the state
**Action Type:** FETCH\_WIDGETS\_REJECTED
**-pending**
Indicates that the fetching of the widget data from backend is pending
**Action Type:** FETCH\_WIDGETS\_PENDING
**-promotionView**
Indicates the display of a promotion item in analytics events
**Action Type:** PROMOTION\_VIEW
**-promotionImpression**
Indicates the clicking of a promotion item in analytics events
**Action Type:** PROMOTION\_IMPRESSION
**-fetchWidgets**
Fetches the widget data from backend
#### **Product List**
**-fulfilled**
Indicates success to fetch the product list data from backend and to write the result in the state
**Action Type:** FETCH\_PRODUCT\_LIST\_FULFILLED
**-rejected**
Indicates error to fetch the product list data from backend and writes the error in the state
**Action Type:** FETCH\_PRODUCT\_LIST\_REJECTED
**-pending**
Indicates that the fetching of the product list data from backend is pending
**Action Type:** FETCH\_PRODUCT\_LIST\_PENDING
**-setFilter**
Saves the applied filter into the state
**Action Type:** SET\_FILTER
**-setActiveRoute**
Fetches a route data, and saves the active route into the state
**Action Type:** SET\_ACTIVE\_ROUTE
**-setUrl**
Fetches a URL data, and saves the URL into the state
**Action Type:** SET\_URL
**-setSort**
Fetches a sorter data, and saves the sorter into the state
**Action Type:** SET\_SORTER
**-setPagination**
Fetches a route data, and saves the active route into the state
**Action Type:** SET\_PAGINATION
**-setPagination**
Fetches a route data, and saves the active route into the state
**Action Type:** SET\_PAGINATION
**-fulfilledFavouriteStatus**
Fetches the favorite status of products, and saves it into the state
**Action Type:** PL\_FETCH\_FAVOURITE\_STATUS\_FULFILLED
**-rejectedFavouriteStatus**
Indicates error to fetch the favorite status of products from backend, and saves the error into the state
**Action Type:** PL\_FETCH\_FAVOURITE\_STATUS\_REJECTED
**-pendingFavouriteStatus**
Indicates that the fetching of the favorite status of products from backend is pending
**Action Type:** PL\_FETCH\_FAVOURITE\_STATUS\_PENDING
**-fulfilledAddProduct**
Adds the product to the favorites list
**Action Type:** PL\_ADD\_TO\_FAVOURITE\_FULFILLED
**-rejectedAddToFavourite**
Indicates error to add the product to the favorites list, and saves the error into the state
**Action Type:** PL\_ADD\_TO\_FAVOURITE\_REJECTED
**-resetError**
Resets error status
**Action Type:** RESET\_PRODUCT\_LIST\_REJECTED
**-fulfilledRemoveProduct**
Removes the product from the favorites list
**Action Type:** PL\_REMOVE\_FROM\_FAVOURITE\_FULFILLED
**-rejectedRemoveProduct**
Indicates error to remove the product from the favorites list, and saves the error into the state
**Action Type:** PL\_REMOVE\_FROM\_FAVOURITE\_REJECTED
**-clearFavouriteError**
Clears the error for the favorite status
**Action Type:** PL\_CLEAR\_FAVOURITE\_STATUS\_ERROR
**-getProducts**
Fetches the products from backend
**-getQueryString**
Creates the appropriate query string parameters to fetch the products from backend
**-fetchProducts**
Fetches the products from backend
**-selectFacet**
Used to select filtering type
**-removeFilter**
Removes the filter on the product list
**-getInfiniteProducts**
Fetches the product list from backend while scrolling
**-setSorter**
Applies the product list sorting, and fetches the product list from backend accordingly
**-setFilter**
Applies the product list filter, and fetches the product list from backend accordingly
**-selectFilter**
Used to select filtering type
**-getInitialProducts**
Fetches the product list from backend when the page is initially loaded
**-fetchFavouriteStatus**
Fetches the favorite status of products from backend
**-addToFavourite**
Adds the product to the favorites list
**-removeFromFavourite**
Removes the product from the favorites list
**-refreshProduct**
Re-fetches the product list from backend
#### **Orders**
**-getState**
Sets orders initial state
**Action Type:** ORDER\_INITIAL\_STATE
**-getStateRefund**
Sets refund initial state
**Action Type:** REFUND\_INITIAL\_STATE
**-pending**
Shows the result is pending when a network request is made for orders
**Action Type:** FETCH\_ORDERS\_PENDING
**-pendingOrderDetail**
Shows the result is pending when a network request is made for orderDetail
**Action Type:** FETCH\_ORDERS\_DETAIL\_PENDING
**-pendingRefund**
Shows the result is pending when a network request is made for refund
**Action Type:** FETCH\_REFUNDS\_PENDING
**-fulFilled**
Indicates success to fetch the orders data with a network request and to set the data. Fetches the response parameter as data
**Action Type:** FETCH\_ORDERS\_FULFILLED
**-fulFilledOrderDetail**
Indicates success to fetch the orderDetail data with a network request and to set the data. Fetches the response parameter as data
**Action Type:** FETCH\_ORDERS\_DETAIL\_FULFILLED
**-fulFilledRefund**
Indicates success to fetch the refund data with a network request and to set the data. Fetches the response parameter as data
**Action Type:** FETCH\_ORDERS\_DETAIL\_FULFILLED
**-rejected**
Indicates error for network request while fetching data for orders. Fetches the error parameter
**Action Type:** FETCH\_ORDERS\_REJECTED
**-rejectedOrderDetail**
Indicates error for network request while fetching data for orderDetail. Fetches the error parameter
**Action Type:** FETCH\_ORDERS\_DETAIL\_REJECTED
**-rejectedRefund**
Indicates error for network request while fetching data for Refund. Fetches the error parameter
**Action Type:** FETCH\_REFUNDS\_REJECTED
**-fulFilledCancellationReasons**
Indicates success to fetch the reasons for cancelation data with a network request and to set the data. Fetches the response parameter as data
**Action Type:** FETCH\_CANCELLATION\_REASONS
**-orderItemCancellationRequest**
Used to write order items and reason for cancelation when an order is canceled. Fetches the orderItemsId and reason parameters
**Action Type:** CANCELLATION\_REQUEST
**-cancelRejected**
Indicates error for network request while canceling an order. Fetches the error parameter
**Action Type:** CANCELLATION\_REQUEST\_REJECTED
**-pendingReason**
Shows the result is pending when a network request is fetched for reasons for cancelation
**Action Type:** FETCH\_CANCELLATION\_REASONS\_PENDING
**-initialState**
Sets orders initial state. Dispatches *getState*
**-initialStateRefund**
Sets refund initial state. Dispatches *getStateRefund*
**-changeOrderAdress**
Updates the address selected by the user by posting it with a network request. Dispatches **{ type: CHANGE\_ORDER\_ADRESS\_SUCCEED }** if success, and **{ type: CHANGE\_ORDER\_ADRESS\_FAIL, err }** if fail\
changeOrderAdress = ({ order, adress, order\_adress\_types })...
```javascript
changeOrderAdress = ({ order, adress, order_adress_types })...
```
**-fetchOrders**
Fetches orders data with a network request. Dispatches the actions *fulFilled* if success, and *rejected* if fail. **seperatorType** (\_AS\_INFINITE, this parameter is fetched when orders are to be fetched with infinite scroll) and fetches **pageNumber** as a parameter
```javascript
fetchOrders = (separatorType = '', pageNumber)...
```
**-fetchRefunds**
Fetches refunds data with a network request. Dispatches the actions *fulFilledRefund* if success, and *rejectedRefund* if fail. **seperatorType** (\_AS\_INFINITE, this parameter is fetched when orders are to be fetched with infinite scroll) and fetches pageNumber as a parameter
```javascript
fetchRefunds = (separatorType = '', pageNumber)...
```
**-fetchOrderDetail**
This action is dispatched when an order detail is to be seen from within the orders data. Fetches the orderId parameter, and the order detail data with a network request. Dispatches the actions *fulFilledOrderDetail* if success, and *rejectedOrderDetail* if fail
**-fetchCancellationReason**
Fetches reasons for cancelation while canceling an order with a network request. Dispatches the actions *fulFilledCancellationReason* if success, and *rejected* if fail
**-searchOrder**
Fetches orders with a network request using order number. Dispatches the actions *fulFilled* if success, and *rejected* if fail
**-postCancelForm**
Posts order items (**orderItems**), order number (**orderNumber**), and order ID (**orderId**) with a network request when canceling an order. Dispatches the actions *orderItemCancellationRequest* and *fetchOrderDetail* if success, and *cancelRejected* if fail
```javascript
postCancelForm = (orderItems, orderNumber, orderId)...
```
**-itemSelect**
If selected product refund is active when canceling an order or making a refund, this action is patched with the **id**(product ID) and **val** (bool) values after products are selected.
**Action Type:** SELECT\_ITEM
**-reasonSelect**
Sets the **reason** and **id** (product ID) parameters after reason for cancelation is selected when canceling an order or making a refund
**Action Type:** SELECT\_REASON
**-reasonOnChange**
Sets the **text** and **id** (product ID) parameters after reason for cancelation is selected when canceling an order or making a refund
**Actipn Type:** ON\_CHANGE\_REASON
**-selectItem**
Dispatches *itemSelect* by fetching the **id** and **val** parameters
**-selectReason**
Dispatches *reasonSelect* by fetching the **reason** and **val** parameters
**-onChangeReason**
Dispatches *reasonOnChange* by fetching the **text** and **id** parameters
#### **OldOrders**
**-getStateOldOrder**
**Sets** oldOrders initial stats.
**Action Type:** OLD\_ORDERS\_INITIAL\_STATE
**-pendingOldOrderDetail**
Shows the result is **pending** when a network request is made for OldOrderDetail
**Action Type:** FETCH\_OLD\_ORDERS\_DETAIL\_PENDING
**-pendingOldOrder**
Shows the result is **pending** when a network request is made for OldOrders
**Action Type:** FETCH\_OLD\_ORDERS\_PENDING
**-fulFilledOldOrderDetail**
Indicates **success** to fetch the oldOrderDetail data with a network request and to set the data. Fetches the **response** parameter as data
**Action Type:** FETCH\_OLD\_ORDERS\_DETAIL\_FULFILLED
**-fullFilledOldOrder**
Indicates **success** to fetch the oldOrders data with a network request and to set the data. Fetches the **response** parameter as data
**Action Type:** FETCH\_OLD\_ORDERS\_FULFILLED
**-rejectedOldOrderDetail**
Indicates **error** to fetch the oldOrderDetail data with a network request. Fetches the **error** parameter
**Action Type:** FETCH\_OLD\_ORDERS\_DETAIL\_REJECTED
**-rejectedOldOrder**
Indicates **error** to fetch the oldOrders data with a network request. Fetches the **error** parameter
**Action Type:** FETCH\_OLD\_ORDERS\_REJECTED
**-initialStateOldOrder**
Dispatches *getStateOldOrder*. Fetches the **dispatch** function as a parameter
**-fetchOldOrders**
Fetches oldOrders data with a network request. Dispatches the actions *fullFilledOldOrder* if success, and *rejectedOldOrder* if fail. **seperatorType** (\_AS\_INFINITE\_OLD\_ORDERS, this parameter is fetched when orders are to be fetched with infinite scroll) and fetches **pageNumber** as a parameter
```javascript
fetchOldOrders = (separatorType = '', pageNumber) …
```
**-fetchOldOrderDetail**
This action is dispatched when an order detail is to be seen from within the oldOrders data. Fetches the **orderId** parameter, and the order detail data with a network request. Dispatches the actions *fulFilledOldOrderDetail* if success, and *rejectedOldOrderDetail* if fail
#### **Register**
**-registerCompleted**
Indicates the finalization of registration
**Action Type:** REGISTER\_COMPLETED
**-rejected**
Indicates error during registration. Fetches the **error** parameter
**Action Type:** SET\_REGISTER\_REJECTED
**-pending**
Indicates that a network request is **pending** during registration
**Action Type:** REGISTER\_PENDING
**-showSmsVerificationForm**
Indicates the necessity to show the required form for SMS verification
**Action Type:** REGISTER\_SMS\_VERIFICATION\_FORM\_SHOW
**-hideSmsVerificationForm**
Indicates the necessity to hide the required form for SMS verification
**Action Type:** REGISTER\_SMS\_VERIFICATION\_FORM\_HIDE
**-getCurrentUser**
After user registration is successful, the user doesn’t have to relog, and this action is dispatched in the *register* action to automatically log the user in.
**-register**
After the registration form is filled out, it’s posted with a network request. Dispatches the actions *showSmsVerificationForm* if **hasSmsVerificationForRegister** (platformConfigs/app.json/HAS\_SMS\_VERIFICATION\_FOR\_REGISTER) is true and the status code of the response is 202 and *hideSmsVerificationForm* if it’s 201. After this step, the user successfully logs into the application with *getCurrentUser*. Dispatches *rejected* if fails
```javascript
register = (form, validation)...
```
**-resendSms**
This action is dispatched with a network request to resend the SMS code to phone number during the SMS verification form shown to the user with *showSmsVerificationForm*. This sends a new SMS to the user’s phone.
#### **Search**
**-fulFilled**
Indicates **success** to fetch the search data with a network request and to set the data. Fetches the **data** parameter
**Action Type:** FETCH\_SEARCH\_FULFILLED
**-rejected**
Indicates **error** to fetch the search data with a network request. Fetches the **error** parameter
**Action Type:** FETCH\_SEARCH\_REJECTED
**-pending**
Indicates that the result of a network request for search is **pending**
**Action Type:** FETCH\_SEARCH\_PENDING
**-search**
When the user makes a search on the search page, a network request is made with **searchText** fetched to the action as a parameter. Dispatches *fulFilled* if success, and *rejected* if fail
### Constants
#### **Address**
FETCH\_ADDRESS\_PENDING\
FETCH\_ADDRESS\_REJECTED\
FETCH\_ADDRESS\_FULLFILLED\
FETCH\_ADDRESS\_CITY\_FULLFILLED\
FETCH\_ADDRESS\_COUNTRY\_FULFILLED\
FETCH\_ADDRESS\_TOWNSHIP\_FULLFILLED\
FETCH\_ADDRESS\_DISTRICT\_FULLFILLED\
\_OVERWRITE\
\_AS\_INFINITE\
ADDRESS\_SUCCESS\
CLEAR\_STATE\
ADDRESS\_REJECTED\
CORPORATE\
INDIVIDUAL\
ADDRESS\_CHANGED
#### **Auth**
FETCH\_AUTH\_REJECTED\
FETCH\_CURRENT\_USER\_FULFILLED\_FOR\_INDEX\
FETCH\_CURRENT\_USER\_FULFILLED\_FOR\_LOGIN\
CLEAR\_AUTH\_STATE\
FETCH\_AUTH\_PENDING\
CLEAR\_INDEX\_STATE\
LOGOUT\_PENDING\
LOGOUT\_REJECTED\
LOGIN\_SUCCESS\
LOGIN\_SUCCESS\_FULFILLED\
SET\_PASSWORD\_FORM\
PASSWORD\_FORM\_REJECTED\
PASSWORD\_FORM\_PENDING\
FORGOT\_PASSWORD\_INITIAL\_STATE
#### **Basket**
FETCH\_BASKET\_PENDING\
FETCH\_BASKET\_REJECTED\
FETCH\_BASKET\_FULFILLED\
FETCH\_BASKET\_DISCOUNT\
\_TO\_UPDATE\
HANDLED\_UPDATE\
CLEAR\_ERROR\
PRODUCT\_ADDED\_MODAL\_HIDE\
PRODUCT\_ADDED\_MODAL\_SHOW\
ADD\_TO\_CART\_REJECTED\
CLEAN\_BASKET\
BASKET\_FETCH\_FAVOURITE\_STATUS\_PENDING\
BASKET\_FETCH\_FAVOURITE\_STATUS\_FULFILLED\
BASKET\_FETCH\_FAVOURITE\_STATUS\_REJECTED\
BASKET\_ADD\_TO\_FAVOURITE\_FULFILLED\
BASKET\_ADD\_TO\_FAVOURITE\_REJECTED\
ADDED\_TO\_CART\_FULFILLED
#### **Checkout**
GUEST\_LOGIN\_FULFILLED\
FETCH\_CHECKOUT\_PENDING\
CHECKOUT\_REJECTED\
CHECKOUT\_FULFILLED\
CHECKOUT\_GUEST\_LOGIN\_INITIAL\_STATE\
CHECKOUT\_GUEST\_LOGIN\_REJECTED\
MP\_REST\_TOKEN\_PENDING\
MP\_REST\_TOKEN\_FULFILLED\
MP\_REST\_TOKEN\_REJECTED\
MP\_REST\_SET\_TOKEN\
MP\_REST\_SET\_TOKEN\_DATA\
MP\_REST\_SET\_CARDS\
MP\_REST\_SET\_READY\
MP\_REST\_SET\_SELECTED\_CARD\
MP\_REST\_SET\_BIN\_NUMBER\_FULFILLED\
MP\_REST\_SET\_BIN\_NUMBER\_REJECTED\
MP\_REST\_SET\_IS\_DIRECT\_PURCHASE\
MP\_REST\_SET\_COMPLETE\_PAGE\
MP\_REST\_SET\_ADDITIONAL\_PARAMS\
MP\_REST\_SET\_LOCALE\
MP\_REST\_SET\_CURRENCY\
MP\_REST\_SET\_ACCOUNT\_STATUS\
MP\_REST\_SET\_ERROR\
MP\_REST\_SHOW\_OTP\_MODAL\
MP\_REST\_HIDE\_OTP\_MODAL\
MP\_REST\_SHOW\_LINK\_MODAL\
MP\_REST\_HIDE\_LINK\_MODAL\
MP\_REST\_ERROR\_LINK\_MODAL\
MP\_REST\_RESET\
MP\_REST\_OPEN\_THREE\_D\_VERIFICATION\_MODAL MP\_REST\_CLOSE\_THREE\_D\_VERIFICATION\_MODAL\
MP\_REST\_SET\_PAYMENT\_PARAMS\
MP\_REST\_SHOW\_INFORMATION\_MODAL\
MP\_REST\_HIDE\_INFORMATION\_MODAL\
MP\_REST\_SET\_PENDING\_CARD\_REGISTRATION
#### **Combine Detail**
FETCH\_COMBINE\_DETAIL\_PENDING\
FETCH\_COMBINE\_DETAIL\_REJECTED\
FETCH\_COMBINE\_DETAIL\_FULFILLED
#### **Contact**
FETCH\_CONTACT\_SUBJECTS\
FETCH\_CONTACT\_REJECTED\
CONTACT\_FULFILLED\
CONTACT\_PENDING\
ORDER\_FIELD\_NAME
#### **Coupons**
FETCH\_BASKET\_OFFERS;\
FETCH\_DISCOUNT\_ITEMS\
FETCH\_EXPIRED\_BASKET\_OFFERS\
FETCH\_FUTURE\_BASKET\_OFFERS\
FETCH\_COUPONS\_PENDING\
FETCH\_COUPONS\_REJECTED\
FETCH\_COUPONS\_FULFILLED
#### **Favourite List**
FETCH\_FAVOURITE\_PENDING\
FETCH\_FAVOURITE\_REJECTED\
FETCH\_FAVOURITE\_FULFILLED\
\_AS\_INFINITE\
CLEAR\_ERROR\
FL\_REMOVE\_FROM\_FAVOURITE\_REJECTED\
FL\_REMOVE\_FROM\_FAVOURITE\_FULFILLED
#### **Map Marker**
FETCH\_MARKER\_FULLFILLED\
FETCH\_MARKER\_REJECTE\
FETCH\_MARKER\_PENDIN
#### **Menu**
FETCH\_MENU\_PENDING\
FETCH\_MENU\_FULLFILLED\
FETCH\_MENU\_REJECTED
#### **Product Detail**
FETCH\_PRODUCT\_DETAIL\_PENDING\
FETCH\_PRODUCT\_DETAIL\_REJECTED\
FETCH\_PRODUCT\_DETAIL\_FULFILLED\
CLEAR\_PRODUCT\_DETAIL\
PD\_FETCH\_FAVOURITE\_STATUS\_PENDING\
PD\_FETCH\_FAVOURITE\_STATUS\_FULFILLED\
PD\_FETCH\_FAVOURITE\_STATUS\_REJECTED\
PD\_CLEAR\_FAVOURITE\_STATUS\
PD\_ADD\_TO\_FAVOURITE\_FULFILLED\
PD\_ADD\_TO\_FAVOURITE\_REJECTED\
PD\_REMOVE\_FROM\_FAVOURITE\_FULFILLED\
PD\_REMOVE\_FROM\_FAVOURITE\_REJECTED\
PD\_CLEAR\_FAVOURITE\_STATUS\_ERROR\
VARIANT\_VALIDATION\_RESET\
VARIANT\_VALIDATION\_REJECTED
#### **Product List**
FETCH\_PRODUCT\_LIST\_PENDING\
FETCH\_PRODUCT\_LIST\_REJECTED\
FETCH\_PRODUCT\_LIST\_FULFILLED\
PL\_FETCH\_FAVOURITE\_STATUS\_PENDING\
PL\_FETCH\_FAVOURITE\_STATUS\_FULFILLED\
PL\_FETCH\_FAVOURITE\_STATUS\_REJECTED\
PL\_CLEAR\_FAVOURITE\_STATUS\
PL\_ADD\_TO\_FAVOURITE\_FULFILLED\
PL\_ADD\_TO\_FAVOURITE\_REJECTED\
PL\_REMOVE\_FROM\_FAVOURITE\_FULFILLED\
PL\_REMOVE\_FROM\_FAVOURITE\_REJECTED\
PL\_CLEAR\_FAVOURITE\_STATUS\_ERROR\
\_AS\_INFINITE\
SELECT\_FACET\
RESET\_PRODUCT\_LIST\_REJECTED\
SET\_FILTER\
SET\_URL\
SET\_PAGINATION\
SET\_SORTER\
SET\_ACTIVE\_ROUTE
#### **User Settings**
**Email**
SEND\_EMAIL\_FORM\
SEND\_EMAIL\_FORM\_REJECTED\
SEND\_EMAIL\_FORM\_PENDING\
EMAIL\_INITIAL\_STATE
**Notifications**
FETCH\_PROFILE\
FETCH\_NOTIFICATIONS\_PENDING\
FETCH\_NOTIFICATIONS\_REJECTED
**Password**
SEND\_PASSWORD\_FORM\
SEND\_PASSWORD\_FORM\_REJECTED\
SEND\_PASSWORD\_FORM\_PENDING\
PASSWORD\_INITIAL\_STATE
**Profile**
SET\_PROFILE\
PROFILE\_PENDING\
PROFILE\_REJECTED\
FETCH\_PROFILE\
RESET\_PROFILE\
PROFILE\_SMS\_VERIFICATION\_FORM\_HIDE\
PROFILE\_SMS\_VERIFICATION\_FORM\_SHOW
#### **Web Checkout**
WEB\_CHECKOUT\_OPENED\
CLEAR\_ORDER\
COMPLETE\_ORDER\
WEB\_CHECKOUT\_URL\
FETCH\_CHECKOUT\_COMPLETED\_PENDING\
FETCH\_CHECKOUT\_COMPLETED\_SUCCESS\
FETCH\_CHECKOUT\_COMPLETED\_REJECTED\
FIRST\_PURCHASE\_ORDERED
#### **Widgets**
FETCH\_WIDGETS\_PENDING\
FETCH\_WIDGETS\_REJECTED\
FETCH\_WIDGETS\_FULFILLED\
PROMOTION\_VIEW\
PROMOTION\_IMPRESSION
#### **Orders**
ORDER\_INITIAL\_STATE\
FETCH\_ORDERS\_PENDING\
FETCH\_ORDERS\_FULFILLED\
FETCH\_ORDERS\_REJECTED\
HANDLE\_ITEM\
FETCH\_CANCELLATION\_REASONS\
CANCELLATION\_REQUEST\
\_AS\_INFINITE\
\_FOR\_CHECKOUT\
REFUND\_INITIAL\_STATE\
FETCH\_REFUNDS\_FULFILLED\
FETCH\_REFUNDS\_PENDING\
FETCH\_REFUNDS\_REJECTED\
\_AS\_INFINITE\_REFUND\
FETCH\_CANCELLATION\_REASONS\_PENDING\
CANCELLATION\_REQUEST\_REJECTED\
SELECT\_ITEM\
SELECT\_REASON\
ON\_CHANGE\_REASON\
FETCH\_ORDERS\_DETAIL\_PENDING\
FETCH\_ORDERS\_DETAIL\_FULFILLED\
FETCH\_ORDERS\_DETAIL\_REJECTED\
OLD\_ORDERS\_INITIAL\_STATE\
FETCH\_OLD\_ORDERS\_FULFILLED\
FETCH\_OLD\_ORDERS\_PENDING\
FETCH\_OLD\_ORDERS\_REJECTED\
\_AS\_INFINITE\_OLD\_ORDERS\
FETCH\_OLD\_ORDERS\_DETAIL\_PENDING\
FETCH\_OLD\_ORDERS\_DETAIL\_FULFILLED\
FETCH\_OLD\_ORDERS\_DETAIL\_REJECTED\
CHANGE\_ORDER\_ADRESS\_PENDING\
CHANGE\_ORDER\_ADRESS\_SUCCEED\
CHANGE\_ORDER\_ADRESS\_FAIL
#### **OldOrders**
OLD\_ORDERS\_INITIAL\_STATE\
FETCH\_OLD\_ORDERS\_FULFILLED\
FETCH\_OLD\_ORDERS\_PENDING\
FETCH\_OLD\_ORDERS\_REJECTED\
\_AS\_INFINITE\_OLD\_ORDERS\
FETCH\_OLD\_ORDERS\_DETAIL\_PENDING\
FETCH\_OLD\_ORDERS\_DETAIL\_FULFILLED\
FETCH\_OLD\_ORDERS\_DETAIL\_REJECTED
#### **Register**
SET\_REGISTER\_REJECTED\
REGISTER\_PENDING\
REGISTER\_COMPLETED\
REGISTER\_SMS\_VERIFICATION\_FORM\_SHOW\
REGISTER\_SMS\_VERIFICATION\_FORM\_HIDE
#### **Search**
FETCH\_SEARCH\_PENDING\
FETCH\_SEARCH\_REJECTED\
FETCH\_SEARCH\_FULFILLED
### Reducer
#### **Address**
INITIAL STATE
```javascript
{
error: {},
pending: true,
infinitePending: false,
next: '',
success: false,
initialSuccess: false,
address: [],
city: [],
township: [],
district: [],
country: {},
isChanged: false,
}
```
#### **Auth**
INITIAL STATE
```javascript
{
error: {},
indexCompleted: false,
loginCompleted: false,
pending: false,
loginSuccess: false,
logoutPending: false,
auth: {
user: false,
},
forgotPasswordError: [],
forgotPasswordPending: false,
forgotPasswordSuccess: false
}
```
#### **Basket**
INITIAL STATE
```javascript
{
error: {},
pending: true,
initialSuccess: false,
isUpdate: false,
productAddedModal: false,
errorModal: false,
basket: {},
favourites: [],
favouritePending: false,
favouriteError: {},
}
```
#### **Checkout**
INITIAL STATE
```javascript
{
error: {},
pending: false,
indexPage: {},
guestLogin: {
pending: false,
isLogin: false,
},
masterpassRest: {
pending: false,
token: "",
msisdn: "",
error: "",
terminalGroupId: "",
bankIca: null,
tokenData: null,
cards: null,
isReady: false,
selectedCard: {},
isDirectPurchase: true,
completePage: {
response: {}
},
locale: "",
currency: "",
additionalParams: {},
accountStatus: {
isAccountNotFound: false,
isAcccountNotLinked: false,
},
otp: {
isModalVisible: false,
modalTitle: "",
verificationData: {},
response: {},
otpType: "OTP",
error: ""
},
linkAccount: {
isModalVisible: false,
error: "",
response: {}
},
threeDVerification: {
isModalVisible: false,
url: "",
url3dFail: "",
url3dSuccess: "",
},
informationModal: {
isModalVisible: false,
data: null,
},
paymentParams: {},
pendingCardRegistration: null
}
}
```
#### **Combine Detail**
INITIAL STATE
```javascript
{
error: [],
pending: true,
product: {},
group_products: [],
}
```
#### **Contact**
INITIAL STATE
```javascript
{
error: {},
pending: true,
isSuccess: false,
subjects: [],
}
```
#### **Coupons**
INITIAL STATE
```javascript
{
error: [],
pending: true,
basketOffers: [],
discountOffers: [],
expiredOffers: [],
futureOffers: [],
}
```
#### **Favourite List**
INITIAL STATE
```javascript
{
error: {},
pending: true,
infinitePending: false,
initialSuccess: false,
productAddedModal: false,
errorModal: false,
count: 0,
next: undefined,
previous: undefined,
favourites: [],
infiniteFetchError: false,
}
```
#### **Map Marker**
INITIAL STATE
```javascript
{
pending: true,
error: {},
markers: [],
nearest: false,
}
```
#### **Menu**
INITIAL STATE
```javascript
{
error: [],
pending: true,
categories: [],
}
```
#### **Product Detail**
INITIAL STATE
```javascript
{
error: [],
pending: true,
favouriteError: {},
initialSuccessAt: 0,
favourite: undefined,
favouritePending: false,
addedToFavouriteModal: false,
errorModalFavourite: false,
product: {},
variantValidation: false,
}
```
#### **Product List**
INITIAL STATE
```javascript
{
error: {},
pending: true,
pendingFavouriteStatus: false,
favouriteError: {},
initialSuccess: false,
facets: [],
sorts: [],
pagination: {},
products: [],
infinitePending: false,
landingPage: {},
currentFilters: [],
currentSorters: [],
currentPagination: [
{
page: 1,
},
],
url: '',
}
```
#### **User Settings**
Email - INITIAL STATE
```javascript
{
error: [],
pending: false,
email: {},
isSuccess: false,
}
```
Notifications - INITIAL STATE
```javascript
{
error: [],
pending: false,
profile: {},
}
```
Password - INITIAL STATE
```javascript
{
error: [],
pending: false,
password: {},
isSuccess: false,
}
```
Profile - INITIAL STATE
```javascript
{
error: [],
pending: true,
isSuccess: false,
profile: {},
smsVerificationModal: false,
}
```
#### **Web Checkout**
INITIAL STATE
```javascript
{
completed: false,
url: null,
sucess: {
pending: true,
order: {},
error: {},
},
}
```
#### **Widgets**
INITIAL STATE
```javascript
{
error: [],
pending: false,
widgets: [],
}
```
#### **Orders**
INITIAL STATE
```javascript
{
orders: [],
orderDetail: {},
error: {},
errorDetail: {},
reasonError: {},
pending: true,
pendingOrderDetail: true,
pendingReasons: true,
initialSuccess: false,
infinitePending: false,
reasons: {},
cancellationRequest: false,
next: '',
}
```
#### **OldOrders**
INITIAL STATE
```javascript
{
oldOrders: [],
oldOrderDetail: {},
error: {},
pending: true,
pendingOldOrderDetail: true,
initialSuccess: false,
infinitePending: false,
next: '',
}
```
#### **Register**
INITIAL STATE
```javascript
{
error: {},
pending: false,
registerSuccesful: false,
smsVerificationModal: false,
}
```
#### **Search**
INITIAL STATE
```javascript
{
error: [],
pending: false,
results: [],
}
```
## Page Containers
## Hooks
### useWidgetFetch
These are the [hooks](https://reactjs.org/docs/hooks-intro.html) used to send requests to the widgets that are defined by Omnitron. When making a request, it’s sent to the widget slug based on the current widger. The exemplary request URL is provided in that format. Each request creates three available parameters.
#### **error**
This parameter indicates if any error occurs after a request is made, and returns to process these errors.
#### **loading**
The loading value has a true boolean during the period between a request is made and a response is received. Otherwise, it has a false boolean.
#### **data**
If the request returns with a successful response, the data value is filled with the returning data.
### useWidgetQuery
`useWidgetQuery` is a React hook used to fetch widget data asynchronously based on a specific `slug`.
#### Usage
```javascript
import { useWidgetQuery } from '_hooks';
const { data, loading, error } = useWidgetQuery(slug, options);
```
#### Parameters
The hook accepts two arguments:
**1. `slug` (String | Required)**
The unique identifier (slug) of the widget to be fetched.
* **Example Slug:** `'mobile-test-widgets'`
* **Example Final Request URL:** `'https://workshop.akinoncloud.com/widgets/mobile-test-widgets'`
**2. `options` (Object | Optional)**
| Property | Type | Default | Description |
| ---------------------- | --------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`ready`** | `boolean` | `true` | Determines if the query should run. If set to false, the request is paused until the condition becomes true. |
| **`reactQueryConfig`** | `Object` | `{ retry: 0, cacheType: CACHE_TYPES.NONE }` | Configuration object passed to the underlying query handler. By default, **retries are disabled** and **caching is turned off**. You can override these defaults or pass standard [TanStack Query Options](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery) here. |
#### Return Values
| Property | Type | Description |
| ------------- | ----------------- | --------------------------------------------------------------------------------------------- |
| **`data`** | `any` \| `null` | The widget data returned from the API if successful. Returns `null` if loading or on error. |
| **`loading`** | `boolean` | Indicates the current state of the request. Returns `true` while fetching, `false` otherwise. |
| **`error`** | `Error` \| `null` | The error object returned if the request fails. |
#### Available Cache Types
You can control caching behavior by passing `cacheType` inside `reactQueryConfig`.
| Type | Stale Time | Cache Time | Persistence | Use Case |
| ---------------------------------------------------------------------------- | ----------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------- |
|
CACHE\_TYPES.NONE (Default)
| **0 ms** | **0 ms** | ❌ No | Real-time data. Data is always considered old and is never stored in memory. |
| **`CACHE_TYPES.SHORT`** | **2 mins** | **5 mins** | ✅ Yes | Frequently changing content that doesn't need to be instant (e.g., news feeds, trending lists). |
| **`CACHE_TYPES.LONG`** | **30 mins** | **60 mins** | ✅ Yes | Static content that rarely changes (e.g., footer menus, settings, intro banners). |
* **Stale Time:** The duration the data remains "fresh". No new request is made during this time.
* **Cache Time:** The duration the inactive data remains in memory before garbage collection.
* **Persistence:** Indicates if the cache strategy supports persisting data to storage.
#### Examples
**1. Basic Usage**
Fetch data immediately with default settings (no cache, no retry).
```javascript
import { ReactNative } from "_dependencies";
import { View, Text } from "@elements"
import { useWidgetQuery } from '_hooks';
const { ActivityIndicator } = ReactNative;
const Banner = () => {
const { data, loading } = useWidgetQuery('mobile-test-widgets');
if (loading) {
return ;
}
return (
{data?.data?.name}
);
};
```
**2. Conditional Fetching (`ready`)**
Fetch data only when a specific condition is met. Example usage with LazyLoader element.
```javascript
const CategoryList = ({ ready }) => {
const { data } = useWidgetQuery('mobile-home-category-list', {
ready: ready
});
// ...
};
```
**3. Overriding Defaults (`reactQueryConfig`)**
Change the cache strategy:
```javascript
import { CACHE_TYPES } from '@services/queryClient';
const ImportantWidget = () => {
const { data } = useWidgetQuery('mobile-test-widgets', {
reactQueryConfig: {
cacheType: CACHE_TYPES.SHORT, // Override default: use short-term caching
}
});
// ...
};
```
## Core
### createApp
This creates the mobile application based on the sent parameters.
#### **Parameters**
**router**\
This sends the navigation created for the application.
**dataContainers**\
Data containers are sent as objects. The Redux store is created with the send object. Reducers are created with object keys.
**styles**\
Style objects are sent as objects. Style objects are created with a stylesheet.
**themeConfigs**\
Theme configs are sent as objects. Default values are assigned to the elements within the framework
**integrationMaps**\
Integrations maps are sent as objects. Each map file has its own properties and stored in json files.
**staticTextMaps**\
Static texts are sent as objects. Each text key can support more then one language and are stored in json files.
**request**\
Request is sent as object. Http requests are made with Axios.
```javascript
import { CreateApp } from "_core/App";
import router from './router';
import dataContainers from './dataContainers'
import styles from './styles';
import themeConfigs from './_themeConfigs';
import integrationMaps from './integrationMaps';
import staticTextMaps from './staticTextMaps';
import { request } from './request';
const App = CreateApp({
router,
dataContainers,
styles,
themeConfigs,
integrationMaps,
staticTextMaps,
request
});
export { App };
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.akinon.com/technical-guides/app-maker/mobile/mobile-app-framework/framework.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.