ordering-ui-react-native 0.15.78 → 0.15.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.78",
+  "version": "0.15.81",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/navigators/HomeNavigator.tsx

@@ -20,6 +20,7 @@ import Help from '../pages/Help'
 import HelpOrder from '../pages/HelpOrder'
 import HelpGuide from '../pages/HelpGuide'
 import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
+import Sessions from '../pages/Sessions';
 import Splash from '../pages/Splash';
 import ProductDetails from '../pages/ProductDetails';
 const Stack = createStackNavigator();
@@ -164,6 +165,11 @@ const HomeNavigator = (e : any) => {
                     component={HelpAccountAndPayment}
                     options={{ headerShown: false }}
                   />
+                  <Stack.Screen
+                    name="Sessions"
+                    component={Sessions}
+                    options={{ headerShown: false }}
+                  />
                 </>
               )}
             </>

package/src/pages/Sessions.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Container } from '../../themes/original/src/layouts/Container'
+import { Sessions as SessionsController } from '../../themes/original/src/components/Sessions'
+
+interface Props {
+  navigation: any;
+  route: any;
+}
+
+const Sessions = (props: Props) => {
+  const sessionsProps = {
+    ...props
+  }
+
+  return (
+    <Container>
+      <SessionsController {...sessionsProps} />
+    </Container>
+  )
+}
+
+export default Sessions

package/themes/kiosk/src/components/BusinessMenu/index.tsx

@@ -40,7 +40,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
   const clearCartWhenTimeOut = () => {
     if (cart?.uuid) clearCart(cart?.uuid)
   }
-  const timerId = useRef(false);
+  const timerId: any = useRef(false);
 
   const clearInactivityTimeout = () =>{ 
     clearTimeout(timerId.current);
@@ -93,6 +93,17 @@ const BusinessMenu = (props:any): React.ReactElement => {
     else showCartBottomSheet();
   }
 
+  const handleRedirect = () => {
+    navigation.navigate('DeliveryType', {
+      callback: () => {
+        navigation.navigate('Business');
+      },
+      goBack: () => {
+        navigation.goBack();
+      },
+    });
+  };
+
   return (
     <View style={{
       flex: 1,
@@ -114,6 +125,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
               title={t('MENU_V21', 'Menu')}
               onActionLeft={goToBack}
               includeOrderTypeSelector
+              onClickTypes={handleRedirect}
               rightComponent={cart && (
                 <TouchableOpacity
                   style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
@@ -144,7 +156,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
         </Container>
       </View>
 
-        <View
+        {/* <View
           style={{
             flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
             display: bottomSheetVisibility ? 'flex' : 'none'
@@ -155,7 +167,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
             resetInactivityTimeout={resetInactivityTimeout}
             clearInactivityTimeout={clearInactivityTimeout}
           />
-        </View>
+        </View> */}
     </View>
   );
 };

package/themes/kiosk/src/components/Cart/index.tsx

@@ -281,7 +281,7 @@ const CartUI = (props: any) => {
                     <OSRow>
                       <OText>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                       </OText>
                     </OSRow>
                     <OText>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>

package/themes/kiosk/src/components/NavBar/index.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 import styled from 'styled-components/native'
 import { OIcon, OButton, OText } from '../shared'
-import { ImageStyle, TextStyle, View, Platform } from 'react-native'
-import { OrderTypeSelector } from '../OrderTypeSelector'
-import { useConfig, useLanguage } from 'ordering-components/native'
+import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
+import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
@@ -54,13 +53,15 @@ interface Props {
   paddingTop?: number,
   includeOrderTypeSelector?: boolean,
   imgLeftStyle?: ImageStyle
+  onClickTypes?: any
 }
 
 const NavBar = (props: Props) => {
   const theme = useTheme();
-  const [{ configs }] = useConfig();
+  const [orderState] = useOrder()
   const [, t] = useLanguage();
-  const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || [];
+
+  const selectedOrderType = orderState?.options?.type;
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
@@ -121,7 +122,15 @@ const NavBar = (props: Props) => {
           }}
         >
           <OText style={{ paddingRight: 5 }}>{t('THIS_ORDER_IS_TO', 'This order is to')}</OText>
-          <OrderTypeSelector configTypes={configTypes} />
+          <TouchableOpacity
+            activeOpacity={1}
+            onPress={props.onClickTypes}
+          >
+            <OText color={theme.colors.primary}>
+              {selectedOrderType === 2 && t('TAKE_OUT', 'Take out')}
+              {selectedOrderType === 3 && t('EAT_IN', 'Eat in')}
+            </OText>
+          </TouchableOpacity>
         </View>
       )}
 

package/themes/kiosk/src/components/OrderDetails/index.tsx

@@ -396,8 +396,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       </OSTable>
 
       {order?.products?.length && (
-        <OSTable>
-          <View>
+        <>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between'
+            }}
+          >
             <OText
               weight="bold"
               mBottom={15}
@@ -405,29 +410,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               {`${order?.products?.length} ${t('ITEMS', 'items')}`}
             </OText>
 
-            <GridContainer style={{ maxWidth: orientationState?.dimensions?.width * 0.6 }}>
-              {order?.products.map((product: Product, i: number) => (
-                <OImage
-                  key={product?.id || i}
-                  source={{ uri: product?.images || '' }}
-                  resizeMode="cover"
-                  height={80}
-                  width={80}
-                  borderRadius={8}
-                  style={{ marginEnd: 10, marginBottom: 10 }}
-                />
-              ))}
-            </GridContainer>
+            <OText
+              color={theme.colors.primary}
+              weight="bold"
+            >
+              {parsePrice((order?.summary?.total || order?.total) - (order?.summary?.discount || order?.discount))}
+            </OText>
           </View>
-
-          <OText
-            color={theme.colors.primary}
-            weight="bold"
-            mRight={30}
-          >
-            {parsePrice((order?.summary?.total || order?.total) - (order?.summary?.discount || order?.discount))}
-          </OText>
-        </OSTable>
+          <OSTable>
+          <GridContainer style={{ maxWidth: orientationState?.dimensions?.width * 0.6 }}>
+            {order?.products.map((product: Product, i: number) => (
+              <OImage
+                key={product?.id || i}
+                source={{ uri: product?.images || '' }}
+                resizeMode="cover"
+                height={80}
+                width={80}
+                borderRadius={8}
+                style={{ marginEnd: 10, marginBottom: 10 }}
+              />
+            ))}
+          </GridContainer>
+          </OSTable>
+        </>
       )}
 
       <OrderBill>
@@ -520,7 +525,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <OSRow>
                 <OText>
                   {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                 </OText>
               </OSRow>
               <OText>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>

package/themes/kiosk/src/components/PaymentOptions/index.tsx

@@ -189,7 +189,7 @@ const PaymentOptionsUI = (props: any) => {
 
   return (
     <>
-      <Spinner visible={isLoading || placing} />
+      <Spinner visible={isLoading || placing || paymethodsList?.loading} />
 
       <Container nestedScrollEnabled>
         <NavBar

package/themes/kiosk/src/components/ProductItemAccordion/index.tsx

@@ -103,7 +103,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
     const pos = position ? `(${position})` : ''
-    return `${quantity} x ${name} ${pos} +${price}`
+    return `${quantity} x ${name} ${pos} ${price}`
   }
 
   /*useEffect(() => {
@@ -210,7 +210,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                             quantity: suboption.quantity,
                             name: suboption.name,
                             position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-                            price: parsePrice(suboption.price)
+                            price: suboption.price > 0 ? `+${parsePrice(suboption.price)}` : parsePrice(suboption.price)
                           })}
                         </OText>
                       </ProductSubOption>

package/themes/kiosk/src/components/ProductOption/index.tsx

@@ -32,7 +32,7 @@ const ProductOptionUI = (props: any) => {
         <OText
           size={26}
           weight="bold"
-          style={{ width: '80%' }}
+          style={{ maxWidth: '80%' }}
         >
           {option.name}
         </OText>

package/themes/kiosk/src/components/ProductOptionSubOption/index.tsx

@@ -149,7 +149,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
             size={16}
             weight="bold"
           >
-            + {parsePrice(price)}
+          {price > 0 && '+'} {parsePrice(price)}
           </OText>
       </RightSide>
     </Container>

package/themes/original/index.tsx

@@ -77,6 +77,7 @@ import { StripeCardsList } from './src/components/StripeCardsList';
 import { ProductIngredient } from './src/components/ProductIngredient';
 import { ProductOption } from './src/components/ProductOption';
 import { ProductOptionSubOption } from './src/components/ProductOptionSubOption';
+import { Sessions } from './src/components/Sessions';
 import { SingleProductReview } from './src/components/SingleProductReview';
 import { LogoutButton } from './src/components/LogoutButton';
 import { UserFormDetailsUI } from './src/components/UserFormDetails';
@@ -227,6 +228,7 @@ export {
 	ProductIngredient,
 	ProductOption,
 	ProductOptionSubOption,
+	Sessions,
 	SingleProductReview,
 	LogoutButton,
 	UserFormDetailsUI,

package/themes/original/src/components/AddressForm/index.tsx

@@ -510,7 +510,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 					onActionLeft={goToBack}
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
-					style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+					style={{ flexDirection: 'column', alignItems: 'flex-start', marginTop: Platform.OS === 'ios' ? 0 : 30 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginRight: 0, marginLeft: 0 }}
 				/>

package/themes/original/src/components/AddressList/index.tsx

@@ -158,7 +158,7 @@ const AddressListUI = (props: AddressListParams) => {
 					titleAlign={'center'}
 					onActionLeft={goToBack}
 					showCall={false}
-					style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20 }}
+					style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
 				/>
 			)}
 			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile || isProfile)) && (
@@ -179,7 +179,7 @@ const AddressListUI = (props: AddressListParams) => {
 								showCall={false}
 								btnStyle={{ paddingLeft: 0 }}
 								paddingTop={0}
-								style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+								style={{ flexDirection: 'column', alignItems: 'flex-start', marginTop: Platform.OS === 'ios' ? 0 : 40 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
 							/>

package/themes/original/src/components/Promotions/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { PromotionsController, useLanguage, useUtils, useEvent } from 'ordering-components/native'
+import { PromotionsController, useLanguage, useUtils } from 'ordering-components/native'
 import {
     PromotionsContainer,
     SingleOfferContainer,
@@ -17,9 +17,11 @@ import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, ScrollView } from 'react-native'
+import { View, StyleSheet, ScrollView, Platform } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import { PromotionParams } from '../../types'
+import { Container } from '../../layouts/Container'
+
 const PromotionsUI = (props: PromotionParams) => {
     const {
         navigation,
@@ -85,139 +87,137 @@ const PromotionsUI = (props: PromotionParams) => {
             : t('SERVICE_FEE', 'Service fee')
 
     return (
-        <PromotionsContainer>
+        <Container noPadding>
             <NavBar
-                onActionLeft={() => navigation.goBack()}
-                btnStyle={{ paddingLeft: 0 }}
-                paddingTop={20}
-                style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
                 title={t('PROMOTIONS', 'Promotions')}
                 titleAlign={'center'}
-                titleStyle={{ fontSize: 16, marginRight: 0, marginLeft: 0, marginBottom: 10 }}
-                titleWrapStyle={{ paddingHorizontal: 0 }}
+                onActionLeft={() => navigation.goBack()}
+                showCall={false}
             />
-            <SearchBarContainer>
-                <SearchBar
-                    placeholder={t('SEARCH_OFFERS', 'Search offers')}
-                    onSearch={handleSearchValue}
-                />
-            </SearchBarContainer>
+            <PromotionsContainer>
+                <SearchBarContainer>
+                    <SearchBar
+                        placeholder={t('SEARCH_OFFERS', 'Search offers')}
+                        onSearch={handleSearchValue}
+                    />
+                </SearchBarContainer>
 
-            {offersState?.loading && (
-                <>
-                    {[...Array(5).keys()].map((key, i) => (
-                        <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
-                            <PlaceholderLine height={10} width={45} />
-                            <PlaceholderLine height={10} width={60} />
-                            <PlaceholderLine height={10} width={75} />
-                        </Placeholder>
-                    ))}
-                </>
-            )}
-            {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
-                <NotFoundSource
-                    content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
-                />
-            )}
-            <ScrollView>
-                {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer: any) => (
-                    <SingleOfferContainer key={offer.id}>
-                        <OfferInformation>
-                            <OText style={styles.offerTitle} numberOfLines={2}>{offer?.name}</OText>
-                            {offer?.description && (
-                                <OText style={styles.offerDescription} numberOfLines={2}>{offer?.description}</OText>
-                            )}
-                            <OText style={styles.offerExtraInfo}>
-                                {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
-                            </OText>
-                            <AvailableBusinesses>
-                                <OText style={styles.offerExtraInfo} numberOfLines={1}>
-                                    {t('APPLY_FOR', 'Apply for')}:
-                                    {offer.businesses.map((business: any, i: number) => (
-                                        <React.Fragment key={i}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
-                                    ))}
+                {offersState?.loading && (
+                    <>
+                        {[...Array(5).keys()].map((key, i) => (
+                            <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
+                                <PlaceholderLine height={10} width={45} />
+                                <PlaceholderLine height={10} width={60} />
+                                <PlaceholderLine height={10} width={75} />
+                            </Placeholder>
+                        ))}
+                    </>
+                )}
+                {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
+                    <NotFoundSource
+                        content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
+                    />
+                )}
+                <ScrollView>
+                    {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer: any) => (
+                        <SingleOfferContainer key={offer.id}>
+                            <OfferInformation>
+                                <OText style={styles.offerTitle} numberOfLines={2}>{offer?.name}</OText>
+                                {offer?.description && (
+                                    <OText style={styles.offerDescription} numberOfLines={2}>{offer?.description}</OText>
+                                )}
+                                <OText style={styles.offerExtraInfo}>
+                                    {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
                                 </OText>
-                            </AvailableBusinesses>
-                        </OfferInformation>
-                        <OButton
-                            onClick={() => handleClickOffer(offer)}
-                            text={t('VIEW', 'View')}
-                            style={styles.buttonStyle}
-                            textStyle={{ fontSize: 10, color: '#fff', flexWrap: 'nowrap' }}
-                        />
-                    </SingleOfferContainer>
-                ))}
-            </ScrollView>
-            <OModal
-                open={openModal}
-                onClose={() => setOpenModal(false)}
-                entireModal
+                                <AvailableBusinesses>
+                                    <OText style={styles.offerExtraInfo} numberOfLines={1}>
+                                        {t('APPLY_FOR', 'Apply for')}:
+                                        {offer.businesses.map((business: any, i: number) => (
+                                            <React.Fragment key={i}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
+                                        ))}
+                                    </OText>
+                                </AvailableBusinesses>
+                            </OfferInformation>
+                            <OButton
+                                onClick={() => handleClickOffer(offer)}
+                                text={t('VIEW', 'View')}
+                                style={styles.buttonStyle}
+                                textStyle={{ fontSize: 10, color: '#fff', flexWrap: 'nowrap' }}
+                            />
+                        </SingleOfferContainer>
+                    ))}
+                </ScrollView>
+                <OModal
+                    open={openModal}
+                    onClose={() => setOpenModal(false)}
+                    entireModal
 
-                title={``}
-            >
-                <View style={{ padding: 20 }}>
-                    <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
-                        {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
-                    </OText>
-                    <OfferData>
-                        {offerSelected?.type === 2 && (
-                            <Code>
-                                <OText>{t('YOUR_CODE', 'Your code')}</OText>
-                                <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
-                            </Code>
-                        )}
-                        <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
-                        {offerSelected?.auto && (
-                            <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
-                        )}
-                        {offerSelected?.minimum && (
-                            <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purchase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
-                        )}
-                        {offerSelected?.max_discount && (
-                            <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
-                        )}
-                        {offerSelected?.description && (
-                            <OText>{offerSelected?.description}</OText>
-                        )}
-                    </OfferData>
-                    <OText style={{ marginTop: 10, marginBottom: 10 }}>
-                        {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
-                    </OText>
-                    <ScrollView style={{ height: '75%' }}>
-                        {offerSelected?.businesses?.map((business: any) => {
-                            return (
-                                <SingleBusinessOffer key={business.id}>
-                                    {business?.logo ? (
-                                        <FastImage
-                                            style={styles.productStyle}
-                                            source={{
-                                                uri: optimizeImage(business?.logo, 'h_250,c_limit'),
-                                                priority: FastImage.priority.normal,
-                                            }}
-                                            resizeMode={FastImage.resizeMode.cover}
-                                        />
-                                    ) : (
-                                        <OIcon
-                                            src={theme?.images?.dummies?.product}
-                                            style={styles.productStyle}
-                                        />
-                                    )}
-                                    <BusinessInfo>
-                                        <OText style={{ maxWidth: '60%' }}>{business.name}</OText>
-                                        <OButton
-                                            onClick={() => handleBusinessClick(business)}
-                                            text={t('GO_TO_BUSINESSS', 'Go to business')}
-                                            style={styles.modalButtonStyle}
-                                            textStyle={{ fontSize: 10, color: '#fff' }}
-                                        />
-                                    </BusinessInfo>
-                                </SingleBusinessOffer>
-                            )
-                        })}
-                    </ScrollView>
-                </View>
-            </OModal>
-        </PromotionsContainer>
+                    title={``}
+                >
+                    <View style={{ padding: 20 }}>
+                        <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
+                            {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
+                        </OText>
+                        <OfferData>
+                            {offerSelected?.type === 2 && (
+                                <Code>
+                                    <OText>{t('YOUR_CODE', 'Your code')}</OText>
+                                    <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
+                                </Code>
+                            )}
+                            <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
+                            {offerSelected?.auto && (
+                                <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
+                            )}
+                            {offerSelected?.minimum && (
+                                <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purchase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
+                            )}
+                            {offerSelected?.max_discount && (
+                                <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
+                            )}
+                            {offerSelected?.description && (
+                                <OText>{offerSelected?.description}</OText>
+                            )}
+                        </OfferData>
+                        <OText style={{ marginTop: 10, marginBottom: 10 }}>
+                            {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
+                        </OText>
+                        <ScrollView style={{ height: '75%' }}>
+                            {offerSelected?.businesses?.map((business: any) => {
+                                return (
+                                    <SingleBusinessOffer key={business.id}>
+                                        {business?.logo ? (
+                                            <FastImage
+                                                style={styles.productStyle}
+                                                source={{
+                                                    uri: optimizeImage(business?.logo, 'h_250,c_limit'),
+                                                    priority: FastImage.priority.normal,
+                                                }}
+                                                resizeMode={FastImage.resizeMode.cover}
+                                            />
+                                        ) : (
+                                            <OIcon
+                                                src={theme?.images?.dummies?.product}
+                                                style={styles.productStyle}
+                                            />
+                                        )}
+                                        <BusinessInfo>
+                                            <OText style={{ maxWidth: '60%' }}>{business.name}</OText>
+                                            <OButton
+                                                onClick={() => handleBusinessClick(business)}
+                                                text={t('GO_TO_BUSINESSS', 'Go to business')}
+                                                style={styles.modalButtonStyle}
+                                                textStyle={{ fontSize: 10, color: '#fff' }}
+                                            />
+                                        </BusinessInfo>
+                                    </SingleBusinessOffer>
+                                )
+                            })}
+                        </ScrollView>
+                    </View>
+                </OModal>
+            </PromotionsContainer>
+        </Container>
     )
 }
 

package/themes/original/src/components/Sessions/index.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react'
+import { View, TouchableOpacity } from 'react-native'
+import { useLanguage, useSession, useUtils, Sessions as SessionsController } from 'ordering-components/native'
+import NavBar from '../NavBar'
+import { SessionsParams } from '../../types'
+import { OAlert } from '../../../../../src/components/shared'
+import { OButton, OIcon, OText } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import AntIcon from 'react-native-vector-icons/AntDesign'
+
+import {
+  SessionsWrapper,
+  SessionItem,
+  DurationWrapper
+} from './styles'
+
+export const SessionsUI = (props: SessionsParams) => {
+  const {
+    navigation,
+    sessionsList,
+    actionState,
+    handleDeleteSession,
+    handleDeleteAllSessions
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+  const [{ parseDate }] = useUtils()
+	const theme = useTheme()
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+  const onDeleteSession = (session: any) => {
+    setConfirm({
+      open: true,
+      title: t('WEB_APPNAME', 'Ordering'),
+      content: [t('QUESTION_DELETE_SESSION', 'Are you sure to delete this session?')],
+      handleOnAccept: () => {
+        handleDeleteSession(session)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  const onDeleteAllSessions = (isOldUser: any, deleteCurrent: any) => {
+    setConfirm({
+      open: true,
+      title: t('WEB_APPNAME', 'Ordering'),
+      content:
+        isOldUser
+          ? [t('QUESTION_ENABLE_ALL_SESSIONS', 'Are you sure to enable all sessions?')]
+          : deleteCurrent
+            ? [t('QUESTION_DELETE_ALL_SESSIONS', 'Are you sure that you want to delete all sessions?')]
+            : [t('QUESTION_DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Are you sure that you want to delete all sessions except current?')],
+      handleOnAccept: () => {
+        handleDeleteAllSessions(deleteCurrent)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  return (
+    <>
+      <NavBar
+        title={t('SESSIONS', 'Sessions')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        paddingTop={10}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+      {user?.session_strategy === 'jwt_session' ? (
+        <>
+          {sessionsList.loading ? (
+            [...Array(5).keys()].map(i => (
+              <SessionItem key={i}>
+                <Placeholder Animation={Fade}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <View style={{ flex: 1}}>
+                      <PlaceholderLine width={40} />
+                      <PlaceholderLine width={40} />
+                    </View>
+                    <PlaceholderLine width={5}/>
+                  </View>
+                </Placeholder>
+              </SessionItem>
+            ))
+          ) : (
+            sessionsList.sessions.length > 0 ? (
+              <SessionsWrapper>
+                {sessionsList.sessions.map((session: any) => (
+                  <SessionItem key={session.id}>
+                    <DurationWrapper>
+                      <OText>{parseDate(session.created_at)}</OText>
+                      <OText>{parseDate(session.valid_thru)}</OText>
+                    </DurationWrapper>
+                    {session.current && (
+                      <OText mLeft={15} style={{ flex: 1 }}>({t('CURRENT', 'Current')})</OText>
+                    )}
+                    <TouchableOpacity
+                      onPress={() => onDeleteSession(session)}
+                    >
+                      <AntIcon name='close' size={16} color={theme.colors.red} />
+                    </TouchableOpacity>
+                  </SessionItem>
+                ))}
+                <OButton
+                  text={t('DELETE_ALL_SESSIONS', 'Delete all sessions')}
+                  isDisabled={actionState.loading}
+                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  onClick={() => onDeleteAllSessions(false, true)}
+                  style={{ borderRadius: 7.6, marginTop: 30 }}
+                />
+                <OButton
+                  text={t('DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Delete all sessions except current')}
+                  isDisabled={actionState.loading}
+                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  onClick={() => onDeleteAllSessions(false, false)}
+                  style={{ borderRadius: 7.6, marginTop: 20 }}
+                />
+              </SessionsWrapper>
+             ) : (
+              <OText>{t('YOU_DONT_HAVE_ANY_SESSIONS', 'You don\'t have any sessions')}</OText>
+            )
+          )}
+        </>
+      ) : (
+        <View>
+          <OText>
+            {t('YOU_DONT_HAVE_ENABLED_THE_SESSIONS', 'You don\'t have enabled the sessions, please active them to have a better control of your sessions.')}
+          </OText>
+          <OButton
+            text={t('ACTIVE_SESSIONS', 'Active sessions')}
+            isDisabled={actionState.loading}
+            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+            onClick={() => onDeleteAllSessions(true, false)}
+            style={{ borderRadius: 7.6, marginTop: 20 }}
+          />
+        </View>
+      )}
+      <OAlert
+        open={confirm.open}
+        title={confirm.title}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      />
+    </>
+  )
+}
+
+export const Sessions = (props: SessionsParams) => {
+  const sessionsProps = {
+    ...props,
+    UIComponent: SessionsUI
+  }
+  return <SessionsController {...sessionsProps} />
+}

package/themes/original/src/components/Sessions/styles.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components/native'
+
+export const SessionsWrapper = styled.View`
+`
+export const SessionItem = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-vertical: 15px;
+  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
+  border-bottom-width: 1px;
+`
+export const DurationWrapper = styled.View`
+  /* flex-direction: row; */
+`

package/themes/original/src/components/UpsellingProducts/index.tsx

@@ -163,7 +163,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const UpsellingContent = () => {
 		return (
 			<>
-				<View style={{ ...styles.headerItem, flex: 1 }}>
+				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 70 }}>
 					<OButton
 						imgLeftSrc={theme.images.general.arrow_left}
 						imgRightSrc={null}
@@ -172,7 +172,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 						imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
 					/>
 				</View>
-				<ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
+				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
 					{productsList.length > 0 &&
 						<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
 							<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>

package/themes/original/src/components/UserProfile/index.tsx

@@ -17,6 +17,7 @@ import { LanguageSelector } from '../LanguageSelector'
 import MessageCircle from 'react-native-vector-icons/AntDesign'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import FastImage from 'react-native-fast-image'
 import { OAlert } from '../../../../../src/components/shared'
 
@@ -214,6 +215,10 @@ const ProfileListUI = (props: ProfileParams) => {
 						<OIcon src={theme.images.general.ic_help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>
 					</ListItem>
+					<ListItem onPress={() => navigation.navigate('Sessions')} activeOpacity={0.7}>
+						<Ionicons name='md-list-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('SESSIONS', 'Sessions')}</OText>
+					</ListItem>
 				</Actions>
 
 				<Actions>

package/themes/original/src/components/UserProfileForm/index.tsx

@@ -283,7 +283,7 @@ const ProfileUI = (props: ProfileParams) => {
 				titleAlign={'center'}
 				onActionLeft={() => navigation.goBack()}
 				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 }}
+				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 , marginTop: Platform.OS === 'ios' ? 50 : 40 }}
 			/>
 			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
 				<Container noPadding>

package/themes/original/src/types/index.tsx

@@ -591,3 +591,10 @@ export interface PromotionParams {
     offerSelected: any,
     setOfferSelected: any,
 }
+export interface SessionsParams {
+	navigation: any,
+	sessionsList: any,
+    actionState: any,
+    handleDeleteSession: any,
+    handleDeleteAllSessions: any
+}