ordering-ui-react-native 0.17.42 → 0.17.44

package/package.json

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

package/themes/business/src/components/ReviewCustomer/index.tsx

@@ -151,6 +151,8 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     }
   }, [scrollref?.current])
 
+  const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`?.replace('  ', ' ')?.trim() ?? ''
+
   return (
     <KeyboardAvoidingView
       enabled
@@ -206,20 +208,20 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
               style={{ borderRadius: 7.6 }}
             />
           </View>
-          <OText
+          {!!customerName && <OText
             size={14}
             weight="500"
             style={{
               marginTop: 16
             }}
           >
-            {order?.customer?.name ?? ''} {order?.customer?.middle_name ?? ''} {order?.customer?.lastname ?? ''} {order?.customer?.second_lastname ?? ''}
-          </OText>
+            {customerName}
+          </OText>}
         </CustomerInfoContainer>
         <OText
           size={12}
         >
-          {t('HOW_WAS_YOUR_CUSTOMER', 'How was your experience with _name_?').replace('_name_', `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`)}
+          {customerName ? t('HOW_WAS_YOUR_CUSTOMER', 'How was your experience with _name_?').replace('_name_', customerName) : t('HOW_WAS_YOUR_NO_CUSTOMER', 'How was your experience?')}
         </OText>
         <RatingBarContainer>
           <LinearGradient

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

@@ -28,7 +28,7 @@ const AddressDetailsUI = (props: any) => {
 					size={16}
 					lineHeight={24}
 					color={theme.colors.textNormal}
-					weight={'500'}>
+				>
 					{t('DELIVERY_ADDRESS', 'Delivery address')}
 				</OText>
 			</ADHeader>

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

@@ -389,10 +389,10 @@ const CartUI = (props: any) => {
 
             <OSTotal>
               <OSTable style={{ marginTop: 15 }}>
-                <OText size={14} lineHeight={21} weight={'600'}>
+                <OText size={14} lineHeight={21} weight={'bold'} color={theme.colors.textNormal}>
                   {t('TOTAL', 'Total')}
                 </OText>
-                <OText size={14} lineHeight={21} weight={'600'}>
+                <OText size={14} lineHeight={21} weight={'bold'} color={theme.colors.textNormal}>
                   {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                 </OText>
               </OSTable>

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

@@ -341,7 +341,7 @@ const CheckoutUI = (props: any) => {
 								Object.values(businessDetails?.business).length > 0 &&
 								(
 									<>
-										<OText size={16} lineHeight={24} weight={'500'} mBottom={10}>
+										<OText size={16} lineHeight={24} weight={'500'} mBottom={10} color={theme.colors.textNormal}>
 											{t('BUSINESS_DETAILS', 'Business Details')}
 										</OText>
 										<View>
@@ -362,7 +362,7 @@ const CheckoutUI = (props: any) => {
 								)}
 							{businessDetails?.error && businessDetails?.error?.length > 0 && (
 								<View>
-									<OText size={16} lineHeight={24} weight={'500'}>
+									<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
 										{t('BUSINESS_DETAILS', 'Business Details')}
 									</OText>
 									<NotFoundSource
@@ -411,7 +411,7 @@ const CheckoutUI = (props: any) => {
 								</View>
 							) : (
 								<>
-									<OText size={16}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+									<OText size={16} color={theme.colors.textNormal} mBottom={10}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
 									<View
 										style={{
 											backgroundColor: theme.colors.inputDisabled,
@@ -626,7 +626,6 @@ const CheckoutUI = (props: any) => {
 												size={16}
 												lineHeight={24}
 												color={theme.colors.textNormal}
-												style={{ fontWeight: '500' }}
 											>
 												{t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}
 											</OText>

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Platform } from 'react-native'
 import { useLanguage } from 'ordering-components/native'
 import { HelpAccountAndPaymentParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
@@ -7,7 +8,8 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
-  Content
+  Content,
+  HeaderWrapper
 } from './styles'
 
 export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
@@ -38,17 +40,25 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
 
   return (
     <>
-      <OButton
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-        icon={AntDesignIcon}
-        iconProps={{
-          name: 'arrowleft',
-          size: 26
-        }}
-      />
-      <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
+      <HeaderWrapper>
+        <OButton
+          imgRightSrc={null}
+          style={styles.btnBackArrow}
+          onClick={() => goToBack()}
+          icon={AntDesignIcon}
+          iconProps={{
+            name: 'arrowleft',
+            size: 26
+          }}
+        />
+        <OText
+          size={24}
+          weight={Platform.OS === 'ios' ? '600' : 'bold'}
+          color={theme.colors.textNormal}
+        >
+          {t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
+        </OText>
+      </HeaderWrapper>
       <Content>
         <OText mBottom={20}>
           -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.

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

@@ -4,3 +4,7 @@ export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
 `
+export const HeaderWrapper = styled.View`
+  padding: 10px 20px 20px 0;
+  flex-direction: row;
+`

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

@@ -4,6 +4,7 @@ import { HelpGuideParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
 import { StyleSheet, TouchableOpacity } from 'react-native'
+import NavBar from '../NavBar'
 import {
   Content
 } from './styles'
@@ -37,17 +38,12 @@ export const HelpGuide = (props: HelpGuideParams) => {
 
   return (
     <>
-      <OButton
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-        icon={AntDesignIcon}
-        iconProps={{
-          name: 'arrowleft',
-          size: 26
-        }}
+      <NavBar
+        title={t('GUIDE_TO_ORDERING', 'Guide to Ordering')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
       />
-      <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
       <Content>
         <OText mBottom={15}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.

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

@@ -6,6 +6,7 @@ import { useTheme } from 'styled-components/native'
 import { StyleSheet, TouchableOpacity } from 'react-native'
 import { WebView } from 'react-native-webview'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import NavBar from '../NavBar'
 
 import {
   Content
@@ -42,17 +43,12 @@ export const HelpOrder = (props: HelpOrderParams) => {
 
   return (
     <>
-      <OButton
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-        icon={AntDesignIcon}
-        iconProps={{
-          name: 'arrowleft',
-          size: 26
-        }}
+      <NavBar
+        title={t('HELP_WITH_ORDER', 'Help with an order')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
       />
-      <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       <Content>
         <OText mBottom={20}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque. Sed tempus et, cursus ultricies nisl nisl, in eros.

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

@@ -680,7 +680,7 @@ const LoginFormUI = (props: LoginParams) => {
 									{t('NEW_ON_PLATFORM', 'New on Ordering?')}
 								</OText>
 								<TouchableOpacity onPress={() => onNavigationRedirect('Signup')}>
-									<OText size={14} mLeft={5} color={theme.colors.skyBlue}>
+									<OText size={14} mLeft={5} color={theme.colors.primary}>
 										{t('CREATE_ACCOUNT', 'Create account')}
 									</OText>
 								</TouchableOpacity>

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

@@ -258,7 +258,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 						onActionLeft={() => goToBack()}
 						btnStyle={{ paddingLeft: 0 }}
 						paddingTop={0}
-						style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
+						style={{ paddingBottom: 0 }}
 						title={t('QUESTION_WHEN_ORDER', 'When do you want your order?')}
 						titleAlign={'center'}
 						titleStyle={{ fontSize: 14, marginRight: 0, marginLeft: 0 }}

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

@@ -292,10 +292,10 @@ const OrderSummaryUI = (props: any) => {
               {cart?.total >= 1 && (
                 <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
                   <OSTable style={{ marginTop: 15 }}>
-                    <OText size={14} style={{ fontWeight: 'bold' }}>
+                    <OText size={14} style={{ fontWeight: 'bold' }} color={theme.colors.textNormal}>
                       {t('TOTAL', 'Total')}
                     </OText>
-                    <OText size={14} style={{ fontWeight: 'bold' }} >
+                    <OText size={14} style={{ fontWeight: 'bold' }} color={theme.colors.textNormal}>
                       {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                     </OText>
                   </OSTable>