ordering-ui-react-native 0.23.96 → 0.23.98

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

@@ -1,27 +1,48 @@
 import React, { useState } from 'react'
-import { useTheme } from 'styled-components/native';
-import { Platform, RefreshControl } from 'react-native'
-import { HelpParams } from '../../types'
+import { Platform, RefreshControl, View } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { useTheme } from 'styled-components/native'
 import { useLanguage } from 'ordering-components/native'
+
+import { HelpParams } from '../../types'
+import { CmsContent } from './functions'
+import { HelpSubItem, LastOrdersContainer } from './styles'
+import { Container } from '../../layouts/Container'
+
+import { OText, OIcon } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
-import { OText } from '../shared'
 import { LastOrders } from '../LastOrders'
-import { Container } from '../../layouts/Container'
 
-import {
-  HelpSubItem,
-  LastOrdersContainer
-} from './styles'
+const HelpUI = (props: HelpParams) => {
+  const { cmsState, navigation } = props
+
+  const { items, loading, error, pages } = cmsState
 
-export const Help = (props: HelpParams) => {
-  const {
-    navigation
-  } = props
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [refreshing] = useState(false);
+
+  const [refreshing] = useState(false)
   const [refresh, setRefresh] = useState(false)
 
+  const HelpItem = ({ item }: any) => {
+    const currentItem = pages.find((p: any) => p.id === item.id)
+    return (
+      <HelpSubItem
+        activeOpacity={0.7}
+        onPress={() => onRedirect('HelpOptions', { item: currentItem })}
+      >
+        <OText size={14} style={{ width: '90%' }}>
+          {item.name}
+        </OText>
+        <OIcon
+          width={15}
+          src={theme.images.general.chevron_right}
+        />
+      </HelpSubItem>
+    )
+  }
+
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
@@ -49,22 +70,36 @@ export const Help = (props: HelpParams) => {
         showCall={false}
         btnStyle={{ paddingLeft: 0 }}
       />
-      <HelpSubItem
-        onPress={() => onRedirect('HelpOrder')}
+      <OText
+        size={20}
+        weight={'bold'}
+        style={{ marginBottom: 20 }}
       >
-        <OText size={14}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
-      </HelpSubItem>
-      <HelpSubItem
-        onPress={() => onRedirect('HelpAccountAndPayment')}
-      >
-        <OText size={14}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
-      </HelpSubItem>
-      <HelpSubItem
-        onPress={() => onRedirect('HelpGuide')}
-      >
-        <OText size={14}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
-      </HelpSubItem>
-
+        {t('ALL_THE_THEMES', 'All the themes')}
+      </OText>
+      {!loading && !error && items.map((item: any) => (
+        <HelpItem
+          key={item.id}
+          item={item}
+        />
+      ))}
+      {loading && (
+        <Placeholder Animation={Fade}>
+          <View style={{ flexDirection: 'column' }}>
+            {[...Array(5)].map((_, i) => (
+              <HelpSubItem key={i}>
+                <PlaceholderLine key={i} height={30} width={90} noMargin />
+              </HelpSubItem>
+            ))}
+          </View>
+        </Placeholder>
+      )}
+      {!loading && !!error && (
+        <NotFoundSource
+          simple
+          content={error}
+        />
+      )}
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
         <LastOrders {...props} onRedirect={onRedirect} refresh={refresh} setRefresh={setRefresh} />
@@ -72,3 +107,13 @@ export const Help = (props: HelpParams) => {
     </Container>
   )
 }
+
+export const Help = (props: HelpParams) => {
+  const helpProps = {
+    ...props,
+    UIComponent: HelpUI
+  }
+  return (
+    <CmsContent {...helpProps} />
+  )
+}

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

@@ -1,9 +1,12 @@
 import styled from 'styled-components/native'
 
 export const HelpSubItem = styled.TouchableOpacity`
-  border-bottom-color: #E9ECEF;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
   border-bottom-width: 1px;
   padding-vertical: 15px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 `
 
 export const LastOrdersContainer = styled.View`

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Dimensions, Platform } from 'react-native'
+import { WebView } from 'react-native-webview'
+import { useLanguage } from 'ordering-components/native'
+
+import { Container } from '../../layouts/Container'
+import { NotFoundSource } from '../NotFoundSource'
+import NavBar from '../NavBar'
+
+const HEIGHT_SCREEN = Dimensions.get('screen').height
+
+export const HelpOptions = (props: any) => {
+  const { item, goToBack } = props
+  const [, t] = useLanguage()
+
+  return (
+    <Container
+      pt={Platform.OS === 'ios' ? 20 : 10}
+      noPadding
+    >
+      <NavBar
+        title={t('HELP', 'Help')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+      {!!item?.body && (
+        <WebView
+          originWhitelist={['*']}
+          automaticallyAdjustContentInsets={false}
+          source={{ html: item.body }}
+          style={{ flex: 1, height: HEIGHT_SCREEN }}
+        />
+      )}
+      {!item?.body && (
+        <NotFoundSource
+          simple
+          content={t('NO_CONTENT_TO_SHOW', 'Nothing to show')}
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -103,6 +103,7 @@ const MultiCheckoutUI = (props: any) => {
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
   const isPreOrder = configs?.preorder_status_enabled?.value === '1'
   const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
+  const isGuestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
   const walletCarts = (Object.values(carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
   const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const cartsToShow = openCarts?.length > 0 ? openCarts : cartsInvalid
@@ -123,7 +124,7 @@ const MultiCheckoutUI = (props: any) => {
 
   const creditPointGeneralPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
   const loyalBusinessAvailable = creditPointGeneralPlan?.businesses?.filter((b: any) => b.accumulates) ?? []
-  const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field : any) => field.order_type_id === options?.type), [checkoutFieldsState, options])
+  const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field: any) => field.order_type_id === options?.type), [checkoutFieldsState, options])
 
   const accumulationRateBusiness = (businessId: number) => {
     const value = loyalBusinessAvailable?.find((loyal: any) => loyal.business_id === businessId)?.accumulation_rate ?? 0
@@ -162,7 +163,8 @@ const MultiCheckoutUI = (props: any) => {
   const isDisablePlaceOrderButton = cartGroup?.loading || placing || (!(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) && cartGroup?.result?.balance > 0) ||
     (paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data) ||
     walletCarts.length > 0
-    || (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading)) || openCarts?.length === 0
+    || (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading)) || openCarts?.length === 0 ||
+    (!isGuestCheckoutEnabled && !!user?.guest_id)
 
   const handleMomentClick = () => {
     if (isPreOrder) {
@@ -428,14 +430,16 @@ const MultiCheckoutUI = (props: any) => {
                     style={{ borderRadius: 7.6, marginTop: 20 }}
                     onClick={() => setOpenModal({ ...openModal, login: true })}
                   />
-                  <OButton
-                    text={t('CONTINUE_AS_GUEST', 'Continue as guest')}
-                    textStyle={{ color: theme.colors.black }}
-                    bgColor={theme.colors.white}
-                    borderColor={theme.colors.black}
-                    style={{ borderRadius: 7.6, marginTop: 20 }}
-                    onClick={() => setAllowedGuest(true)}
-                  />
+                  {isGuestCheckoutEnabled && (
+                    <OButton
+                      text={t('CONTINUE_AS_GUEST', 'Continue as guest')}
+                      textStyle={{ color: theme.colors.black }}
+                      bgColor={theme.colors.white}
+                      borderColor={theme.colors.black}
+                      style={{ borderRadius: 7.6, marginTop: 20 }}
+                      onClick={() => setAllowedGuest(true)}
+                    />
+                  )}
                 </View>
               ) : (
                 <UserDetails
@@ -643,6 +647,14 @@ const MultiCheckoutUI = (props: any) => {
               {t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
             </OText>
           )}
+          {(!isGuestCheckoutEnabled && !!user?.guest_id) && (
+            <OText
+              color={theme.colors.error}
+              size={12}
+            >
+              {t('LOGIN_SIGN_UP_COMPLETE_ORDER', 'Login/Sign up to complete your order.')}
+            </OText>
+          )}
         </ChContainer>
         <OModal
           open={openModal.signup}

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

@@ -5,48 +5,49 @@ import { NotFoundSourceParams } from '../../types'
 import { useTheme } from 'styled-components/native';
 import Foundation from 'react-native-vector-icons/Foundation'
 import {
-	NotFound,
-	NotFoundImage
+  NotFound,
+  NotFoundImage
 } from './styles'
 
 export const NotFoundSource = (props: NotFoundSourceParams) => {
-	const {
-		hideImage,
-		content,
-		btnTitle,
-		btnStyle,
-		conditioned,
-		onClickButton
-	} = props
+  const {
+    hideImage,
+    content,
+    btnTitle,
+    btnStyle,
+    conditioned,
+    onClickButton,
+    simple
+  } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
 
-	return (
-		<NotFound>
-			{!hideImage && (
-				<NotFoundImage>
-					<Foundation
-						name='page-search'
-						color={theme.colors.primary}
-						size={60}
-						style={{ marginBottom: 10 }}
-					/>
-				</NotFoundImage>
-			)}
-			{content && conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
-			{content && !conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
-			{!onClickButton && props.children && (
-				props.children
-			)}
-			{onClickButton && (
-				<View style={{ marginTop: 10, width: '100%' }}>
-					<OButton
-						style={{ width: '100%', height: 50, ...btnStyle }}
-						onClick={() => onClickButton()}
-						text={btnTitle}
-					/>
-				</View>
-			)}
-		</NotFound>
-	)
+  return (
+    <NotFound simple={simple}>
+      {!hideImage && !simple && (
+        <NotFoundImage>
+          <Foundation
+            name='page-search'
+            color={theme.colors.primary}
+            size={60}
+            style={{ marginBottom: 10 }}
+          />
+        </NotFoundImage>
+      )}
+      {content && conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
+      {content && !conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
+      {!onClickButton && props.children && (
+        props.children
+      )}
+      {onClickButton && (
+        <View style={{ marginTop: 10, width: '100%' }}>
+          <OButton
+            style={{ width: '100%', height: 50, ...btnStyle }}
+            onClick={() => onClickButton()}
+            text={btnTitle}
+          />
+        </View>
+      )}
+    </NotFound>
+  )
 }

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

@@ -1,14 +1,23 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const NotFound = styled.View`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: auto;
-  margin: 10px auto;
-  padding: 10px;
+  ${(props: any) => props.simple
+    ? css`
+        background-color: ${(props: any) => props.theme.colors?.white};
+        border-radius: 10px;
+        padding: 15px;
+        padding-horizontal: 20px;
+        border: 1px ${(props: any) => props.theme.colors?.border};
+    ` : css`
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: auto;
+      margin: auto auto;
+      padding: 10px;
+    `}
 `
 
 export const NotFoundImage = styled.View`

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

@@ -48,6 +48,8 @@ const stripeDirectMethods = ['stripe_direct']
 const webViewPaymentGateway: any = ['paypal', 'square']
 const multiCheckoutMethods = ['global_google_pay', 'global_apple_pay']
 const cardsPaymethods = ['credomatic']
+const guestNotSupportedMethods = ['stripe', 'stripe_connect', 'stripe_redirect']
+const popupMethods = [...guestNotSupportedMethods, 'stripe_direct', 'paypal']
 
 const PaymentOptionsUI = (props: any) => {
   const {
@@ -77,7 +79,9 @@ const PaymentOptionsUI = (props: any) => {
     paymethodClicked,
     setPaymethodClicked,
     androidAppId,
-    setUserHasCards
+    setUserHasCards,
+    guestDisabledError,
+    handleOpenGuestSignup
   } = props
 
   const theme = useTheme();
@@ -125,6 +129,11 @@ const PaymentOptionsUI = (props: any) => {
   const paymethodsFieldRequired = ['paypal', 'apple_pay', 'global_apple_pay']
 
   const handlePaymentMethodClick = (paymethod: any) => {
+    const _guestNotSupportedMethods = guestDisabledError ? popupMethods : guestNotSupportedMethods
+    if (handleOpenGuestSignup && _guestNotSupportedMethods.includes(paymethod?.gateway) && !!user?.guest_id) {
+      handleOpenGuestSignup()
+      return
+    }
     if (cart?.balance > 0 || !!user?.guest_id) {
       if (paymethodsFieldRequired.includes(paymethod?.gateway) && requiredFields.length > 0) {
         openUserModal && openUserModal(true)