ordering-ui-react-native 0.17.76-release → 0.17.77-release

package/package.json

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

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

@@ -275,12 +275,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
-            {order?.payment_events?.length > 0 && (
-              <View>
+            <OText>
+              <OText size={13} weight='bold'>
+                {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
+              </OText>
+              {order?.payment_events?.length > 0 ? (
                 <OText size={13}>
-                  <OText size={13} weight='bold'>
-                    {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
-                  </OText>
                   {order?.payment_events?.map((event: any, idx: number) => {
                     return event?.wallet_event
                       ? idx < order?.payment_events?.length - 1
@@ -291,8 +291,10 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                         : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
                   })}
                 </OText>
-              </View>
-            )}
+              ) : (
+                <OText size={13}>{t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}</OText>
+              )}
+            </OText>
           </>
         )}
       </OrderHeader>

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -406,7 +406,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								style={{ marginRight: isChewLayout ? 0 : 10 }}
 							/>
 							<OText size={12} numberOfLines={1} style={{ flex: 1 }}>
-								{orderState?.options?.address?.address}
+								{orderState?.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
 							</OText>
 							{!isChewLayout && (
 								<OIcon

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

@@ -162,6 +162,7 @@ const CheckoutUI = (props: any) => {
 	const [allowedGuest, setAllowedGuest] = useState(false)
 	const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
 	const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
+	const [paymethodClicked, setPaymethodClicked] = useState<any>(null)
 	const [cardList, setCardList] = useState<any>({ cards: [], loading: false, error: null })
 	const cardsMethods = ['credomatic']
   	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
@@ -732,6 +733,10 @@ const CheckoutUI = (props: any) => {
 									setPlaceByMethodPay={setPlaceByMethodPay}
 									cardList={cardList}
 									setCardList={setCardList}
+									requiredFields={requiredFields}
+									openUserModal={setIsOpen}
+									paymethodClicked={paymethodClicked}
+									setPaymethodClicked={setPaymethodClicked}
 								/>
 							</ChPaymethods>
 						</ChSection>
@@ -916,7 +921,14 @@ const CheckoutUI = (props: any) => {
 								handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
 								onClose={() => {
 									setIsOpen(false)
-									handlePlaceOrder(null, true)
+									if (paymethodClicked) {
+										setPaymethodClicked({
+											...paymethodClicked,
+											confirmed: true
+										})
+									} else {
+										handlePlaceOrder(null, true)
+									}
 								}}
 								setIsOpen={setIsOpen}
 							/>

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

@@ -7,7 +7,9 @@ import {
   OrderDetails as OrderDetailsConTableoller,
   useUtils,
   useOrder,
-  useConfig
+  useConfig,
+  useToast,
+  ToastType
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { showLocation } from 'react-native-map-link';
@@ -40,7 +42,7 @@ import { ProductItemAccordion } from '../ProductItemAccordion';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { OrderDetailsParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
-import { verifyDecimals, getOrderStatus } from '../../utils';
+import { verifyDecimals, getOrderStatus, getOrderStatuPickUp } from '../../utils';
 import { OSRow } from '../OrderSummary/styles';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
@@ -48,8 +50,8 @@ import { Placeholder, PlaceholderLine } from 'rn-placeholder';
 import NavBar from '../NavBar'
 import { OrderHistory } from './OrderHistory';
 import { PlaceSpot } from '../PlaceSpot'
-import { OrderEta } from './OrderEta'
 import { SendGiftCard } from '../GiftCard/SendGiftCard'
+import { OrderEta } from './OrderEta'
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
     navigation,
@@ -65,7 +67,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   } = props;
 
   const theme = useTheme();
-
+  const [, { showToast }] = useToast()
   const styles = StyleSheet.create({
     rowDirection: {
       flexDirection: 'row',
@@ -124,9 +126,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
   const reorderStatus = [1, 2, 5, 6, 10, 11, 12]
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
-  const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
   const isGiftCardOrder = !order?.business_id
-
+  const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
+  const hideDeliveryProgress = theme?.confirmation?.components?.order?.components?.progress?.hidden
+  const hideBusinessPhone = theme?.confirmation?.components?.business?.components?.phone?.hidden
+  const hideBusinessMessages = theme?.confirmation?.components?.business?.components?.messages?.hidden
+  const hideBusinessEmail = theme?.confirmation?.components?.business?.components?.email?.hidden
+  const hideBusinessAddress = theme?.confirmation?.components?.business?.components?.address?.hidden
+  const hideDriverName = theme?.confirmation?.components?.driver?.components?.name?.hidden
+  const hideDriverPhone = theme?.confirmation?.components?.driver?.components?.phone?.hidden
+  const hideDriverMessages = theme?.confirmation?.components?.driver?.components?.messages?.hidden
+  const hideCustomerPhone = theme?.confirmation?.components?.customer?.components?.phone?.hidden
+  const hideCustomerAddress = theme?.confirmation?.components?.customer?.components?.address?.hidden
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -184,7 +195,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         order: {
           id: order?.id,
           business_id: order?.business_id,
-          logo: order.business?.logo,
+          logo: order.business?.logo || theme.images.dummies.businessLogo,
           driver: order?.driver,
           products: order?.products,
           review: order?.review,
@@ -204,7 +215,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     ) && !order.review && !isReviewed && handleClickOrderReview(order)
   }
 
-  
+
   const resfreshOrder = () => {
     getOrder()
   }
@@ -328,8 +339,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [driverLocation]);
 
+  useEffect(() => {
+    if (props?.order?.error && !props?.order?.loading) {
+      showToast(ToastType.Error, props?.order?.error)
+      navigation.navigate('BusinessList')
+    }
+  }, [props?.order?.error, props?.order?.loading])
+
+  const progressBarObjt = order?.delivery_type && props.order?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+
   return (
-    <OrderDetailsContainer 
+    <OrderDetailsContainer
       keyboardShouldPersistTaps="handled"
       refreshControl={
         <RefreshControl
@@ -446,7 +466,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       activeOpacity={0.7}
                       style={{ marginTop: 6 }}
                       onPress={() => setIsOrderHistory(true)}
-  
                     >
                       <OText
                         size={12}
@@ -458,26 +477,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       </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>
+                  {!hideDeliveryProgress && (
+                    <>
+                      <StaturBar>
+                        <LinearGradient
+                          start={{ x: 0.0, y: 0.0 }}
+                          end={{
+                            x: progressBarObjt(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}>
+                        {progressBarObjt(order?.status)?.value}
+                      </OText>
+                    </>
+                  )}
                 </OrderData>
                 <View
                   style={{
@@ -521,7 +543,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       {order?.business?.name}
                     </OText>
                     <Icons>
-                      {!!order?.business?.cellphone && (
+                      {!!order?.business?.cellphone && !hideBusinessPhone && (
                         <TouchableOpacity
                           onPress={() => order?.business?.cellphone &&
                             Linking.openURL(`tel:${order?.business?.cellphone}`)
@@ -535,25 +557,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           />
                         </TouchableOpacity>
                       )}
-                      <TouchableOpacity
-                        style={{ paddingStart: 5 }}
-                        onPress={() => handleGoToMessages('business')}>
-                        <OIcon
-                          src={theme.images.general.chat}
-                          width={16}
-                          color={theme.colors.disabled}
-                        />
-                      </TouchableOpacity>
+                      {!hideBusinessMessages && (
+                        <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 && (
+                  {!hideBusinessEmail && (
+                    <OText
+                      size={12}
+                      lineHeight={18}
+                      color={theme.colors.textNormal}
+                      mBottom={2}>
+                      {order?.business?.email}
+                    </OText>
+                  )}
+                  {!!order?.business?.cellphone && !hideBusinessPhone && (
                     <OText
                       size={12}
                       lineHeight={18}
@@ -562,9 +588,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       {order?.business?.cellphone}
                     </OText>
                   )}
-                  <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-                    {order?.business?.address}
-                  </OText>
+                  {!hideBusinessAddress && (
+                    <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
+                      {order?.business?.address}
+                    </OText>
+                  )}
                 </View>
                 {directionTypes.includes(order?.delivery_type) && (
                   <OButton
@@ -588,7 +616,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 )}
               </OrderBusiness>
             )}
-            
+
             {!isGiftCardOrder && placeSpotTypes.includes(order?.delivery_type) && (
               <PlaceSpotWrapper>
                 <PlaceSpot
@@ -626,14 +654,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     mBottom={2}>
                     {order?.customer?.name} {order?.customer?.lastname}
                   </OText>
-                  <OText
-                    size={12}
-                    lineHeight={18}
-                    color={theme.colors.textNormal}
-                    mBottom={2}>
-                    {order?.customer?.address}
-                  </OText>
-                  {(!!order?.customer?.cellphone) && (
+                  {!hideCustomerAddress && (
+                    <OText
+                      size={12}
+                      lineHeight={18}
+                      color={theme.colors.textNormal}
+                      mBottom={2}>
+                      {order?.customer?.address}
+                    </OText>
+                  )}
+                  {(!!order?.customer?.cellphone && !hideCustomerPhone) && (
                     <OText
                       size={12}
                       lineHeight={18}
@@ -666,7 +696,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 <>
                   {order?.driver?.location && mapValidStatuses.includes(parseInt(order?.status)) && (
                     <Map>
-                     <GoogleMap
+                      <GoogleMap
                         location={typeof order?.driver?.location?.location === 'string'
                           ? {
                             lat: parseFloat(driverLocationString[0]),
@@ -701,23 +731,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           alignItems: 'center',
                           justifyContent: 'space-between',
                         }}>
-                        <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2} style={{ flexGrow: 1, flexBasis: '80%' }}>
-                          {order?.driver?.name} {order?.driver?.lastname}
-                        </OText>
-                        <Icons>
-                          <TouchableOpacity
-                            onPress={() => handleGoToMessages('driver')}>
-                            <OIcon
-                              src={theme.images.general.chat}
-                              width={16}
-                              color={theme.colors.disabled}
-                            />
-                          </TouchableOpacity>
-                        </Icons>
+                        {!hideDriverName && (
+                          <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2} style={{ flexGrow: 1, flexBasis: '80%' }}>
+                            {order?.driver?.name} {order?.driver?.lastname}
+                          </OText>
+                        )}
+                        {!hideDriverMessages && (
+                          <Icons>
+                            <TouchableOpacity
+                              onPress={() => handleGoToMessages('driver')}>
+                              <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?.driver?.cellphone}
-                      </OText>
+                      {!hideDriverPhone && (
+                        <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
+                          {order?.driver?.cellphone}
+                        </OText>
+                      )}
                     </InfoBlock>
                   </Customer>
                 </OrderDriver>
@@ -986,7 +1022,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           )} */}
                         </View>
                         <OText>
-                          -{parsePrice(event.amount, { isTruncable: true })}
+                          {configs.currency_position?.value === 'left'
+                            ? `${configs.format_number_currency?.value} -${parseNumber(event.amount, { isTruncable: true })}`
+                            : `-${parsePrice(event.amount, { isTruncable: true })}`}
                         </OText>
                       </View>
                     ))}

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

@@ -22,7 +22,7 @@ import {
   OrderInfoWrapper,
   OrderProgressWrapper
 } from './styles'
-import { getOrderStatus } from '../../utils'
+import { getOrderStatuPickUp, getOrderStatus } from '../../utils'
 
 const OrderProgressUI = (props: any) => {
   const {
@@ -110,6 +110,8 @@ const OrderProgressUI = (props: any) => {
     setInitialLoaded(true)
   }, [orderList.loading, initialLoaded])
 
+  const progressBarObjt = lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+
   return (
     <>
       {(orderList?.loading && !initialLoaded) && (
@@ -162,10 +164,10 @@ const OrderProgressUI = (props: any) => {
             </OrderInfoWrapper>
             <View style={{ flex: 1 }}>
               <ProgressContentWrapper>
-                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${(getOrderStatus(lastOrder.status) as any).percentage * 100}%` : '0%' }} />
+                <ProgressBar style={{ width: progressBarObjt(lastOrder.status)?.percentage ? `${(progressBarObjt(lastOrder.status) as any).percentage * 100}%` : '0%' }} />
               </ProgressContentWrapper>
               <ProgressTextWrapper>
-                <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
+                <OText size={12} style={{ width: '50%' }}>{progressBarObjt(lastOrder.status)?.value}</OText>
                 <TimeWrapper>
                   <OText size={11}>{lastOrder?.delivery_type === 1 ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}</OText>
                   <OText size={11}>

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

@@ -69,7 +69,11 @@ const PaymentOptionsUI = (props: any) => {
 		methodPaySupported,
 		setPlaceByMethodPay,
 		setCardList,
-		onPaymentChange
+		onPaymentChange,
+		requiredFields,
+		openUserModal,
+		paymethodClicked,
+		setPaymethodClicked
 	} = props
 
 	const theme = useTheme();
@@ -115,6 +119,14 @@ const PaymentOptionsUI = (props: any) => {
 
 	const handlePaymentMethodClick = (paymethod: any) => {
 		if (cart?.balance > 0) {
+			if (paymethod?.gateway === 'paypal' && requiredFields.length > 0) {
+				openUserModal && openUserModal(true)
+				setPaymethodClicked({
+					confirmed: false,
+					paymethod
+				})
+				return
+			}
 			const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
 			if (webViewPaymentGateway.includes(paymethod?.gateway)) {
 				handlePaymentMethodClickCustom(paymethod)
@@ -159,7 +171,14 @@ const PaymentOptionsUI = (props: any) => {
 			handlePlaceOrder(confirmApplePayPayment)
 		}
 	}, [paymethodData, paymethodSelected])
-	
+
+	useEffect(() => {
+		if (paymethodClicked?.confirmed) {
+			handlePaymentMethodClickCustom(paymethodClicked?.paymethod)
+		}
+	}, [paymethodClicked?.confirmed])
+
+
 	const renderPaymethods = ({ item }: any) => {
 		return (
 			<>

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

@@ -913,12 +913,7 @@ export const ProductOptionsUI = (props: any) => {
 																}}>
 																{option?.suboptions?.sort((a: any, b: any) => a.rank - b.rank).map(
 																	(suboption: any) => {
-																		const currentState =
-																			productCart.options[
-																				`id:${option.id}`
-																			]?.suboptions[
-																			`id:${suboption.id}`
-																			] || {};
+																		const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {};
 																		const balance =
 																			productCart.options[
 																				`id:${option.id}`
@@ -933,6 +928,7 @@ export const ProductOptionsUI = (props: any) => {
 																				balance={balance}
 																				option={option}
 																				suboption={suboption}
+																				image={suboption.image}
 																				state={currentState}
 																				disabled={
 																					isSoldOut ||

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

@@ -7,6 +7,7 @@ import {
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import FastImage from 'react-native-fast-image';
 
 import {
 	Container,
@@ -14,7 +15,8 @@ import {
 	QuantityControl,
 	Checkbox,
 	PositionControl,
-	Circle
+	Circle,
+	Logo
 } from './styles'
 import { OIcon, OText } from '../shared'
 
@@ -29,7 +31,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		setIsScrollAvailable
+		setIsScrollAvailable,
+		image
 	} = props
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
@@ -37,12 +40,24 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const theme = useTheme();
 	const [, t] = useLanguage()
-	const [{ parsePrice }] = useUtils()
+	const [{ parsePrice, optimizeImage }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
 	const iconsSize = 20
 
+	const styles = StyleSheet.create({
+		icon: {
+			borderRadius: 7.6,
+			width: 60,
+			height: 60
+		},
+		logo: {
+			borderRadius: 10,
+			marginLeft: 3,
+		},
+	});
+
 	const handleSuboptionClick = () => {
 		toggleSelect()
 		setIsDirty(true)
@@ -82,6 +97,18 @@ export const ProductOptionSubOptionUI = (props: any) => {
 							<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
 						)
 					)}
+					{image && (
+						<Logo style={styles.logo}>
+							<FastImage
+								style={styles.icon}
+								source={{
+									uri: optimizeImage(image, 'h_100,c_limit'),
+									priority: FastImage.priority.normal,
+								}}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						</Logo>
+					)}
 					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
 						{suboption?.name}
 					</OText>
@@ -141,7 +168,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					</PositionControl>
 				)}
 				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{width: 70, maxWidth: 70}}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ width: 70, maxWidth: 70 }}>
 						+ {parsePrice(price)}
 					</OText>
 				)}

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

@@ -10,7 +10,7 @@ export const Container = styled.TouchableOpacity`
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
   padding: 10px 0 10px 10px;
-  width: 35%;
+  width: 50%;
   align-items: center;
 `
 
@@ -32,3 +32,8 @@ export const Checkbox = styled.TouchableOpacity`
 export const Circle = styled.TouchableOpacity`
   margin: 0 1.5px;
 `
+
+export const Logo = styled.View`
+  height: 65px;
+  width: 65px;
+`;

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

@@ -576,6 +576,119 @@ export const getOrderStatus = (s: string) => {
   return objectStatus && objectStatus;
 }
 
+export const getOrderStatuPickUp = (s: any) => {
+  const status = parseInt(s);
+  const orderStatus = [
+    {
+      key: 0,
+      value: t('PENDING', 'Pending'),
+      slug: 'PENDING',
+      percentage: 0.1,
+      image: theme.images.order.status0,
+    },
+    {
+      key: 1,
+      value: t('COMPLETED', 'Completed'),
+      slug: 'COMPLETED',
+      percentage: 1,
+      image: theme.images.order.status1,
+    },
+    {
+      key: 2,
+      value: t('REJECTED', 'Rejected'),
+      slug: 'REJECTED',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 4,
+      value: t('PREPARATION_COMPLETED', 'Preparation Completed'),
+      slug: 'PREPARATION_COMPLETED',
+      percentage: 0.5,
+      image: theme.images.order.status4,
+    },
+    {
+      key: 5,
+      value: t('REJECTED_BY_BUSINESS', 'Rejected by business'),
+      slug: 'REJECTED_BY_BUSINESS',
+      percentage: 0,
+      image: theme.images.order.status5,
+    },
+    {
+      key: 7,
+      value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business'),
+      slug: 'ACCEPTED_BY_BUSINESS',
+      percentage: 0.3,
+      image: theme.images.order.status7,
+    },
+    {
+      key: 13,
+      value: t('PREORDER', 'PreOrder'),
+      slug: 'PREORDER',
+      percentage: 0,
+      image: theme.images.order.status13,
+    },
+    {
+      key: 14,
+      value: t('ORDER_NOT_READY', 'Order not ready'),
+      slug: 'ORDER_NOT_READY',
+      percentage: 0.3,
+      image: theme.images.order.status13,
+    },
+    {
+      key: 15,
+      value: t(
+        'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+        'Order picked up completed by customer',
+      ),
+      slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+      percentage: 1,
+      image: theme.images.order.status1,
+    },
+    {
+      key: 16,
+      value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer'),
+      slug: 'CANCELLED_BY_CUSTOMER',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 17,
+      value: t(
+        'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+        'Order not picked up by customer',
+      ),
+      slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 20,
+      value: t(
+        'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+        'Customer almost arrived to business',
+      ),
+      slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+      percentage: 0.7,
+      image: theme.images.order.status7,
+    },
+    {
+      key: 21,
+      value: t(
+        'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+        'Customer arrived to business',
+      ),
+      slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+      percentage: 0.9,
+      image: theme.images.order.status7,
+    }
+  ];
+
+  const objectStatus = orderStatus.find((o) => o.key === status);
+
+  return objectStatus && objectStatus;
+}
+
 /**
  * Function to get brightness of color.
  */