ordering-ui-react-native 0.12.75 → 0.12.79

package/package.json

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

package/src/components/Checkout/index.tsx

@@ -116,13 +116,13 @@ const CheckoutUI = (props: any) => {
   const [validationFields] = useValidationFields();
   const [ordering] = useApi()
   const webviewRef = useRef<any>(null)
-
+  const webviewRefSquare = useRef<any>(null)
   const [errorCash, setErrorCash] = useState(false);
   const [userErrors, setUserErrors] = useState<any>([]);
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
-  const [paypalMethod, setPaypalMethod] = useState<any>(null)
+  const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
   const [progClr, setProgClr] = useState('#424242');
   const [prog, setProg] = useState(true);
   const [openOrderCreating, setOpenOrderCreating] = useState(false)
@@ -183,7 +183,7 @@ const CheckoutUI = (props: any) => {
   }
 
   const onMessage = (e: any) => {
-    if (e?.nativeEvent?.data) {
+    if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
       let payment = JSON.parse(e.nativeEvent.data);
 
       if (payment === 'api error') {
@@ -213,7 +213,7 @@ const CheckoutUI = (props: any) => {
 
   const handlePaymentMethodClick = (paymethod: any) => {
     setShowGateway({ closedByUser: false, open: true })
-    setPaypalMethod(paymethod)
+    setWebviewPaymethod(paymethod)
   }
 
   const handleCloseWebview = () => {
@@ -570,7 +570,7 @@ const CheckoutUI = (props: any) => {
           </>
         </>
       )}
-      {paypalMethod && showGateway.open && (
+      {webviewPaymethod?.gateway === 'paypal' && showGateway.open && (
         <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
           <Icon
             name="x"
@@ -620,22 +620,91 @@ const CheckoutUI = (props: any) => {
                   urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
                   urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
                   payData: {
-                    paymethod_id: paypalMethod?.id,
+                    paymethod_id: webviewPaymethod?.id,
                     amount: cart?.total,
                     delivery_zone_id: cart?.delivery_zone_id,
                     user_id: user?.id
                   },
                   currency: configs?.stripe_currency?.value || currency,
                   userToken: token,
-                  clientId: paypalMethod?.credentials?.client_id
+                  clientId: webviewPaymethod?.credentials?.client_id
                 }
               }
               setProg(false);
-              webviewRef.current.postMessage(JSON.stringify(message))
+              webviewRef?.current?.postMessage?.(JSON.stringify(message))
             }}
           />
         </View>
       )}
+      {webviewPaymethod?.gateway === 'square' && showGateway.open && (
+        <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
+          <Icon
+            name="x"
+            size={35}
+            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
+            onPress={handleCloseWebview}
+          />
+          <OText
+            style={{
+              textAlign: 'center',
+              fontSize: 16,
+              fontWeight: 'bold',
+              color: '#00457C',
+              marginBottom: 5,
+              marginTop: 10
+            }}>
+            {t('SQUARE_PAYMENT', 'Square payment')}
+          </OText>
+          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
+            <ActivityIndicator size={24} color={progClr} />
+          </View>
+          <WebView
+            source={{ uri: `https://test-square-f50f7.web.app` }}
+            onMessage={onMessage}
+            ref={webviewRefSquare}
+            javaScriptEnabled={true}
+            javaScriptEnabledAndroid={true}
+            cacheEnabled={false}
+            cacheMode='LOAD_NO_CACHE'
+            style={{ flex: 1 }}
+            onShouldStartLoadWithRequest={() => true}
+            onLoadStart={() => {
+              setProg(true);
+              setProgClr('#424242');
+            }}
+            onLoadProgress={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoad={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoadEnd={(e) => {
+              const message = {
+                action: 'init',
+                data: {
+                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
+                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
+                  payData: {
+                    paymethod_id: webviewPaymethod?.id,
+                    amount: cart?.total,
+                    delivery_zone_id: cart?.delivery_zone_id,
+                    user_id: user?.id,
+                  },
+                  currency: configs?.stripe_currency?.value || currency,
+                  userToken: token,
+                  clientId: 'sandbox-sq0idb-rMLAce87hOfpGvokZCygEw',
+                  locationId: 'L1NGAY5M6KJRX'
+                }
+              }
+              setProg(false);
+              webviewRefSquare?.current?.postMessage?.(JSON.stringify(message))
+            }}
+          />
+        </View>
+      )
+      }
       {openOrderCreating && (
         <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
           <OrderCreating

package/src/components/Messages/index.tsx

@@ -209,11 +209,11 @@ const MessagesUI = (props: MessagesParams) => {
     <InputToolbar
       {...props}
       containerStyle={{
-        padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
-        flexDirection: 'column-reverse'
+        marginBottom: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+        flexDirection: Platform.OS === 'ios' && isKeyboardShow ? 'column' : 'column-reverse'
       }}
       primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
-      renderAccessory={() => renderAccessory()}
+      renderAccessory={() => !isKeyboardShow && renderAccessory()}
     />
   )
 

package/src/components/PaymentOptions/index.tsx

@@ -90,9 +90,9 @@ const PaymentOptionsUI = (props: any) => {
   }
 
   const handlePaymentMethodClick = (paymethod: any) => {
-    const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
+    const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
     handlePaymethodClick(paymethod, isPopupMethod)
-    if(paymethod?.gateway === 'paypal') {
+    if(paymethod?.gateway === 'paypal' || paymethod?.gateway === 'square') {
       handlePaymentMethodClickCustom(paymethod)
     }
     setCardData(paymethodData)

package/src/config.json

@@ -2,7 +2,7 @@
   "app_id": "react-native-app",
   "notification_app": "orderingapp",
   "app_name": "Ordering",
-  "project": "demologistic",
+  "project": "reactdemo",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

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

@@ -333,144 +333,147 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           onClickButton={() => navigation.navigate('Orders')}
         />
       )}
-      <View style={{ flex: 1 }}>
-        <OrderHeaderComponent
-          order={order}
-          handleOpenMapView={handleOpenMapView}
-          handleOpenMessagesForBusiness={handleOpenMessagesForBusiness}
-          getOrderStatus={getOrderStatus}
-          handleArrowBack={handleArrowBack}
-          logisticOrderStatus={logisticOrderStatus}
-        />
-        {order && Object.keys(order).length > 0 && (props.order?.error?.length < 1 || !props.order?.error) && (
-          <>
-            <OrderDetailsContainer
-              keyboardShouldPersistTaps="handled"
-              showsVerticalScrollIndicator={false}
-            >
-              {order?.order_group && order?.order_group_id && order?.isLogistic ? order?.order_group?.orders.map((order: any, i: number, hash: any) => (
-                <OrderDetailsInformation key={order?.id} order={order} isOrderGroup lastOrder={hash?.length === i + 1} />
-              )) : (
-                <OrderDetailsInformation order={order} />
-              )}
-            </OrderDetailsContainer>
-            {showFloatButtonsPickUp[order?.status] && (
-              <FloatingButton
-                disabled={props.order?.loading}
-                btnText={t('PICKUP_FAILED', 'Pickup failed')}
-                isSecondaryBtn={false}
-                secondButtonClick={() =>
-                  handleChangeOrderStatus && handleChangeOrderStatus(9)
-                }
-                firstButtonClick={() =>
-                  handleViewActionOrder && handleViewActionOrder('pickupFailed')
-                }
-                secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
-                secondButton={true}
-                firstColorCustom={theme.colors.red}
-                secondColorCustom={theme.colors.green}
-                widthButton={'45%'}
-              />
-            )}
-            {(order?.status === 9 || order?.status === 19) && (
+      {!((!order || Object.keys(order).length === 0) &&
+        (props.order?.error?.length < 1 || !props.order?.error)) && (
+          <View style={{ flex: 1 }}>
+            <OrderHeaderComponent
+              order={order}
+              handleOpenMapView={handleOpenMapView}
+              handleOpenMessagesForBusiness={handleOpenMessagesForBusiness}
+              getOrderStatus={getOrderStatus}
+              handleArrowBack={handleArrowBack}
+              logisticOrderStatus={logisticOrderStatus}
+            />
+            {order && Object.keys(order).length > 0 && (props.order?.error?.length < 1 || !props.order?.error) && (
               <>
-                <FloatingButton
-                  disabled={props.order?.loading}
-                  btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
-                  isSecondaryBtn={false}
-                  secondButtonClick={() =>
-                    handleChangeOrderStatus && handleChangeOrderStatus(11)
+                <OrderDetailsContainer
+                  keyboardShouldPersistTaps="handled"
+                  showsVerticalScrollIndicator={false}
+                >
+                  {order?.order_group && order?.order_group_id && order?.isLogistic ? order?.order_group?.orders.map((order: any, i: number, hash: any) => (
+                    <OrderDetailsInformation key={order?.id} order={order} isOrderGroup lastOrder={hash?.length === i + 1} />
+                  )) : (
+                    <OrderDetailsInformation order={order} />
+                  )}
+                </OrderDetailsContainer>
+                {showFloatButtonsPickUp[order?.status] && (
+                  <FloatingButton
+                    disabled={props.order?.loading}
+                    btnText={t('PICKUP_FAILED', 'Pickup failed')}
+                    isSecondaryBtn={false}
+                    secondButtonClick={() =>
+                      handleChangeOrderStatus && handleChangeOrderStatus(9)
+                    }
+                    firstButtonClick={() =>
+                      handleViewActionOrder && handleViewActionOrder('pickupFailed')
+                    }
+                    secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
+                    secondButton={true}
+                    firstColorCustom={theme.colors.red}
+                    secondColorCustom={theme.colors.green}
+                    widthButton={'45%'}
+                  />
+                )}
+                {(order?.status === 9 || order?.status === 19) && (
+                  <>
+                    <FloatingButton
+                      disabled={props.order?.loading}
+                      btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
+                      isSecondaryBtn={false}
+                      secondButtonClick={() =>
+                        handleChangeOrderStatus && handleChangeOrderStatus(11)
+                      }
+                      firstButtonClick={() =>
+                        handleViewActionOrder && handleViewActionOrder('deliveryFailed')
+                      }
+                      secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
+                      secondButton={true}
+                      firstColorCustom={theme.colors.red}
+                      secondColorCustom={theme.colors.green}
+                      widthButton={'45%'}
+                    />
+                  </>
+                )}
+                {showFloatButtonsAcceptOrReject[order?.status] && (
+                  <FloatingButton
+                    btnText={t('REJECT', 'Reject')}
+                    isSecondaryBtn={false}
+                    secondButtonClick={() => (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))) ? handleAcceptLogisticOrder(order) : handleViewActionOrder('accept')}
+                    firstButtonClick={() => order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status)) ? handleRejectLogisticOrder() : handleViewActionOrder('reject')}
+                    secondBtnText={t('ACCEPT', 'Accept')}
+                    secondButton={true}
+                    firstColorCustom={theme.colors.red}
+                    secondColorCustom={theme.colors.green}
+                    widthButton={'45%'}
+                  />
+                )}
+              </>
+            )}
+            {openModalForMapView && (
+              <OModal
+                open={openModalForMapView}
+                onClose={() => handleOpenMapView()}
+                entireModal
+                customClose>
+                <DriverMap
+                  navigation={navigation}
+                  order={order}
+                  orderStatus={getOrderStatus(order?.status, t)?.value || ''}
+                  location={locationMarker}
+                  readOnly
+                  updateDriverPosition={updateDriverPosition}
+                  driverUpdateLocation={driverUpdateLocation}
+                  setDriverUpdateLocation={setDriverUpdateLocation}
+                  handleViewActionOrder={handleViewActionOrder}
+                  isBusinessMarker={isBusinessMarker}
+                  isToFollow={isToFollow}
+                  showAcceptOrReject={
+                    showFloatButtonsAcceptOrReject[order?.status]
                   }
-                  firstButtonClick={() =>
-                    handleViewActionOrder && handleViewActionOrder('deliveryFailed')
+                  handleOpenMapView={handleOpenMapView}
+                />
+              </OModal>
+            )}
+            {openModalForBusiness && (
+              <OModal
+                open={openModalForBusiness}
+                order={order}
+                title={`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id}`}
+                entireModal
+                onClose={() => handleCloseModal()}>
+                <Chat
+                  type={
+                    openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER
                   }
-                  secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
-                  secondButton={true}
-                  firstColorCustom={theme.colors.red}
-                  secondColorCustom={theme.colors.green}
-                  widthButton={'45%'}
+                  orderId={order?.id}
+                  messages={messages}
+                  order={order}
+                  setMessages={setMessages}
                 />
-              </>
+              </OModal>
             )}
-            {showFloatButtonsAcceptOrReject[order?.status] && (
-              <FloatingButton
-                btnText={t('REJECT', 'Reject')}
-                isSecondaryBtn={false}
-                secondButtonClick={() => (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))) ? handleAcceptLogisticOrder(order) : handleViewActionOrder('accept')}
-                firstButtonClick={() => order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status)) ? handleRejectLogisticOrder() : handleViewActionOrder('reject')}
-                secondBtnText={t('ACCEPT', 'Accept')}
-                secondButton={true}
-                firstColorCustom={theme.colors.red}
-                secondColorCustom={theme.colors.green}
-                widthButton={'45%'}
-              />
+            {openModalForAccept && (
+              <OModal
+                open={openModalForAccept}
+                onClose={() => setOpenModalForAccept(false)}
+                entireModal
+                customClose>
+                <AcceptOrRejectOrder
+                  handleUpdateOrder={handleChangeOrderStatus}
+                  closeModal={setOpenModalForAccept}
+                  customerCellphone={order?.customer?.cellphone}
+                  loading={props.order?.loading}
+                  action={actionOrder}
+                  orderId={order?.id}
+                  notShowCustomerPhone
+                  actions={actions}
+                  orderTitle={orderTitle}
+                  appTitle={appTitle}
+                />
+              </OModal>
             )}
-          </>
-        )}
-        {openModalForMapView && (
-          <OModal
-            open={openModalForMapView}
-            onClose={() => handleOpenMapView()}
-            entireModal
-            customClose>
-            <DriverMap
-              navigation={navigation}
-              order={order}
-              orderStatus={getOrderStatus(order?.status, t)?.value || ''}
-              location={locationMarker}
-              readOnly
-              updateDriverPosition={updateDriverPosition}
-              driverUpdateLocation={driverUpdateLocation}
-              setDriverUpdateLocation={setDriverUpdateLocation}
-              handleViewActionOrder={handleViewActionOrder}
-              isBusinessMarker={isBusinessMarker}
-              isToFollow={isToFollow}
-              showAcceptOrReject={
-                showFloatButtonsAcceptOrReject[order?.status]
-              }
-              handleOpenMapView={handleOpenMapView}
-            />
-          </OModal>
-        )}
-        {openModalForBusiness && (
-          <OModal
-            open={openModalForBusiness}
-            order={order}
-            title={`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id}`}
-            entireModal
-            onClose={() => handleCloseModal()}>
-            <Chat
-              type={
-                openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER
-              }
-              orderId={order?.id}
-              messages={messages}
-              order={order}
-              setMessages={setMessages}
-            />
-          </OModal>
-        )}
-        {openModalForAccept && (
-          <OModal
-            open={openModalForAccept}
-            onClose={() => setOpenModalForAccept(false)}
-            entireModal
-            customClose>
-            <AcceptOrRejectOrder
-              handleUpdateOrder={handleChangeOrderStatus}
-              closeModal={setOpenModalForAccept}
-              customerCellphone={order?.customer?.cellphone}
-              loading={props.order?.loading}
-              action={actionOrder}
-              orderId={order?.id}
-              notShowCustomerPhone
-              actions={actions}
-              orderTitle={orderTitle}
-              appTitle={appTitle}
-            />
-          </OModal>
+          </View>
         )}
-      </View>
       {alertState?.open && (
         <Alert
           open={alertState.open}

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

@@ -175,7 +175,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
           </>
         </OText>
-        {!order?.isLogistic && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
+        {!order?.isLogistic && order?.delivery_type && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
           <OText size={13}>
             {`${order?.paymethod?.name} - ${order.delivery_type === 1
               ? t('DELIVERY', 'Delivery')

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

@@ -81,6 +81,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
             <IconAntDesign
               name='close'
               color={theme.colors.textThird}
+              style={{ marginLeft: 7 }}
               size={24}
             />
           </TouchableOpacity>
@@ -115,6 +116,11 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
               </DropOption>
             </TouchableOpacity>
           ))}
+          {businessMenuList?.menus && businessMenuList?.menus.length === 0 && (
+            <View>
+              <OText>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
+            </View>
+          )}
         </MenuListWrapper>
       </OModal>
     </>

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

@@ -123,6 +123,17 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       color: '#B1BCCC',
       fontSize: 14,
       fontWeight: '500'
+    },
+    wrapperIcon: {
+      overflow: 'hidden',
+      backgroundColor: 'transparent',
+      marginBottom: 12,
+      width: 25,
+      height: 25,
+      marginStart: 7,
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 99999
     }
 	})
 
@@ -264,12 +275,13 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   return (
     <>
-      <PreOrderContainer>
+      <PreOrderContainer contentContainerStyle={{ paddingVertical: 30, paddingHorizontal: 40 }}>
         <TouchableOpacity onPress={() => goToBack && goToBack()} style={{ marginBottom: 12 }}>
           <IconAntDesign
             name='close'
             color={theme.colors.textThird}
             size={24}
+            style={{ marginLeft: -4}}
           />
         </TouchableOpacity>
         <BusinessInfoWrapper>
@@ -350,7 +362,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             {t('ORDER_TIME', 'Order time')}
           </OText>
           <View style={{ flex: 1 }}>
-            {selectDate && datesWhitelist[0].start !== null && (
+            {selectDate && datesWhitelist[0]?.start !== null && (
               <CalendarStrip
                 scrollable
                 style={styles.calendar}
@@ -398,7 +410,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         <OButton
           text={t('GO_TO_MENU', 'Go to menu')}
           textStyle={{color: 'white'}}
-          style={{borderRadius: 7.6, marginBottom: 50, marginTop: 30}}
+          style={{borderRadius: 7.6, marginBottom: 20, marginTop: 30}}
           onClick={() => handleClickBusiness()}
         />
       </PreOrderContainer>
@@ -409,8 +421,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         customClose
         entireModal
       >
-        <PreorderTypeListWrapper>
-          <TouchableOpacity onPress={() => setIsPreorderTypeList(false)} style={{ marginBottom: 12 }}>
+        <PreorderTypeListWrapper contentContainerStyle={{ paddingVertical: 20, paddingHorizontal: 40}}>
+          <TouchableOpacity onPress={() => setIsPreorderTypeList(false)} style={styles.wrapperIcon}>
             <IconAntDesign
               name='close'
               color={theme.colors.textThird}
@@ -421,6 +433,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             <TouchableOpacity
               key={index}
               onPress={() => handleClickPreorderType(option)}
+              style={{ zIndex: 99999 }}
             >
               <DropOption
                 numberOfLines={1}

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

@@ -1,8 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
-export const PreOrderContainer = styled.ScrollView`
-  padding: 20px 40px 30px 40px;
-`
+export const PreOrderContainer = styled.ScrollView``
 
 export const BusinessInfoWrapper = styled.View`
   flex-direction: row;
@@ -45,9 +43,7 @@ export const TimeItem = styled.View`
   `}
 `
 
-export const PreorderTypeListWrapper = styled.ScrollView`
-  padding: 20px 40px 30px 40px;
-`
+export const PreorderTypeListWrapper = styled.ScrollView``
 
 export const DropOption = styled.View`
   padding: 10px;