ordering-ui-react-native 0.14.68 → 0.14.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.68",
+  "version": "0.14.71",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -108,6 +108,7 @@
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^11.6.4",
+    "react-native-youtube-iframe": "^2.2.2",
     "rn-placeholder": "^3.0.3",
     "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",

package/src/components/Checkout/index.tsx

@@ -529,6 +529,7 @@ const CheckoutUI = (props: any) => {
                   paySelected={paymethodSelected}
                   handlePaymentMethodClickCustom={handlePaymentMethodClick}
                   setCardData={setCardData}
+                  handlePlaceOrder={handlePlaceOrder}
                 />
               </ChPaymethods>
             </ChSection>

package/src/components/PaymentOptions/index.tsx

@@ -61,11 +61,14 @@ const PaymentOptionsUI = (props: any) => {
     handlePaymethodDataChange,
     handlePaymentMethodClickCustom,
     isOpenMethod,
-    setCardData
+    setCardData,
+    handlePlaceOrder
   } = props
 
   const theme = useTheme();
   const [, t] = useLanguage();
+  const methodsPay = ['google_pay', 'apple_pay']
+  const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 
   const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
   let paymethodSelected = props.paySelected || props.paymethodSelected || isOpenMethod?.paymethod
@@ -119,8 +122,11 @@ const PaymentOptionsUI = (props: any) => {
   }, [props.paySelected])
 
   useEffect(() => {
-    setCardData(paymethodData)
-  }, [paymethodData])
+    setCardData && setCardData(paymethodData)
+    if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
+      handlePlaceOrder()
+    }
+  }, [paymethodData, paymethodSelected])
 
   const renderPaymethods = ({ item }: any) => {
     return (
@@ -283,7 +289,7 @@ const PaymentOptionsUI = (props: any) => {
       <OModal
         entireModal
         title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-        open={isOpenMethod?.paymethod?.gateway === 'stripe_direct' && !paymethodData?.id}
+        open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
         onClose={() => handlePaymethodClick(null)}
       >
         <KeyboardAvoidingView
@@ -292,10 +298,13 @@ const PaymentOptionsUI = (props: any) => {
           enabled={Platform.OS === 'ios' ? true : false}
         >
           <StripeElementsForm
+            cart={cart}
+            paymethod={isOpenMethod?.paymethod?.gateway}
+            methodsPay={methodsPay}
             businessId={props.businessId}
-            publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
+            publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
             handleSource={handlePaymethodDataChange}
-            onCancel={() => handlePaymethodClick(false)}
+            onCancel={() => handlePaymethodClick(null)}
           />
         </KeyboardAvoidingView>
       </OModal>

package/src/components/ProductForm/index.tsx

@@ -335,7 +335,7 @@ export const ProductOptionsUI = (props: any) => {
                 />
               ) : (
                 <OButton
-                  onClick={navigation.navigate('AddressList')}
+                  onClick={() => navigation.navigate('AddressList')}
                 />
               )
             )}

package/src/components/StripeElementsForm/index.tsx

@@ -7,10 +7,11 @@ import {
   useConfirmSetupIntent,
   createPaymentMethod
 } from '@stripe/stripe-react-native';
-
+import configs from '../../config.json'
 import { ErrorMessage } from './styles';
 
 import { StripeElementsForm as StripeFormController } from './naked';
+import { StripeMethodForm } from '../StripeMethodForm';
 import { OButton, OText } from '../shared';
 import { useTheme } from 'styled-components/native';
 
@@ -22,6 +23,10 @@ const StripeElementsFormUI = (props: any) => {
     businessId,
     requirements,
     stripeTokenHandler,
+    methodsPay,
+    paymethod,
+    onCancel,
+    cart
   } = props;
 
   const theme = useTheme();
@@ -121,33 +126,49 @@ const StripeElementsFormUI = (props: any) => {
     <View style={styles.container}>
       {publicKey ? (
         <View style={{ flex: 1 }}>
-          <StripeProvider publishableKey={publicKey}>
-            <CardField
-              postalCodeEnabled={true}
-              cardStyle={{
-                backgroundColor: '#FFFFFF',
-                textColor: '#000000',
-              }}
-              style={{
-                width: '100%',
-                height: 50,
-                marginVertical: 30,
-                zIndex: 9999,
-              }}
-              onCardChange={(cardDetails: any) => setCard(cardDetails)}
-            />
+          <StripeProvider 
+            publishableKey={publicKey}
+            merchantIdentifier={`merchant.${configs.apple_app_id}`}
+          >
+            {methodsPay.includes(paymethod) ? (
+              <StripeMethodForm 
+                handleSource={handleSource}
+                onCancel={onCancel}
+                cart={cart}
+                setErrors={setErrors}
+                paymethod={paymethod}
+                devMode={publicKey?.includes('test')}
+              />
+            ) : (
+              <CardField
+                postalCodeEnabled={true}
+                cardStyle={{
+                  backgroundColor: '#FFFFFF',
+                  textColor: '#000000',
+                }}
+                style={{
+                  width: '100%',
+                  height: 50,
+                  marginVertical: 30,
+                  zIndex: 9999,
+                }}
+                onCardChange={(cardDetails: any) => setCard(cardDetails)}
+              />
+            )}
           </StripeProvider>
-          <OButton
-            text={t('SAVE_CARD', 'Save card')}
-            bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-            borderColor={isCompleted ? theme.colors.primary :theme.colors.backgroundGray}
-            style={styles.btnAddStyle}
-            textStyle={{color: 'white'}}
-            imgRightSrc={null}
-            onClick={() => handleSaveCard()}
-            isDisabled={!isCompleted}
-            isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
-          />
+          {!methodsPay?.includes(paymethod) && (
+            <OButton
+              text={t('SAVE_CARD', 'Save card')}
+              bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+              borderColor={isCompleted ? theme.colors.primary :theme.colors.backgroundGray}
+              style={styles.btnAddStyle}
+              textStyle={{color: 'white'}}
+              imgRightSrc={null}
+              onClick={() => handleSaveCard()}
+              isDisabled={!isCompleted}
+              isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+            />
+          )}
           {!!errors && (
             <ErrorMessage>
               <OText

package/src/components/StripeMethodForm/index.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { GooglePayButton, useGooglePay, ApplePayButton, useApplePay } from '@stripe/stripe-react-native'
+import { OButton } from '../shared';
+import { Platform, View } from 'react-native';
+import { StripeMethodFormParams } from '../../types';
+
+export const StripeMethodForm = (props: StripeMethodFormParams) => {
+  const {
+    cart,
+    handleSource,
+    onCancel,
+    setErrors,
+    paymethod,
+    devMode
+  } = props
+  const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
+  const { presentApplePay, isApplePaySupported } = useApplePay();
+  const [initialized, setInitialized] = useState(false);
+  const [, t] = useLanguage()
+ 
+  useEffect(() => {
+    if (paymethod !== 'google_pay') return
+    if (Platform.OS === 'ios') {
+      setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
+      return
+    }
+    const initialize = async () => {
+      try {
+        const { error } = await initGooglePay({
+          testEnv: devMode,
+          merchantName: 'Widget Store',
+          countryCode: 'US',
+          billingAddressConfig: {
+            format: 'FULL',
+            isPhoneNumberRequired: true,
+            isRequired: false,
+          },
+          existingPaymentMethodRequired: false,
+          isEmailRequired: true,
+        });
+
+        if (error) {
+          setErrors(error.code + ' - ' + error.message);
+          return;
+        }
+        setInitialized(true);
+      } catch (err: any) {
+        setErrors('Catch ' + err?.message)
+      }
+    }
+    initialize();
+  }, [initGooglePay]);
+
+  useEffect(() => {
+    if (paymethod !== 'apple_pay') return
+    if (Platform.OS === 'android') {
+      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      return
+    }
+  }, [])
+
+  const createPaymentMethod = async () => {
+
+    const { error, paymentMethod } = await createGooglePayPaymentMethod({
+      amount: cart?.balance ?? cart?.total,
+      currencyCode: 'USD',
+    });
+
+    if (error) {
+      setErrors(error.code + ' - ' + error.message);
+      return;
+    } else if (paymentMethod) {
+      handleSource({
+        ...paymentMethod?.Card,
+        id: paymentMethod.id,
+        type: paymentMethod.type,
+        source_id: paymentMethod?.id,
+        card: {
+          brand: paymentMethod.Card.brand,
+          last4: paymentMethod.Card.last4
+        }
+      })
+      onCancel()
+    }
+    setInitialized(false);
+  };
+
+  const pay = async () => {
+    if (!isApplePaySupported) {
+      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      return
+    }
+
+    const { error, paymentMethod } = await presentApplePay({
+      cartItems: cart?.products?.map((product: any) => ({ label: product?.name, amount: product?.price?.toString?.() })),
+      country: 'US',
+      currency: 'USD',
+      shippingMethods: [
+        {
+          amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
+          identifier: 'DPS',
+          label: 'Courier',
+          detail: 'Delivery',
+          type: 'final',
+        },
+      ],
+
+      requiredShippingAddressFields: ['emailAddress', 'phoneNumber'],
+      requiredBillingContactFields: ['phoneNumber', 'name'],
+    });
+    if (error) {
+      setErrors(error.code + ' - ' + error.message);
+    } else if (paymentMethod) {
+      handleSource({
+        ...paymentMethod?.Card,
+        id: paymentMethod.id,
+        type: paymentMethod.type,
+        source_id: paymentMethod?.id,
+        card: {
+          brand: paymentMethod.Card.brand,
+          last4: paymentMethod.Card.last4
+        }
+      })
+      onCancel()
+    }
+  }
+
+  return (
+    <>
+      {paymethod === 'google_pay' ? (
+        <View>
+          {!loading && initialized && (
+            <OButton
+              textStyle={{
+                color: '#fff'
+              }}
+              imgRightSrc={null}
+              onClick={createPaymentMethod}
+              isDisabled={!initialized}
+              text={t('PAY_WITH_GOOGLE_PAY', 'Pay with Google Pay')}
+            />
+          )}
+        </View>
+      ) : (
+        <View>
+          {isApplePaySupported && (
+            <ApplePayButton
+              onPress={pay}
+              type="plain"
+              buttonStyle="black"
+              borderRadius={4}
+              style={{
+                width: '100%',
+                height: 50,
+              }}
+            />
+          )}
+        </View>
+      )}
+    </>
+  )
+}

package/src/components/shared/OIcon.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import { ImageStyle } from 'react-native'
 import styled from 'styled-components/native'
+import { useTheme } from 'styled-components/native'
 
 const Wrapper = styled.View``
 
@@ -23,10 +24,12 @@ interface Props {
 }
 
 const OImage = (props: Props): React.ReactElement => {
+  const theme = useTheme();
+  
   return (
     <Wrapper style={{ borderRadius: props.style?.borderRadius, overflow: 'hidden', marginHorizontal: props.style?.marginHorizontal }}>
       <SImage
-        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : require('../../assets/icons/lunch.png')}
+        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : theme.images.general.lunch || require('../../assets/icons/lunch.png')}
         style={{
           tintColor: props.color,
           flex: props.isWrap ? 1 : 0,

package/src/config.json

@@ -3,6 +3,8 @@
   "notification_app": "orderingapp",
   "app_name": "Ordering",
   "project": "reactdemo",
+  "apple_app_id": "com.delivery",
+  "android_app_id": "com.delivery",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/src/types/index.tsx

@@ -473,3 +473,12 @@ export interface HelpGuideParams {
 export interface HelpAccountAndPaymentParams {
   navigation: any;
 }
+
+export interface StripeMethodFormParams {
+  cart: any;
+  handleSource: ({id, card} : {id : string, card : any}) => void;
+  onCancel: () => void;
+  setErrors: (error: string) => void;
+  paymethod: string;
+  devMode?: boolean;
+}

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -7,6 +7,12 @@ import { BusinessBasicInformationParams } from '../../types';
 import { convertHoursToMinutes } from '../../utils';
 import { BusinessInformation } from '../BusinessInformation';
 import { BusinessReviews } from '../BusinessReviews';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import isBetween from 'dayjs/plugin/isBetween';
+
+dayjs.extend(timezone);
+dayjs.extend(isBetween);
 
 import {
 	BusinessContainer,
@@ -45,6 +51,31 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+	
+	useEffect(() => {
+		if (businessState?.loading) return
+		let timeout: any = null
+		const currentDate = dayjs().tz(businessState?.business?.timezone)
+		let lapse = null
+		if (businessState?.business?.today?.enabled) {
+			lapse = businessState?.business?.today?.lapses?.find((lapse: any) => {
+				const from = currentDate.hour(lapse.open.hour).minute(lapse.open.minute)
+				const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+				return currentDate.unix() >= from.unix() && currentDate.unix() <= to.unix()
+			})
+		}
+		if (lapse) {
+		  const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+		  const timeToClose = (to.unix() - currentDate.unix()) * 1000
+		  timeout = setTimeout(() => {
+			navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })
+		  }, timeToClose)
+		}
+		return () => {
+		  timeout && clearTimeout(timeout)
+		}
+	  }, [businessState?.business])
+
 	return (
 		<BusinessContainer>
 			<BusinessHeader

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ProductsList, useLanguage, useUtils } from 'ordering-components/native';
+import { ProductsList, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
@@ -31,6 +31,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
   const [, t] = useLanguage();
   const [{ optimizeImage }] = useUtils()
+  const [{ configs }] = useConfig()
+  const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
 
   const handleOnLayout = (event: any, categoryId: any) => {
     const _categoriesLayout = { ...categoriesLayout }
@@ -80,52 +82,47 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           </View>
         )}
 
-      {!category.id &&
-        categories &&
-        categories
-          .filter((category) => category.id !== null)
-          .map((category, i, _categories) => {
-            const products =
-              categoryState.products?.filter(
-                (product: any) => product.category_id === category.id,
-              ) || [];
-            return (
-              <React.Fragment key={'cat_' + category.id}>
-                {products.length > 0 && (
-                  <>
-                    <View
-                      style={bpStyles.catWrap}
-                      onLayout={(event: any) => handleOnLayout(event, category.id)}
-                    >
-                      <View style={bpStyles.catIcon}>
-                        <OIcon
-                          url={optimizeImage(category.image, 'h_100,c_limit')}
-                          width={41}
-                          height={41}
-                          style={{ borderRadius: 7.6 }}
-                        />
-                      </View>
-                      <OText size={16} weight="600">
-                        {category.name}
-                      </OText>
-                    </View>
-                    <>
-                      {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
-                        <SingleProductCard
-                          key={i}
-                          isSoldOut={product.inventoried && !product.quantity}
-                          businessId={businessId}
-                          product={product}
-                          onProductClick={onProductClick}
-                          productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-                        />
-                      ))}
-                    </>
-                  </>
-                )}
-              </React.Fragment>
-            );
-          })}
+      {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
+        const products = !isUseParentCategory
+          ? categoryState?.products?.filter((product : any) => product?.category_id === category?.id) ?? []
+          : categoryState?.products?.filter((product : any) => category?.children?.some((cat : any) => cat.category_id === product?.category_id)) ?? []
+        return (
+          <React.Fragment key={'cat_' + category.id}>
+            {products.length > 0 && (
+              <>
+                <View
+                  style={bpStyles.catWrap}
+                  onLayout={(event: any) => handleOnLayout(event, category.id)}
+                >
+                  <View style={bpStyles.catIcon}>
+                    <OIcon
+                      url={optimizeImage(category.image, 'h_100,c_limit')}
+                      width={41}
+                      height={41}
+                      style={{ borderRadius: 7.6 }}
+                    />
+                  </View>
+                  <OText size={16} weight="600">
+                    {category.name}
+                  </OText>
+                </View>
+                <>
+                  {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
+                    <SingleProductCard
+                      key={i}
+                      isSoldOut={product.inventoried && !product.quantity}
+                      businessId={businessId}
+                      product={product}
+                      onProductClick={onProductClick}
+                      productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                    />
+                  ))}
+                </>
+              </>
+            )}
+          </React.Fragment>
+        );
+      })}
 
       {(categoryState.loading || isBusinessLoading) && (
         <>

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

@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
-import { OText } from '../shared'
+import { OText, OButton } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
 import { PreviousOrders } from '../PreviousOrders'
 
-import { OptionTitle } from './styles'
+import { OptionTitle, NoOrdersWrapper } from './styles'
 import { OrdersOptionParams } from '../../types'
 
 import {
@@ -32,6 +32,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		loadMoreStatus,
 		loadMoreOrders,
 		loadOrders,
+		setOrdersLength,
+		ordersLength
 	} = props
 
 	const theme = useTheme();
@@ -112,28 +114,50 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		}
 	}, [loadMoreStatus, loading, pagination])
 
+	useEffect(() => {
+		if (loading) return
+
+		const updateOrders = orders.filter((order: any) => orderStatus.includes(order.status))
+
+		if (activeOrders) {
+			setOrdersLength && setOrdersLength({ ...ordersLength, activeOrdersLength: updateOrders?.length })
+		} else if (!preOrders) {
+			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
+		}
+	}, [orders?.length])
+
 	return (
 		<>
-			{(orders.length > 0) && (
-				<>
-					<OptionTitle>
-						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
-							{titleContent || (activeOrders
-								? t('ACTIVE', 'Active')
-								: preOrders
-									? t('PREORDERS', 'Preorders')
-									: t('PAST', 'Past'))}
-						</OText>
-					</OptionTitle>
-				</>
-			)}
-			{!loading && orders.length === 0 && (
+			<OptionTitle>
+				<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
+					{titleContent || (activeOrders
+						? t('ACTIVE', 'Active')
+						: preOrders
+							? t('PREORDERS', 'Preorders')
+							: t('PAST', 'Past'))}
+				</OText>
+			</OptionTitle>
+			{!(activeOrders && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) && !loading && orders.length === 0 && (
 				<NotFoundSource
 					content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
 					image={imageFails}
 					conditioned
 				/>
 			)}
+			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && activeOrders && (
+				<NoOrdersWrapper>
+					<OText size={14} numberOfLines={1}>
+						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
+					</OText>
+					<OButton
+						text={t('ORDER_NOW', 'Order now')}
+						onClick={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
+						textStyle={{ color: 'white', fontSize: 14 }}
+						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
+					/>
+					
+				</NoOrdersWrapper>
+			)}
 			{loading && (
 				<>
 					{!activeOrders ? (

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

@@ -3,3 +3,8 @@ import styled from 'styled-components/native'
 export const OptionTitle = styled.View`
 	margin-top: 24px;
 `
+
+export const NoOrdersWrapper = styled.View`
+	flex-direction: column;
+	align-items: center;
+`

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

@@ -1,10 +1,12 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import {
 	ProductForm as ProductOptions,
 	useSession,
 	useLanguage,
 	useOrder,
-	useUtils
+	useUtils,
+	ToastType,
+	useToast
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
@@ -12,11 +14,13 @@ import { ProductOption } from '../ProductOption';
 import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import YoutubePlayer from "react-native-youtube-iframe"
+import { TextInput } from 'react-native'
 import {
 	Grayscale
 } from 'react-native-color-matrix-image-filters'
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView, Button, Alert } from 'react-native';
 
 import {
 	WrapHeader,
@@ -53,6 +57,7 @@ export const ProductOptionsUI = (props: any) => {
 		productCart,
 		increment,
 		decrement,
+		handleChangeProductCartQuantity,
 		showOption,
 		maxProductQuantity,
 		errors,
@@ -64,6 +69,7 @@ export const ProductOptionsUI = (props: any) => {
 	} = props;
 
 	const theme = useTheme();
+	const [, { showToast }] = useToast()
 
 	const styles = StyleSheet.create({
 		mainContainer: {
@@ -158,6 +164,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [indexGallery, setIndexGallery] = useState(0)
 	const [selOpt, setSelectedOpt] = useState(0);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
+	const [playing, setPlaying] = useState(false);
 	const [qtyBy, setQtyBy] = useState({
 		weight_unit: false,
 		pieces: true
@@ -216,7 +223,7 @@ export const ProductOptionsUI = (props: any) => {
 
 	const handleRedirectLogin = () => {
 		navigation.navigate('Login', {
-			store_slug:  props.businessSlug
+			store_slug: props.businessSlug
 		});
 	};
 
@@ -224,15 +231,42 @@ export const ProductOptionsUI = (props: any) => {
 		setQtyBy({ [val]: true, [!val]: false })
 	}
 
+	const onStateChange = useCallback((state) => {
+		if (state === "ended") {
+			setPlaying(false);
+		}
+	}, []);
+
+	const togglePlaying = useCallback(() => {
+		setPlaying((prev) => !prev);
+	}, []);
+
+	const onChangeProductCartQuantity = (quantity: number) => {
+		if (quantity >= maxProductQuantity) {
+			showToast(ToastType.Error, t('MAX_QUANTITY', 'The max quantity is _number_').replace('_number_', maxProductQuantity))
+			return
+		}
+		handleChangeProductCartQuantity(quantity)
+	}
+
 	useEffect(() => {
-		const productImgList: any = []
-		product?.images && productImgList.push(product.images)
+		const imageList: any = []
+		const videoList: any = []
+		product?.images && imageList.push(product.images)
 		if (product?.gallery && product?.gallery.length > 0) {
 			for (const img of product?.gallery) {
-				productImgList.push(img.file)
+				if (img?.file) {
+					imageList.push(img?.file)
+				}
+				if (img?.video) {
+					const keys = img?.video.split('/')
+					const _videoId = keys[keys.length - 1]
+					videoList.push(_videoId)
+				}
 			}
 		}
-		setGallery(productImgList)
+		const gallery = imageList.concat(videoList)
+		setGallery(gallery)
 
 		if (product?.weight && product?.weight_unit) {
 			setIsHaveWeight(true)
@@ -349,18 +383,30 @@ export const ProductOptionsUI = (props: any) => {
 											</View>
 										}
 									>
-										{gallery.length > 0 && gallery.map((img, i) => (
+										{gallery && gallery.length > 0 && gallery.map((img, i) => (
 											<View
 												style={styles.slide1}
 												key={i}
 											>
-												<FastImage
-													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
-													source={{
-														uri: optimizeImage(img, 'h_258,c_limit'),
-														priority: FastImage.priority.normal,
-													}}
-												/>
+												{img.includes('image') ? (
+													<FastImage
+														style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
+														source={{
+															uri: optimizeImage(img, 'h_258,c_limit'),
+															priority: FastImage.priority.normal,
+														}}
+													/>
+												) : (
+													<>
+														<YoutubePlayer
+															height={300}
+															play={playing}
+															videoId={img}
+															onChangeState={onStateChange}
+														/>
+														<Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
+													</>
+												)}
 											</View>
 										))}
 									</Swiper>
@@ -384,18 +430,33 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-													<OIcon
-														url={img}
-														style={{
-															borderColor: theme.colors.lightGray,
-															borderRadius: 8,
-															minHeight: '100%',
-															opacity: isSoldOut ? 0.5 : 1
-														}}
-														width={56}
-														height={56}
-														cover
-													/>
+													{img.includes('image') ? (
+														<OIcon
+															url={img}
+															style={{
+																borderColor: theme.colors.lightGray,
+																borderRadius: 8,
+																minHeight: '100%',
+																opacity: isSoldOut ? 0.5 : 1
+															}}
+															width={56}
+															height={56}
+															cover
+														/>
+													) : (
+														<OIcon
+															url={'http://img.youtube.com/vi/' + img + '/0.jpg'}
+															style={{
+																borderColor: theme.colors.lightGray,
+																borderRadius: 8,
+																minHeight: '100%',
+																opacity: isSoldOut ? 0.5 : 1
+															}}
+															width={56}
+															height={56}
+															cover
+														/>
+													)}
 												</View>
 											</TouchableOpacity>
 
@@ -787,14 +848,32 @@ export const ProductOptionsUI = (props: any) => {
 									}
 								/>
 							</TouchableOpacity>
-							<OText
-								size={12}
-								lineHeight={18}
-								style={{ minWidth: 40, textAlign: 'center' }}
-							>
-								{qtyBy?.pieces && productCart.quantity}
-								{qtyBy?.weight_unit && productCart.quantity * product?.weight}
-							</OText>
+							{qtyBy?.pieces && (
+								<TextInput
+									keyboardType='numeric'
+									value={`${productCart.quantity}` || ''}
+									onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
+									editable={!orderState.loading}
+									style={{
+										borderWidth: 1,
+										textAlign: 'center',
+										minWidth: 60,
+										borderRadius: 8,
+										borderColor: theme.colors.inputBorderColor,
+										height: 44,
+										marginHorizontal: 10
+									}}
+								/>
+							)}
+							{qtyBy?.weight_unit && (
+								<OText
+									size={12}
+									lineHeight={18}
+									style={{ minWidth: 40, textAlign: 'center' }}
+								>
+									{productCart.quantity * product?.weight}
+								</OText>
+							)}
 							<TouchableOpacity
 								onPress={increment}
 								disabled={

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

@@ -203,7 +203,7 @@ export interface BusinessProductsListParams {
 	errors?: any;
 	businessId?: number;
 	category?: any;
-	categories?: Array<any>;
+	categories: Array<any>;
 	categoryState?: any;
 	onProductClick?: any;
 	handleSearchRedirect?: () => {};