ordering-ui-react-native 0.15.48 → 0.15.49-release

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

@@ -53,5 +53,6 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.21,
     shadowRadius: 5,
+    elevation: 16
   }
 })

package/themes/kiosk/src/components/DrawerView/styles.tsx

@@ -19,12 +19,12 @@ export const WrapperFloatBtn = styled.View`
   top: 10%;
   right: ${(props: any) => props.outside ? 11 : 58}%;
   z-index: 20002;
-  elevation: 11;
+  elevation: 17;
 `;
 
 export const IconControl = styled.TouchableOpacity`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px;
   border-radius: 8px;
-  elevation: 11;
+  elevation: 17;
 `;

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

@@ -1,10 +1,10 @@
 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};
   padding: 10px 0px 20px 0px;
@@ -54,38 +54,39 @@ 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 }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -121,11 +122,19 @@ 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>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

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

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

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

@@ -23,6 +23,7 @@ import {
   Table,
   OrderBill,
   Total,
+  OSRow,
 } from './styles'
 import { OrderDetailsParams, Product } from '../../types'
 import { Container } from '../../layouts/Container';
@@ -178,6 +179,20 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setIsLoading(false)
   }
 
+  const getIncludedTaxes = () => {
+    if (order?.taxes?.length === 0) {
+      return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
+    } else {
+      return order?.taxes.reduce((taxIncluded: number, tax: any) => {
+        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
+  const getIncludedTaxesDiscounts = () => {
+    return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
   useEffect(() => {
     const backAction = () => {
       Alert.alert(`${t('HOLD_ON', 'Hold on')}!`, `${t('ARE_YOU_SURE_YOU_WANT_TO_GO_BACK', 'Are you sure you want to go back')}?`, [
@@ -209,7 +224,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     const getCustomerName = async () => {
       try {
         const { customerName: name } = await _retrieveStoreData('customer_name')
-          setCustomerName(name)
+        setCustomerName(name)
       } catch (e) {
         if (e) {
           setCustomerName(null)
@@ -217,8 +232,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       }
     }
     getCustomerName()
-    const redirectHome = setTimeout(() =>{
-      _setStoreData('customer_name', {customerName: ''});
+    const redirectHome = setTimeout(() => {
+      _setStoreData('customer_name', { customerName: '' });
       navigation.reset({
         routes: [{ name: 'Intro' }],
       });
@@ -345,7 +360,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       <OButton
         text={`${t('YOU_ARE_DONE', 'You are done! Click to close')}!`}
         onClick={() => {
-          _setStoreData('customer_name', {customerName: ''});
+          _setStoreData('customer_name', { customerName: '' });
           navigation.reset({
             routes: [{ name: 'Intro' }],
           });
@@ -380,9 +395,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         </View>
       </OSTable>
 
-      {order?.products?.length && (
-        <OSTable>
-          <View>
+      {order?.products?.length > 0 && (
+        <>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between'
+            }}
+          >
             <OText
               weight="bold"
               mBottom={15}
@@ -390,75 +410,164 @@ 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>
         <Table>
           <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText>
-            {parsePrice(isTaxIncluded
-              ? (order?.summary?.subtotal + order?.summary?.tax) ?? 0
-              : order?.summary?.subtotal ?? 0
-            )}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
           </OText>
         </Table>
-        {order?.summary?.discount > 0 && (
+        {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
           <Table>
             {order?.offer_type === 1 ? (
               <OText>
                 {t('DISCOUNT', 'Discount')}
-                <OText>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</OText>
+                <OText>{`(${verifyDecimals(
+                  order?.offer_rate,
+                  parsePrice,
+                )}%)`}</OText>
               </OText>
             ) : (
               <OText>{t('DISCOUNT', 'Discount')}</OText>
             )}
-            <OText>- {parsePrice(order?.summary?.discount)}</OText>
+            <OText>
+              - {parsePrice(order?.summary?.discount || order?.discount)}
+            </OText>
           </Table>
         )}
+        {
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText>- {parsePrice(offer?.summary?.discount)}</OText>
+            </Table>
+          ))
+        }
         {order?.summary?.subtotal_with_discount > 0 && order?.summary?.discount > 0 && order?.summary?.total >= 0 && (
           <Table>
             <OText>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
-            <OText>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
-          </Table>
-        )}
-        {order?.tax_type !== 1 && (
-          <Table>
-            <OText>
-              {t('TAX', 'Tax')}
-              {`(${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%)`}
-            </OText>
-            <OText>{parsePrice(order?.summary?.tax)}</OText>
+            {order?.tax_type === 1 ? (
+              <OText>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+            ) : (
+              <OText>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+            )}
           </Table>
         )}
+        {
+          order?.taxes?.length === 0 && order?.tax_type === 2 && (
+            <Table>
+              <OText>
+                {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
+              </OText>
+              <OText>{parsePrice(order?.summary?.tax || 0)}</OText>
+            </Table>
+          )
+        }
+        {
+          order?.fees?.length === 0 && (
+            <Table>
+              <OText>
+                {t('SERVICE_FEE', 'Service fee')}
+                {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
+              </OText>
+              <OText>{parsePrice(order?.summary?.service_fee || 0)}</OText>
+            </Table>
+          )
+        }
+        {
+          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+            <Table key={tax.id}>
+              <OSRow>
+                <OText>
+                  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                </OText>
+              </OSRow>
+              <OText>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+            </Table>
+          ))
+        }
+        {
+          order?.fees?.length > 0 && order?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
+            <Table key={fee.id}>
+              <OSRow>
+                <OText>
+                  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  ({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>
+            </Table>
+          ))
+        }
+        {
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText>- {parsePrice(offer?.summary?.discount)}</OText>
+            </Table>
+          ))
+        }
         {order?.summary?.delivery_price > 0 && (
           <Table>
             <OText>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
             <OText>{parsePrice(order?.summary?.delivery_price)}</OText>
           </Table>
         )}
+        {
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText>- {parsePrice(offer?.summary?.discount)}</OText>
+            </Table>
+          ))
+        }
         {order?.summary?.driver_tip > 0 && (
           <Table>
             <OText>
@@ -470,23 +579,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
-            <OText>{parsePrice(order?.summary?.driver_tip ?? 0)}</OText>
-          </Table>
-        )}
-        {order?.summary?.service_fee > 0 && (
-          <Table>
-            <OText>
-              {t('SERVICE_FEE', 'Service Fee')}
-              {`(${verifyDecimals(order?.summary?.service_fee, parseNumber)}%)`}
-            </OText>
-            <OText>{parsePrice(order?.summary?.service_fee)}</OText>
+            <OText>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
           </Table>
         )}
         <Total>
           <Table>
             <OText style={styles.textBold}>{t('TOTAL', 'Total')}</OText>
             <OText style={styles.textBold} color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? 0)}
+              {parsePrice(order?.summary?.total ?? order?.total)}
             </OText>
           </Table>
         </Total>
@@ -498,7 +598,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     <>
       <Spinner visible={!order || Object.keys(order).length === 0} />
 
-      {order && Object.keys(order).length > 0 && (
+      {!!order && Object.keys(order).length > 0 && (
         <>
           <Container>
             <NavBar
@@ -508,14 +608,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 <OIconButton
                   bgColor="transparent"
                   borderColor="transparent"
-                  RenderIcon={() => 
-                      <EvilIcons
-                        name={'close'}
-                        size={40}
-                        color={theme.colors.primary}
-                      />
+                  RenderIcon={() =>
+                    <EvilIcons
+                      name={'close'}
+                      size={40}
+                      color={theme.colors.primary}
+                    />
                   }
-                  style={{ flex:1, justifyContent: 'flex-end', left: 30 }}
+                  style={{ flex: 1, justifyContent: 'flex-end', left: 30 }}
                   onClick={() => {
                     navigation.reset({
                       routes: [{ name: 'Intro' }],

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

@@ -51,3 +51,8 @@ export const Total = styled.View`
   padding-vertical: 10px;
 `
 
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 80%;
+`

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

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -59,7 +57,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
       <Container>
         <NavBar
           title={t('ORDER_TYPE_X_ID', 'Order type')}
-          {...(goBack && { onActionLeft: goBack })}
+          onActionLeft={goBack}
           btnStyle={{ paddingLeft: 0 }}
         />
 
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

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

@@ -107,7 +107,7 @@ const PaymentOptionsUI = (props: any) => {
 
   const handlePlaceOrder = () => {
     if (!userErrors.length) {
-      handlerClickPlaceOrder && handlerClickPlaceOrder();
+      handlerClickPlaceOrder && handlerClickPlaceOrder(null, { on_behalf_of: props.customerName });
       return;
     }
     let stringError = '';
@@ -189,67 +189,69 @@ const PaymentOptionsUI = (props: any) => {
 
   return (
     <>
-      <Spinner visible={isLoading || placing} />
+      <Spinner visible={isLoading || placing || paymethodsList?.loading} />
 
       <Container nestedScrollEnabled>
-        <NavBar
-          title={t('PAYMENT_METHODS', 'Payment methods')}
-          onActionLeft={goToBack}
-          btnStyle={{ paddingLeft: 0 }}
-        />
-
-        <View
-          style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
-          <OText size={orientationState?.dimensions?.width * 0.048}>
-            {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
-            <OText
-              size={orientationState?.dimensions?.width * 0.048}
-              weight={'700'}>
-              {`${t('LIKE_TO_PAY', 'like to pay')}?`}
-            </OText>
-          </OText>
-        </View>
-
         {supportedMethods?.length > 0 && (
-          <GridContainer style={{ justifyContent: 'space-between' }}>
-            {propsOfItems.CARD_ON_DELIVERY_ID && (
-              <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
-                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
-              </View>
-            )}
+          <>
+            <NavBar
+              title={t('PAYMENT_METHODS', 'Payment methods')}
+              onActionLeft={goToBack}
+              btnStyle={{ paddingLeft: 0 }}
+            />
 
             <View
-              style={{
-                width:
-                  orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.0016
-                    : 1,
-                height:
-                  orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions?.height * 0.018
-                    : 1,
-              }}
-            />
+              style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
+              <OText size={orientationState?.dimensions?.width * 0.048}>
+                {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
+                <OText
+                  size={orientationState?.dimensions?.width * 0.048}
+                  weight={'700'}>
+                  {`${t('LIKE_TO_PAY', 'like to pay')}?`}
+                </OText>
+              </OText>
+            </View>
 
-            {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+            <GridContainer style={{ justifyContent: 'space-between' }}>
+              {propsOfItems.CARD_ON_DELIVERY_ID && (
+                <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
+                  <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
+                </View>
+              )}
 
-            <View
-              style={{
-                width:
-                  orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.0016
-                    : 1,
-                height:
-                  orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions?.height * 0.018
-                    : 1,
-              }}
-            />
+              <View
+                style={{
+                  width:
+                    orientationState?.orientation === LANDSCAPE
+                      ? orientationState?.dimensions?.width * 0.0016
+                      : 1,
+                  height:
+                    orientationState?.orientation === PORTRAIT
+                      ? orientationState?.dimensions?.height * 0.018
+                      : 1,
+                }}
+              />
+
+              {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+
+              <View
+                style={{
+                  width:
+                    orientationState?.orientation === LANDSCAPE
+                      ? orientationState?.dimensions?.width * 0.0016
+                      : 1,
+                  height:
+                    orientationState?.orientation === PORTRAIT
+                      ? orientationState?.dimensions?.height * 0.018
+                      : 1,
+                }}
+              />
 
-            {propsOfItems.STRIPE && (
-              <OptionCard {...propsOfItems?.STRIPE} />
-            )}
-          </GridContainer>
+              {propsOfItems.STRIPE && (
+                <OptionCard {...propsOfItems?.STRIPE} />
+              )}
+            </GridContainer>
+          </>
         )}
         <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
         <OModal