ordering-ui-react-native 0.12.56 → 0.12.60

package/package.json

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

package/src/components/AppleLogin/index.tsx

@@ -10,8 +10,7 @@ import { useTheme } from 'styled-components/native';
 import { OText } from '../shared';
 import { AppleLoginParams } from '../../types';
 
-export const AppleLogin = (props : AppleLoginParams) => {
-
+export const AppleLogin = (props: AppleLoginParams) => {
   const {
     notificationState,
     handleErrors,
@@ -55,7 +54,7 @@ export const AppleLogin = (props : AppleLoginParams) => {
           handleErrors && handleErrors(t('ERROR_LOGIN_APPLE', 'Error login with apple'))
         }
 
-      } catch (error : any) {
+      } catch (error: any) {
         handleErrors && handleErrors(error.message)
       }
     } else {
@@ -70,15 +69,22 @@ export const AppleLogin = (props : AppleLoginParams) => {
         });
         const { code } = await appleAuthAndroid.signIn();
         handleLoginApple(code)
-      } catch (error : any) {
+      } catch (error: any) {
         handleErrors && handleErrors(error?.message)
       }
     }
   }
   const handleLoginApple = async (code: string) => {
-    const body: any = {
-      code,
-      platform: Platform.OS === 'ios' && 'ios'
+    let body: any
+    if (Platform.OS === 'ios') {
+      body = {
+        code,
+        platform: 'ios'
+      }
+    } else {
+      body = {
+        code
+      }
     }
     if (notificationState?.notification_token) {
       body.notification_token = notificationState.notification_token
@@ -99,7 +105,7 @@ export const AppleLogin = (props : AppleLoginParams) => {
       } else {
         handleErrors && handleErrors(result || t('ERROR_LOGIN_AUTH_APPLE', 'Error login auth with apple'))
       }
-    } catch (error : any) {
+    } catch (error: any) {
       handleLoading && handleLoading(false)
       handleErrors && handleErrors(error?.message)
     }

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

@@ -428,15 +428,15 @@ export const OrderContentComponent = (props: OrderContent) => {
               {parsePrice(order?.summary?.total ?? 0)}
             </OText>
           </Table>
+          {order?.comment && (
+            <Table>
+              <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
+              <OText style={{ maxWidth: '70%' }}>
+                {order?.comment}
+              </OText>
+            </Table>
+          )}
         </Total>
-        {order?.comment && (
-          <Table>
-            <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
-            <OText style={{ maxWidth: '70%' }}>
-              {order?.comment}
-            </OText>
-          </Table>
-        )}
       </OrderBill >
       <OModal
         open={openReviewModal}

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

@@ -68,6 +68,7 @@ export const Table = styled.View`
 
 export const OrderBill = styled.View`
   padding-vertical: 20px;
+  padding-bottom: 30px;
   flex: 1;
 `;
 

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

@@ -242,6 +242,7 @@ const CartUI = (props: any) => {
                         marginTop: 10
                       }}
                       multiline
+                      inputStyle={{color: theme.colors.textPrimary}}
                     />
                     {commentState?.loading && (
                       <View style={{ position: 'absolute', right: 20 }}>

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

@@ -255,6 +255,7 @@ const OrderSummaryUI = (props: any) => {
                           marginTop: 10
                         }}
                         multiline
+                        inputStyle={{color: theme.colors.textPrimary}}
                       />
                       {commentState?.loading && (
                         <View style={{ position: 'absolute', right: 20 }}>

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

@@ -480,8 +480,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </Table>
                 {order?.comment && (
                   <Table>
-                    <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
-                    <OText style={{ maxWidth: '70%' }}>
+                    <OText color={theme.colors.textPrimary} size={12} style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
+                    <OText color={theme.colors.textPrimary} size={12} style={{ maxWidth: '70%' }}>
                       {order?.comment}
                     </OText>
                   </Table>

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { ScrollView, View, useWindowDimensions } from 'react-native';
+import { ScrollView, View, useWindowDimensions, ActivityIndicator } from 'react-native';
 import {
   CheckoutAction,
   OSBill,
@@ -16,32 +16,41 @@ import {
   OSCoupon,
   OSTotal,
   Title,
-  LineDivider
+  LineDivider,
+  BIHeader,
+  BIInfo,
+  BIContentInfo,
+  BITotal
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
 
-import { OButton, OModal, OText } from '../shared';
+import { OButton, OInput, OModal, OText, OIcon } from '../shared';
 import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
-import { verifyDecimals } from '../../utils';
+import { convertHoursToMinutes, verifyDecimals } from '../../utils';
 import { Container } from '../../layouts/Container';
 import { NotFoundSource } from '../NotFoundSource'
 import { OSRow } from '../OrderSummary/styles';
 import AntIcon from 'react-native-vector-icons/AntDesign'
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
+
 const CartUI = (props: any) => {
   const {
     cart,
     clearCart,
+    isCartList,
     changeQuantity,
     getProductMax,
     offsetDisabled,
     removeProduct,
     handleCartOpen,
     setIsCartsLoading,
+    handleChangeComment,
+    commentState
   } = props
 
   const theme = useTheme();
@@ -62,6 +71,8 @@ const CartUI = (props: any) => {
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
+  const isClosed = !cart?.valid_schedule
+  const isProducts = cart?.products?.length
 
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)
@@ -110,22 +121,91 @@ const CartUI = (props: any) => {
     }
   }
 
+  const CartHeader = () => {
+    return (
+      <BIHeader isClosed={isClosed}>
+        <BIInfo>
+          {cart?.business?.logo && (
+            <View
+              style={{
+                height: 72,
+                width: 72,
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                borderRadius: 8
+              }}
+            >
+              <OIcon
+                url={cart?.business?.logo}
+                width={70}
+                height={70}
+                style={{ borderRadius: 16 }}
+              />
+            </View>
+          )}
+          <BIContentInfo>
+            <OText>{cart?.business?.name}</OText>
+            {orderState?.options?.type === 1 ? (
+              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                <MaterialCommunityIcon
+                  name='clock-outline'
+                  size={20}
+                />
+                <OText size={12}>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
+              </View>
+            ) : (
+              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                <MaterialCommunityIcon
+                  name='clock-outline'
+                  size={20}
+                />
+                <OText size={12}>{convertHoursToMinutes(cart?.business?.pickup_time)}</OText>
+              </View>
+            )}
+          </BIContentInfo>
+        </BIInfo>
+
+        {!isClosed && !!isProducts && cart?.valid_products && cart?.total > 0 && (
+          <BITotal>
+            <OText size={12}>{t('CART_TOTAL', 'Total')}</OText>
+            <OText size={12} color='#000'>{parsePrice(cart?.total)}</OText>
+          </BITotal>
+        )}
+
+        {isClosed && (
+          <BITotal>
+            <OText>{t('CLOSED', 'Closed')}</OText>
+          </BITotal>
+        )}
+
+        {!isClosed && !isProducts && (
+          <BITotal>
+            <OText>{t('NO_PRODUCTS', 'No products')}</OText>
+          </BITotal>
+        )}
+      </BIHeader>
+    )
+  }
+
   return (
     cart?.products?.length > 0 ? (
       <ScrollView
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
-        style={{ height, backgroundColor: theme.colors.backgroundPage }}
+        style={{ height: isCartList ? 'auto' : height, backgroundColor: theme.colors.backgroundPage }}
       >
-        <Container>
-          <Title>
-            <OText
-              size={20}
-              weight='bold'
-            >
-              {t('YOUR_CART', 'Your cart')}
-            </OText>
-          </Title>
+        <Container noPadding={isCartList}>
+          {!isCartList ? (
+            <Title>
+              <OText
+                size={20}
+              >
+                {t('YOUR_CART', 'Your cart')}
+              </OText>
+            </Title>
+          ) : (
+            <CartHeader />
+          )}
 
           {cart?.products?.length > 0 && (
             <View>
@@ -237,6 +317,38 @@ const CartUI = (props: any) => {
                       </OText>
                     </OSTable>
                   </OSTotal>
+                  {cart?.status !== 2 && (
+                    <OSTable>
+                      <View style={{ width: '100%', marginTop: 20 }}>
+                        <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
+                        <View style={{ flex: 1, width: '100%' }}>
+                          <OInput
+                            value={cart?.comment}
+                            placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
+                            onChange={(value: string) => handleChangeComment(value)}
+                            style={{
+                              alignItems: 'flex-start',
+                              width: '100%',
+                              height: 100,
+                              borderColor: theme.colors.textSecondary,
+                              paddingRight: 50,
+                              marginTop: 10
+                            }}
+                            multiline
+                          />
+                          {commentState?.loading && (
+                            <View style={{ position: 'absolute', right: 20 }}>
+                              <ActivityIndicator
+                                size='large'
+                                style={{ height: 100 }}
+                                color={theme.colors.primary}
+                              />
+                            </View>
+                          )}
+                        </View>
+                      </View>
+                    </OSTable>
+                  )}
                 </OSBill>
               )}
             </View>
@@ -247,7 +359,7 @@ const CartUI = (props: any) => {
           <>
             <LineDivider />
 
-            <Container>
+            <Container noPadding={isCartList}>
               <View style={{ padding: 0, }}>
                 <ScrollView
                   showsVerticalScrollIndicator={false}
@@ -323,7 +435,6 @@ const CartUI = (props: any) => {
         <Title>
           <OText
             size={20}
-            weight='bold'
           >
             {t('YOUR_CART', 'Your cart')}
           </OText>

package/themes/single-business/src/components/Cart/styles.tsx

@@ -61,3 +61,42 @@ export const OSCoupon = styled.View`
   width: 100%;
   padding: 5px 0px;
 `
+
+export const BIHeader = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
+  padding-bottom: 10px;
+
+  ${(props: any) => props.isClosed && css`
+    background-color: rgba(0, 0, 0, 0.1);
+  `}
+`
+
+export const BIInfo = styled.View`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 55%;
+`
+
+export const BIContent = styled.View`
+`
+
+export const BIContentInfo = styled.View`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  text-transform: capitalize;
+  margin-left: 10px;
+  max-width: 65%;
+`
+
+export const BITotal = styled.View`
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`

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

@@ -1,60 +1,64 @@
-import React, { useEffect, useState } from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
+import React, { useState } from 'react';
+import { useWindowDimensions, View } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { CCContainer, CCNotCarts, CCList } from './styles';
+import { useLanguage } from 'ordering-components/native';
+import Spinner from 'react-native-loading-spinner-overlay';
 
+import { Title } from './styles';
 import { Cart } from '../Cart';
-import { OIcon, OText } from '../shared';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { View } from 'react-native';
+import { NotFoundSource } from '../NotFoundSource';
+import { OText } from '../shared';
 
 export const CartContent = (props: any) => {
-	const {
-		carts,
-		isOrderStateCarts
-	} = props
+  const { carts } = props
 
-	const theme = useTheme();
-	const [, t] = useLanguage()
-	const [isCartsLoading, setIsCartsLoading] = useState(false)
+  const { height } = useWindowDimensions()
+  const theme = useTheme();
+  const [, t] = useLanguage()
+  const [isCartsLoading, setIsCartsLoading] = useState(false)
 
-	return (
-		<CCContainer>
-			{isOrderStateCarts && carts?.length > 0 && (
-				<>
-					<OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
-						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
-					</OText>
-					{carts.map((cart: any) => (
-						<CCList key={cart.uuid} style={{ overflow: 'visible' }}>
-							{cart.products.length > 0 && (
-								<>
-									<Cart
-										cart={cart}
-										onNavigationRedirect={props.onNavigationRedirect}
-										isCartsLoading={isCartsLoading}
-										setIsCartsLoading={setIsCartsLoading}
-									/>
-									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginTop: 20 }} />
-								</>
-							)}
-						</CCList>
-					))}
-				</>
-			)}
-			{(!carts || carts?.length === 0) && (
-				<CCNotCarts>
-					{/* <OIcon
-            url={props.icon}
-            width={200}
-            height={122}
-          /> */}
-					<OText size={24} style={{ textAlign: 'center' }}>
-						{t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
-					</OText>
-				</CCNotCarts>
-			)}
-			<Spinner visible={isCartsLoading} />
-		</CCContainer>
-	)
+  return (
+    carts?.length > 0 ? (
+      <>
+        <Title>
+          <OText size={20} style={{ marginTop: 20 }}>
+            {carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
+          </OText>
+        </Title>
+        {carts.map((cart: any, i: number) => (
+          <View key={cart.uuid} style={{ overflow: 'visible' }}>
+            {cart.products.length > 0 && (
+              <>
+                <Cart
+                  cart={cart}
+                  isCartList
+                  onNavigationRedirect={props.onNavigationRedirect}
+                  isCartsLoading={isCartsLoading}
+                  setIsCartsLoading={setIsCartsLoading}
+                />
+                {!(i === (carts.length - 1)) && (
+                  <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 20 }} />
+                )}
+              </>
+            )}
+          </View>
+        ))}
+        <Spinner visible={isCartsLoading} />
+      </>
+    ) : (
+      <>
+        <Title>
+          <OText size={20}>
+            {t('MY_CARTS', 'My Carts')}
+          </OText>
+        </Title>
+        <View style={{ height: height * 0.7, justifyContent: 'center' }}>
+          <NotFoundSource
+            content={t('NO_CARTS_FOUND', 'Sorry, no carts found')}
+            image={theme.images.general.notFound}
+          />
+        </View>
+      </>
+    )
+  )
 }

package/themes/single-business/src/components/CartContent/styles.tsx

@@ -1,19 +1,5 @@
 import styled from 'styled-components/native';
 
-export const CCContainer = styled.View`
-  padding: 20px 40px;
-`
-
-export const CCNotCarts = styled.View`
-  height: 300px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 80%;
-  margin: auto;
-`
-
-export const CCList = styled.ScrollView`
-  padding: 10px 0px;
+export const Title = styled.View`
+  margin: 20px 0;
 `