ordering-ui-react-native 0.22.33 → 0.22.35

package/package.json

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

package/src/components/StripeMethodForm/index.tsx

@@ -17,7 +17,8 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
     methodPaySupported,
     setPlaceByMethodPay,
     cartTotal,
-    androidAppId
+    androidAppId,
+    businessNames
   } = props
   const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
   const { presentApplePay, isApplePaySupported } = useApplePay();
@@ -152,7 +153,8 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
 
     const { error, paymentMethod } = await presentApplePay({
       cartItems: [{
-        label: t('CART_APPLE_PAY_LABEL', 'Cart'),
+        label: businessNames ? `${businessNames.join(', ')} ${t('VIA_CHEW_APP', 'via Chew App')}`
+        : `${cart?.business?.name} ${t('VIA_CHEW_APP', 'via Chew App')}`,
         amount: cartTotal?.toString?.() ?? cart?.balance?.toString() ?? cart?.total?.toString?.(),
         paymentType: 'Immediate'
       }],

package/src/types/index.tsx

@@ -495,5 +495,6 @@ export interface StripeMethodFormParams {
   methodPaySupported?: any,
   setPlaceByMethodPay?: any,
   cartTotal?: number,
-  androidAppId?: string
+  androidAppId?: string,
+  businessNames?: Array<string>
 }

package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx

@@ -22,6 +22,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import {
   useLanguage,
   useUtils,
+  useConfig
 } from 'ordering-components/native';
 
 interface OrderHeader {
@@ -49,8 +50,10 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
   } = props
   const theme = useTheme();
   const [, t] = useLanguage();
+  const [configState] = useConfig()
   const [{ parseDate, parsePrice }] = useUtils();
   const paymethodsLength = order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
+  const showExternalId = configState?.configs?.change_order_id?.value === '1'
 
   const styles = StyleSheet.create({
     icons: {
@@ -270,7 +273,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
 
         <OText numberOfLines={2} size={20} weight="600">
           <>
-            {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id} `}
+            {`${t('INVOICE_ORDER_NO', 'Order No.')} ${showExternalId ? order?.external_id || order?.id : order?.id} `}
             {!order?.isLogistic && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
               <>
                 {t('IS', 'is')}{' '}
@@ -284,7 +287,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
           </>
         </OText>
-        {order?.external_id && (
+        {order?.external_id && !showExternalId && (
           <OText size={13}>
             <OText size={13} weight='bold'>{`${t('EXTERNAL_ID', 'External ID :')} `}</OText>
             {order?.external_id}

package/themes/business/src/components/PreviousOrders/OrderItem.tsx

@@ -191,23 +191,24 @@ export const OrderItem = React.memo((props: any) => {
                 {order?.external_id ?? t('NO_EXTERNAL_ID', 'No external Id ') + t('NO', 'Order No.') + order?.id}
               </OText>
             )}
-            <OText
+            {!showExternalId && <OText
               style={styles.date}
               color={theme.colors.unselectText}
               numberOfLines={1}
               adjustsFontSizeToFit
             >
-              {(!showExternalId && ((!!order?.order_group_id && order?.order_group && isLogisticOrder
+              {((!!order?.order_group_id && order?.order_group && isLogisticOrder
                 ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
                 : (t('NO', 'Order No.') + order?.id)
-              ) + ' · '))}
+              ) + ' · ')}
               {order?.delivery_datetime_utc
                 ? parseDate(order?.delivery_datetime_utc)
                 : parseDate(order?.delivery_datetime, { utc: false })}
             </OText>
+            }
             {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
               <>
-                <OText> · </OText>
+                {!showExternalId && <OText> · </OText>}
                 <OText
                   style={styles.date}
                   color={

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

@@ -31,7 +31,8 @@ const CheckoutUI = (props: any) => {
     paymethodSelected,
     handlePaymethodChange,
     handlerClickPlaceOrder,
-    onNavigationRedirect
+    onNavigationRedirect,
+    isKiosk
   } = props
 
   const [errorCash, setErrorCash] = useState(false);
@@ -68,6 +69,7 @@ const CheckoutUI = (props: any) => {
         isLoading={cartState.loading || businessDetails.loading}
         paymethods={businessDetails?.business?.paymethods}
         setErrorCash={setErrorCash}
+        isKiosk={isKiosk}
       />
     </>
   )
@@ -84,7 +86,7 @@ export const Checkout = (props: any) => {
   const [, { showToast }] = useToast();
   const [{ token }] = useSession();
   const [ordering] = useApi();
-  const [,{ confirmCart }] = useOrder();
+  const [, { confirmCart }] = useOrder();
 
   const [cartState, setCartState] = useState<any>({ loading: true, error: [], cart: null });
 
@@ -109,7 +111,7 @@ export const Checkout = (props: any) => {
           const confirmCartRes = await confirmCart(cartUuid)
           if (confirmCartRes.error) {
             showToast(ToastType.Error, confirmCartRes.error.message)
-          }getOrder
+          } getOrder
           getOrder
           if (confirmCartRes.result.order?.uuid) {
             onNavigationRedirect('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })

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

@@ -81,7 +81,7 @@ const CustomerName = (props: Props): React.ReactElement => {
       <OButton
         text={t('SKIP', 'Skip')}
         onClick={onSkip}
-        textStyle={{ color: theme.colors.primary, fontSize: 20 }}
+        textStyle={{ color: theme.colors.primary, fontSize: 18 }}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT
             ? 50 : 100

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

@@ -24,11 +24,6 @@ import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const PaymentOptionsUI = (props: any) => {
   const {
-    cart,
-    onNavigationRedirect,
-    isDisabled,
-    paymethodData,
-    handlePaymethodDataChange,
     errorCash,
     isLoading,
     paymethodsList,
@@ -48,11 +43,11 @@ const PaymentOptionsUI = (props: any) => {
   const [orientationState] = useDeviceOrientation();
   const [userErrors, setUserErrors] = useState<any>([]);
   const [isOpenModal, setIsOpenModal] = useState(false)
-  const paymethodSelected =
-    paySelected || props.paymethodSelected || isOpenMethod.paymethod;
+  const paymethodSelected = paySelected || props.paymethodSelected || isOpenMethod.paymethod;
+  const includePaymethods = ['cash', 'card_delivery'];
 
   useEffect(() => {
-    if (paymethodsList.paymethods.length === 1) {
+    if (paymethodsList?.paymethods?.length === 1) {
       handlePaymethodClick &&
         handlePaymethodClick(paymethodsList.paymethods[0]);
     }
@@ -85,23 +80,11 @@ const PaymentOptionsUI = (props: any) => {
     }
   }, [isOpenMethod.paymethod, placing, isLoading, paySelected]);
 
-  // const includePaymethods = ['cash', 'card_delivery', 'stripe'];
-  const includePaymethods = ['cash', 'card_delivery'];
-
-  const supportedMethods = paymethodsList.paymethods.filter((p: any) =>
+  const supportedMethods = paymethodsList?.paymethods?.filter((p: any) =>
     includePaymethods.includes(p.gateway),
   );
 
-  const cashIndex: number = supportedMethods?.findIndex(
-    (item: any) => item?.gateway === 'cash',
-  );
-  const cardOnDeliveryIndex = supportedMethods?.findIndex(
-    (item: any) => item?.gateway === 'card_delivery',
-  );
-  const stripeIndex = supportedMethods?.findIndex(
-    (item: any) => item?.gateway === 'stripe',
-  );
-  const onSelectPaymethod = (paymethod: any, isPopupMethod: boolean) => {
+  const onSelectPaymethod = (paymethod: any) => {
     handlePaymethodClick(paymethod);
   };
 
@@ -132,57 +115,15 @@ const PaymentOptionsUI = (props: any) => {
         : orientationState?.dimensions?.height * 0.55,
   };
 
-  const propsOfItems = {
-    CASH_ID:
-      cashIndex !== -1
-        ? {
-          style: cardStyle,
-          title: t('CASH', 'Cash'),
-          description: t(
-            'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
-            'Pay with cash in the front counter',
-          ),
-          bgImage: theme.images.general.cash,
-          callToActionText: t('LETS_GO', 'LETS_GO'),
-          VectorIcon: () => <AntIconDesign name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />,
-          onClick: () =>
-            onSelectPaymethod(supportedMethods[cashIndex], false),
-          ...supportedMethods[cashIndex],
-        }
-        : null,
-
-    CARD_ON_DELIVERY_ID:
-      cardOnDeliveryIndex !== -1
-        ? {
-          style: cardStyle,
-          title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
-          description: t(
-            'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
-            'We accept every debit or credit card',
-          ),
-          bgImage: theme.images.general.carddelivery,
-          callToActionText: t("LETS_GO", "Let's go"),
-          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
-          onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
-          ...supportedMethods[cardOnDeliveryIndex],
-        }
-        : null,
-    STRIPE:
-      stripeIndex !== -1
-        ? {
-          style: cardStyle,
-          title: t('STRIPE', supportedMethods[stripeIndex]?.name),
-          description: t('STRIPE', 'Stripe'),
-          bgImage: theme.images.general.carddelivery,
-          callToActionText: t('INSERT_INFO', 'Test info'),
-          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
-          onClick: () => {
-            onSelectPaymethod(supportedMethods[stripeIndex], false);
-            setIsOpenModal(true)
-          },
-          ...supportedMethods[stripeIndex],
-        }
-        : null,
+  const description = {
+    cash: t(
+      'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
+      'Pay with cash in the front counter',
+    ),
+    card_delivery: t(
+      'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
+      'We accept every debit or credit card',
+    ),
   };
 
   const goToBack = () => navigation?.goBack();
@@ -192,47 +133,40 @@ const PaymentOptionsUI = (props: any) => {
       <Spinner visible={isLoading || placing || paymethodsList?.loading} />
 
       <Container nestedScrollEnabled>
-        {supportedMethods?.length > 0 && (
-          <>
-            <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>
-
-            <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,
-                }}
-              />
-
-              {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+        <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>
+
+        <GridContainer style={{ justifyContent: 'space-between' }}>
+          {supportedMethods?.length > 0 ? (supportedMethods?.map((paymethod: any, i: number) => (
+            <>
+              <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
+                <OptionCard
+                  {...{
+                    style: cardStyle,
+                    title: t(`${paymethod.gateway.toUpperCase().replace(/\s/g, '_')}`, paymethod.name),
+                    description: description[paymethod.gateway] ?? t(`${paymethod.gateway.toUpperCase().replace(/\s/g, '_')}`, paymethod.name),
+                    bgImage: paymethod.name === 'Cash' ? theme.images.general.cash : theme.images.general.carddelivery,
+                    callToActionText: paymethod.name === 'Cash' ? t('LETS_GO', 'LETS_GO') : t('INSERT_INFO', 'Test info'),
+                    VectorIcon: () => paymethod.name === 'Cash' ? <AntIconDesign name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} /> : <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
+                    onClick: () => onSelectPaymethod(paymethod, false),
+                  }}
+                />
+              </View>
 
               <View
                 style={{
@@ -246,13 +180,15 @@ const PaymentOptionsUI = (props: any) => {
                       : 1,
                 }}
               />
-
-              {propsOfItems.STRIPE && (
-                <OptionCard {...propsOfItems?.STRIPE} />
-              )}
-            </GridContainer>
-          </>
-        )}
+            </>
+          ))) : (
+            <OText
+              size={orientationState?.dimensions?.width * 0.048}
+              weight={'700'}>
+              {`${t('NO_PAYMETHODS_AVAILABLES', 'No paymethods availables')}`}
+            </OText>
+          )}
+        </GridContainer>
         <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
         <OModal
           open={isOpenModal}

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

@@ -233,6 +233,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
           toSave
           businessId={businessIds[0]}
           businessIds={businessIds}
+          businessNames={openCarts?.map?.((cart : any) => cart?.business?.name)}
           publicKey={paymethodSelected?.data?.publishable}
           requirements={props.clientSecret}
           handleSource={handlePaymethodDataChange}

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

@@ -36,7 +36,8 @@ const StripeElementsFormUI = (props: any) => {
 		cartTotal,
 		publicKeyAddCard,
 		urlScheme,
-		androidAppId
+		androidAppId,
+		businessNames
 	} = props;
 
 	const theme = useTheme();
@@ -228,6 +229,7 @@ const StripeElementsFormUI = (props: any) => {
 										methodPaySupported={methodPaySupported}
 										setPlaceByMethodPay={setPlaceByMethodPay}
 										androidAppId={androidAppId}
+										businessNames={businessNames}
 									/>
 								) : (
 									<CardField