ordering-ui-react-native 0.17.2-release → 0.17.3-release

package/package.json

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

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

@@ -226,6 +226,7 @@ const CartUI = (props: any) => {
             key={`${product.code}_${i}`}
             isCartPending={isCartPending}
             isCartProduct
+            isDisabledEdit={!cart?.business_id}
             product={product}
             changeQuantity={changeQuantity}
             getProductMax={getProductMax}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, Vibration, ScrollView } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import Picker from 'react-native-country-picker-modal';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
@@ -52,7 +52,7 @@ import { FloatingButton } from '../FloatingButton';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
 import { OrderSummary } from '../OrderSummary';
-import { getTypesText } from '../../utils';
+import { getTypesText, vibrateApp } from '../../utils';
 import { CartStoresListing } from '../CartStoresListing';
 import { PaymentOptionsWebView } from '../../../../../src/components/PaymentOptionsWebView';
 
@@ -152,7 +152,7 @@ const CheckoutUI = (props: any) => {
 	const [isOpen, setIsOpen] = useState(false)
 	const [requiredFields, setRequiredFields] = useState<any>([])
 	const [openModal, setOpenModal] = useState({ login: false, signup: false })
-  const [allowedGuest, setAllowedGuest] = useState(false)
+  	const [allowedGuest, setAllowedGuest] = useState(false)
 
 	const placeSpotTypes = [3, 4, 5]
 	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
@@ -177,12 +177,16 @@ const CheckoutUI = (props: any) => {
 			return acc = acc + item?.summary?.tax
 		return acc = acc
 	}, cart?.subtotal)
+
+	const validateCommentsCartField = validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && (cart?.comment === null || cart?.comment?.trim().length === 0)
+
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
 		(options.type === 1 &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
-			(Number(cart?.driver_tip) <= 0))
+			(Number(cart?.driver_tip) <= 0)) ||
+		(validateCommentsCartField)
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -218,7 +222,7 @@ const CheckoutUI = (props: any) => {
 
 	const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
 		if (!userErrors.length && (!requiredFields?.length || allowedGuest) || forcePlace) {
-			Vibration.vibrate()
+			vibrateApp()
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}
@@ -257,7 +261,7 @@ const CheckoutUI = (props: any) => {
 	const checkValidationFields = () => {
 		setUserErrors([])
 		const errors = []
-		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
+		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
 		const _requiredFields: any = []
 
 		Object.values(validationFields?.fields?.checkout).map((field: any) => {
@@ -347,6 +351,7 @@ const CheckoutUI = (props: any) => {
 						btnStyle={{ paddingLeft: 0, paddingTop: Platform.OS == 'ios' ? 0 : 2 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 						titleStyle={{ marginRight: 0, marginLeft: 0 }}
+						style={{ marginTop: 20 }}
 					/>
 				</View>
 				<ChContainer style={styles.pagePadding}>
@@ -751,7 +756,7 @@ const CheckoutUI = (props: any) => {
 
 					{!cartState.loading && cart && (
 						<View>
-							<ChErrors style={{ marginBottom: 30 }}>
+							<ChErrors style={{ marginBottom: Platform.OS === 'ios' ? 35 : 10 }}>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
 										color={theme.colors.error}
@@ -797,6 +802,15 @@ const CheckoutUI = (props: any) => {
 											{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
 										</OText>
 									)}
+
+								{validateCommentsCartField && (
+									<OText
+										color={theme.colors.error}
+										size={12}
+									>
+										{t('WARNING_INVALID_CART_COMMENTS', 'Cart comments is required.')}
+									</OText>
+								)}
 							</ChErrors>
 						</View>
 					)}
@@ -869,7 +883,7 @@ const CheckoutUI = (props: any) => {
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (
 				<FloatingButton
-					handleClick={isDisabledButtonPlace ? () => Vibration.vibrate() : () => handlePlaceOrder(null)}
+					handleClick={isDisabledButtonPlace ? () => vibrateApp() : () => handlePlaceOrder(null)}
 					isSecondaryBtn={isDisabledButtonPlace}
 					disabled={isDisabledButtonPlace}
 					btnText={subtotalWithTaxes >= cart?.minimum

package/themes/original/src/components/GiftCard/GiftCardUI/index.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useLanguage } from 'ordering-components/native';
+import Feather from 'react-native-vector-icons/Feather'
+import { useTheme } from 'styled-components/native';
+import { OText, OButton } from '../../shared';
+import { OModal } from '../../../../../../src/components/shared';
+import { PurchaseGiftCard } from '../PurchaseGiftCard'
+import { RedeemGiftCard } from '../RedeemGiftCard'
+
+import {
+  Container
+} from './styles'
+
+export const GiftCardUI =  React.memo((props: any) => {
+  const {
+    navigation
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [openModal, setOpenModal] = useState<any>(null)
+
+  const style = StyleSheet.create({
+    title: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    actionWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 10
+    },
+    btnStyle: {
+      borderRadius: 7.6,
+      paddingLeft: 0,
+      paddingRight: 0,
+      height: 44
+    }
+  })
+
+  const handleCustomGoToCheckout = (uuid: any) => {
+    setOpenModal(null)
+    navigation.navigate('CheckoutNavigator', {
+      screen: 'CheckoutPage',
+      cartUuid: uuid
+    })
+  }
+
+  return (
+    <Container>
+      <View style={style.title}>
+        <OText size={16} color={theme.colors.textNormal} weight='bold' mBottom={0} mRight={12}>{t('GIFT_CARD', 'Gift card')}</OText>
+        <Feather name='gift' color={theme.colors.textNormal} size={16} />
+      </View>
+
+      <View style={style.actionWrapper}>
+        <OButton
+          onClick={() => setOpenModal('purchase')}
+          text={t('PURCHASE_GIFT_CARD', 'Purchase gift card')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          textStyle={{ color: 'white', fontSize: 13 }}
+          imgRightSrc={null}
+          style={{ ...style.btnStyle, marginRight: 14 }}
+        />
+
+        <OButton
+          onClick={() => setOpenModal('redeem')}
+          text={t('REDEEM_GIFT_CARD', 'Redeem gift card')}
+          bgColor={theme.colors.lightPrimary}
+          borderColor={theme.colors.lightPrimary}
+          textStyle={{ color: theme.colors.primary, fontSize: 13 }}
+          imgRightSrc={null}
+          style={style.btnStyle}
+        />
+      </View>
+
+      <OModal
+				open={openModal === 'purchase'}
+				onClose={() => setOpenModal(null)}
+				entireModal
+			>
+				<PurchaseGiftCard handleCustomGoToCheckout={handleCustomGoToCheckout} />
+			</OModal>
+      <OModal
+				open={openModal === 'redeem'}
+				onClose={() => setOpenModal(null)}
+				entireModal
+			>
+				<RedeemGiftCard
+          onClose={() => setOpenModal(null)}
+        />
+			</OModal>
+    </Container>
+  )
+})

package/themes/original/src/components/GiftCard/GiftCardUI/styles.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+`

package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import {
+  useLanguage,
+  PurchaseGiftCard as PurchaseGiftCardController
+} from 'ordering-components/native'
+import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { useTheme } from 'styled-components/native';
+import { OText, OButton, OIcon } from '../../shared';
+
+import {
+  Container
+} from './styles'
+
+const PurchaseGiftCardUI = (props: any) => {
+  const {
+    productsListState,
+    selectedProduct,
+    setSelectedProduct,
+    handleAccept
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const style = StyleSheet.create({
+    itemStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 15,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.disabled
+    },
+    btnStyle: {
+      borderRadius: 7.6,
+      paddingLeft: 0,
+      paddingRight: 0,
+      height: 44,
+      marginTop: 50
+    }
+  })
+
+  return (
+    <Container>
+      <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      <OText color={theme.colors.textNormal} size={14}>{t('SELECT_ONE_OPTION', 'Select one option')}</OText>
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1
+        }}
+      >
+        {productsListState.loading && (
+          [...Array(5).keys()].map(i => (
+            <View key={i} style={style.itemStyle}>
+              <Placeholder
+                Animation={Fade}
+              >
+                <PlaceholderLine width={80} height={20} style={{ marginBottom: 0 }} />
+              </Placeholder>
+            </View>
+          ))
+        )}
+        {productsListState.products.map(product => (
+          <TouchableOpacity
+            key={product.id}
+            style={style.itemStyle}
+            onPress={() => setSelectedProduct(product)}
+          >
+            <View style={{ marginRight: 10 }}>
+              {selectedProduct?.id === product.id ? (
+                <OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
+              ) : (
+                <OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
+              )}
+            </View>
+            <OText color={theme.colors.textNormal} size={14}>{product.name}</OText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+      <OButton
+        onClick={() => handleAccept()}
+        text={t('ACCEPT', 'Accept')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        textStyle={{ color: 'white', fontSize: 13 }}
+        imgRightSrc={null}
+        style={style.btnStyle}
+        isDisabled={!selectedProduct}
+      />
+    </Container>
+  )
+}
+
+export const PurchaseGiftCard = (props: any) => {
+  const purchaseGiftCardProps = {
+    ...props,
+    UIComponent: PurchaseGiftCardUI
+  }
+  return <PurchaseGiftCardController {...purchaseGiftCardProps} />
+}

package/themes/original/src/components/GiftCard/PurchaseGiftCard/styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+  padding-horizontal: 40px;
+  flex: 1;
+  padding-bottom: 30px;
+`

package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx

@@ -0,0 +1,178 @@
+import React, { useEffect } from 'react'
+import {
+  useLanguage, useUtils, RedeemGiftCard as RedeemGiftCardController
+} from 'ordering-components/native'
+import { useForm, Controller } from 'react-hook-form'
+import { StyleSheet, View, Alert } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { OText, OButton, OInput } from '../../shared';
+
+import {
+  Container,
+  FormController
+} from './styles'
+
+const RedeemGiftCardUI = (props: any) => {
+  const {
+    actionState,
+    redeemedGiftCard,
+    handleApply,
+    onClose,
+    setRedeemedGiftCard
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const { handleSubmit, control, errors } = useForm()
+  const [{ parsePrice }] = useUtils()
+
+  const style = StyleSheet.create({
+    btnStyle: {
+      borderRadius: 7.6,
+      height: 44,
+      marginTop: 20
+    },
+    inputStyle: {
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			borderRadius: 7.6,
+		},
+  })
+
+  const onSubmit = (values) => {
+    handleApply(values)
+  }
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      const list = Object.values(errors)
+      let stringError = ''
+      list.map((item: any, i: number) => {
+        stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
+      })
+      Alert.alert(
+        t('ERROR', 'Error'),
+        stringError,
+        [
+          { text: t('OK', 'oK'), onPress: () => {} }
+        ]
+      )
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (!actionState.error) return
+    let stringError = ''
+    if (typeof actionState.error === 'string') {
+      stringError = actionState.error
+    } else {
+      actionState.error.map(item => {
+        stringError += `- ${item}\n`
+      })
+    }
+    Alert.alert(
+      t('ERROR', 'Error'),
+      stringError,
+      [
+        { text: t('OK', 'oK'), onPress: () => {} }
+      ]
+    )
+  }, [actionState.error])
+
+  return (
+    <Container>
+      {!redeemedGiftCard ? (
+        <View>
+          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          <FormController>
+            <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('GIFT_CARD_CODE', 'Gift card code')}</OText>
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+              <OInput
+                placeholder='0000 0000'
+                value={value}
+                onChange={(val: any) => onChange(val)}
+                autoCapitalize='none'
+                autoCorrect={false}
+                blurOnSubmit={false}
+                style={style.inputStyle}
+              />
+              )}
+              name='code'
+              rules={{
+                required: t('VALIDATION_ERROR_REQUIRED', 'Code is required').replace('_attribute_', t('CODE', 'Code'))
+              }}
+              defaultValue=""
+            />
+          </FormController>
+          <FormController>
+            <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('PASSWORD', 'Password')}</OText>
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+                <OInput
+                  isSecured
+                  placeholder={t('PASSWORD', 'Password')}
+                  value={value}
+                  onChange={(val: any) => onChange(val)}
+                  autoCapitalize='none'
+                  autoCompleteType='password'
+                  autoCorrect={false}
+                  blurOnSubmit={false}
+                  style={style.inputStyle}
+                />
+              )}
+              name='password'
+              rules={{
+                required: t('VALIDATION_ERROR_REQUIRED', 'Password is required').replace('_attribute_', t('PASSWORD', 'Password'))
+              }}
+              defaultValue=""
+            />
+          </FormController>
+          <OButton
+            onClick={handleSubmit(onSubmit)}
+            text={actionState?.loading ? t('LOADING', 'Loading') : t('APPLY_TO_YOUR_BALANCE', 'Apply to your balance')}
+            bgColor={theme.colors.primary}
+            borderColor={theme.colors.primary}
+            textStyle={{ color: 'white', fontSize: 13 }}
+            imgRightSrc={null}
+            style={style.btnStyle}
+            isDisabled={actionState.loading}
+          />
+        </View>
+      ) : (
+        <>
+          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('GIFT_CARD', 'Gift card')}</OText>
+          <View>
+            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
+            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('AMOUNT', 'Amount')}: {parsePrice(redeemedGiftCard?.amount)}</OText>
+            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('FROM', 'From')}: {redeemedGiftCard?.receiver?.name} {redeemedGiftCard?.receiver?.lastname}</OText>
+            {!!redeemedGiftCard?.title && <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TITLE', 'Title')}: {redeemedGiftCard?.title}</OText>}
+            {!!redeemedGiftCard?.message && <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('MESSAGES', 'Messages')}: {redeemedGiftCard?.message}</OText>}
+            <OButton
+              onClick={() => {
+                setRedeemedGiftCard(null)
+                onClose()
+              }}
+              text={t('OK', 'Ok')}
+              bgColor={theme.colors.primary}
+              borderColor={theme.colors.primary}
+              textStyle={{ color: 'white', fontSize: 13 }}
+              imgRightSrc={null}
+              style={style.btnStyle}
+            />
+          </View>
+        </>
+      )}
+    </Container>
+  )
+}
+
+export const RedeemGiftCard = (props: any) => {
+  const redeemGiftCardProps = {
+    ...props,
+    UIComponent: RedeemGiftCardUI
+  }
+  return <RedeemGiftCardController {...redeemGiftCardProps} />
+}

package/themes/original/src/components/GiftCard/RedeemGiftCard/styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  padding-horizontal: 40px;
+`
+export const FormController = styled.View`
+  margin-bottom: 25px;
+`

package/themes/original/src/components/GiftCard/SendGiftCard/index.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect } from 'react'
+import { StyleSheet, Platform, Alert } from 'react-native';
+import { useLanguage, SendGiftCard as SendGiftCardController  } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { OText, OButton, OInput } from '../../shared';
+import { useForm, Controller } from 'react-hook-form'
+
+import {
+  Container,
+  FormController
+} from './styles'
+
+
+const SendGiftCardUI = (props: any) => {
+  const {
+    actionState,
+    handleSendGiftCard
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const { handleSubmit, control, errors } = useForm()
+
+  const style = StyleSheet.create({
+    btnStyle: {
+      borderRadius: 7.6,
+      height: 44,
+      marginTop: 20
+    },
+    inputStyle: {
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			borderRadius: 7.6,
+		},
+  })
+
+  const onSubmit = (values) => {
+    handleSendGiftCard(values)
+  }
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      const list = Object.values(errors)
+      let stringError = ''
+      list.map((item: any, i: number) => {
+        stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
+      })
+      Alert.alert(
+        t('ERROR', 'Error'),
+        stringError,
+        [
+          { text: t('OK', 'oK'), onPress: () => {} }
+        ]
+      )
+    }
+  }, [errors])
+
+  return (
+    <Container>
+      <OText color={theme.colors.textNormal} size={20} mBottom={10} style={{ fontWeight: Platform.OS == 'ios' ? '600' : 'bold' }}>{t('GIFT_CARD_DETAILS', 'Gift Card details')}</OText>
+      <FormController>
+        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('TO', 'To')}</OText>
+        <Controller
+          control={control}
+          render={({ onChange, value }: any) => (
+            <OInput
+              placeholder={t('ENTER_AN_EMAIL', 'Enter an email')}
+              value={value}
+              onChange={(val: any) => onChange(val)}
+              autoCompleteType='email'
+              autoCapitalize='none'
+              autoCorrect={false}
+              type='email-address'
+              blurOnSubmit={false}
+              style={style.inputStyle}
+            />
+          )}
+          name='email'
+          rules={{
+            required: t('VALIDATION_ERROR_REQUIRED', 'To email is required').replace('_attribute_', t('EMAIL', 'EMail'))
+          }}
+          defaultValue=""
+        />
+      </FormController>
+      <FormController>
+        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('FROM', 'From')}</OText>
+        <Controller
+          control={control}
+          render={({ onChange, value }: any) => (
+            <OInput
+              placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+              value={value}
+              onChange={(val: any) => onChange(val)}
+              autoCapitalize='none'
+              autoCorrect={false}
+              blurOnSubmit={false}
+              style={style.inputStyle}
+            />
+          )}
+          name='user_name'
+          defaultValue=""
+        />
+      </FormController>
+      <FormController>
+        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('TITLE', 'Title')}</OText>
+        <Controller
+          control={control}
+          render={({ onChange, value }: any) => (
+            <OInput
+              placeholder={t('TITLE', 'Title')}
+              value={value}
+              onChange={(val: any) => onChange(val)}
+              autoCapitalize='none'
+              autoCorrect={false}
+              blurOnSubmit={false}
+              style={style.inputStyle}
+            />
+          )}
+          name='title'
+          defaultValue=""
+        />
+      </FormController>
+      <FormController>
+        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('MESSAGES', 'Messages')}</OText>
+        <Controller
+          control={control}
+          render={({ onChange, value }: any) => (
+            <OInput
+              multiline
+              placeholder={t('TYPE_YOUR_MESSAGE_HERE', 'Type your message here')}
+              value={value}
+              onChange={(val: any) => onChange(val)}
+              autoCapitalize='none'
+              autoCorrect={false}
+              blurOnSubmit={false}
+              style={{ ...style.inputStyle, height: 100, alignItems: 'flex-start', }}
+            />
+          )}
+          name='message'
+          defaultValue=""
+        />
+      </FormController>
+      <OButton
+        onClick={handleSubmit(onSubmit)}
+        text={actionState?.loading ? t('LOADING', 'Loading') : t('SEND_GIFT_CARD', 'Send gift card')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        textStyle={{ color: 'white', fontSize: 13 }}
+        imgRightSrc={null}
+        style={style.btnStyle}
+        isDisabled={actionState.loading}
+      />
+    </Container>
+  )
+}
+
+export const SendGiftCard = (props: any) => {
+  const sendGiftCardProps = {
+    ...props,
+    showToastMsg: true,
+    UIComponent: SendGiftCardUI
+  }
+  return <SendGiftCardController {...sendGiftCardProps} />
+}

package/themes/original/src/components/GiftCard/SendGiftCard/styles.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  padding-horizontal: 40px;
+  margin-bottom: 30px;
+`
+export const FormController = styled.View`
+  margin-bottom: 25px;
+`

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

@@ -49,6 +49,7 @@ import NavBar from '../NavBar'
 import { OrderHistory } from './OrderHistory';
 import { PlaceSpot } from '../PlaceSpot'
 import { OrderEta } from './OrderEta'
+import { SendGiftCard } from '../GiftCard/SendGiftCard'
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
     navigation,
@@ -112,6 +113,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [{ carts }] = useOrder()
 
   const [isReviewed, setIsReviewed] = useState(false)
+  const [isGiftCardSent, setIsGiftCardSent] = useState(false)
   const [isOrderHistory, setIsOrderHistory] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
   const [refreshing] = useState(false);
@@ -122,6 +124,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
+  const isGiftCardOrder = !order?.business_id
+
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -412,175 +416,179 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </OText>
               </View>
             )}
-            <OrderInfo>
-              <OrderData>
-                <View style={styles.linkWrapper}>
-                  {
-                    (
-                      parseInt(order?.status) === 1 ||
-                      parseInt(order?.status) === 11 ||
-                      parseInt(order?.status) === 15
-                    ) && !order.review && !isReviewed && (
-                      <TouchableOpacity
-                        activeOpacity={0.7}
-                        style={{ marginTop: 6, marginRight: 10 }}
-                        onPress={() => handleClickOrderReview(order)}
-                      >
-                        <OText
-                          size={12}
-                          lineHeight={15}
-                          color={theme.colors.primary}
-                          style={{ textDecorationLine: 'underline' }}
+            {!isGiftCardOrder && (
+              <OrderInfo>
+                <OrderData>
+                  <View style={styles.linkWrapper}>
+                    {
+                      (
+                        parseInt(order?.status) === 1 ||
+                        parseInt(order?.status) === 11 ||
+                        parseInt(order?.status) === 15
+                      ) && !order.review && !isReviewed && (
+                        <TouchableOpacity
+                          activeOpacity={0.7}
+                          style={{ marginTop: 6, marginRight: 10 }}
+                          onPress={() => handleClickOrderReview(order)}
                         >
-                          {t('REVIEW_YOUR_ORDER', 'Review your order')}
-                        </OText>
-                      </TouchableOpacity>
-                    )}
-                  <TouchableOpacity
-                    activeOpacity={0.7}
-                    style={{ marginTop: 6 }}
-                    onPress={() => setIsOrderHistory(true)}
-
-                  >
-                    <OText
-                      size={12}
-                      lineHeight={15}
-                      color={theme.colors.primary}
-                      style={{ textDecorationLine: 'underline', textTransform: 'capitalize' }}
+                          <OText
+                            size={12}
+                            lineHeight={15}
+                            color={theme.colors.primary}
+                            style={{ textDecorationLine: 'underline' }}
+                          >
+                            {t('REVIEW_YOUR_ORDER', 'Review your order')}
+                          </OText>
+                        </TouchableOpacity>
+                      )}
+                    <TouchableOpacity
+                      activeOpacity={0.7}
+                      style={{ marginTop: 6 }}
+                      onPress={() => setIsOrderHistory(true)}
+  
                     >
-                      {t('VIEW_DETAILS', 'View Details')}
-                    </OText>
-                  </TouchableOpacity>
-                </View>
-
-                <StaturBar>
-                  <LinearGradient
-                    start={{ x: 0.0, y: 0.0 }}
-                    end={{
-                      x: getOrderStatus(order?.status)?.percentage || 0,
-                      y: 0,
-                    }}
-                    locations={[0.9999, 0.9999]}
-                    colors={[theme.colors.primary, theme.colors.backgroundGray100]}
-                    style={styles.statusBar}
-                  />
-                </StaturBar>
+                      <OText
+                        size={12}
+                        lineHeight={15}
+                        color={theme.colors.primary}
+                        style={{ textDecorationLine: 'underline', textTransform: 'capitalize' }}
+                      >
+                        {t('VIEW_DETAILS', 'View Details')}
+                      </OText>
+                    </TouchableOpacity>
+                  </View>
+  
+                  <StaturBar>
+                    <LinearGradient
+                      start={{ x: 0.0, y: 0.0 }}
+                      end={{
+                        x: getOrderStatus(order?.status)?.percentage || 0,
+                        y: 0,
+                      }}
+                      locations={[0.9999, 0.9999]}
+                      colors={[theme.colors.primary, theme.colors.backgroundGray100]}
+                      style={styles.statusBar}
+                    />
+                  </StaturBar>
+                  <OText
+                    size={16}
+                    lineHeight={24}
+                    weight={'600'}
+                    color={theme.colors.textNormal}>
+                    {getOrderStatus(order?.status)?.value}
+                  </OText>
+                </OrderData>
+                <View
+                  style={{
+                    height: 8,
+                    backgroundColor: theme.colors.backgroundGray100,
+                    marginTop: 18,
+                    marginHorizontal: -40,
+                  }}
+                />
+              </OrderInfo>
+            )}
+          </Header>
+          <OrderContent>
+            {!isGiftCardOrder && (
+              <OrderBusiness>
                 <OText
                   size={16}
                   lineHeight={24}
-                  weight={'600'}
-                  color={theme.colors.textNormal}>
-                  {getOrderStatus(order?.status)?.value}
+                  weight={'500'}
+                  color={theme.colors.textNormal}
+                  mBottom={12}>
+                  {t('FROM', 'From')}
                 </OText>
-              </OrderData>
-              <View
-                style={{
-                  height: 8,
-                  backgroundColor: theme.colors.backgroundGray100,
-                  marginTop: 18,
-                  marginHorizontal: -40,
-                }}
-              />
-            </OrderInfo>
-          </Header>
-          <OrderContent>
-            <OrderBusiness>
-              <OText
-                size={16}
-                lineHeight={24}
-                weight={'500'}
-                color={theme.colors.textNormal}
-                mBottom={12}>
-                {t('FROM', 'From')}
-              </OText>
-              <View
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'flex-start',
-                }}>
                 <View
                   style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
                   }}>
-                  <OText
-                    size={13}
-                    lineHeight={20}
-                    color={theme.colors.textNormal}
-                    style={{ flexGrow: 1, flexBasis: '80%' }}>
-                    {order?.business?.name}
-                  </OText>
-                  <Icons>
-                    {!!order?.business?.cellphone && (
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                    }}>
+                    <OText
+                      size={13}
+                      lineHeight={20}
+                      color={theme.colors.textNormal}
+                      style={{ flexGrow: 1, flexBasis: '80%' }}>
+                      {order?.business?.name}
+                    </OText>
+                    <Icons>
+                      {!!order?.business?.cellphone && (
+                        <TouchableOpacity
+                          onPress={() => order?.business?.cellphone &&
+                            Linking.openURL(`tel:${order?.business?.cellphone}`)
+                          }
+                          style={{ paddingEnd: 5 }}
+                        >
+                          <OIcon
+                            src={theme.images.general.phone}
+                            width={16}
+                            color={theme.colors.disabled}
+                          />
+                        </TouchableOpacity>
+                      )}
                       <TouchableOpacity
-                        onPress={() => order?.business?.cellphone &&
-                          Linking.openURL(`tel:${order?.business?.cellphone}`)
-                        }
-                        style={{ paddingEnd: 5 }}
-                      >
+                        style={{ paddingStart: 5 }}
+                        onPress={() => handleGoToMessages('business')}>
                         <OIcon
-                          src={theme.images.general.phone}
+                          src={theme.images.general.chat}
                           width={16}
                           color={theme.colors.disabled}
                         />
                       </TouchableOpacity>
-                    )}
-                    <TouchableOpacity
-                      style={{ paddingStart: 5 }}
-                      onPress={() => handleGoToMessages('business')}>
-                      <OIcon
-                        src={theme.images.general.chat}
-                        width={16}
-                        color={theme.colors.disabled}
-                      />
-                    </TouchableOpacity>
-                  </Icons>
-                </View>
-                <OText
-                  size={12}
-                  lineHeight={18}
-                  color={theme.colors.textNormal}
-                  mBottom={2}>
-                  {order?.business?.email}
-                </OText>
-                {!!order?.business?.cellphone && (
+                    </Icons>
+                  </View>
                   <OText
                     size={12}
                     lineHeight={18}
                     color={theme.colors.textNormal}
                     mBottom={2}>
-                    {order?.business?.cellphone}
+                    {order?.business?.email}
                   </OText>
+                  {!!order?.business?.cellphone && (
+                    <OText
+                      size={12}
+                      lineHeight={18}
+                      color={theme.colors.textNormal}
+                      mBottom={2}>
+                      {order?.business?.cellphone}
+                    </OText>
+                  )}
+                  <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
+                    {order?.business?.address}
+                  </OText>
+                </View>
+                {directionTypes.includes(order?.delivery_type) && (
+                  <OButton
+                    text={t('GET_DIRECTIONS', 'Get Directions')}
+                    imgRightSrc=''
+                    textStyle={{ color: theme.colors.white }}
+                    style={{
+                      alignSelf: 'center',
+                      borderRadius: 10,
+                      marginTop: 30
+                    }}
+                    onClick={() => showLocation({
+                      latitude: order?.business?.location?.lat,
+                      longitude: order?.business?.location?.lng,
+                      naverCallerName: 'com.reactnativeappstemplate5',
+                      dialogTitle: t('GET_DIRECTIONS', 'Get Directions'),
+                      dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
+                      cancelText: t('CANCEL', 'Cancel'),
+                    })}
+                  />
                 )}
-                <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-                  {order?.business?.address}
-                </OText>
-              </View>
-              {directionTypes.includes(order?.delivery_type) && (
-                <OButton
-                  text={t('GET_DIRECTIONS', 'Get Directions')}
-                  imgRightSrc=''
-                  textStyle={{ color: theme.colors.white }}
-                  style={{
-                    alignSelf: 'center',
-                    borderRadius: 10,
-                    marginTop: 30
-                  }}
-                  onClick={() => showLocation({
-                    latitude: order?.business?.location?.lat,
-                    longitude: order?.business?.location?.lng,
-                    naverCallerName: 'com.reactnativeappstemplate5',
-                    dialogTitle: t('GET_DIRECTIONS', 'Get Directions'),
-                    dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
-                    cancelText: t('CANCEL', 'Cancel'),
-                  })}
-                />
-              )}
-            </OrderBusiness>
+              </OrderBusiness>
+            )}
             
-            {placeSpotTypes.includes(order?.delivery_type) && (
+            {!isGiftCardOrder && placeSpotTypes.includes(order?.delivery_type) && (
               <PlaceSpotWrapper>
                 <PlaceSpot
                   isInputMode
@@ -606,7 +614,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 weight={'500'}
                 color={theme.colors.textNormal}
                 mBottom={12}>
-                {t('TO', 'To')}
+                {isGiftCardOrder ? t('CUSTOMER', 'Customer') : t('TO', 'To')}
               </OText>
               <Customer>
                 <InfoBlock>
@@ -635,7 +643,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   )}
                 </InfoBlock>
               </Customer>
-              {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
+              {!isGiftCardOrder && order?.delivery_option !== undefined && order?.delivery_type === 1 && (
                 <View style={{ marginTop: 15 }}>
                   <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
                     {t('DELIVERY_PREFERENCE', 'Delivery Preference')}
@@ -817,7 +825,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </Table>
                 ))
               }
-              <Divider />
+              {!isGiftCardOrder && (
+                <Divider />
+              )}
               {order?.summary?.subtotal_with_discount > 0 && order?.summary?.discount > 0 && order?.summary?.total >= 0 && (
                 <Table>
                   <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
@@ -991,6 +1001,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </View>
               )}
             </OrderBill>
+            {isGiftCardOrder && order?.products[0]?.gift_card?.status === 'pending' && !isGiftCardSent && (
+              <>
+                <View
+                  style={{
+                    height: 8,
+                    backgroundColor: theme.colors.backgroundGray100,
+                    marginTop: 10,
+                    marginHorizontal: -40,
+                    marginBottom: 20
+                  }}
+                />
+                <SendGiftCard
+                  giftCardId={order?.products[0]?.gift_card?.id}
+                  setIsGiftCardSent={setIsGiftCardSent}
+                />
+              </>
+            )}
           </OrderContent>
         </>
       )}

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

@@ -287,7 +287,7 @@ const PaymentOptionsUI = (props: any) => {
 					<StripeCardsList
 						paymethod={isOpenMethod?.paymethod}
 						businessId={props.businessId}
-						publicKey={isOpenMethod?.paymethod?.credentials.publishable}
+						publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
 						payType={paymethodsList?.name}
 						onSelectCard={handlePaymethodDataChange}
 						onNavigationRedirect={onNavigationRedirect}

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

@@ -27,6 +27,7 @@ import { ProductItemAccordionParams } from '../../types'
 export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const {
+		isDisabledEdit,
 		isCartPending,
 		isCartProduct,
 		product,
@@ -203,7 +204,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 								</View>
 							) : (
 								<>
-									{isCartProduct && !isCartPending && getProductMax && (
+									{!isDisabledEdit && isCartProduct && !isCartPending && getProductMax && (
 										<ProductInfo>
 											<RNPickerSelect
 												items={productOptions}
@@ -225,7 +226,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										</ProductQuantity>
 									)}
 									<View style={{ flex: 1 }}>
-										<OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
+										<OText size={12} lineHeight={18} weight={'400'} mLeft={8}>{product.name}</OText>
 									</View>
 								</>
 							)}
@@ -237,7 +238,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 									)}
 								</View>
 								<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', height: 20 }}>
-									{onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
+									{!isDisabledEdit && onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
 										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginRight: 5 }}>
 											<MaterialCommunityIcon
 												name='pencil-outline'

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

@@ -280,7 +280,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         </OText>
                       </TouchableOpacity>
                     )}
-                  {order.cart && !hideReorderButton && (
+                  {!hideReorderButton && (
                     <OButton
                       text={t('REORDER', 'Reorder')}
                       imgRightSrc={''}

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

@@ -27,6 +27,7 @@ import {
 import { OButton, OIcon, OText, OModal } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { WalletTransactions } from '../WalletTransactions'
+import { GiftCardUI } from '../GiftCard/GiftCardUI'
 
 const WalletsUI = (props: any) => {
   const {
@@ -47,6 +48,7 @@ const WalletsUI = (props: any) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
 
+
   const styles = StyleSheet.create({
     logoStyle: {
       width: 120,
@@ -57,6 +59,13 @@ const WalletsUI = (props: any) => {
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
+    },
+    dividerStyle: {
+      height: 8,
+      backgroundColor: theme.colors.backgroundGray100,
+      marginVertical: 25,
+      marginHorizontal: -40,
+      width: '100%'
     }
   });
 
@@ -207,6 +216,10 @@ const WalletsUI = (props: any) => {
                   </OText>
                 </BalanceElement>
 
+                <View style={styles.dividerStyle} />
+                <GiftCardUI navigation={navigation} />
+                <View style={styles.dividerStyle} />
+
                 {!isChewLayout && (
                   <WalletTransactions
                     transactionsList={transactionsList}

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

@@ -444,7 +444,8 @@ export interface ProductItemAccordionParams {
 	onDeleteProduct?: (product: any) => void,
 	onEditProduct?: (product: any) => void,
 	offsetDisabled?: any,
-	isFromCheckout?: any
+	isFromCheckout?: any,
+	isDisabledEdit?: any
 }
 export interface ReviewOrderParams {
 	order?: { id: number, business_id: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any };