ordering-ui-react-native 0.14.21-release → 0.14.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.21-release",
+  "version": "0.14.23",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -55,7 +55,7 @@
     "@types/styled-components": "^5.1.3",
     "axios": "^0.21.0",
     "moment": "^2.29.1",
-    "ordering-components": "github:Ordering-Inc/ordering-components#release",
+    "ordering-components": "github:Ordering-Inc/ordering-components#development",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.7.2",

package/src/components/ProductForm/index.tsx

@@ -232,19 +232,21 @@ export const ProductOptionsUI = (props: any) => {
                       </React.Fragment>
                     )
                   }))}
-                  <ProductComment>
-                    <SectionTitle>
-                      <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
-                    </SectionTitle>
-                    <OInput
-                      multiline
-                      placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-                      value={productCart.comment}
-                      onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
-                      isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
-                      style={styles.comment}
-                    />
-                  </ProductComment>
+                  {!product?.hide_special_instructions && (  
+                    <ProductComment>
+                      <SectionTitle>
+                        <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
+                      </SectionTitle>
+                      <OInput
+                        multiline
+                        placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+                        value={productCart.comment}
+                        onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
+                        isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
+                        style={styles.comment}
+                      />
+                    </ProductComment>
+                  )}
                 </ProductEditions>
               )}
             </WrapContent>

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

@@ -287,20 +287,22 @@ export const ProductOptionsUI = (props: any) => {
 											</React.Fragment>
 										)
 									}))}
-									<ProductComment onLayout={(e: any) => setCommentY(e.nativeEvent.layout.y + e.nativeEvent.layout.height)}>
-										<SectionTitle>
-											<OText style={theme.labels.middle as TextStyle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
-										</SectionTitle>
-										<OInput
-											multiline
-											placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-											value={productCart.comment}
-											onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
-											isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
-											style={styles.comment}
-											inputStyle={{ fontSize: 12, paddingBottom: 7, paddingTop: 17 }}
-										/>
-									</ProductComment>
+									{!product?.hide_special_instructions && (
+										<ProductComment onLayout={(e: any) => setCommentY(e.nativeEvent.layout.y + e.nativeEvent.layout.height)}>
+											<SectionTitle>
+												<OText style={theme.labels.middle as TextStyle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
+											</SectionTitle>
+											<OInput
+												multiline
+												placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+												value={productCart.comment}
+												onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
+												isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
+												style={styles.comment}
+												inputStyle={{ fontSize: 12, paddingBottom: 7, paddingTop: 17 }}
+											/>
+										</ProductComment>
+									)}
 									{productCart && !isSoldOut && maxProductQuantity > 0 && (
 										<View style={{ paddingVertical: 4, marginBottom: 10 }}>
 											<SectionTitle>

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

@@ -235,19 +235,21 @@ export const ProductOptionsUI = (props: any) => {
 											</React.Fragment>
 										)
 									}))}
-									<ProductComment>
-										<SectionTitle>
-											<OText style={theme.labels.middle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
-										</SectionTitle>
-										<OInput
-											multiline
-											placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-											value={productCart.comment}
-											onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
-											isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
-											style={{ ...styles.comment, borderColor: theme.colors.border }}
-										/>
-									</ProductComment>
+									{!product?.hide_special_instructions && (
+										<ProductComment>
+											<SectionTitle>
+												<OText style={theme.labels.middle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
+											</SectionTitle>
+											<OInput
+												multiline
+												placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+												value={productCart.comment}
+												onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
+												isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
+												style={{ ...styles.comment, borderColor: theme.colors.border }}
+											/>
+										</ProductComment>
+									)}
 								</ProductEditions>
 							)}
 						</WrapContent>

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

@@ -438,19 +438,21 @@ export const ProductOptionsUI = (props: any) => {
                     </React.Fragment>
                   )
                 }))}
-                <ProductComment>
-                  <SectionTitle>
-                    <OText size={28} weight="bold">{t('SPECIAL_COMMENT', 'Special comment')}</OText>
-                  </SectionTitle>
-                  <OInput
-                    multiline
-                    placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-                    value={productCart.comment}
-                    onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
-                    isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
-                    style={styles.comment}
-                  />
-                </ProductComment>
+                {!product?.hide_special_instructions && (
+                  <ProductComment>
+                    <SectionTitle>
+                      <OText size={28} weight="bold">{t('SPECIAL_COMMENT', 'Special comment')}</OText>
+                    </SectionTitle>
+                    <OInput
+                      multiline
+                      placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+                      value={productCart.comment}
+                      onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
+                      isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
+                      style={styles.comment}
+                    />
+                  </ProductComment>
+                )}
               </ProductEditions>
             </WrapContent>
           </View>

package/themes/original/index.tsx

@@ -28,6 +28,8 @@ import { HelpGuide } from './src/components/HelpGuide';
 import { HelpOrder } from './src/components/HelpOrder';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
+import { Wallets } from './src/components/Wallets';
+import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
 
 import { Toast } from './src/components/shared/OToast';
 import {
@@ -86,6 +88,8 @@ export {
 	HelpOrder,
 	NotFoundSource,
 	OrderTypeSelector,
+  Wallets,
+  PaymentOptionWallet,
 
 	// OComponents
 	Toast,

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

@@ -57,6 +57,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleBusinessClick,
 		paginationProps,
 		handleChangeSearch,
+    businessId
 	} = props;
 
 	const theme = useTheme();
@@ -256,17 +257,20 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							/>
 						</WrapMomentOption>
 
-						<SearchBar
-							onSearch={handleChangeSearch}
-							searchValue={searchValue}
-							lazyLoad
-							isCancelXButtonShow={!!searchValue}
-							borderStyle={styles.borderStyle}
-							onCancel={() => handleChangeSearch('')}
-							placeholder={t('SEARCH', 'Search')}
-							height={26}
-							inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-						/>
+            {!businessId && (
+              <SearchBar
+                onSearch={handleChangeSearch}
+                searchValue={searchValue}
+                lazyLoad
+                isCancelXButtonShow={!!searchValue}
+                borderStyle={styles.borderStyle}
+                onCancel={() => handleChangeSearch('')}
+                placeholder={t('SEARCH', 'Search')}
+                height={26}
+                inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+              />
+            )}
+
 					</View>
 				</OrderControlContainer>
 			</HeaderWrapper>
@@ -277,7 +281,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				</OrderProgressWrapper>
 			)}
-			{!props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
+			{!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 				<FeaturedWrapper>
 					<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
 					<ScrollView
@@ -306,17 +310,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</FeaturedWrapper>
 			)}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-      {!props.franchiseId && (
+      {!businessId && !props.franchiseId && (
         <HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
       )}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper>
-				<BusinessTypeFilter
-					images={props.images}
-					businessTypes={props.businessTypes}
-					defaultBusinessType={props.defaultBusinessType}
-					handleChangeBusinessType={handleChangeBusinessType}
-				/>
+        {!businessId && (
+          <BusinessTypeFilter
+            images={props.images}
+            businessTypes={props.businessTypes}
+            defaultBusinessType={props.defaultBusinessType}
+            handleChangeBusinessType={handleChangeBusinessType}
+          />
+        )}
 				{!businessesList.loading && businessesList.businesses.length === 0 && (
 					<NotFoundSource
 						content={t(

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

@@ -23,6 +23,7 @@ import { PaymentOptions } from '../PaymentOptions';
 import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
+import { PaymentOptionWallet } from '../PaymentOptionWallet';
 
 import {
 	ChContainer,
@@ -37,7 +38,8 @@ import {
 	ChUserDetails,
 	ChCart,
 	DeliveryOptionsContainer,
-	DeliveryOptionItem
+	DeliveryOptionItem,
+  WalletPaymentOptionContainer
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -504,6 +506,15 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
+          {!cartState.loading && cart && (
+            <WalletPaymentOptionContainer>
+              <PaymentOptionWallet
+                cart={cart}
+              />
+            </WalletPaymentOptionContainer>
+          )}
+
+
 					{!cartState.loading && cart && (
 						<ChSection>
 							<ChCart>
@@ -543,8 +554,8 @@ const CheckoutUI = (props: any) => {
 					)}
 
 					{!cartState.loading && cart && (
-						<ChSection style={{ paddingTop: 0, paddingBottom: 20, paddingHorizontal: 20 }}>
-							<ChErrors>
+            <View>
+							<ChErrors style={{ marginBottom: 0 }}>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
 										color={theme.colors.error}
@@ -572,7 +583,7 @@ const CheckoutUI = (props: any) => {
 									</OText>
 								)}
 							</ChErrors>
-						</ChSection>
+						</View>
 					)}
 					<OModal
 						open={openChangeStore && props.isFranchiseApp}

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

@@ -74,6 +74,10 @@ export const ChDriverTips = styled(ChPaymethods)``
 
 export const ChCart = styled(ChPaymethods)``
 
+export const WalletPaymentOptionContainer = styled(ChPaymethods)`
+  padding-bottom: 0;
+`
+
 export const ChPlaceOrderBtn = styled.View`
   width: 100%;
   display: flex;
@@ -99,4 +103,4 @@ export const DeliveryOptionItem = styled.View`
   align-items: center;
   flex-direction: row;
   background-color: ${(props : any) => props?.backgroundColor ?? '#fff'};
-`; 
+`;

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

@@ -48,8 +48,8 @@ export const Help = (props: HelpParams) => {
 
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
-        <LastOrders onRedirect={onRedirect} />
+        <LastOrders businessId={props.businessId} onRedirect={onRedirect} />
       </LastOrdersContainer>
     </>
   )
-}
+}

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

@@ -104,6 +104,15 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const { order, businessData } = props.order;
 
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+    }
+  }
+
   const getOrderStatus = (s: string) => {
     const status = parseInt(s);
     const orderStatus = [
@@ -826,6 +835,51 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </Table>
               </Total>
+              {order?.payment_events?.length > 0 && (
+                <View style={{marginTop: 10}}>
+                  <OText size={20} weight='bold' color={theme.colors.textNormal}>{t('PAYMENTS', 'Payments')}</OText>
+                  <View
+                    style={{
+                      width: '100%',
+                      marginTop: 10
+                    }}
+                  >
+                    {order?.payment_events?.map((event: any) => (
+                      <View
+                        key={event.id}
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'row',
+                          justifyContent: 'space-between',
+                          alignItems: 'center',
+                          marginBottom: 10
+                        }}
+                      >
+                        <View
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                          }}
+                        >
+                          <OText>
+                            {event?.wallet_event
+                              ? walletName[event?.wallet_event?.wallet?.type]?.name
+                              : event?.paymethod?.name}
+                          </OText>
+                          {event?.data?.charge_id && (
+                            <OText>
+                              {`${t('CODE', 'Code')}: ${event?.data?.charge_id}`}
+                            </OText>
+                          )}
+                        </View>
+                        <OText>
+                          -{parsePrice(event.amount)}
+                        </OText>
+                      </View>
+                    ))}
+                  </View>
+                </View>
+              )}
             </OrderBill>
           </OrderContent>
         </>

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

@@ -193,13 +193,13 @@ const OrderProgressUI = (props: any) => {
           </View>
         </View>
       )}
-      {!orderList?.loading && orderList?.orders?.length === 0 && (
+      {/* {!orderList?.loading && orderList?.orders?.length === 0 && (
         <NotFoundSource
           image={imageFails}
           content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
           conditioned
         />
-      )}
+      )} */}
 		</>
 	)
 }

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

@@ -28,7 +28,6 @@ import { TouchableOpacity } from 'react-native';
 
 const OrderSummaryUI = (props: any) => {
   const {
-    cart,
     changeQuantity,
     getProductMax,
     offsetDisabled,
@@ -76,6 +75,16 @@ const OrderSummaryUI = (props: any) => {
     }
   }
 
+  const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
+
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+    }
+  }
 
   return (
     <OSContainer>
@@ -205,7 +214,8 @@ const OrderSummaryUI = (props: any) => {
                           height: 100,
                           borderColor: theme.colors.border,
                           paddingRight: 50,
-                          marginTop: 10
+                          marginTop: 10,
+                          borderRadius: 8
                         }}
                         multiline
                       />
@@ -222,6 +232,52 @@ const OrderSummaryUI = (props: any) => {
                   </View>
                 </OSTable>
               )}
+              {cart?.payment_events?.length > 0 && (
+                <View
+                  style={{
+                    width: '100%',
+                    marginTop: 20
+                  }}
+                >
+                  {cart?.payment_events?.map((event: any) => (
+                    <View
+                      key={event.id}
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        marginBottom: 10
+                      }}
+                    >
+                      <OText>
+                        {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
+                      </OText>
+                      <OText>
+                        -{parsePrice(event.amount)}
+                      </OText>
+                    </View>
+                  ))}
+                    <View
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      justifyContent: 'space-between',
+                      marginBottom: 10
+                    }}
+                  >
+                    <OText
+                      weight={'bold'}
+                    >
+                      {t('TOTAL_TO_PAY', 'Total to pay')}
+                    </OText>
+                    <OText
+                      weight={'bold'}
+                    >
+                      {parsePrice(cart?.balance)}
+                    </OText>
+                  </View>
+                </View>
+              )}
             </OSBill>
           )}
           <OModal

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

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { useTheme } from 'styled-components/native'
+import CheckBox from '@react-native-community/checkbox';
+import {
+  PaymentOptionWallet as PaymentOptionWalletController,
+  useLanguage,
+  useUtils,
+} from 'ordering-components/native'
+
+import {
+  Container,
+  SectionLeft,
+} from './styles'
+
+import { OText } from '../shared'
+
+const PaymentOptionWalletUI = (props: any) => {
+  const {
+    cart,
+    walletsState,
+    selectWallet,
+    deletetWalletSelected
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
+
+  const styles = StyleSheet.create({
+    checkBoxStyle: {
+      width: 25,
+      height: 25,
+    }
+  });
+
+  const [checkedState, setCheckedState] = useState(
+    new Array(walletsState.result?.length).fill(false)
+  );
+
+  const creditBalance = (wallet: any) => ` = ${parsePrice((wallet.balance * wallet.redemption_rate) / 100)}`
+
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+    }
+  }
+
+  const handleOnChange = (position: any, wallet: any) => {
+    const updatedCheckedState = checkedState.map((item, index) =>
+      index === position ? !item : item
+    );
+
+    if (!checkedState[position]) {
+      selectWallet(wallet)
+    } else {
+      deletetWalletSelected(wallet)
+    }
+
+    setCheckedState(updatedCheckedState);
+  };
+
+  useEffect(() => {
+    if (!walletsState.loading) {
+      setCheckedState(
+        walletsState.result.map((wallet: any) => {
+          return !!cart?.wallets?.find((w: any) => w.id === wallet.id)
+        })
+      )
+    }
+  }, [walletsState.result?.length])
+
+  return (
+    <>
+      {!walletsState.loading &&
+        !walletsState.error &&
+        walletsState.result?.length > 0 &&
+      (
+        <>
+          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && (
+            <Container
+              key={wallet.id}
+              isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+            >
+              <SectionLeft>
+                <CheckBox
+                  value={checkedState[idx]}
+                  onValueChange={() => handleOnChange(idx, wallet)}
+                  disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0 }
+                  boxType={'square'}
+                  tintColors={{
+                    true: theme.colors.primary,
+                    false: theme.colors.disabled
+                  }}
+                  tintColor={theme.colors.disabled}
+                  onCheckColor={theme.colors.primary}
+                  onTintColor={theme.colors.primary}
+                  style={Platform.OS === 'ios' && styles.checkBoxStyle}
+                />
+                <View style={{ alignItems: 'baseline' }}>
+                  <View>
+                    <OText
+                      style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
+                        color: theme.colors.disabled
+                      } : {}}
+                    >
+                      {walletName[wallet.type]?.name}
+                    </OText>
+                  </View>
+              </View>
+              </SectionLeft>
+
+              <View style={{maxWidth: '40%', alignItems: 'flex-end' }}>
+                {wallet.type === 'cash' && (
+                  <OText>
+                    {parsePrice(wallet?.balance)}
+                  </OText>
+                )}
+                {wallet.type === 'credit_point' && (
+                  <OText>
+                    <OText color={theme.colors.primary} weight='bold'>
+                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                    </OText>
+                    <OText>
+                      {`${wallet.balance > 0 && creditBalance(wallet)}`}
+                    </OText>
+                  </OText>
+                )}
+              </View>
+            </Container>
+          ))}
+        </>
+      )}
+
+      {walletsState?.loading && (
+        <View>
+          {[...Array(2).keys()].map(i => (
+            <View style={{ marginBottom: 10 }} key={i}>
+              <Placeholder Animation={Fade}>
+                <PlaceholderLine width={100} height={40} style={{ marginBottom: 0, borderRadius: 8 }} />
+              </Placeholder>
+            </View>
+          ))}
+        </View>
+      )}
+    </>
+  )
+}
+
+export const PaymentOptionWallet = (props: any) => {
+  const paymentWalletProps = {
+    ...props,
+    UIComponent: PaymentOptionWalletUI
+  }
+
+  return (
+    <PaymentOptionWalletController {...paymentWalletProps} />
+  )
+}

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

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+  display: flex;
+  padding: 20px 0;
+  margin-top: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  ${(props: any) => props.isBottomBorder && css`
+    border-bottom-width: 1px;
+    border-bottom-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  `}
+`
+
+export const SectionLeft = styled.View`
+  max-width: 55%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`
+
+export const SectionLeftText = styled.View`
+  alignSelf: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+`
+
+export const SectionWrapper = styled.View`
+  padding-top: 10px;
+  display: flex;
+  flex-direction: column;
+`

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

@@ -663,25 +663,27 @@ export const ProductOptionsUI = (props: any) => {
 											)}
 										</>
 									)}
-									<ProductComment>
-										<SectionTitle>
-											<OText size={16} weight={'600'} lineHeight={24}>
-												{t('SPECIAL_COMMENT', 'Special comment')}
-											</OText>
-										</SectionTitle>
-										<OInput
-											multiline
-											placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-											value={productCart.comment}
-											onChange={(val: string) =>
-												handleChangeCommentState({ target: { value: val } })
-											}
-											isDisabled={
-												!(productCart && !isSoldOut && maxProductQuantity)
-											}
-											style={styles.comment}
-										/>
-									</ProductComment>
+									{!product?.hide_special_instructions && (
+										<ProductComment>
+											<SectionTitle>
+												<OText size={16} weight={'600'} lineHeight={24}>
+													{t('SPECIAL_COMMENT', 'Special comment')}
+												</OText>
+											</SectionTitle>
+											<OInput
+												multiline
+												placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+												value={productCart.comment}
+												onChange={(val: string) =>
+													handleChangeCommentState({ target: { value: val } })
+												}
+												isDisabled={
+													!(productCart && !isSoldOut && maxProductQuantity)
+												}
+												style={styles.comment}
+											/>
+										</ProductComment>
+									)}
 								</ProductEditions>
 							)}
 						</WrapContent>

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

@@ -14,6 +14,7 @@ import { ProfileParams } from '../../types';
 import { LogoutButton } from '../LogoutButton'
 import { LanguageSelector } from '../LanguageSelector'
 import MessageCircle from 'react-native-vector-icons/AntDesign'
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 import {
 	OIcon,
@@ -160,6 +161,10 @@ const ProfileListUI = (props: ProfileParams) => {
 						<MessageCircle name='message1' style={styles.messageIconStyle} color={theme.colors.textNormal} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MESSAGES', 'Messages')}</OText>
 					</ListItem>
+					<ListItem onPress={() => onRedirect('Wallets', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
+						<Ionicons name='wallet-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('WALLETS', 'Wallets')}</OText>
+					</ListItem>
 					<ListItem onPress={() => navigation.navigate('Help', {})} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.ic_help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>

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

@@ -0,0 +1,68 @@
+import React from 'react'
+import { useTheme } from 'styled-components/native'
+import { useLanguage, useUtils } from 'ordering-components/native'
+
+import {
+  Container,
+  DateBlock,
+  MessageBlock,
+  DescriptionBlock,
+  Dot
+} from './styles'
+import { OIcon, OText } from '../shared';
+
+export const WalletTransactionItem = (props: any) => {
+  const {
+    item,
+    idx,
+    type
+  } = props
+
+  const theme = useTheme()
+  const [{ parsePrice, parseDate }] = useUtils()
+  const [, t] = useLanguage()
+
+  const LANG_EVENT_KEY = `WALLET_${type.toUpperCase()}_${item?.event.toUpperCase()}_${item?.event_type.toUpperCase()}_${item?.amount >= 0 ? 'POSITIVE': 'NEGATIVE'}`
+  const lang_event_text = !!item?.event?.order_id
+    ? `:author ${item?.amount >= 0 ? 'add' : 'reduce'} money in Order No. :order_id`
+    : `:author ${item?.amount >= 0 ? 'add' : 'reduce'} money`
+
+  return (
+    <Container>
+      <Dot isTop={idx === 0} />
+      <DateBlock>
+        <OText color={theme.colors.disabled}>{parseDate(item?.created_at)}</OText>
+        <OText
+          style={{
+            color: item?.amount > 0 && theme.colors.primary,
+            fontWeight: 'bold'
+          }}
+        >
+          {item?.amount > 0 && '+ '}{parsePrice(item?.amount)}
+        </OText>
+      </DateBlock>
+      <MessageBlock>
+        <OText>
+          {t(LANG_EVENT_KEY, lang_event_text)
+            .replace(':author', item?.event?.author?.name ?? '')
+            .replace(':order_id', item?.event?.order_id ?? '')}
+        </OText>
+      </MessageBlock>
+      {!!item?.description && (
+        <DescriptionBlock>
+          <OText>{item?.description}</OText>
+        </DescriptionBlock>
+      )}
+      {!!item?.code && (
+        <DescriptionBlock>
+          <OText weight={'bold'}>
+            {t('CODE', 'Code')}
+            <OText weight={'100'}>
+              {': '}{item?.code}
+            </OText>
+          </OText>
+        </DescriptionBlock>
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,37 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+  position: relative;
+  padding-left: 10px;
+`
+
+export const DateBlock = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const MessageBlock = styled.View`
+  display: flex;
+  font-size: 14px;
+`
+
+export const Dot = styled.View`
+  position: absolute;
+  top: ${(props: any) => props.isTop ? 0 : 6}px;
+  left: -4px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50px;
+  background-color: ${(props: any) => props.theme.colors.disabled};
+`
+
+export const DescriptionBlock = styled(MessageBlock)`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`

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

@@ -0,0 +1,204 @@
+import React, { useState } from 'react'
+import { Pressable, View } from 'react-native';
+import { useTheme } from 'styled-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import {
+  WalletList,
+  useLanguage,
+  useUtils,
+  useConfig
+} from 'ordering-components/native'
+
+import {
+  Container,
+  BalanceElement,
+  TransactionsWrapper,
+  OTabs,
+  OTab,
+  SectionContent
+} from './styles'
+
+import NavBar from '../NavBar'
+import { OIcon, OText } from '../shared';
+import { NotFoundSource } from '../NotFoundSource';
+import { WalletTransactionItem } from '../WalletTransactionItem'
+
+const WalletsUI = (props: any) => {
+  const {
+    navigation,
+    walletList,
+    transactionsList,
+    setWalletSelected
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ parsePrice, parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
+
+  const [tabSelected, setTabSelected] = useState('cash')
+
+  const currentWalletSelected = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === tabSelected)) ?? null
+
+  const walletName: any = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet'),
+      value: 0
+    },
+    credit_point: {
+      name: t('CREDITS_POINTS_WALLET', 'Credit Points Wallet'),
+      value: 1
+    }
+  }
+
+  const handleChangeTab = (wallet: any) => {
+    setTabSelected(wallet.type)
+    setWalletSelected(wallet.id)
+  }
+
+  const goToBack = () => {
+    navigation?.canGoBack() && navigation.goBack()
+  }
+
+  return (
+    <Container>
+      <NavBar
+        title={t('WALLETS', 'Wallets')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        paddingTop={10}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+
+      {!walletList.loading &&
+        !walletList.error &&
+        walletList.wallets?.length > 0 &&
+      (
+        <>
+          <OTabs>
+            {walletList.wallets?.map((wallet: any) =>(
+              <Pressable
+                key={wallet.id}
+                onPress={() => handleChangeTab(wallet)}
+              >
+                <OTab>
+                  <OText size={18} color={tabSelected === wallet.type ? theme.colors.primary : theme.colors.disabled}>
+                    {walletName[wallet.type]?.name}
+                  </OText>
+                </OTab>
+              </Pressable>
+            ))}
+          </OTabs>
+
+          <SectionContent>
+            <BalanceElement>
+              <OText size={20} style={{fontWeight: '600'}}>
+                {currentWalletSelected?.type === 'cash'
+                  ? parsePrice(currentWalletSelected?.balance)
+                  : currentWalletSelected?.balance
+                }
+              </OText>
+              <OText style={{ paddingLeft: 5 }}>
+                {currentWalletSelected?.type === 'cash'
+                  ? configs?.stripe_currency?.value
+                  : t('POINTS', 'Points')}
+              </OText>
+            </BalanceElement>
+            {console.log(transactionsList)}
+
+            <View style={{ marginTop: 20, width: '100%', paddingHorizontal: 1, paddingBottom: 40 }}>
+              {!transactionsList?.loading &&
+                !transactionsList?.error &&
+                transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length > 0 &&
+              (
+                <>
+                  <OText style={{fontSize: 20}}>
+                    {t('TRANSACTIONS_HISTORY', 'Transactions history')}
+                  </OText>
+                  <TransactionsWrapper>
+                    {transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.map((transaction: any, i: number) =>(
+                      <WalletTransactionItem
+                        idx={i}
+                        type={currentWalletSelected?.type}
+                        key={transaction.id}
+                        item={transaction}
+                      />
+                    ))}
+                  </TransactionsWrapper>
+                </>
+              )}
+
+              {(transactionsList?.loading || !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]) && (
+                <View>
+                  {[...Array(4).keys()].map(i => (
+                    <View style={{ marginBottom: 10 }} key={i}>
+                      <Placeholder Animation={Fade}>
+                        <PlaceholderLine width={100} height={100} style={{ marginBottom: 0, borderRadius: 8 }} />
+                      </Placeholder>
+                    </View>
+                  ))}
+                </View>
+              )}
+
+              {!(transactionsList?.loading && transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]) &&
+                (transactionsList?.error ||
+                  !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
+              (
+                <NotFoundSource
+                  content={transactionsList?.error
+                    ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
+                    : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
+                  }
+                />
+              )}
+            </View>
+          </SectionContent>
+        </>
+      )}
+
+      {walletList?.loading && (
+        <>
+          <View>
+            <Placeholder Animation={Fade}>
+              <PlaceholderLine width={100} height={40} style={{ marginBottom: 0 }} />
+            </Placeholder>
+          </View>
+          <View style={{ marginTop: 10, marginBottom: 20 }}>
+            <Placeholder Animation={Fade}>
+              <PlaceholderLine width={100} height={40} style={{ marginBottom: 0 }} />
+            </Placeholder>
+          </View>
+          <View>
+            {[...Array(4).keys()].map(i => (
+              <View style={{ marginBottom: 10 }} key={i}>
+                <Placeholder Animation={Fade}>
+                  <PlaceholderLine width={100} height={60} style={{ marginBottom: 0 }} />
+                </Placeholder>
+              </View>
+            ))}
+          </View>
+        </>
+      )}
+
+      {!walletList?.loading && (walletList?.error || !walletList?.wallets?.length) && (
+        <NotFoundSource
+          content={walletList?.error
+            ? t('ERROR_NOT_FOUND_WALLETS', 'Sorry, an error has occurred')
+            : t('NOT_FOUND_WALLETS', 'No wallets to show at this time.')
+          }
+        />
+      )}
+    </Container>
+  )
+}
+
+export const Wallets = (props: any) => {
+  const walletsProps = {
+    ...props,
+    UIComponent: WalletsUI
+  }
+  return (
+    <WalletList {...walletsProps} />
+  )
+}

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

@@ -0,0 +1,43 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+`
+
+export const SectionContent = styled.View`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+`
+
+export const TransactionsWrapper = styled.View`
+  display: flex;
+  flex-direction: column;
+  border-left-width: 2px;
+  border-left-color: ${(props: any) => props.theme.colors.disabled};
+`
+
+export const BalanceElement = styled.View`
+  width: 100%;
+  padding: 10px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+  background-color: ${(props: any) => props.theme.colors.backgroundGray100};
+  border-radius: 8px;
+`
+
+export const OTabs = styled.View`
+  flex-direction: row;
+  width: 100%;
+  flex-wrap: wrap;
+`;
+
+export const OTab = styled.View`
+  padding-horizontal: 10px;
+`;

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

@@ -129,6 +129,7 @@ export interface BusinessesListingParams {
 	businessTypes?: any;
 	defaultBusinessType?: any;
 	franchiseId?: any;
+	businessId?: any;
 }
 export interface HighestRatedBusinessesParams {
 	businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
@@ -344,8 +345,8 @@ export interface MessagesParams {
 	onClose?: () => void,
 	isMeesageListing?: boolean,
 	setCanRead?: any,
-	business: boolean,
-	driver: boolean,
+	business?: boolean,
+	driver?: boolean,
 	onMessages?: any
 }
 export interface ViewInterface {
@@ -455,6 +456,7 @@ export interface GoogleMapsParams {
 
 export interface HelpParams {
 	navigation: any;
+	businessId?: any;
 }
 
 export interface LastOrdersParams {

package/themes/single-business/src/components/ProductForm/index.tsx

@@ -527,34 +527,35 @@ export const ProductOptionsUI = (props: any) => {
                     );
                   }))}
                 </View>
-
-                <ProductComment>
-                  <SectionTitle>
-                    <OText size={16} weight={'600'} lineHeight={24}>
-                      {t('SPECIAL_COMMENT', 'Special comment')}
-                    </OText>
-                  </SectionTitle>
-                  <OInput
-                    multiline={true}
-                    numberOfLines={10}
-                    placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-                    value={productCart.comment}
-                    onChange={(val: string) =>
-                      handleChangeCommentState({ target: { value: val } })
-                    }
-                    isDisabled={
-                      !(productCart && !isSoldOut && maxProductQuantity)
-                    }
-                    style={{
-                      height: 100,
-                      justifyContent: "flex-end",
-                      alignItems: 'flex-start',
-                      borderWidth: 1,
-                      borderRadius: 8,
-                      borderColor: theme.colors.border,
-                    }}
-                  />
-                </ProductComment>
+                {!product?.hide_special_instructions && (
+                  <ProductComment>
+                    <SectionTitle>
+                      <OText size={16} weight={'600'} lineHeight={24}>
+                        {t('SPECIAL_COMMENT', 'Special comment')}
+                      </OText>
+                    </SectionTitle>
+                    <OInput
+                      multiline={true}
+                      numberOfLines={10}
+                      placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+                      value={productCart.comment}
+                      onChange={(val: string) =>
+                        handleChangeCommentState({ target: { value: val } })
+                      }
+                      isDisabled={
+                        !(productCart && !isSoldOut && maxProductQuantity)
+                      }
+                      style={{
+                        height: 100,
+                        justifyContent: "flex-end",
+                        alignItems: 'flex-start',
+                        borderWidth: 1,
+                        borderRadius: 8,
+                        borderColor: theme.colors.border,
+                      }}
+                    />
+                  </ProductComment>
+                )}  
               </ProductEditions>
             )}
           </WrapContent>

package/themes/uber-eats/src/components/ProductForm/index.tsx

@@ -327,19 +327,21 @@ export const ProductOptionsUI = (props: any) => {
                         </React.Fragment>
                       )
                     }))}
-                    <ProductComment>
-                      <SectionTitle>
-                        <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
-                      </SectionTitle>
-                      <OInput
-                        multiline
-                        placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-                        value={productCart.comment}
-                        onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
-                        isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
-                        style={styles.comment}
-                      />
-                    </ProductComment>
+                    {!product?.hide_special_instructions && (  
+                      <ProductComment>
+                        <SectionTitle>
+                          <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
+                        </SectionTitle>
+                        <OInput
+                          multiline
+                          placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+                          value={productCart.comment}
+                          onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
+                          isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
+                          style={styles.comment}
+                        />
+                      </ProductComment>
+                    )}
                   </ProductEditions>
                 )}
               </WrapContent>