Introduction
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
import { Button } from '@elements';
<Button text="Button Text" textProps={{ safelyTranslation: true }} />
} = pages;
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
import { CheckBox } from '@elements';
<CheckBox
value={true}
content={() => (
<View className="forms.checkBox.labelContainer">
<Text safelyTranslation className="forms.checkBox.labelText">Label</Text>
</View>
)}
/>
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
import { Container } from '@elements';
<Container>
<Text safelyTranslation>Hello World</Text>
</Container>
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
import { Content } from '@elements';
<Content>
<Text safelyTranslation>Hello World</Text>
</Content>
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
{
scrollTop: false,
bounces: true,
showScrollIndicator: true,
pagingEnabled: false,
nestedScrollEnabled: false,
}
Datepicker
import { DatePicker } from '@elements';
<DatePicker />
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
import { HtmlContent } from '@elements';
<HtmlContent content="<div>Hello World</div>" />
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
import { Icon } from '@elements';
<Icon name="globe" />
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
import { IconButton } from '@elements';
<IconButton icon="globe" />
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
import { Image } from '@elements';
<Image
source={{
uri: 'https://picsum.photos/200/300',
}}
defaultStyle={{ width: 100, height: 100 }}
/>
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 |
ImagePicker
import { Input } from '@elements';
<Input />
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
import { Picker } from '@elements';
<Picker
data={[
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
]}
selectedItem={1}
placeholder="Select an option"
headerTitle={{ tr: 'Select an option' }}
/>
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
import { RadioGroup } from '@elements';
<RadioGroup
options={[
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
]}
value={2}
/>
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
import { SafeArea } from '@elements';
<SafeArea>
<Text safelyTranslation>Hello World</Text>
</SafeArea>
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
import { SafeAreaView } from '@elements';
<SafeAreaView>
<Text safelyTranslation>Hello World</Text>
</SafeAreaView>
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
import { ScrollView } from '@elements';
<ScrollView>
<Text safelyTranslation>Hello World</Text>
</ScrollView>
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
import { Spinner } from '@elements';
<Spinner />
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
import { Switch } from '@elements';
<Switch />
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
import { TabView } from '@elements';
<TabView>
<Comp1 tabLabel="Tab 1" />
<Comp2 tabLabel="Tab 2" />
</TabView>
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
<EmptyView
navigation={navigation}
route={route}
moduleName="RN_EXPO_BARCODE_SCANNER_BUILD"
/>
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
<ActionSheet
onPress={(buttonIndex) => events[buttonIndex]()}
options={options}
visible={isModalOpen}
icons={[<Icon name='xxxx' />]}
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
<AddressLabel
className=”some.style.class”
address={address}
/>
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
<AddressLine
className=”some.style.class”
line={line}
/>
Properties
Property | Description | Type | Default |
---|---|---|---|
className | The name of the class with the defined style | string | undefined |
line | Line text | text | undefined |
AddressTitle
<AddressTitle title={title} />
Properties
Property | Description | Type | Default |
---|---|---|---|
title | Address title text | string | undefined |
PhoneNumber
<PhoneNumber phoneNumber={PhoneNumber} />
Properties
Property | Description | Type | Default |
---|---|---|---|
phoneNumber | Phone text | text | undefined |
Basket
CampaignSwiper
<CampaignSwiper items={campaigns} />
Properties
Property | Description | Type | Default |
---|---|---|---|
items | The campaigns object array used for the Swiper | array | [ ] |
BasketItem
<BasketItem
product={product}
handleChangeQuantity={handleChangeQuantity}
handleSubmitGiftNote={handleSubmitGiftNote}
handleRemoveGiftNote={handleRemoveGiftNote}
handleAddToFavourite={handleAddToFavourite}
isInFavourites={hasFavourite && isLogin && favourites.includes(product.pk)}
isLogin={isLogin}
navigation={navigation}
options={basketItem}
isFavouriteActive={hasFavourite && isLogin}
>
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
<CheckoutButton confirmBasket={confirmBasket} />
Properties
Property | Description | Type | Default |
---|---|---|---|
confirmBasket | The function that confirms the cart | Function | undefined |
CheckoutButtonPrice
<CheckoutButtonPrice amounts={amounts} />
Properties
Property | Description | Type | Default |
---|---|---|---|
amounts | The object that stores quantity | object | undefined |
ContinueShoppingButton
<ContinueShoppingButton navigation={navigation} />
Properties
Property | Description | Type | Default |
---|---|---|---|
navigation | Navigation object | object | undefined |
CouponCode
<CouponCode
voucherCode={voucherCode}
validation={validation}
apiError={apiError}
handleDiscount={handleDiscount}
/>
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
<DeleteModal
isModalOpen={isModalOpen}
pending={pending}
product={product}
closeModal={closeModal}
removeItem={removeItem}
isInFavourites={isInFavourites}
isFavouriteActive={isFavouriteActive}
type={type}
animationType={animationType}
handleMoveItemToFavourite={handleMoveItemToFavourite}
/>
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
<Discounts discounts={discounts} />
Properties
Property | Description | Type | Default |
---|---|---|---|
discounts | Discounts array | Array | undefined |
ItemBrand
<ItemBrand product={product} />
Properties
Property | Description | Type | Default |
---|---|---|---|
product | Product object | object | undefined |
ItemGiftNote
<ItemGiftNote
product={product}
handleSubmitGiftNote={handleSubmitGiftNote}
handleRemoveGiftNote={handleRemoveGiftNote}
/>
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
<ItemImage
navigation={navigation}
product={product}
$imageWidth={imageWidth}
$imageHeight={imageHeight}
/>
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
<ItemName
navigation={navigation}
product={product}
/>
Properties
Property | Description | Type | Default |
---|---|---|---|
navigation | Navigation object | object | undefined |
product | Product object | object | undefined |
ItemPrice
<ItemPrice
options={options}
product={product}
/>
Properties
Property | Description | Type | Default |
---|---|---|---|
options | Price config object | object | undefined |
product | Product object | object | undefined |
ItemQuantityButtons
<ItemQuantityButtons
handleChangeQuantity={handleChangeQuantity}
product={product}
/>
Properties
Property | Description | Type | Default |
---|---|---|---|
handleChangeQuantity | The method triggered when the quantity of the product changes | Function | undefined |
product | Product object | object | undefined |
ItemRemoveButton
<ItemRemoveButton handleRemoveProduct={handleRemoveProduct} />
Properties
Property | Description | Type | Default |
---|---|---|---|
handleRemoveProduct | The method triggered when the product is removed | Function | undefined |
ItemRetailPrice
<ItemRetailPrice
options={options}
product={product}
/>
Properties
Property | Description | Type | Default |
---|---|---|---|
options | Retail price config object | object | undefined |
product | Product object | object | undefined |
ItemSku
<ItemSku product={product} />
Properties
Property | Description | Type | Default |
---|---|---|---|
product | Product object | object | undefined |
ItemSwipableContent
<ItemSwipableContent swipeToDelete={swipeToDelete} />
Properties
Property | Description | Type | Default |
---|---|---|---|
swipeToDelete | The status of the Swipe to Delete option | boolean | undefined |
ItemVariants
<ItemVariants product={product} />
Properties
Property | Description | Type | Default |
---|---|---|---|
product | Product object | object | undefined |
OrderSummaryTitle
<OrderSummaryTitle />
TotalAmount
<TotalAmount amounts={amounts} />
Properties
Property | Description | Type | Default |
---|---|---|---|
amounts | The object that stores quantity | object | undefined |
TotalCount
<TotalCount totalQuantity={totalQuantity} />
Properties
Property | Description | Type | Default |
---|---|---|---|
totalQuantity | The object that stores total quantity | object | undefined |
TotalDiscountAmount
<TotalDiscountAmount amounts={amounts} />
Properties
Property | Description | Type | Default |
---|---|---|---|
amounts | The object that stores total quantity | object | undefined |
TotalPayable
<TotalPayable amounts={amounts} />
Properties
Property | Description | Type | Default |
---|---|---|---|
amounts | The object that stores total quantity | object | undefined |
CarouselImageViewer
<CarouselImageViewer
images={images}
carouselOptions={carouselOptions}
carouselImageCropSizes={carouselImageCropSizes}
zoomViewerOptions={zoomViewerOptions}
zoomImageCropSizes={zoomImageCropSizes}
carouselImageWrapperClassName="className"
carouselImageClassName="className"
pagination={pagination}
carouselDotsContainerClassName={carouselDotsContainerClassName}
dotClassName={dotClassName}
dotClassNameActive={dotClassNameActive}
zoomViewerDotsContainerClassName={zoomViewerDotsContainerClassName}
zoomViewerCloseIconWrapperClassName={zoomViewerCloseIconWrapperClassName}
zoomViewerCloseIconClassName={zoomViewerCloseIconClassName}
zoomViewerLoadingRender={zoomViewerLoadingRender}
zoomViewerRenderHeader={zoomViewerRenderHeader}
zoomViewerRenderIndicator={zoomViewerRenderIndicator}
zoomViewerRenderFooter={zoomViewerRenderFooter}
defaultSlideIndex={defaultSlideIndex}
snapItem={snapItem}
/>
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
<ErrorBoundary>
…
…
…
<ErrorBoundary/>
Properties
Property | Description | Type | Default |
---|---|---|---|
children | The child component to be comprised by error boundary | React.Component | undefined |
Header
<Header
leftContent={leftContent}
bodyContent={bodyContent}
rightContent={rightContent}
body={body}
left={left}
right={right}
excludeLeft={excludeLeft}
excludeRight={excludeRight}
autoCenterBody={autoCenterBody}
/>
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
<ImageViewer
images={images}
swiperOptions={swiperOptions}
swiperImageCropSizes={swiperImageCropSizes}
zoomViewerOptions={zoomViewerOptions}
zoomImageCropSizes={zoomImageCropSizes}
swiperImageWrapperClassName="className"
swiperImageClassName="className"
dotClassName={dotClassName}
dotClassNameActive={dotClassNameActive}
zoomViewerDotsContainerClassName={zoomViewerDotsContainerClassName}
zoomViewerCloseIconWrapperClassName={zoomViewerCloseIconWrapperClassName}
zoomViewerCloseIconClassName={zoomViewerCloseIconClassName}
zoomViewerLoadingRender={zoomViewerLoadingRender}
zoomViewerRenderHeader={zoomViewerRenderHeader}
zoomViewerRenderIndicator={zoomViewerRenderIndicator}
zoomViewerRenderFooter={zoomViewerRenderFooter}
/>
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
<LanguageInfo
renderLabel={renderLabel}
label={label}
endLabel={endLabel}
navigation={navigation}
showSingle={showSingle}
/>
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
const TabBar = BottomTabBar(bottomTabBarObject)
#Properties
Property | Description | Type | Default |
---|---|---|---|
bottomTabBarObject | Bottom Tab Bar stack component | object | undefined |
SideBar
const Side = SideBar(sideBarObject)
Properties
Property | Description | Type | Default |
---|---|---|---|
sideBarObject | Side Bar stack component | object | undefined |
Order
Status
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
<Alert options={options} />
Properties
Property | Description | Type | Default |
---|---|---|---|
options | Alert options object | object | undefined |
NetworkModal
<NetworkModal isConnected={isConnected} />
Properties
Property | Description | Type | Default |
---|---|---|---|
isConnected | Internet connection status | boolean | undefined |
Popup
<Popup />
Price
<Price
price={price}
currency={currency}
className={className}
format={format}
/>
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
<ItemImage
imageWidth={imageWidth}
imageHeight={imageHeight}
product={product}
wrapperClassName={wrapperClassName}
imageClassName={imageClassName}
/>
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
<SnackBar />
PickerModal
<PickerModal
visible={visible}
handleModalVisibility={handleModalVisibility}
title={title}
iconName={iconName}
pickerItems={pickerItems}
onItemPicked={onItemPicked}
containerClassName={containerClassName}
itemsContainerClassName={itemsContainerClassName}
headerContainerClassName={headerContainerClassName}
headerCloseIconClassName={headerCloseIconClassName}
scrollViewClassName={scrollViewClassName}
pickerItemContainerClassName={pickerItemContainerClassName}
pickerItemTextClassName={pickerItemTextClassName}
/>
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
<AddedToCartModal
visible={visible}
{...restProps}
>
…
…
…
</AddedToCartModal>
Properties
Property | Description | Type | Default |
---|---|---|---|
visible | Modal visibility | boolean | undefined |
…restProps | The props to be transferred to child components | undefined |
ModalBasketButton
<AddedToCartModalBasketButton
navigation={navigation}
hideModal={hideModal}
/>
Properties
Property | Description | Type | Default |
---|---|---|---|
navigation | Modal visibility | boolean | undefined |
hideModal | The function used to close the modal | Function | undefined |
ModalCloseButton
<AddedToCartModalCloseButton
visible={visible}
decorationLine={decorationLine}
/>
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
<AddedToCartModalInfo
product={product}
quantity={quantity}
/>
Properties
Property | Description | Type | Default |
---|---|---|---|
quantity | Quantity | boolean | undefined |
product | Product object | object | undefined |
ModalTitle
<AddedToCartModalTitle />
Modals /
QuickAddToCart
<QuickAddToCart
validation={validation}
product={product}
validationReset={validationReset}
onVariantSelection={onVariantSelection}
isEnable={isEnable}
navigation={navigation}
colorVariantOptions={colorVariantOptions}
modalVariantOptions={modalVariantOptions}
modalVariantDrawerOptions={modalVariantDrawerOptions}
/>
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
<ContentDrawer
data={data}
variantSelection={variantSelection}
status={status}
closeModal={closeModal}
options={options}
/>
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
<ErrorModal
errorModal={errorModal}
onRequestClose={onRequestClose}
error={status}
/>
Properties
Property | Description | Type | Default |
---|---|---|---|
errorModal | Modal value | boolean | undefined |
onRequestClose | The method triggered when closing | Function | () => { } |
error | Error message | string | undefined |
ProductAddedToBasketModal
<ProductAddedToBasketModal
dispatch={dispatch}
hideAction={hideAction}
quantity={quantity}
navigation={navigation}
product={product}
visible={visible}
/>
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
<ProductAddedToFavouriteModal
dispatch={dispatch}
hideAction={hideAction}
navigation={navigation}
product={product}
visible={visible}
/>
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
<ProductValidationModal
validation={validation}
validationReset={validationReset}
isEnable={isEnable}
/>
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
<Variants
variants={variants}
status={status}
product={product}
navigation={navigation}
onSelect={onSelect}
colorVariantOptions={colorVariantOptions}
modalVariantOptions={modalVariantOptions}
modalVariantDrawerOptions={modalVariantDrawerOptions}
/>
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
<AddToCartButton
product={product}
pending={pending}
onPress={onPress}
/>
Properties
Property | Description | Type | Default |
---|---|---|---|
product | Product object | object | undefined |
pending | Pending status | boolean | undefined |
onPress | Press event | Function | undefined |
FavouriteButton
<FavouriteButton
favourite={favourite}
product={product}
removeFromFavouriteHandler={removeFromFavouriteHandler}
addToFavouriteHandler={addToFavouriteHandler}
navigation={navigation}
isLogin={isLogin}
pending={pending}
favouritePending={favouritePending}
/>
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
<NoStockInfo product={product} />
Properties
Property | Description | Type | Default |
---|---|---|---|
product | Product object | object | undefined |
ProductBrand
<ProductBrand product={product} />
Properties
Property | Description | Type | Default |
---|---|---|---|
product | Product object | object | undefined |
ProductPrice
<ProductPrice
product={product}
containerClassName={containerClassName}
contentClassName={contentClassName}
/>
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
<ProductRetailPrice
product={product}
containerClassName={containerClassName}
contentClassName={contentClassName}
/>
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
<ProductSku product={product} />
Properties
Property | Description | Type | Default |
---|---|---|---|
product | Product object | object | undefined |
ProductTitle
<ProductTitle product={product} />
Properties
Property | Description | Type | Default |
---|---|---|---|
product | Product object | object | undefined |
QuantityButtons
<QuantityButtons
product={product}
onPress={onPress}
quantity={quantity}
/>
Properties
Property | Description | Type | Default |
---|---|---|---|
product | Product object | object | undefined |
onPress | Press event | Function | undefined |
quantity | Quantity object | object | undefined |
ShareButton
<ShareButton route={route} />
Properties
Property | Description | Type | Default |
---|---|---|---|
route | Route object | object | undefined |
ProductList
<ProductList
items={items}
navigation={navigation}
itemTemplate={itemTemplate}
handleEndReached={handleEndReached}
onRefresh={onRefresh}
scrollToTop={scrollToTop}
numberOfColumns={numberOfColumns}
containerClassName={containerClassName}
contentContainerClassName={contentContainerClassName}
scrollToTopIconName={scrollToTopIconName}
scrollToTopButtonClassName={scrollToTopButtonClassName}
scrollToTopIconClassName={scrollToTopIconClassName}
ListEmptyComponent={ListEmptyComponent}
ListHeaderComponent={ListHeaderComponent}
ListFooterComponent={ListFooterComponent}
/>
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
<Promotion content={content} />
Properties
Property | Description | Type | Default |
---|---|---|---|
content | The content data placed within the component | Function | undefined |
Search
<Search
navigation={navigation}
route={route}
barcodeVisible={content}
/>
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
<AppleSignIn login={login} />
Properties
Property | Description | Type | Default |
---|---|---|---|
login | Login event | Function | undefined |
FacebookSignIn
<FacebookSignIn login={login} />
Properties
Property | Description | Type | Default |
---|---|---|---|
login | Login event | Function | undefined |
SignInWithFaceId
<SignInWithFaceId login={login} />
Properties
Property | Description | Type | Default |
---|---|---|---|
login | Login event | Function | undefined |
UnsupportedModule
<UnsupportedModule moduleName={moduleName} />
Properties
Property | Description | Type | Default |
---|---|---|---|
moduleName | The name of the unsupported module | string | undefined |
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
dispatch(this.actionRunner([this.cityAction()], _OVERWRITE));
-fetchTownship
dispatch(this.actionRunner([this.townshipAction(cityId)], _OVERWRITE));
-fetchDistrict
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
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 })...
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
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
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
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
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
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
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
{
error: {},
pending: true,
infinitePending: false,
next: '',
success: false,
initialSuccess: false,
address: [],
city: [],
township: [],
district: [],
country: {},
isChanged: false,
}
Auth
INITIAL STATE
{
error: {},
indexCompleted: false,
loginCompleted: false,
pending: false,
loginSuccess: false,
logoutPending: false,
auth: {
user: false,
},
forgotPasswordError: [],
forgotPasswordPending: false,
forgotPasswordSuccess: false
}
Basket
INITIAL STATE
{
error: {},
pending: true,
initialSuccess: false,
isUpdate: false,
productAddedModal: false,
errorModal: false,
basket: {},
favourites: [],
favouritePending: false,
favouriteError: {},
}
Checkout
INITIAL STATE
{
error: {},
pending: false,
indexPage: {},
guestLogin: {
pending: false,
isLogin: false,
},
}
Combine Detail
INITIAL STATE
{
error: [],
pending: true,
product: {},
group_products: [],
}
Contact
INITIAL STATE
{
error: {},
pending: true,
isSuccess: false,
subjects: [],
}
Coupons
INITIAL STATE
{
error: [],
pending: true,
basketOffers: [],
discountOffers: [],
expiredOffers: [],
futureOffers: [],
}
Favourite List
INITIAL STATE
{
error: {},
pending: true,
infinitePending: false,
initialSuccess: false,
productAddedModal: false,
errorModal: false,
count: 0,
next: undefined,
previous: undefined,
favourites: [],
infiniteFetchError: false,
}
Map Marker
INITIAL STATE
{
pending: true,
error: {},
markers: [],
nearest: false,
}
Menu
INITIAL STATE
{
error: [],
pending: true,
categories: [],
}
Product Detail
INITIAL STATE
{
error: [],
pending: true,
favouriteError: {},
initialSuccessAt: 0,
favourite: undefined,
favouritePending: false,
addedToFavouriteModal: false,
errorModalFavourite: false,
product: {},
variantValidation: false,
}
Product List
INITIAL STATE
{
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
{
error: [],
pending: false,
email: {},
isSuccess: false,
}
Notifications - INITIAL STATE
{
error: [],
pending: false,
profile: {},
}
Password - INITIAL STATE
{
error: [],
pending: false,
password: {},
isSuccess: false,
}
Profile - INITIAL STATE
{
error: [],
pending: true,
isSuccess: false,
profile: {},
smsVerificationModal: false,
}
Web Checkout
INITIAL STATE
{
completed: false,
url: null,
sucess: {
pending: true,
order: {},
error: {},
},
}
Widgets
INITIAL STATE
{
error: [],
pending: false,
widgets: [],
}
Orders
INITIAL STATE
{
orders: [],
orderDetail: {},
error: {},
errorDetail: {},
reasonError: {},
pending: true,
pendingOrderDetail: true,
pendingReasons: true,
initialSuccess: false,
infinitePending: false,
reasons: {},
cancellationRequest: false,
next: '',
}
OldOrders
INITIAL STATE
{
oldOrders: [],
oldOrderDetail: {},
error: {},
pending: true,
pendingOldOrderDetail: true,
initialSuccess: false,
infinitePending: false,
next: '',
}
Register
INITIAL STATE
{
error: {},
pending: false,
registerSuccesful: false,
smsVerificationModal: false,
}
Search
INITIAL STATE
{
error: [],
pending: false,
results: [],
}
Page Containers
Hooks
useWidgetFetch
These are the hooks 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.
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.
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 };