ordering-ui-react-native 0.11.11 → 0.11.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.11.11",
+  "version": "0.11.15",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -92,6 +92,7 @@
     "react-native-restart": "^0.0.22",
     "react-native-safe-area-context": "^3.1.8",
     "react-native-screens": "^2.11.0",
+    "react-native-signature-canvas": "^4.3.0",
     "react-native-snap-carousel": "^3.9.1",
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-vector-icons": "^7.1.0",

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import {
   TouchableOpacity,
   ActivityIndicator,
@@ -42,6 +42,8 @@ import { OIcon, OIconButton, OText } from '../shared';
 import { MessagesParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 
+import SignatureScreen from 'react-native-signature-canvas';
+
 const ChatUI = (props: MessagesParams) => {
   const {
     type,
@@ -82,6 +84,8 @@ const ChatUI = (props: MessagesParams) => {
       : 'Landscape',
   );
 
+  const [isShowSignaturePad, setIsShowSignaturePad] = useState(false)
+
   // Events
   Dimensions.addEventListener('change', ({ window: { width, height } }) => {
     if (width < height) {
@@ -350,6 +354,7 @@ const ChatUI = (props: MessagesParams) => {
     setImage && setImage(null);
     setFile && setFile({ ...file, uri: '', type: '', name: '', size: 0 });
     setMessage && setMessage('');
+    setIsShowSignaturePad(false)
   };
 
   const messageConsole = (message: any) => {
@@ -777,6 +782,20 @@ const ChatUI = (props: MessagesParams) => {
         placeholderTextColor={theme.colors.composerPlaceHolder}
       />
 
+      <TouchableOpacity
+        onPress={() => {
+          setImage && setImage(null);
+          setIsShowSignaturePad(!isShowSignaturePad);
+        }}>
+        <MaterialCommunityIcon
+          name="pen"
+          color={
+            isShowSignaturePad ? theme.colors.primary : theme.colors.arrowColor
+          }
+          size={24}
+        />
+      </TouchableOpacity>
+
       {!file.type && (
         <Actions
           {...props}
@@ -789,7 +808,9 @@ const ChatUI = (props: MessagesParams) => {
                   <OIconButton
                     borderColor={theme.colors.transparent}
                     icon={
-                      image ? { uri: image } : theme.images.general.imageChat
+                      !isShowSignaturePad && image
+                        ? { uri: image }
+                        : theme.images.general.imageChat
                     }
                     iconStyle={{
                       borderRadius: image ? 10 : 0,
@@ -800,7 +821,7 @@ const ChatUI = (props: MessagesParams) => {
                     iconCover
                   />
 
-                  {image && (
+                  {image && !isShowSignaturePad && (
                     <TouchableOpacity
                       style={{
                         position: 'absolute',
@@ -1000,6 +1021,80 @@ const ChatUI = (props: MessagesParams) => {
     );
   };
 
+  const imgHeight = 120;
+  const signatureStyle = `
+    .m-signature-pad {
+      box-shadow: none;
+      border: none;
+    } 
+    .m-signature-pad--body {
+      border: none;
+    }
+    .m-signature-pad--footer {
+      display: none;
+      margin: 0px;
+    }
+    body,html {
+      height: ${imgHeight}px;
+      border-radius: 7.6px;
+    }
+    .m-signature-pad--footer
+    .button {
+      background-color: red;
+      color: #FFF;
+    }
+  `;
+
+  const signatureRef = useRef<any>();
+
+  const handleClear = () => {
+    setImage && setImage(null);
+    signatureRef.current.clearSignature();
+  };
+
+  const handleEnd = () => {
+    signatureRef.current.readSignature();
+  };
+
+  const handleOK = (signature: any) => {
+    setImage && setImage(signature);
+  };
+
+  const renderChatFooter = () => {
+    return (
+      <View
+        style={{
+          height: imgHeight,
+          paddingHorizontal: 30,
+          paddingVertical: 10,
+          borderTopColor: theme.colors.tabBar,
+          borderTopWidth: 1
+        }}
+      >
+        <SignatureScreen
+          ref={signatureRef}
+          onOK={handleOK}
+          webStyle={signatureStyle}
+          backgroundColor={theme.colors.composerView}
+          onEnd={handleEnd}
+        />
+         <TouchableOpacity
+          style={{
+            position: 'absolute',
+            right: 35,
+            top: 15
+          }}
+          onPress={handleClear}>
+          <MaterialCommunityIcon
+            name="close"
+            color={theme.colors.textGray}
+            size={24}
+          />
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <Wrapper>
@@ -1025,6 +1120,7 @@ const ChatUI = (props: MessagesParams) => {
           scrollToBottom
           renderAvatar={renderAvatar}
           showAvatarForEveryMessage={true}
+          renderChatFooter={isShowSignaturePad ? renderChatFooter : undefined}
           renderInputToolbar={renderInputToolbar}
           renderComposer={renderComposer}
           renderSend={renderSend}

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

@@ -53,6 +53,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
   return (
     <Container
       isIos={Platform.OS === 'ios'}
+      paddingBottomIos={props.paddingBottomIos}
       style={{ paddingHorizontal: props.isPadding ? 30 : 0 }}>
       <View
         style={{

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

@@ -15,7 +15,7 @@ export const Container = styled.View`
   ${(props: any) =>
     props.isIos &&
     css`
-      padding-bottom: 5px;
+      padding-bottom: ${(props: any) => props.paddingBottomIos ? `${props.paddingBottomIos}px` : '5px'};
     `}
 `;
 

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

@@ -436,6 +436,7 @@ export interface FloatingButtonParams {
   secondButton?: boolean;
   firstColorCustom?: string;
   secondColorCustom?: string;
+  paddingBottomIos?: any;
 }
 export interface MomentOptionParams {
   navigation: any;

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

@@ -6,9 +6,7 @@ import {
   useOrder,
   useSession,
   useConfig,
-  useApi,
-  useToast,
-  ToastType
+  useApi
 } from 'ordering-components/native'
 import Carousel from 'react-native-snap-carousel';
 import Geocoder from 'react-native-geocoding';
@@ -28,18 +26,16 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const theme = useTheme();
   const [, t] = useLanguage();
-  const [{user, auth, accessToken}] = useSession()
+  const [{user, accessToken}] = useSession()
   const [, {changeAddress}] = useOrder()
   const [orientationState] = useDeviceOrientation();
   const [configState] = useConfig()
   const [ordering] = useApi()
-  const [, {showToast}] = useToast()
   const [addressState, setAddressState] = useState<any>({ loading: false, changes: {}, error: null, address: {} })
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
 
   const _categories: any = business?.original?.categories;
   let _promos: any = [];
-
   _categories?.forEach((categ: any) => {
     const _featuredProds = categ?.products?.filter(
       (prod: any) => prod.featured,
@@ -52,7 +48,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const handleCurrentUserLocation = async () => {
     let addressValue : any = []
-    const data: any = { address: null, error: null }
+    let data: any = { address: null, error: null }
     const filterAddressInfo = [
       { tag: 'street_number', isShort: true },
       { tag: 'route', isShort: true },
@@ -60,13 +56,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
       { tag: 'administrative_area_level_1', isShort: false },
       { tag: 'country', isShort: false },
     ]
-
-    try {
       Geocoder.init(googleMapsApiKey);
       Geocoder.from({
-        latitude: business.location.lat,
-        longitude: business.location.lng
-      }).then((json : any) => {
+        latitude: business.location?.lat,
+        longitude: business.location?.lng
+      }).then( async (json : any) => {
         if(json.results && json.results?.length > 0){
             for (const component of json.results?.[0].address_components) {
               const addressType = component.types?.[0]
@@ -76,7 +70,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 }
               }
             }
-            data.address = {
+            data = {
               address: addressValue.join(', '),
               location: json.results[0].geometry.location,
               map_data: {
@@ -84,44 +78,38 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 place_id: json.results?.[0].place_id
               }
             }
+            setAddressState({ ...addressState, loading: true })
+            try {
+              const { content } = await ordering
+              .users(user?.id)
+              .addresses()
+              .save(data.address, { accessToken })
+              setAddressState({
+                ...addressState,
+                loading: false,
+                error: content.error ? content.result : null,
+              })
+              if (!content.error && data) {
+                setAddressState({
+                  ...addressState,
+                  address: data
+                })
+                changeAddress(data)
+              }
+            } catch (err : any) {
+              setAddressState({
+                ...addressState,
+                loading: false,
+                error: [err.message],
+                address: {}
+              })
+            }
         }
       })
-    } catch (err : any){
-      showToast(ToastType.Error, err?.message)
-    }
-    setAddressState({ ...addressState, loading: true })
-    try {
-      const { content } = await ordering
-        .users(user?.id)
-        .addresses()
-        .save(data.address, { accessToken })
-      setAddressState({
-        ...addressState,
-        loading: false,
-        error: content.error ? content.result : null,
-      })
-      if (!content.error) {
-        setAddressState({
-          ...addressState,
-          address: content.result
-        })
-        changeAddress(content.result.id, {
-          address: content.result,
-          isEdit: false
-        })
-      }
-    } catch (err : any) {
-      setAddressState({
-        ...addressState,
-        loading: false,
-        error: [err.message],
-        address: {}
-      })
-    }
   }
 
   useEffect(() => {
-    if(business?.location && auth && googleMapsApiKey){
+    if(business?.location?.lat && business?.location?.lng){
       handleCurrentUserLocation()
     }
   }, [business?.location, googleMapsApiKey])
@@ -212,7 +200,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   );
 
   if (businessState?.error || addressState.error) {
-    return <OText>error!</OText>;
+    return <OText>{t('ERROR', 'Error')}</OText>;
   }
 
   return (

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

@@ -122,7 +122,7 @@ const CartUI = (props: any) => {
         >
           <OText
             weight="500"
-            size={21}
+            size={18}
             color={theme.colors.black}
           >
             {t('THIS_ORDER_IS_TO', 'This order is to')}
@@ -136,7 +136,7 @@ const CartUI = (props: any) => {
             bgColor="transparent"
             borderColor="transparent"
             style={{ paddingEnd: 0 }}
-            textStyle={{ color: theme.colors.primary, marginEnd: 0 }}
+            textStyle={{ color: theme.colors.primary, marginEnd: 0, fontSize: 18 }}
             onClick={handleChangeOrderType}
           />
         </OrderTypeWrapper>

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

@@ -187,14 +187,14 @@ const TopBar = (props:any) => {
 		<StyledTopBar>
 			<View>
 				<OText
-					size={20}
+					size={24}
 					weight="700"
 					mBottom={4}
 				>
 					{t('YOUR_ORDER', 'your order')}
 				</OText>
 				<OText
-					size={20}
+					size={18}
 					weight="500"
 					color={theme.colors.mediumGray}
 				>

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

@@ -55,6 +55,7 @@ const CustomerName = (props: Props): React.ReactElement => {
   const submitButton  = (<OButton
     text={t('PROCEED_TO_PAY', 'Proceed to Pay')}
     onClick={handleSubmit(onSubmit)}
+    textStyle={{color: theme.colors.primaryContrast, fontSize: 20}}
     parentStyle={{
       height: orientationState?.orientation === PORTRAIT
          ? 50 : 100
@@ -118,14 +119,13 @@ const CustomerName = (props: Props): React.ReactElement => {
                 'Invalid name',
               ).replace('_attribute_', t('NAME', 'Name')),
             }
-          
           }}
           defaultValue=""
         />
 
         {orientationState?.orientation === LANDSCAPE && submitButton}
       </Container>
-      
+
       {(orientationState?.orientation === PORTRAIT) && (
         <OSActions>
           {submitButton}

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

@@ -18,6 +18,7 @@ import {
   OSTable,
   OSActions,
   OSInputWrapper,
+  SentReceipt
 } from './styles'
 import { OrderDetailsParams, Product } from '../../types'
 import { Container } from '../../layouts/Container';
@@ -29,7 +30,7 @@ import { verifyDecimals } from '../../../../../src/utils'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import { useTheme } from 'styled-components/native'
 import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
-
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 const _EMAIL = 'email';
 const _SMS = 'sms';
 
@@ -161,7 +162,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         setCountReceipts(countReceipts - 1)
       }
 
-    }catch (error) {
+    } catch (error : any) {
       showToast(ToastType.Error, error.message)
     }
     setIsLoading(false)
@@ -243,17 +244,19 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             marginBottom: 10,
           }}
         >
-
-          <OText>{t('SEND_RECEIPT', 'Send receipt')}</OText>
+          <SentReceipt>
+            <MaterialIcon name='check-circle' color={theme.colors.primary} size={28} />
+            <OText size={20} mLeft={10}>{t('SEND_RECEIPT', 'Send receipt')}</OText>
+          </SentReceipt>
+          <OText size={20}>
+            {countReceipts}/5 {t('RECIPTS_REMAINING', 'Recipts remaining')}
+          </OText>
 
           {/* <OptionSwitch
             options={optionsToSendReceipt}
             onChange={setOptionToSendReceipt}
           /> */}
         </OSTable>
-        <OText size={14} style={{alignSelf: 'flex-end'}}>
-          {countReceipts}/5 {t('RECIPTS_REMAINING', 'Recipts remaining')}
-        </OText>
         <OSTable>
           {optionToSendReceipt?.value === _EMAIL && (
             <Controller
@@ -334,21 +337,21 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       }}
     >
       <OSTable>
-        <OText>
+        <View style={{flexDirection: 'row', bottom: 10}}>
           <OText
-            size={orientationState?.dimensions?.width * 0.04}
+            size={orientationState?.dimensions?.width * 0.039}
             weight="700"
           >
             {t('ORDER_NUMBER', 'Order No.')} {' '}
           </OText>
           <OText
-            size={orientationState?.dimensions?.width * 0.04}
+            size={orientationState?.dimensions?.width * 0.039}
             weight="700"
             color={theme.colors.primary}
           >
             {order?.id}
           </OText>
-        </OText>
+        </View>
       </OSTable>
 
       {order?.products?.length && (
@@ -392,7 +395,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         >
           {t('PROMO_CODE', 'Promo code')}
           {'\n'}
-          <OText weight="400">
+          <OText weight="400" style={{fontSize: 14}}>
             {order?.offer_type === 1 ? `${verifyDecimals(order?.offer_rate, parseNumber)}%` : parsePrice(order?.summary?.discount || order?.discount)} {t('OFF', 'off')}
           </OText>
         </OText>

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

@@ -26,3 +26,7 @@ export const OSInputWrapper = styled.View`
 	min-height: 150px;
   background-color: #FFF;
 `
+
+export const SentReceipt = styled.View`
+  flex-direction: row;
+`

package/themes/kiosk/src/components/shared/OSegment.tsx

@@ -5,6 +5,7 @@ import styled, { useTheme } from 'styled-components/native'
 const Wrapper = styled.ScrollView`
 	background-color: ${(props: any) => props.theme.colors.whiteGray};
 	flex-direction: row;
+  padding-left: 10px;
 `
 const SegItem = styled.View`
 	padding: 24px 12px;
@@ -32,8 +33,7 @@ interface Props {
 }
 
 const OSegment = (props: Props) => {
-    
-    var [curIndex, onSelected] = React.useState(props.selectedIdx)
+    const [curIndex, onSelected] = React.useState(props.selectedIdx)
     const onSelectItem = (idx: number) => {
         onSelected(idx)
         props.onSelectItem(idx)