ordering-ui-react-native 0.14.38 → 0.14.40-release

package/src/components/OrderSummary/index.tsx

@@ -14,13 +14,13 @@ import {
   OSProductList,
   OSBill,
   OSTable,
-  OSRow
+  OSRow,
+  Divider
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OInput, OModal, OText } from '../shared';
-import { ProductForm } from '../ProductForm';
+import { OAlert, OInput, OModal, OText } from '../shared';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
 import { TaxInformation } from '../TaxInformation';
@@ -36,7 +36,9 @@ const OrderSummaryUI = (props: any) => {
     isCartPending,
     isFromCheckout,
     commentState,
-    handleChangeComment
+    handleChangeComment,
+    onNavigationRedirect,
+    handleRemoveOfferClick
   } = props;
 
   const theme = useTheme();
@@ -45,9 +47,8 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
-  const [openProduct, setModalIsOpen] = useState(false)
-  const [curProduct, setCurProduct] = useState<any>(null)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
@@ -56,14 +57,16 @@ const OrderSummaryUI = (props: any) => {
   }
 
   const handleEditProduct = (product: any) => {
-    setCurProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handlerProductAction = (product: any) => {
-    if (Object.keys(product).length) {
-      setModalIsOpen(false)
-    }
+    onNavigationRedirect &&
+      onNavigationRedirect('ProductDetails', {
+        isCartProduct: true,
+        productCart: product,
+        businessSlug: cart?.business?.slug,
+        businessId: cart?.business_id,
+        categoryId: product?.category_id,
+        productId: product?.id,
+        isFromCheckout: isFromCheckout,
+      })
   }
 
   const getIncludedTaxes = () => {
@@ -76,6 +79,22 @@ const OrderSummaryUI = (props: any) => {
     }
   }
 
+  const getIncludedTaxesDiscounts = () => {
+    return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
+  const onRemoveOffer = (id: number) => {
+    setConfirm({
+      open: true,
+      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
+      title: t('OFFER', 'Offer'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveOfferClick(id)
+      }
+    })
+  }
+
   return (
     <OSContainer>
       {cart?.products?.length > 0 && (
@@ -99,35 +118,65 @@ const OrderSummaryUI = (props: any) => {
           {cart?.valid && (
             <OSBill>
               <OSTable>
-                <OText size={18}>{t('SUBTOTAL', 'Subtotal')}</OText>
-                <OText size={18}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
+                <OText size={16}>{t('SUBTOTAL', 'Subtotal')}</OText>
+                <OText size={16}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
               </OSTable>
-              {cart?.discount > 0 && cart?.total >= 0 && (
+              {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
                 <OSTable>
                   {cart?.discount_type === 1 ? (
-                    <OText size={18}>
-                      {t('DISCOUNT', 'Discount')}
-                      <OText size={18}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
+                    <OText size={16}>
+                      {t('DISCOUNT', 'Discount')}{' '}
+                      <OText size={16}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
                     </OText>
                   ) : (
-                    <OText size={18}>{t('DISCOUNT', 'Discount')}</OText>
+                    <OText size={16}>{t('DISCOUNT', 'Discount')}</OText>
+                  )}
+                  <OText size={16}>- {parsePrice(cart?.discount || 0)}</OText>
+                </OSTable>
+              )}
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText size={16}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={16}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
+                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={16} numberOfLines={2}>- {parsePrice(offer?.summary?.discount)}</OText>
+                  </OSTable>
+                ))
+              }
+              <Divider />
+              {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
+                <OSTable>
+                  <OText size={16} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {cart?.business?.tax_type === 1 ? (
+                    <OText size={16}>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                  ) : (
+                    <OText size={16}>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
                   )}
-                  <OText size={18}>- {parsePrice(cart?.discount || 0)}</OText>
                 </OSTable>
               )}
               {
                 cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
                   <OSTable key={tax?.id}>
                     <OSRow>
-                      <OText size={18} numberOfLines={1}>
+                      <OText size={16} numberOfLines={1}>
                         {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                         {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
                         <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={18}>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                    <OText size={16}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                   </OSTable>
                 ))
               }
@@ -135,27 +184,69 @@ const OrderSummaryUI = (props: any) => {
                 cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
                   <OSTable key={fee.id}>
                     <OSRow>
-                      <OText size={18} numberOfLines={1}>
+                      <OText size={16} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                         ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                         <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={18}>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                    <OText size={16}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText size={16}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={16}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
+                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={16}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
                   </OSTable>
                 ))
               }
               {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
                 <OSTable>
-                  <OText size={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                  <OText size={18}>{parsePrice(cart?.delivery_price)}</OText>
+                  <OText size={16}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
+                  <OText size={16}>{parsePrice(cart?.delivery_price)}</OText>
                 </OSTable>
               )}
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText size={16}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={16}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 3, top: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
+                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 3, top: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={16}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {cart?.driver_tip > 0 && (
                 <OSTable>
-                  <OText size={18}>
+                  <OText size={16}>
                     {t('DRIVER_TIP', 'Driver tip')}
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
@@ -164,7 +255,7 @@ const OrderSummaryUI = (props: any) => {
                         `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
                       )}
                   </OText>
-                  <OText size={18}>{parsePrice(cart?.driver_tip)}</OText>
+                  <OText size={16}>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
               )}
               {isCouponEnabled && !isCartPending && (
@@ -177,22 +268,20 @@ const OrderSummaryUI = (props: any) => {
                   </View>
                 </View>
               )}
-              {cart?.total >= 1 && (
                 <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
                   <OSTable style={{ marginTop: 15 }}>
-                    <OText size={18} style={{ fontWeight: 'bold' }}>
+                    <OText size={16} style={{ fontWeight: 'bold' }}>
                       {t('TOTAL', 'Total')}
                     </OText>
-                    <OText size={18} style={{ fontWeight: 'bold' }} color={theme.colors.primary}>
-                      {parsePrice(cart?.total)}
+                    <OText size={16} style={{ fontWeight: 'bold' }} color={theme.colors.primary}>
+                      {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                     </OText>
                   </OSTable>
                 </View>
-              )}
               {cart?.status !== 2 && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
-                    <OText>{t('COMMENTS', 'Comments')}</OText>
+                    <OText size={16}>{t('COMMENTS', 'Comments')}</OText>
                     <View style={{ flex: 1, width: '100%' }}>
                       <OInput
                         value={cart?.comment}
@@ -223,32 +312,27 @@ const OrderSummaryUI = (props: any) => {
               )}
             </OSBill>
           )}
-          <OModal
-            open={openProduct}
-            entireModal
-            customClose
-            onClose={() => setModalIsOpen(false)}
-            isAvoidKeyBoardView
-          >
-            <ProductForm
-              isCartProduct
-              productCart={curProduct}
-              businessSlug={cart?.business?.slug}
-              businessId={cart?.business_id}
-              categoryId={curProduct?.category_id}
-              productId={curProduct?.id}
-              onSave={handlerProductAction}
-              onClose={() => setModalIsOpen(false)}
-              isFromCheckout={isFromCheckout}
-            />
-          </OModal>
           <OModal
             open={openTaxModal.open}
             onClose={() => setOpenTaxModal({ open: false, data: null })}
             entireModal
+            title={`${openTaxModal.data?.name ||
+              t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
           >
-            <TaxInformation data={openTaxModal.data} products={cart.products} />
+            <TaxInformation
+              type={openTaxModal.type}
+              data={openTaxModal.data}
+              products={cart?.products}
+            />
           </OModal>
+          <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 })}
+          />
         </>
       )}
     </OSContainer>

package/src/components/OrderSummary/styles.tsx

@@ -33,5 +33,13 @@ export const OSCoupon = styled.View`
 export const OSRow = styled.View`
   flex-direction: row;
   overflow: hidden;
-  width: 80%;
-`
+  width: 70%;
+  flex-wrap: wrap;
+`
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+`

package/src/components/PaymentOptions/index.tsx

@@ -45,6 +45,8 @@ const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 //   { name: 'iDEAL', value: 'ideal' }
 // ]
 
+const webViewPaymentGateway: any = ['paypal', 'square']
+
 const PaymentOptionsUI = (props: any) => {
   const {
     cart,
@@ -92,7 +94,7 @@ const PaymentOptionsUI = (props: any) => {
   const handlePaymentMethodClick = (paymethod: any) => {
     const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
     handlePaymethodClick(paymethod, isPopupMethod)
-    if(paymethod?.gateway === 'paypal' || paymethod?.gateway === 'square') {
+		if (webViewPaymentGateway.includes(paymethod?.gateway)) {
       handlePaymentMethodClickCustom(paymethod)
     }
     setCardData(paymethodData)

package/src/components/PaymentOptionsWebView/index.tsx

@@ -0,0 +1,150 @@
+import React, { useRef, useState } from 'react'
+import { View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import WebView from 'react-native-webview';
+import { ActivityIndicator } from 'react-native-paper';
+
+import {
+    ToastType,
+    useToast,
+    useApi,
+    useLanguage,
+    useConfig
+} from 'ordering-components/native';
+
+import { OText } from '../shared';
+
+interface PaymentOptionsWebViewParams {
+    onNavigationRedirect?: Function,
+    uri?: any,
+    user?: any,
+    token?: any,
+    cart?: any,
+    currency?: any,
+    webviewPaymethod?: any,
+    setShowGateway?: any,
+    setOpenOrderCreating?: any,
+    locationId?: any
+}
+export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
+    const { 
+        onNavigationRedirect,
+        uri,
+        user,
+        token,
+        cart,
+        currency,
+        webviewPaymethod,
+        setShowGateway,
+        setOpenOrderCreating,
+        locationId
+    } = props
+
+   const webviewRef = useRef<any>(null)
+   const [, { showToast }] = useToast();
+   const [ordering] = useApi()
+   const [{ configs }] = useConfig();
+   const [, t] = useLanguage();
+
+   
+   const [progClr, setProgClr] = useState('#424242');
+   const [prog, setProg] = useState(true);
+
+   const handleCloseWebview = () => {
+    setProg(true);
+    setShowGateway({ open: false, closedByUser: true })
+  }
+
+   const onMessage = (e: any) => {
+        if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
+            let payment = JSON.parse(e.nativeEvent.data);
+
+            if (payment === 'api error') {
+                setShowGateway({ closedByUser: true, open: false })
+                setProg(true);
+            }
+
+            if (payment) {
+                if (payment.error) {
+                showToast(ToastType.Error, payment.result)
+                setOpenOrderCreating && setOpenOrderCreating(false)
+                } else if (payment?.result?.order?.uuid) {
+                showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
+                onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, isFromCheckout: true})
+                }
+                setProg(true);
+                setShowGateway({ closedByUser: false, open: false })
+            }
+        }
+   }
+
+   return (
+    <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
+          <Icon
+            name="x"
+            size={35}
+            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
+            onPress={handleCloseWebview}
+          />
+          <OText
+            style={{
+              textAlign: 'center',
+              fontSize: 16,
+              fontWeight: 'bold',
+              color: '#00457C',
+              marginBottom: 5,
+              marginTop: 10
+            }}>
+           {webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment'))}
+          </OText>
+          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
+            <ActivityIndicator size={24} color={progClr} />
+          </View>
+          <WebView
+            source={{ uri: uri }}
+            onMessage={onMessage}
+            ref={webviewRef}
+            javaScriptEnabled={true}
+            javaScriptEnabledAndroid={true}
+            cacheEnabled={false}
+            cacheMode='LOAD_NO_CACHE'
+            style={{ flex: 1 }}
+            onShouldStartLoadWithRequest={() => true}
+            onLoadStart={() => {
+              setProg(true);
+              setProgClr('#424242');
+            }}
+            onLoadProgress={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoad={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoadEnd={(e) => {
+            const messageParams = locationId ? { locationId } : {}
+              const message = {
+                action: 'init',
+                data: {
+                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
+                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
+                  payData: {
+                    paymethod_id: webviewPaymethod?.id,
+                    amount: cart?.balance ?? cart?.total,
+                    delivery_zone_id: cart?.delivery_zone_id,
+                    user_id: user?.id,
+                    user_name: user?.name
+                  },
+                  currency: configs?.stripe_currency?.value || currency,
+                  userToken: token,
+                  clientId: webviewPaymethod?.credentials?.client_id,
+                  ...messageParams
+                }
+              }
+              setProg(false);
+              webviewRef?.current?.postMessage?.(JSON.stringify(message))
+            }}
+          />
+    </View>
+)}

package/src/components/ProductForm/index.tsx

@@ -52,7 +52,6 @@ export const ProductOptionsUI = (props: any) => {
     handleChangeSuboptionState,
     handleChangeCommentState,
     productObject,
-    onClose,
     businessSlug
   } = props
 
@@ -84,7 +83,6 @@ export const ProductOptionsUI = (props: any) => {
   }
 
   const handleRedirectLogin = (product : any) => {
-    onClose()
     navigation.navigate('Login', {product: {businessId: product?.businessId, id: product?.id, categoryId: product?.categoryId, slug: businessSlug} })
   }
 
@@ -110,7 +108,7 @@ export const ProductOptionsUI = (props: any) => {
                         name="x"
                         size={35}
                         style={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
-                        onPress={onClose}
+                        onPress={props.handleGoBack}
                       />
                     </View>
                   </TopHeader>
@@ -134,26 +132,26 @@ export const ProductOptionsUI = (props: any) => {
                     <View style={{ flexDirection: 'column', width: '100%' }}>
                       <View style={{ flexDirection: 'row', marginTop: 15 }}>
                         <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{' '}</OText>
-                        {product?.calories && (
+                        {!!product?.calories && (
                           <OText size={16} style={styles.caloriesStyle}>{product?.calories} cal</OText>
                         )}
                       </View>
                       <View style={{ flexDirection: 'row', marginBottom: 10 }}>
                         <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-                        {product?.offer_price && (
+                        {!!product?.offer_price !== null && product?.in_offer && (
                           <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
                         )}
                       </View>
-                      {(product?.estimated_person || (product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
+                      {(!!product?.estimated_person || (!!product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
                         <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0, marginBottom: 10 }} color={'#909BA9'}>
                           {
                             ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
                             && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
                           }
-                          {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+                          {!!product?.sku && product?.sku !== '-1' && product?.sku !== '1' && !!product?.estimated_person && (
                             <>&nbsp;&#183;&nbsp;</>
                           )}
-                          {product?.estimated_person
+                          {!!product?.estimated_person
                             && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
                           }
                         </OText>
@@ -337,7 +335,7 @@ export const ProductOptionsUI = (props: any) => {
                 />
               ) : (
                 <OButton
-                  onClick={navigation.navigate('AddressList')}
+                  onClick={() => navigation.navigate('AddressList')}
                 />
               )
             )}

package/src/components/SingleProductCard/index.tsx

@@ -86,7 +86,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
         <PricesContainer>
           <OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
-          {product?.offer_price && (
+          {!!product?.offer_price !== null && product?.in_offer && (
             <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
           )}
         </PricesContainer>

package/src/components/StripeElementsForm/index.tsx

@@ -33,19 +33,33 @@ const StripeElementsFormUI = (props: any) => {
   const { confirmSetupIntent, loading: confirmSetupLoading } = useConfirmSetupIntent();
   const [createPmLoading, setCreatePmLoading] = useState(false);
 
-  const billingDetails = {
-    name: `${user.name} ${user.lastname}`,
-    email: user.email,
-    address: user.address
-  };
+  let billingDetails: any = {}
+
+  if (user?.name || user?.lastname) {
+    if (user?.name) {
+      billingDetails.name = user?.name
+    }
+    if (user?.lastname) {
+      billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
+    }
+  }
+
+  if (user?.email) {
+    billingDetails.email = user?.email
+  }
+
+  if (user?.address) {
+    billingDetails.addressLine1 = user?.address
+  }
 
   const createPayMethod = async () => {
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
     try {
       setCreatePmLoading(true)
-      const { paymentMethod } = await createPaymentMethod({
-        type: 'Card',
-        billingDetails,
-      });
+      const { paymentMethod } = await createPaymentMethod(params);
 
       setCreatePmLoading(false)
       handleSource && handleSource({
@@ -68,11 +82,12 @@ const StripeElementsFormUI = (props: any) => {
       createPayMethod();
       return
     }
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
     try {
-      const { setupIntent, error } = await confirmSetupIntent(requirements, {
-        type: 'Card',
-        billingDetails,
-      });
+      const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
       if (setupIntent?.status === 'Succeeded') {
         stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);