ordering-ui-react-native 0.14.17 → 0.14.18

package/src/components/Checkout/index.tsx

@@ -1,964 +1,964 @@
-import React, { useState, useEffect, useRef } from 'react';
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { View, StyleSheet, Platform, I18nManager, ScrollView, TouchableOpacity } 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'
-
-import {
-  Checkout as CheckoutController,
-  useOrder,
-  useSession,
-  useApi,
-  useLanguage,
-  useUtils,
-  useValidationFields,
-  useConfig,
-  ToastType,
-  useToast
-} from 'ordering-components/native';
-
-import { OText, OButton, OIcon } from '../shared';
-
-import { AddressDetails } from '../AddressDetails';
-import { PaymentOptions } from '../PaymentOptions';
-import { DriverTips } from '../DriverTips';
-import { OrderSummary } from '../OrderSummary';
-import { NotFoundSource } from '../NotFoundSource';
-import { UserDetails } from '../UserDetails';
-import { OrderTypeSelector } from '../OrderTypeSelector'
-
-import {
-  ChContainer,
-  ChSection,
-  ChHeader,
-  ChTotal,
-  ChAddress,
-  ChMoment,
-  CHMomentWrapper,
-  ChPaymethods,
-  ChDriverTips,
-  ChCart,
-  ChErrors,
-  ChBusinessDetails,
-  ChUserDetails,
-  TextDetails,
-  DeliveryOptionsContainer,
-  DeliveryOptionItem
-} from './styles';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-
-import { FloatingButton } from '../FloatingButton';
-import { Container } from '../../layouts/Container';
-import { useTheme } from 'styled-components/native';
-import { ActivityIndicator } from 'react-native-paper';
-import WebView from 'react-native-webview';
-import Icon from 'react-native-vector-icons/Feather';
-import { OrderCreating } from '../OrderCreating';
-
-const mapConfigs = {
-  mapZoom: 16,
-  mapSize: {
-    width: 640,
-    height: 190
-  }
-};
-
-const manageErrorsToShow = (array = []) => {
-  let stringError = ''
-  const list = Array.isArray(array) ? array : Object.values(array)
-  list.map((item: any, i: number) => {
-    stringError += (i + 1) === array.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
-  })
-  return stringError;
-}
-
-const CheckoutUI = (props: any) => {
-  const {
-    navigation,
-    cart,
-    errors,
-    placing,
-    cartState,
-    businessDetails,
-    paymethodSelected,
-    handlePaymethodChange,
-    handlerClickPlaceOrder,
-    onNavigationRedirect,
-    businessLogo,
-    businessName,
-    cartTotal,
-    currency,
-    deliveryOptionSelected,
-    instructionsOptions,
-    handleChangeDeliveryOption,
-
-  } = props
-
-  const theme = useTheme();
-
-  const style = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
-    paddSection: {
-      padding: 20
-    },
-    paddSectionH: {
-      paddingHorizontal: 20
-    },
-    icon: {
-      top: 15,
-      right: Platform.OS === 'ios' ? 5 : (I18nManager.isRTL ? 30 : 0),
-      position: 'absolute',
-      fontSize: 20
-    }
-  })
-
-  const [, { showToast }] = useToast();
-  const [, t] = useLanguage();
-  const [{ user, token }] = useSession();
-  const [{ configs }] = useConfig();
-  const [{ parsePrice, parseDate }] = useUtils();
-  const [{ options, carts, loading }, { confirmCart }] = useOrder();
-  const [validationFields] = useValidationFields();
-  const [ordering] = useApi()
-  const webviewRef = useRef<any>(null)
-  const webviewRefSquare = useRef<any>(null)
-  const [errorCash, setErrorCash] = useState(false);
-  const [userErrors, setUserErrors] = useState<any>([]);
-  const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
-  const [phoneUpdate, setPhoneUpdate] = useState(false);
-  const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
-  const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
-  const [progClr, setProgClr] = useState('#424242');
-  const [prog, setProg] = useState(true);
-  const [openOrderCreating, setOpenOrderCreating] = useState(false)
-  const [cardData, setCardData] = useState(null)
-  const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
-  const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
-    ? JSON.parse(configs?.driver_tip_options?.value) || []
-    : configs?.driver_tip_options?.value || []
-
-  const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
-  const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
-  const cartsWithProducts = carts && Object.values(carts).filter((cart: any) => cart.products.length) || null
-
-  const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map(option => {
-    return {
-      value: option?.id, key: option?.id, label: option?.name
-    }
-  })
-
-  const handlePlaceOrder = () => {
-    if (!userErrors.length) {
-      setOpenOrderCreating(true)
-      handlerClickPlaceOrder && handlerClickPlaceOrder()
-      return
-    }
-    let stringError = ''
-    Object.values(userErrors).map((item: any, i: number) => {
-      stringError += (i + 1) === userErrors.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
-    })
-    showToast(ToastType.Error, stringError)
-    setIsUserDetailsEdit(true)
-  }
-
-  const checkValidationFields = () => {
-    setUserErrors([])
-    const errors = []
-    const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
-
-    Object.values(validationFields?.fields?.checkout).map((field: any) => {
-      if (field?.required && !notFields.includes(field.code)) {
-        if (!user[field?.code]) {
-          errors.push(t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `The field ${field?.name} is required`))
-        }
-      }
-    })
-
-    if (
-      !user?.cellphone &&
-      validationFields?.fields?.checkout?.cellphone?.enabled &&
-      validationFields?.fields?.checkout?.cellphone?.required
-    ) {
-      errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
-    }
-
-    if (phoneUpdate) {
-      errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
-    }
-
-    setUserErrors(errors)
-  }
-
-  const togglePhoneUpdate = (val: boolean) => {
-    setPhoneUpdate(val)
-  }
-
-  const onMessage = (e: any) => {
-    if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
-      let payment = JSON.parse(e.nativeEvent.data);
-
-      if (payment === 'api error') {
-        setShowGateway({ closedByUser: true, open: false })
-        setProg(true);
-      }
-
-      if (payment) {
-        if (payment.error) {
-          showToast(ToastType.Error, payment.result)
-          setOpenOrderCreating(false)
-        } else if (payment?.result?.order?.uuid) {
-          showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
-          onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, goToBusinessList: true })
-        }
-        setProg(true);
-        setShowGateway({ closedByUser: false, open: false })
-      }
-    }
-  }
-
-  const onFailPaypal = async () => {
-    if (showGateway.closedByUser === true) {
-      await confirmCart(cart.uuid)
-    }
-  }
-
-  const handlePaymentMethodClick = (paymethod: any) => {
-    setShowGateway({ closedByUser: false, open: true })
-    setWebviewPaymethod(paymethod)
-  }
-
-  const handleCloseWebview = () => {
-    setProg(true);
-    setShowGateway({ open: false, closedByUser: true })
-  }
-
-  const changeDeliveryOption = (option : any) => {
-    handleChangeDeliveryOption(option)
-    setIsDeliveryOptionModalVisible(false)
-  }
-
-  useEffect(() => {
-    if (validationFields && validationFields?.fields?.checkout) {
-      checkValidationFields()
-    }
-  }, [validationFields, user])
-
-  useEffect(() => {
-    if (errors) {
-      const errorText = manageErrorsToShow(errors)
-      showToast(ToastType.Error, errorText)
-      setOpenOrderCreating(false)
-    }
-  }, [errors])
-
-  useEffect(() => {
-    onFailPaypal()
-  }, [showGateway.closedByUser])
-
-  return (
-    <>
-      <Container>
-        <ChContainer>
-          <ChSection style={{ paddingBottom: 20, zIndex: 100 }}>
-            <OButton
-              imgLeftSrc={theme.images.general.arrow_left}
-              imgRightSrc={null}
-              style={style.btnBackArrow}
-              onClick={() => navigation?.canGoBack() && navigation.goBack()}
-            />
-            <ChHeader>
-              <OText size={24}>{t('CHECKOUT', 'Checkout')}</OText>
-              <OrderTypeSelector configTypes={configTypes} />
-            </ChHeader>
-          </ChSection>
-
-          {!cartState.loading && (cart?.status === 2 || cart?.status === 4) && (
-            <ChSection style={{ paddingBottom: 20 }}>
-              <ChErrors>
-                {!cartState.loading && cart?.status === 2 && (
-                  <OText
-                    style={{ textAlign: 'center' }}
-                    color={theme.colors.error}
-                    size={17}
-                  >
-                    {t('CART_STATUS_PENDING_MESSAGE_APP', 'Your order is being processed, please wait a little more. if you\'ve been waiting too long, please reload the app')}
-                  </OText>
-                )}
-              </ChErrors>
-            </ChSection>
-          )}
-
-          <ChSection>
-            <ChTotal>
-              <OIcon
-                url={businessLogo || businessDetails?.business?.logo}
-                width={80}
-                height={80}
-                borderRadius={80}
-              />
-              <View style={{ marginHorizontal: 15, flex: 1, alignItems: 'flex-start' }}>
-                <OText size={22} numberOfLines={2} ellipsizeMode='tail' >
-                  {businessName || businessDetails?.business?.name}
-                </OText>
-                <OText size={22}>
-                  {cart?.total >= 1 && parsePrice(cart?.total) || cartTotal >= 1 && parsePrice(cartTotal)}
-                </OText>
-              </View>
-            </ChTotal>
-          </ChSection>
-          <ChSection style={style.paddSection}>
-            <ChAddress>
-              {(businessDetails?.loading || cartState.loading) ? (
-                <Placeholder Animation={Fade}>
-                  <PlaceholderLine height={40} style={{ marginBottom: 20 }} />
-                  <PlaceholderLine height={100} style={{ marginBottom: 20 }} />
-                </Placeholder>
-              ) : (
-                <AddressDetails
-                  navigation={navigation}
-                  location={businessDetails?.business?.location}
-                  businessLogo={businessDetails?.business?.logo}
-                  isCartPending={cart?.status === 2}
-                  businessId={cart?.business_id}
-                  apiKey={configs?.google_maps_api_key?.value}
-                  mapConfigs={mapConfigs}
-                />
-              )}
-            </ChAddress>
-          </ChSection>
-          <ChSection style={style.paddSectionH}>
-            {(isPreOrderSetting || configs?.preorder_status_enabled?.value === undefined) && (
-              <ChMoment>
-                {cartState.loading ? (
-                  <Placeholder Animation={Fade}>
-                    <PlaceholderLine height={50} style={{ marginBottom: 0 }} />
-                  </Placeholder>
-                ) : (
-                  <CHMomentWrapper
-                    disabled={loading}
-                    onPress={() => navigation.navigate('MomentOption')}
-                  >
-                    <MaterialCommunityIcon
-                      name='clock-outline'
-                      size={24}
-                      style={{ marginRight: 5 }}
-                    />
-                    <OText size={18} numberOfLines={1} ellipsizeMode='tail'>
-                      {options?.moment
-                        ? parseDate(options?.moment, {
-                          outputFormat: configs?.format_time?.value === '12' ? 'MM/DD hh:mma' : 'MM/DD HH:mm'
-                        })
-                        : t('ASAP_ABBREVIATION', 'ASAP')}
-                    </OText>
-                  </CHMomentWrapper>
-                )}
-              </ChMoment>
-            )}
-          </ChSection>
-
-          <ChSection style={style.paddSection}>
-            <ChUserDetails>
-              {cartState.loading ? (
-                <Placeholder Animation={Fade}>
-                  <PlaceholderLine height={25} width={70} />
-                  <PlaceholderLine height={20} width={60} />
-                  <PlaceholderLine height={20} width={60} />
-                  <PlaceholderLine height={20} width={80} style={{ marginBottom: 20 }} />
-                </Placeholder>
-              ) : (
-                <UserDetails
-                  isUserDetailsEdit={isUserDetailsEdit}
-                  cartStatus={cart?.status}
-                  businessId={cart?.business_id}
-                  useValidationFields
-                  useDefualtSessionManager
-                  useSessionUser
-                  isCheckout
-                  phoneUpdate={phoneUpdate}
-                  togglePhoneUpdate={togglePhoneUpdate}
-                />
-              )}
-            </ChUserDetails>
-          </ChSection>
-
-          <ChSection style={style.paddSectionH}>
-            <ChBusinessDetails>
-              {
-                (businessDetails?.loading || cartState.loading) &&
-                !businessDetails?.error &&
-                (
-                  <Placeholder Animation={Fade}>
-                    <PlaceholderLine height={25} width={70} />
-                    <PlaceholderLine height={20} width={60} />
-                    <PlaceholderLine height={20} width={60} />
-                    <PlaceholderLine height={20} width={80} style={{ marginBottom: 20 }} />
-                  </Placeholder>
-                )}
-              {
-                !cartState.loading &&
-                businessDetails?.business &&
-                Object.values(businessDetails?.business).length > 0 &&
-                (
-                  <View style={{ alignItems: 'flex-start' }}>
-                    <OText size={20}>
-                      {t('BUSINESS_DETAILS', 'Business Details')}
-                    </OText>
-                    <View>
-                      <OText size={16}>
-                        <TextDetails>
-                          {t('NAME', 'Name')}:{' '}
-                        </TextDetails>
-                        {businessDetails?.business?.name}
-                      </OText>
-                      <OText size={16}>
-                        <TextDetails size={18} weight='bold'>
-                          {t('EMAIL', 'Email')}:{' '}
-                        </TextDetails>
-                        {businessDetails?.business?.email}
-                      </OText>
-                      <OText size={16}>
-                        <TextDetails size={18} weight='bold'>
-                          {t('CELLPHONE', 'Cellphone')}:{' '}
-                        </TextDetails>
-                        {businessDetails?.business?.cellphone}
-                      </OText>
-                      <OText size={16}>
-                        <TextDetails size={18} weight='bold'>
-                          {t('ADDRESS', 'Address')}:{' '}
-                        </TextDetails>
-                        {businessDetails?.business?.address}
-                      </OText>
-                    </View>
-                  </View>
-                )}
-              {businessDetails?.error && businessDetails?.error?.length > 0 && (
-                <View>
-                  <OText size={20}>
-                    {t('BUSINESS_DETAILS', 'Business Details')}
-                  </OText>
-                  <NotFoundSource
-                    content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
-                  />
-                </View>
-              )}
-            </ChBusinessDetails>
-          </ChSection>
-
-          {!cartState.loading && deliveryOptionSelected !== undefined && options?.type === 1 && (
-            <DeliveryOptionsContainer style={style.paddSection}>
-              <OText size={20}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
-              <View
-                style={{
-                  backgroundColor: theme.colors.inputDisabled,
-                  borderRadius: 7.5,
-                  marginBottom: 20,
-                  flex: 1
-                }}>
-                <Picker
-                  countryCode={undefined}
-                  visible={isDeliveryOptionModalVisible}
-                  onClose={() => setIsDeliveryOptionModalVisible(false)}
-                  withCountryNameButton
-                  renderFlagButton={() => (
-                    <TouchableOpacity onPress={() => setIsDeliveryOptionModalVisible(true)}>
-                      <DeliveryOptionItem backgroundColor={theme?.colors?.inputDisabled}>
-                        <OText
-                          size={16}
-                        >
-                          {deliveryOptions.find((option: any) => option.value === deliveryOptionSelected).label}
-                        </OText>
-                        <MaterialIcons name='keyboard-arrow-down' style={style.icon} />
-                      </DeliveryOptionItem>
-                    </TouchableOpacity>
-                  )}
-                  flatListProps={{
-                    keyExtractor: (item: any) => item.value,
-                    data: deliveryOptions || [],
-                    renderItem: ({ item }: any) => (
-                      <TouchableOpacity
-                        onPress={() => changeDeliveryOption(item.value)}
-                        disabled={
-                          deliveryOptionSelected === item.value
-                        }
-                      >
-                        <DeliveryOptionItem backgroundColor={deliveryOptionSelected === item.value ? theme.colors.inputDisabled : 'white'}>
-                          <OText>
-                            {item.label}
-                          </OText>
-                        </DeliveryOptionItem>
-                      </TouchableOpacity>
-                    )
-                  }}
-                />
-              </View>
-            </DeliveryOptionsContainer>
-          )}
-
-          {!cartState.loading &&
-            cart &&
-            cart?.valid &&
-            options.type === 1 &&
-            cart?.status !== 2 &&
-            validationFields?.fields?.checkout?.driver_tip?.enabled &&
-            driverTipsOptions && driverTipsOptions?.length > 0 &&
-            (
-              <ChSection style={style.paddSection}>
-                <ChDriverTips>
-                  <OText size={20}>
-                    {t('DRIVER_TIPS', 'Driver Tips')}
-                  </OText>
-                  <DriverTips
-                    businessId={cart?.business_id}
-                    driverTipsOptions={driverTipsOptions}
-                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                    isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
-                      ? cart?.driver_tip
-                      : cart?.driver_tip_rate}
-                    useOrderContext
-                  />
-                </ChDriverTips>
-              </ChSection>
-            )}
-
-          {!cartState.loading && cart && cart?.status !== 2 && cart?.valid && (
-            <ChSection style={style.paddSectionH}>
-              <ChPaymethods>
-                <OText size={20} style={{ alignItems: 'flex-start', textAlign: 'left' }}>
-                  {t('PAYMENT_METHOD', 'Payment Method')}
-                </OText>
-                {!cartState.loading && cart?.status === 4 && (
-                  <OText
-                    style={{ textAlign: 'center', marginTop: 20 }}
-                    color={theme.colors.error}
-                    size={17}
-                  >
-                    {t('CART_STATUS_CANCEL_MESSAGE', 'The payment has not been successful, please try again')}
-                  </OText>
-                )}
-                <PaymentOptions
-                  cart={cart}
-                  isDisabled={cart?.status === 2}
-                  businessId={businessDetails?.business?.id}
-                  isLoading={businessDetails.loading}
-                  paymethods={businessDetails?.business?.paymethods}
-                  onPaymentChange={handlePaymethodChange}
-                  errorCash={errorCash}
-                  setErrorCash={setErrorCash}
-                  onNavigationRedirect={onNavigationRedirect}
-                  paySelected={paymethodSelected}
-                  handlePaymentMethodClickCustom={handlePaymentMethodClick}
-                  setCardData={setCardData}
-                />
-              </ChPaymethods>
-            </ChSection>
-          )}
-
-          {!cartState.loading && cart && (
-            <ChSection style={style.paddSection}>
-              <ChCart>
-                {cartsWithProducts && cart?.products?.length === 0 ? (
-                  <NotFoundSource
-                    content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
-                    btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
-                  />
-                ) : (
-                  <>
-                    <OText size={20} style={{ alignItems: 'flex-start', textAlign: 'left' }}>
-                      {t('ORDER_SUMMARY', 'Order Summary')}
-                    </OText>
-                    <OrderSummary
-                      cart={cart}
-                      isCartPending={cart?.status === 2}
-                      isFromCheckout
-                    />
-                  </>
-                )}
-              </ChCart>
-            </ChSection>
-          )}
-
-          {!cartState.loading && cart && (
-            <ChSection style={{ paddingTop: 0, paddingBottom: 20, paddingHorizontal: 20 }}>
-              <ChErrors>
-                {!cart?.valid_address && cart?.status !== 2 && (
-                  <OText
-                    style={{ textAlign: 'center' }}
-                    color={theme.colors.error}
-                    size={14}
-                  >
-                    {t('INVALID_CART_ADDRESS', 'Selected address is invalid, please select a closer address.')}
-                  </OText>
-                )}
-
-                {!paymethodSelected && cart?.status !== 2 && cart?.valid && (
-                  <OText
-                    style={{ textAlign: 'center' }}
-                    color={theme.colors.error}
-                    size={14}
-                  >
-                    {t('WARNING_NOT_PAYMENT_SELECTED', 'Please, select a payment method to place order.')}
-                  </OText>
-                )}
-
-                {!cart?.valid_products && cart?.status !== 2 && (
-                  <OText
-                    style={{ textAlign: 'center' }}
-                    color={theme.colors.error}
-                    size={14}
-                  >
-                    {t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')}
-                  </OText>
-                )}
-              </ChErrors>
-            </ChSection>
-          )}
-        </ChContainer>
-      </Container>
-      {!cartState.loading && cart && cart?.status !== 2 && (
-        <>
-          <>
-            <FloatingButton
-              handleClick={() => handlePlaceOrder()}
-              isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
-              disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
-              btnText={cart?.subtotal_to_calculate >= cart?.minimum
-                ? (
-                  placing
-                    ? t('PLACING', 'Placing')
-                    : loading
-                      ? t('LOADING', 'Loading')
-                      : t('PLACE_ORDER', 'Place Order')
-                )
-                : (`${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`)
-              }
-            />
-          </>
-        </>
-      )}
-      {webviewPaymethod?.gateway === 'paypal' && showGateway.open && (
-        <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
-          <Icon
-            name="x"
-            size={35}
-            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
-            onPress={handleCloseWebview}
-          />
-          <OText
-            style={{
-              textAlign: 'center',
-              fontSize: 16,
-              fontWeight: 'bold',
-              color: '#00457C',
-              marginBottom: 5,
-              marginTop: 10
-            }}>
-            {t('PAYPAL_GATEWAY', 'PayPal GateWay')}
-          </OText>
-          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
-            <ActivityIndicator size={24} color={progClr} />
-          </View>
-          <WebView
-            source={{ uri: `${ordering.root}/html/paypal_react_native` }}
-            onMessage={onMessage}
-            ref={webviewRef}
-            javaScriptEnabled={true}
-            javaScriptEnabledAndroid={true}
-            cacheEnabled={false}
-            cacheMode='LOAD_NO_CACHE'
-            style={{ flex: 1 }}
-            onLoadStart={() => {
-              setProg(true);
-              setProgClr('#424242');
-            }}
-            onLoadProgress={() => {
-              setProg(true);
-              setProgClr('#00457C');
-            }}
-            onLoad={() => {
-              setProg(true);
-              setProgClr('#00457C');
-            }}
-            onLoadEnd={(e) => {
-              const message = {
-                action: 'init',
-                data: {
-                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
-                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
-                  payData: {
-                    paymethod_id: webviewPaymethod?.id,
-                    amount: cart?.total,
-                    delivery_zone_id: cart?.delivery_zone_id,
-                    user_id: user?.id
-                  },
-                  currency: configs?.stripe_currency?.value || currency,
-                  userToken: token,
-                  clientId: webviewPaymethod?.credentials?.client_id
-                }
-              }
-              setProg(false);
-              webviewRef?.current?.postMessage?.(JSON.stringify(message))
-            }}
-          />
-        </View>
-      )}
-      {webviewPaymethod?.gateway === 'square' && showGateway.open && (
-        <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
-          <Icon
-            name="x"
-            size={35}
-            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
-            onPress={handleCloseWebview}
-          />
-          <OText
-            style={{
-              textAlign: 'center',
-              fontSize: 16,
-              fontWeight: 'bold',
-              color: '#00457C',
-              marginBottom: 5,
-              marginTop: 10
-            }}>
-            {t('SQUARE_PAYMENT', 'Square payment')}
-          </OText>
-          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
-            <ActivityIndicator size={24} color={progClr} />
-          </View>
-          <WebView
-            source={{ uri: `https://test-square-f50f7.web.app` }}
-            onMessage={onMessage}
-            ref={webviewRefSquare}
-            javaScriptEnabled={true}
-            javaScriptEnabledAndroid={true}
-            cacheEnabled={false}
-            cacheMode='LOAD_NO_CACHE'
-            style={{ flex: 1 }}
-            onShouldStartLoadWithRequest={() => true}
-            onLoadStart={() => {
-              setProg(true);
-              setProgClr('#424242');
-            }}
-            onLoadProgress={() => {
-              setProg(true);
-              setProgClr('#00457C');
-            }}
-            onLoad={() => {
-              setProg(true);
-              setProgClr('#00457C');
-            }}
-            onLoadEnd={(e) => {
-              const message = {
-                action: 'init',
-                data: {
-                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
-                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
-                  payData: {
-                    paymethod_id: webviewPaymethod?.id,
-                    amount: cart?.total,
-                    delivery_zone_id: cart?.delivery_zone_id,
-                    user_id: user?.id,
-                  },
-                  currency: configs?.stripe_currency?.value || currency,
-                  userToken: token,
-                  clientId: 'sandbox-sq0idb-rMLAce87hOfpGvokZCygEw',
-                  locationId: 'L1NGAY5M6KJRX'
-                }
-              }
-              setProg(false);
-              webviewRefSquare?.current?.postMessage?.(JSON.stringify(message))
-            }}
-          />
-        </View>
-      )
-      }
-      {openOrderCreating && (
-        <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
-          <OrderCreating
-            business={businessDetails?.business}
-            businessLogo={businessLogo}
-            cart={cartState.cart}
-            cardData={cardData}
-            isCheckOut
-          />
-        </View>
-      )}
-    </>
-  )
-}
-
-export const Checkout = (props: any) => {
-  const {
-    errors,
-    clearErrors,
-    cartUuid,
-    stripePaymentOptions,
-    onNavigationRedirect,
-    navigation
-  } = props
-
-  const [, { showToast }] = useToast();
-  const [, t] = useLanguage();
-  const [{ token }] = useSession();
-  const [ordering] = useApi();
-  const [, { confirmCart }] = useOrder();
-  const { confirmPayment, loading: confirmPaymentLoading } = useConfirmPayment();
-
-  const [cartState, setCartState] = useState<any>({ loading: true, error: [], cart: null });
-
-  const confirmMethods = ['stripe_redirect', 'paypal']
-
-  const getOrder = async (cartId: any) => {
-    try {
-      setCartState({ ...cartState, loading: true })
-      const url = `${ordering.root}/carts/${cartId}`
-      const response = await fetch(url, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`
-        }
-      })
-      const { result } = await response.json();
-
-      let publicKey = null
-      try {
-        const { content } = await ordering.setAccessToken(token).paymentCards().getCredentials();
-        if (!content.error) {
-          publicKey = content.result.publishable;
-        }
-      } catch (error) {
-        publicKey = null
-      }
-
-      if (result.status === 1 && result.order?.uuid) {
-        onNavigationRedirect('OrderDetails', { orderId: result.order.uuid })
-        setCartState({ ...cartState, loading: false })
-      } else if (result.status === 2 && confirmMethods.includes(result.paymethod_data?.gateway)) {
-        try {
-          const confirmCartRes = await confirmCart(cartUuid)
-          if (confirmCartRes.error) {
-            showToast(ToastType.Error, confirmCartRes.error.message)
-          }
-          if (confirmCartRes.result.order?.uuid) {
-            onNavigationRedirect('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
-          }
-          setCartState({
-            ...cartState,
-            loading: false,
-            cart: result
-          })
-        } catch (error: any) {
-          showToast(ToastType.Error, error?.toString() || error.message)
-        }
-      } else if (result.status === 2 && stripePaymentOptions.includes(result.paymethod_data?.gateway)) {
-        const clientSecret = result.paymethod_data?.result?.client_secret
-        const paymentMethodId = result.paymethod_data?.data?.source_id;
-
-        initStripe({ publishableKey: publicKey });
-
-        try {
-          const { paymentIntent, error } = await confirmPayment(clientSecret, {
-            type: 'Card',
-            paymentMethodId
-          });
-
-          try {
-            const confirmCartRes = await confirmCart(cartUuid)
-            if (confirmCartRes.error) {
-              showToast(ToastType.Error, confirmCartRes.error.message)
-              setCartState({
-                ...cartState,
-                loading: false,
-                cart: result
-              })
-              return
-            }
-            if (confirmCartRes.result.order?.uuid) {
-              onNavigationRedirect('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
-              setCartState({ ...cartState, loading: false })
-            } else {
-              showToast(ToastType.Error, t('FAILED_PAYMENT', 'The payment has failed'));
-              const cart = Array.isArray(result) ? null : result
-              setCartState({
-                ...cartState,
-                loading: false,
-                cart,
-                error: cart ? null : result
-              })
-              return
-            }
-          } catch (error: any) {
-            showToast(ToastType.Error, error?.toString() || error.message)
-          }
-        } catch (error) {
-          showToast(ToastType.Error, t('FAILED_PAYMENT', 'The payment has failed'));
-          const cart = Array.isArray(result) ? null : result
-          setCartState({
-            ...cartState,
-            loading: false,
-            cart,
-            error: cart ? null : result
-          })
-        }
-      } else {
-        const cart = Array.isArray(result) ? null : result
-        setCartState({
-          ...cartState,
-          loading: false,
-          cart,
-          error: cart ? null : result
-        })
-      }
-    } catch (e: any) {
-      setCartState({
-        ...cartState,
-        loading: false,
-        error: [e.toString()]
-      })
-    }
-  }
-
-  useEffect(() => {
-    if (errors) {
-      const errorText = manageErrorsToShow(errors)
-      showToast(ToastType.Error, errorText)
-      clearErrors && clearErrors()
-    }
-  }, [errors])
-
-  useEffect(() => {
-    if (token && cartUuid) {
-      getOrder(cartUuid)
-    }
-  }, [token, cartUuid])
-
-  const checkoutProps = {
-    ...props,
-    UIComponent: CheckoutUI,
-    cartState,
-    businessId: cartState.cart?.business_id
-  }
-
-  return (
-    <>
-      {cartState?.error?.length > 0 ? (
-        <NotFoundSource
-          content={t(cartState.error)}
-          btnTitle={t('GO_TO_BUSINESSLIST', 'Go to business list')}
-          onClickButton={() => navigation.navigate('BusinessList')}
-        />
-      ) : (
-        <CheckoutController {...checkoutProps} />
-      )}
-    </>
-  )
-}
+import React, { useState, useEffect, useRef } from 'react';
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { View, StyleSheet, Platform, I18nManager, ScrollView, TouchableOpacity } 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'
+
+import {
+  Checkout as CheckoutController,
+  useOrder,
+  useSession,
+  useApi,
+  useLanguage,
+  useUtils,
+  useValidationFields,
+  useConfig,
+  ToastType,
+  useToast
+} from 'ordering-components/native';
+
+import { OText, OButton, OIcon } from '../shared';
+
+import { AddressDetails } from '../AddressDetails';
+import { PaymentOptions } from '../PaymentOptions';
+import { DriverTips } from '../DriverTips';
+import { OrderSummary } from '../OrderSummary';
+import { NotFoundSource } from '../NotFoundSource';
+import { UserDetails } from '../UserDetails';
+import { OrderTypeSelector } from '../OrderTypeSelector'
+
+import {
+  ChContainer,
+  ChSection,
+  ChHeader,
+  ChTotal,
+  ChAddress,
+  ChMoment,
+  CHMomentWrapper,
+  ChPaymethods,
+  ChDriverTips,
+  ChCart,
+  ChErrors,
+  ChBusinessDetails,
+  ChUserDetails,
+  TextDetails,
+  DeliveryOptionsContainer,
+  DeliveryOptionItem
+} from './styles';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+
+import { FloatingButton } from '../FloatingButton';
+import { Container } from '../../layouts/Container';
+import { useTheme } from 'styled-components/native';
+import { ActivityIndicator } from 'react-native-paper';
+import WebView from 'react-native-webview';
+import Icon from 'react-native-vector-icons/Feather';
+import { OrderCreating } from '../OrderCreating';
+
+const mapConfigs = {
+  mapZoom: 16,
+  mapSize: {
+    width: 640,
+    height: 190
+  }
+};
+
+const manageErrorsToShow = (array = []) => {
+  let stringError = ''
+  const list = Array.isArray(array) ? array : Object.values(array)
+  list.map((item: any, i: number) => {
+    stringError += (i + 1) === array.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
+  })
+  return stringError;
+}
+
+const CheckoutUI = (props: any) => {
+  const {
+    navigation,
+    cart,
+    errors,
+    placing,
+    cartState,
+    businessDetails,
+    paymethodSelected,
+    handlePaymethodChange,
+    handlerClickPlaceOrder,
+    onNavigationRedirect,
+    businessLogo,
+    businessName,
+    cartTotal,
+    currency,
+    deliveryOptionSelected,
+    instructionsOptions,
+    handleChangeDeliveryOption,
+
+  } = props
+
+  const theme = useTheme();
+
+  const style = StyleSheet.create({
+    btnBackArrow: {
+      borderWidth: 0,
+      backgroundColor: theme.colors.white,
+      borderColor: theme.colors.white,
+      shadowColor: theme.colors.white,
+      display: 'flex',
+      justifyContent: 'flex-start',
+      paddingLeft: 0,
+    },
+    paddSection: {
+      padding: 20
+    },
+    paddSectionH: {
+      paddingHorizontal: 20
+    },
+    icon: {
+      top: 15,
+      right: Platform.OS === 'ios' ? 5 : (I18nManager.isRTL ? 30 : 0),
+      position: 'absolute',
+      fontSize: 20
+    }
+  })
+
+  const [, { showToast }] = useToast();
+  const [, t] = useLanguage();
+  const [{ user, token }] = useSession();
+  const [{ configs }] = useConfig();
+  const [{ parsePrice, parseDate }] = useUtils();
+  const [{ options, carts, loading }, { confirmCart }] = useOrder();
+  const [validationFields] = useValidationFields();
+  const [ordering] = useApi()
+  const webviewRef = useRef<any>(null)
+  const webviewRefSquare = useRef<any>(null)
+  const [errorCash, setErrorCash] = useState(false);
+  const [userErrors, setUserErrors] = useState<any>([]);
+  const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
+  const [phoneUpdate, setPhoneUpdate] = useState(false);
+  const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
+  const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
+  const [progClr, setProgClr] = useState('#424242');
+  const [prog, setProg] = useState(true);
+  const [openOrderCreating, setOpenOrderCreating] = useState(false)
+  const [cardData, setCardData] = useState(null)
+  const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
+  const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
+    ? JSON.parse(configs?.driver_tip_options?.value) || []
+    : configs?.driver_tip_options?.value || []
+
+  const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+  const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
+  const cartsWithProducts = carts && Object.values(carts).filter((cart: any) => cart.products.length) || null
+
+  const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map(option => {
+    return {
+      value: option?.id, key: option?.id, label: option?.name
+    }
+  })
+
+  const handlePlaceOrder = () => {
+    if (!userErrors.length) {
+      setOpenOrderCreating(true)
+      handlerClickPlaceOrder && handlerClickPlaceOrder()
+      return
+    }
+    let stringError = ''
+    Object.values(userErrors).map((item: any, i: number) => {
+      stringError += (i + 1) === userErrors.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
+    })
+    showToast(ToastType.Error, stringError)
+    setIsUserDetailsEdit(true)
+  }
+
+  const checkValidationFields = () => {
+    setUserErrors([])
+    const errors = []
+    const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
+
+    Object.values(validationFields?.fields?.checkout).map((field: any) => {
+      if (field?.required && !notFields.includes(field.code)) {
+        if (!user[field?.code]) {
+          errors.push(t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `The field ${field?.name} is required`))
+        }
+      }
+    })
+
+    if (
+      !user?.cellphone &&
+      validationFields?.fields?.checkout?.cellphone?.enabled &&
+      validationFields?.fields?.checkout?.cellphone?.required
+    ) {
+      errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
+    }
+
+    if (phoneUpdate) {
+      errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
+    }
+
+    setUserErrors(errors)
+  }
+
+  const togglePhoneUpdate = (val: boolean) => {
+    setPhoneUpdate(val)
+  }
+
+  const onMessage = (e: any) => {
+    if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
+      let payment = JSON.parse(e.nativeEvent.data);
+
+      if (payment === 'api error') {
+        setShowGateway({ closedByUser: true, open: false })
+        setProg(true);
+      }
+
+      if (payment) {
+        if (payment.error) {
+          showToast(ToastType.Error, payment.result)
+          setOpenOrderCreating(false)
+        } else if (payment?.result?.order?.uuid) {
+          showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
+          onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, goToBusinessList: true })
+        }
+        setProg(true);
+        setShowGateway({ closedByUser: false, open: false })
+      }
+    }
+  }
+
+  const onFailPaypal = async () => {
+    if (showGateway.closedByUser === true) {
+      await confirmCart(cart.uuid)
+    }
+  }
+
+  const handlePaymentMethodClick = (paymethod: any) => {
+    setShowGateway({ closedByUser: false, open: true })
+    setWebviewPaymethod(paymethod)
+  }
+
+  const handleCloseWebview = () => {
+    setProg(true);
+    setShowGateway({ open: false, closedByUser: true })
+  }
+
+  const changeDeliveryOption = (option : any) => {
+    handleChangeDeliveryOption(option)
+    setIsDeliveryOptionModalVisible(false)
+  }
+
+  useEffect(() => {
+    if (validationFields && validationFields?.fields?.checkout) {
+      checkValidationFields()
+    }
+  }, [validationFields, user])
+
+  useEffect(() => {
+    if (errors) {
+      const errorText = manageErrorsToShow(errors)
+      showToast(ToastType.Error, errorText)
+      setOpenOrderCreating(false)
+    }
+  }, [errors])
+
+  useEffect(() => {
+    onFailPaypal()
+  }, [showGateway.closedByUser])
+
+  return (
+    <>
+      <Container>
+        <ChContainer>
+          <ChSection style={{ paddingBottom: 20, zIndex: 100 }}>
+            <OButton
+              imgLeftSrc={theme.images.general.arrow_left}
+              imgRightSrc={null}
+              style={style.btnBackArrow}
+              onClick={() => navigation?.canGoBack() && navigation.goBack()}
+            />
+            <ChHeader>
+              <OText size={24}>{t('CHECKOUT', 'Checkout')}</OText>
+              <OrderTypeSelector configTypes={configTypes} />
+            </ChHeader>
+          </ChSection>
+
+          {!cartState.loading && (cart?.status === 2 || cart?.status === 4) && (
+            <ChSection style={{ paddingBottom: 20 }}>
+              <ChErrors>
+                {!cartState.loading && cart?.status === 2 && (
+                  <OText
+                    style={{ textAlign: 'center' }}
+                    color={theme.colors.error}
+                    size={17}
+                  >
+                    {t('CART_STATUS_PENDING_MESSAGE_APP', 'Your order is being processed, please wait a little more. if you\'ve been waiting too long, please reload the app')}
+                  </OText>
+                )}
+              </ChErrors>
+            </ChSection>
+          )}
+
+          <ChSection>
+            <ChTotal>
+              <OIcon
+                url={businessLogo || businessDetails?.business?.logo}
+                width={80}
+                height={80}
+                borderRadius={80}
+              />
+              <View style={{ marginHorizontal: 15, flex: 1, alignItems: 'flex-start' }}>
+                <OText size={22} numberOfLines={2} ellipsizeMode='tail' >
+                  {businessName || businessDetails?.business?.name}
+                </OText>
+                <OText size={22}>
+                  {cart?.total >= 1 && parsePrice(cart?.total) || cartTotal >= 1 && parsePrice(cartTotal)}
+                </OText>
+              </View>
+            </ChTotal>
+          </ChSection>
+          <ChSection style={style.paddSection}>
+            <ChAddress>
+              {(businessDetails?.loading || cartState.loading) ? (
+                <Placeholder Animation={Fade}>
+                  <PlaceholderLine height={40} style={{ marginBottom: 20 }} />
+                  <PlaceholderLine height={100} style={{ marginBottom: 20 }} />
+                </Placeholder>
+              ) : (
+                <AddressDetails
+                  navigation={navigation}
+                  location={businessDetails?.business?.location}
+                  businessLogo={businessDetails?.business?.logo}
+                  isCartPending={cart?.status === 2}
+                  businessId={cart?.business_id}
+                  apiKey={configs?.google_maps_api_key?.value}
+                  mapConfigs={mapConfigs}
+                />
+              )}
+            </ChAddress>
+          </ChSection>
+          <ChSection style={style.paddSectionH}>
+            {(isPreOrderSetting || configs?.preorder_status_enabled?.value === undefined) && (
+              <ChMoment>
+                {cartState.loading ? (
+                  <Placeholder Animation={Fade}>
+                    <PlaceholderLine height={50} style={{ marginBottom: 0 }} />
+                  </Placeholder>
+                ) : (
+                  <CHMomentWrapper
+                    disabled={loading}
+                    onPress={() => navigation.navigate('MomentOption')}
+                  >
+                    <MaterialCommunityIcon
+                      name='clock-outline'
+                      size={24}
+                      style={{ marginRight: 5 }}
+                    />
+                    <OText size={18} numberOfLines={1} ellipsizeMode='tail'>
+                      {options?.moment
+                        ? parseDate(options?.moment, {
+                          outputFormat: configs?.format_time?.value === '12' ? 'MM/DD hh:mma' : 'MM/DD HH:mm'
+                        })
+                        : t('ASAP_ABBREVIATION', 'ASAP')}
+                    </OText>
+                  </CHMomentWrapper>
+                )}
+              </ChMoment>
+            )}
+          </ChSection>
+
+          <ChSection style={style.paddSection}>
+            <ChUserDetails>
+              {cartState.loading ? (
+                <Placeholder Animation={Fade}>
+                  <PlaceholderLine height={25} width={70} />
+                  <PlaceholderLine height={20} width={60} />
+                  <PlaceholderLine height={20} width={60} />
+                  <PlaceholderLine height={20} width={80} style={{ marginBottom: 20 }} />
+                </Placeholder>
+              ) : (
+                <UserDetails
+                  isUserDetailsEdit={isUserDetailsEdit}
+                  cartStatus={cart?.status}
+                  businessId={cart?.business_id}
+                  useValidationFields
+                  useDefualtSessionManager
+                  useSessionUser
+                  isCheckout
+                  phoneUpdate={phoneUpdate}
+                  togglePhoneUpdate={togglePhoneUpdate}
+                />
+              )}
+            </ChUserDetails>
+          </ChSection>
+
+          <ChSection style={style.paddSectionH}>
+            <ChBusinessDetails>
+              {
+                (businessDetails?.loading || cartState.loading) &&
+                !businessDetails?.error &&
+                (
+                  <Placeholder Animation={Fade}>
+                    <PlaceholderLine height={25} width={70} />
+                    <PlaceholderLine height={20} width={60} />
+                    <PlaceholderLine height={20} width={60} />
+                    <PlaceholderLine height={20} width={80} style={{ marginBottom: 20 }} />
+                  </Placeholder>
+                )}
+              {
+                !cartState.loading &&
+                businessDetails?.business &&
+                Object.values(businessDetails?.business).length > 0 &&
+                (
+                  <View style={{ alignItems: 'flex-start' }}>
+                    <OText size={20}>
+                      {t('BUSINESS_DETAILS', 'Business Details')}
+                    </OText>
+                    <View>
+                      <OText size={16}>
+                        <TextDetails>
+                          {t('NAME', 'Name')}:{' '}
+                        </TextDetails>
+                        {businessDetails?.business?.name}
+                      </OText>
+                      <OText size={16}>
+                        <TextDetails size={18} weight='bold'>
+                          {t('EMAIL', 'Email')}:{' '}
+                        </TextDetails>
+                        {businessDetails?.business?.email}
+                      </OText>
+                      <OText size={16}>
+                        <TextDetails size={18} weight='bold'>
+                          {t('CELLPHONE', 'Cellphone')}:{' '}
+                        </TextDetails>
+                        {businessDetails?.business?.cellphone}
+                      </OText>
+                      <OText size={16}>
+                        <TextDetails size={18} weight='bold'>
+                          {t('ADDRESS', 'Address')}:{' '}
+                        </TextDetails>
+                        {businessDetails?.business?.address}
+                      </OText>
+                    </View>
+                  </View>
+                )}
+              {businessDetails?.error && businessDetails?.error?.length > 0 && (
+                <View>
+                  <OText size={20}>
+                    {t('BUSINESS_DETAILS', 'Business Details')}
+                  </OText>
+                  <NotFoundSource
+                    content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
+                  />
+                </View>
+              )}
+            </ChBusinessDetails>
+          </ChSection>
+
+          {!cartState.loading && deliveryOptionSelected !== undefined && options?.type === 1 && (
+            <DeliveryOptionsContainer style={style.paddSection}>
+              <OText size={20}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+              <View
+                style={{
+                  backgroundColor: theme.colors.inputDisabled,
+                  borderRadius: 7.5,
+                  marginBottom: 20,
+                  flex: 1
+                }}>
+                <Picker
+                  countryCode={undefined}
+                  visible={isDeliveryOptionModalVisible}
+                  onClose={() => setIsDeliveryOptionModalVisible(false)}
+                  withCountryNameButton
+                  renderFlagButton={() => (
+                    <TouchableOpacity onPress={() => setIsDeliveryOptionModalVisible(true)}>
+                      <DeliveryOptionItem backgroundColor={theme?.colors?.inputDisabled}>
+                        <OText
+                          size={16}
+                        >
+                          {deliveryOptions.find((option: any) => option.value === deliveryOptionSelected).label}
+                        </OText>
+                        <MaterialIcons name='keyboard-arrow-down' style={style.icon} />
+                      </DeliveryOptionItem>
+                    </TouchableOpacity>
+                  )}
+                  flatListProps={{
+                    keyExtractor: (item: any) => item.value,
+                    data: deliveryOptions || [],
+                    renderItem: ({ item }: any) => (
+                      <TouchableOpacity
+                        onPress={() => changeDeliveryOption(item.value)}
+                        disabled={
+                          deliveryOptionSelected === item.value
+                        }
+                      >
+                        <DeliveryOptionItem backgroundColor={deliveryOptionSelected === item.value ? theme.colors.inputDisabled : 'white'}>
+                          <OText>
+                            {item.label}
+                          </OText>
+                        </DeliveryOptionItem>
+                      </TouchableOpacity>
+                    )
+                  }}
+                />
+              </View>
+            </DeliveryOptionsContainer>
+          )}
+
+          {!cartState.loading &&
+            cart &&
+            cart?.valid &&
+            options.type === 1 &&
+            cart?.status !== 2 &&
+            validationFields?.fields?.checkout?.driver_tip?.enabled &&
+            driverTipsOptions && driverTipsOptions?.length > 0 &&
+            (
+              <ChSection style={style.paddSection}>
+                <ChDriverTips>
+                  <OText size={20}>
+                    {t('DRIVER_TIPS', 'Driver Tips')}
+                  </OText>
+                  <DriverTips
+                    businessId={cart?.business_id}
+                    driverTipsOptions={driverTipsOptions}
+                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+                      ? cart?.driver_tip
+                      : cart?.driver_tip_rate}
+                    useOrderContext
+                  />
+                </ChDriverTips>
+              </ChSection>
+            )}
+
+          {!cartState.loading && cart && cart?.status !== 2 && cart?.valid && (
+            <ChSection style={style.paddSectionH}>
+              <ChPaymethods>
+                <OText size={20} style={{ alignItems: 'flex-start', textAlign: 'left' }}>
+                  {t('PAYMENT_METHOD', 'Payment Method')}
+                </OText>
+                {!cartState.loading && cart?.status === 4 && (
+                  <OText
+                    style={{ textAlign: 'center', marginTop: 20 }}
+                    color={theme.colors.error}
+                    size={17}
+                  >
+                    {t('CART_STATUS_CANCEL_MESSAGE', 'The payment has not been successful, please try again')}
+                  </OText>
+                )}
+                <PaymentOptions
+                  cart={cart}
+                  isDisabled={cart?.status === 2}
+                  businessId={businessDetails?.business?.id}
+                  isLoading={businessDetails.loading}
+                  paymethods={businessDetails?.business?.paymethods}
+                  onPaymentChange={handlePaymethodChange}
+                  errorCash={errorCash}
+                  setErrorCash={setErrorCash}
+                  onNavigationRedirect={onNavigationRedirect}
+                  paySelected={paymethodSelected}
+                  handlePaymentMethodClickCustom={handlePaymentMethodClick}
+                  setCardData={setCardData}
+                />
+              </ChPaymethods>
+            </ChSection>
+          )}
+
+          {!cartState.loading && cart && (
+            <ChSection style={style.paddSection}>
+              <ChCart>
+                {cartsWithProducts && cart?.products?.length === 0 ? (
+                  <NotFoundSource
+                    content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
+                    btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
+                  />
+                ) : (
+                  <>
+                    <OText size={20} style={{ alignItems: 'flex-start', textAlign: 'left' }}>
+                      {t('ORDER_SUMMARY', 'Order Summary')}
+                    </OText>
+                    <OrderSummary
+                      cart={cart}
+                      isCartPending={cart?.status === 2}
+                      isFromCheckout
+                    />
+                  </>
+                )}
+              </ChCart>
+            </ChSection>
+          )}
+
+          {!cartState.loading && cart && (
+            <ChSection style={{ paddingTop: 0, paddingBottom: 20, paddingHorizontal: 20 }}>
+              <ChErrors>
+                {!cart?.valid_address && cart?.status !== 2 && (
+                  <OText
+                    style={{ textAlign: 'center' }}
+                    color={theme.colors.error}
+                    size={14}
+                  >
+                    {t('INVALID_CART_ADDRESS', 'Selected address is invalid, please select a closer address.')}
+                  </OText>
+                )}
+
+                {!paymethodSelected && cart?.status !== 2 && cart?.valid && (
+                  <OText
+                    style={{ textAlign: 'center' }}
+                    color={theme.colors.error}
+                    size={14}
+                  >
+                    {t('WARNING_NOT_PAYMENT_SELECTED', 'Please, select a payment method to place order.')}
+                  </OText>
+                )}
+
+                {!cart?.valid_products && cart?.status !== 2 && (
+                  <OText
+                    style={{ textAlign: 'center' }}
+                    color={theme.colors.error}
+                    size={14}
+                  >
+                    {t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')}
+                  </OText>
+                )}
+              </ChErrors>
+            </ChSection>
+          )}
+        </ChContainer>
+      </Container>
+      {!cartState.loading && cart && cart?.status !== 2 && (
+        <>
+          <>
+            <FloatingButton
+              handleClick={() => handlePlaceOrder()}
+              isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
+              disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
+              btnText={cart?.subtotal_to_calculate >= cart?.minimum
+                ? (
+                  placing
+                    ? t('PLACING', 'Placing')
+                    : loading
+                      ? t('LOADING', 'Loading')
+                      : t('PLACE_ORDER', 'Place Order')
+                )
+                : (`${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`)
+              }
+            />
+          </>
+        </>
+      )}
+      {webviewPaymethod?.gateway === 'paypal' && showGateway.open && (
+        <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
+          <Icon
+            name="x"
+            size={35}
+            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
+            onPress={handleCloseWebview}
+          />
+          <OText
+            style={{
+              textAlign: 'center',
+              fontSize: 16,
+              fontWeight: 'bold',
+              color: '#00457C',
+              marginBottom: 5,
+              marginTop: 10
+            }}>
+            {t('PAYPAL_GATEWAY', 'PayPal GateWay')}
+          </OText>
+          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
+            <ActivityIndicator size={24} color={progClr} />
+          </View>
+          <WebView
+            source={{ uri: `${ordering.root}/html/paypal_react_native` }}
+            onMessage={onMessage}
+            ref={webviewRef}
+            javaScriptEnabled={true}
+            javaScriptEnabledAndroid={true}
+            cacheEnabled={false}
+            cacheMode='LOAD_NO_CACHE'
+            style={{ flex: 1 }}
+            onLoadStart={() => {
+              setProg(true);
+              setProgClr('#424242');
+            }}
+            onLoadProgress={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoad={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoadEnd={(e) => {
+              const message = {
+                action: 'init',
+                data: {
+                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
+                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
+                  payData: {
+                    paymethod_id: webviewPaymethod?.id,
+                    amount: cart?.total,
+                    delivery_zone_id: cart?.delivery_zone_id,
+                    user_id: user?.id
+                  },
+                  currency: configs?.stripe_currency?.value || currency,
+                  userToken: token,
+                  clientId: webviewPaymethod?.credentials?.client_id
+                }
+              }
+              setProg(false);
+              webviewRef?.current?.postMessage?.(JSON.stringify(message))
+            }}
+          />
+        </View>
+      )}
+      {webviewPaymethod?.gateway === 'square' && showGateway.open && (
+        <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
+          <Icon
+            name="x"
+            size={35}
+            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
+            onPress={handleCloseWebview}
+          />
+          <OText
+            style={{
+              textAlign: 'center',
+              fontSize: 16,
+              fontWeight: 'bold',
+              color: '#00457C',
+              marginBottom: 5,
+              marginTop: 10
+            }}>
+            {t('SQUARE_PAYMENT', 'Square payment')}
+          </OText>
+          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
+            <ActivityIndicator size={24} color={progClr} />
+          </View>
+          <WebView
+            source={{ uri: `https://test-square-f50f7.web.app` }}
+            onMessage={onMessage}
+            ref={webviewRefSquare}
+            javaScriptEnabled={true}
+            javaScriptEnabledAndroid={true}
+            cacheEnabled={false}
+            cacheMode='LOAD_NO_CACHE'
+            style={{ flex: 1 }}
+            onShouldStartLoadWithRequest={() => true}
+            onLoadStart={() => {
+              setProg(true);
+              setProgClr('#424242');
+            }}
+            onLoadProgress={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoad={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoadEnd={(e) => {
+              const message = {
+                action: 'init',
+                data: {
+                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
+                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
+                  payData: {
+                    paymethod_id: webviewPaymethod?.id,
+                    amount: cart?.total,
+                    delivery_zone_id: cart?.delivery_zone_id,
+                    user_id: user?.id,
+                  },
+                  currency: configs?.stripe_currency?.value || currency,
+                  userToken: token,
+                  clientId: 'sandbox-sq0idb-rMLAce87hOfpGvokZCygEw',
+                  locationId: 'L1NGAY5M6KJRX'
+                }
+              }
+              setProg(false);
+              webviewRefSquare?.current?.postMessage?.(JSON.stringify(message))
+            }}
+          />
+        </View>
+      )
+      }
+      {openOrderCreating && (
+        <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
+          <OrderCreating
+            business={businessDetails?.business}
+            businessLogo={businessLogo}
+            cart={cartState.cart}
+            cardData={cardData}
+            isCheckOut
+          />
+        </View>
+      )}
+    </>
+  )
+}
+
+export const Checkout = (props: any) => {
+  const {
+    errors,
+    clearErrors,
+    cartUuid,
+    stripePaymentOptions,
+    onNavigationRedirect,
+    navigation
+  } = props
+
+  const [, { showToast }] = useToast();
+  const [, t] = useLanguage();
+  const [{ token }] = useSession();
+  const [ordering] = useApi();
+  const [, { confirmCart }] = useOrder();
+  const { confirmPayment, loading: confirmPaymentLoading } = useConfirmPayment();
+
+  const [cartState, setCartState] = useState<any>({ loading: true, error: [], cart: null });
+
+  const confirmMethods = ['stripe_redirect', 'paypal']
+
+  const getOrder = async (cartId: any) => {
+    try {
+      setCartState({ ...cartState, loading: true })
+      const url = `${ordering.root}/carts/${cartId}`
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`
+        }
+      })
+      const { result } = await response.json();
+
+      let publicKey = null
+      try {
+        const { content } = await ordering.setAccessToken(token).paymentCards().getCredentials();
+        if (!content.error) {
+          publicKey = content.result.publishable;
+        }
+      } catch (error) {
+        publicKey = null
+      }
+
+      if (result.status === 1 && result.order?.uuid) {
+        onNavigationRedirect('OrderDetails', { orderId: result.order.uuid })
+        setCartState({ ...cartState, loading: false })
+      } else if (result.status === 2 && confirmMethods.includes(result.paymethod_data?.gateway)) {
+        try {
+          const confirmCartRes = await confirmCart(cartUuid)
+          if (confirmCartRes.error) {
+            showToast(ToastType.Error, confirmCartRes.error.message)
+          }
+          if (confirmCartRes.result.order?.uuid) {
+            onNavigationRedirect('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
+          }
+          setCartState({
+            ...cartState,
+            loading: false,
+            cart: result
+          })
+        } catch (error: any) {
+          showToast(ToastType.Error, error?.toString() || error.message)
+        }
+      } else if (result.status === 2 && stripePaymentOptions.includes(result.paymethod_data?.gateway)) {
+        const clientSecret = result.paymethod_data?.result?.client_secret
+        const paymentMethodId = result.paymethod_data?.data?.source_id;
+
+        initStripe({ publishableKey: publicKey });
+
+        try {
+          const { paymentIntent, error } = await confirmPayment(clientSecret, {
+            type: 'Card',
+            paymentMethodId
+          });
+
+          try {
+            const confirmCartRes = await confirmCart(cartUuid)
+            if (confirmCartRes.error) {
+              showToast(ToastType.Error, confirmCartRes.error.message)
+              setCartState({
+                ...cartState,
+                loading: false,
+                cart: result
+              })
+              return
+            }
+            if (confirmCartRes.result.order?.uuid) {
+              onNavigationRedirect('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
+              setCartState({ ...cartState, loading: false })
+            } else {
+              showToast(ToastType.Error, t('FAILED_PAYMENT', 'The payment has failed'));
+              const cart = Array.isArray(result) ? null : result
+              setCartState({
+                ...cartState,
+                loading: false,
+                cart,
+                error: cart ? null : result
+              })
+              return
+            }
+          } catch (error: any) {
+            showToast(ToastType.Error, error?.toString() || error.message)
+          }
+        } catch (error) {
+          showToast(ToastType.Error, t('FAILED_PAYMENT', 'The payment has failed'));
+          const cart = Array.isArray(result) ? null : result
+          setCartState({
+            ...cartState,
+            loading: false,
+            cart,
+            error: cart ? null : result
+          })
+        }
+      } else {
+        const cart = Array.isArray(result) ? null : result
+        setCartState({
+          ...cartState,
+          loading: false,
+          cart,
+          error: cart ? null : result
+        })
+      }
+    } catch (e: any) {
+      setCartState({
+        ...cartState,
+        loading: false,
+        error: [e.toString()]
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (errors) {
+      const errorText = manageErrorsToShow(errors)
+      showToast(ToastType.Error, errorText)
+      clearErrors && clearErrors()
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (token && cartUuid) {
+      getOrder(cartUuid)
+    }
+  }, [token, cartUuid])
+
+  const checkoutProps = {
+    ...props,
+    UIComponent: CheckoutUI,
+    cartState,
+    businessId: cartState.cart?.business_id
+  }
+
+  return (
+    <>
+      {cartState?.error?.length > 0 ? (
+        <NotFoundSource
+          content={t(cartState.error)}
+          btnTitle={t('GO_TO_BUSINESSLIST', 'Go to business list')}
+          onClickButton={() => navigation.navigate('BusinessList')}
+        />
+      ) : (
+        <CheckoutController {...checkoutProps} />
+      )}
+    </>
+  )
+}