ordering-ui-react-native 0.15.36 → 0.15.38-release

package/src/components/PaymentOptionsWebView/index.tsx

@@ -5,147 +5,146 @@ import WebView from 'react-native-webview';
 import { ActivityIndicator } from 'react-native-paper';
 
 import {
-  ToastType,
-  useToast,
-  useApi,
-  useLanguage,
-  useConfig
+    ToastType,
+    useToast,
+    useApi,
+    useLanguage,
+    useConfig
 } from 'ordering-components/native';
 
 import { OText } from '../shared';
 
 interface PaymentOptionsWebViewParams {
-  onNavigationRedirect?: Function,
-  uri?: any,
-  user?: any,
-  token?: any,
-  cart?: any,
-  currency?: any,
-  webviewPaymethod?: any,
-  setShowGateway?: any,
-  setOpenOrderCreating?: any,
-  locationId?: any
+    onNavigationRedirect?: Function,
+    uri?: any,
+    user?: any,
+    token?: any,
+    cart?: any,
+    currency?: any,
+    webviewPaymethod?: any,
+    setShowGateway?: any,
+    setOpenOrderCreating?: any,
+    locationId?: any
 }
 export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
-  const {
-    onNavigationRedirect,
-    uri,
-    user,
-    token,
-    cart,
-    currency,
-    webviewPaymethod,
-    setShowGateway,
-    setOpenOrderCreating,
-    locationId
-  } = props
+    const { 
+        onNavigationRedirect,
+        uri,
+        user,
+        token,
+        cart,
+        currency,
+        webviewPaymethod,
+        setShowGateway,
+        setOpenOrderCreating,
+        locationId
+    } = props
 
-  const webviewRef = useRef<any>(null)
-  const [, { showToast }] = useToast();
-  const [ordering] = useApi()
-  const [{ configs }] = useConfig();
-  const [, t] = useLanguage();
+   const webviewRef = useRef<any>(null)
+   const [, { showToast }] = useToast();
+   const [ordering] = useApi()
+   const [{ configs }] = useConfig();
+   const [, t] = useLanguage();
 
+   
+   const [progClr, setProgClr] = useState('#424242');
+   const [prog, setProg] = useState(true);
 
-  const [progClr, setProgClr] = useState('#424242');
-  const [prog, setProg] = useState(true);
-
-  const handleCloseWebview = () => {
+   const handleCloseWebview = () => {
     setProg(true);
     setShowGateway({ open: false, closedByUser: true })
   }
 
-  const onMessage = (e: any) => {
-    if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
-      let payment = JSON.parse(e.nativeEvent.data);
+   const onMessage = (e: any) => {
+        if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
+            let payment = JSON.parse(e.nativeEvent.data);
 
-      if (payment === 'api error') {
-        setShowGateway({ closedByUser: true, open: false })
-        setProg(true);
-      }
+            if (payment === 'api error') {
+                setShowGateway({ closedByUser: true, open: false })
+                setProg(true);
+            }
 
-      if (payment) {
-        if (payment.error) {
-          showToast(ToastType.Error, payment.result)
-          setOpenOrderCreating && setOpenOrderCreating(false)
-        } else if (payment?.result?.order?.uuid) {
-          showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
-          onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, isFromCheckout: true })
+            if (payment) {
+                if (payment.error) {
+                showToast(ToastType.Error, payment.result)
+                setOpenOrderCreating && setOpenOrderCreating(false)
+                } else if (payment?.result?.order?.uuid) {
+                showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
+                onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, isFromCheckout: true})
+                }
+                setProg(true);
+                setShowGateway({ closedByUser: false, open: false })
+            }
         }
-        setProg(true);
-        setShowGateway({ closedByUser: false, open: false })
-      }
-    }
-  }
+   }
 
-  return (
+   return (
     <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
-        }}>
-        {webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (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: uri }}
-        onMessage={onMessage}
-        ref={webviewRef}
-        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 messageParams = locationId ? { locationId, clientId: webviewPaymethod?.credentials?.application_id } : {}
-          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?.balance ?? cart?.total,
-                delivery_zone_id: cart?.delivery_zone_id,
-                user_id: user?.id,
-                user_name: user?.name
-              },
-              currency: configs?.stripe_currency?.value || currency,
-              userToken: token,
-              clientId: webviewPaymethod?.credentials?.client_id,
-              ...messageParams
-            }
-          }
-          setProg(false);
-          webviewRef?.current?.postMessage?.(JSON.stringify(message))
-        }}
-      />
+          <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
+            }}>
+           {webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (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: uri }}
+            onMessage={onMessage}
+            ref={webviewRef}
+            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 messageParams = locationId ? { locationId } : {}
+              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?.balance ?? cart?.total,
+                    delivery_zone_id: cart?.delivery_zone_id,
+                    user_id: user?.id,
+                    user_name: user?.name
+                  },
+                  currency: configs?.stripe_currency?.value || currency,
+                  userToken: token,
+                  clientId: webviewPaymethod?.credentials?.client_id,
+                  ...messageParams
+                }
+              }
+              setProg(false);
+              webviewRef?.current?.postMessage?.(JSON.stringify(message))
+            }}
+          />
     </View>
-  )
-}
+)}

package/src/components/SignupForm/index.tsx

@@ -115,6 +115,8 @@ const SignupFormUI = (props: SignupParams) => {
   const phoneRef = useRef<any>(null)
   const passwordRef = useRef<any>(null)
 
+  const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
+
   const anySocialButtonActivated = ((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
     (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) ||
     (configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null)
@@ -543,7 +545,7 @@ const SignupFormUI = (props: SignupParams) => {
                       handleSuccessFacebookLogin={handleSuccessFacebook}
                     />
                   )}
-                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
                   <GoogleLogin
                     notificationState={notificationState}
                     webClientId={configs?.google_login_client_id?.value}

package/src/components/SingleProductCard/index.tsx

@@ -10,6 +10,7 @@ import {
 import { StyleSheet } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
+import FastImage from 'react-native-fast-image'
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
   const {
@@ -77,10 +78,21 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       activeOpacity={1}
       onPress={() => onProductClick?.(product)}
     >
-      <OIcon
-        url={optimizeImage(product?.images, 'h_200,c_limit')}
-        style={styles.productStyle}
-      />
+      {product?.images ? (
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(product?.images, 'h_250,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
+				) : (
+					<OIcon
+						src={theme?.images?.dummies?.product}
+						style={styles.productStyle}
+					/>
+				)}
       <CardInfo>
         <OText numberOfLines={1} ellipsizeMode='tail' style={styles.textStyle}>{product?.name}</OText>
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>

package/src/components/StripeElementsForm/index.tsx

@@ -7,11 +7,10 @@ import {
   useConfirmSetupIntent,
   createPaymentMethod
 } from '@stripe/stripe-react-native';
-import configs from '../../config.json'
+
 import { ErrorMessage } from './styles';
 
 import { StripeElementsForm as StripeFormController } from './naked';
-import { StripeMethodForm } from '../StripeMethodForm';
 import { OButton, OText } from '../shared';
 import { useTheme } from 'styled-components/native';
 
@@ -23,10 +22,6 @@ const StripeElementsFormUI = (props: any) => {
     businessId,
     requirements,
     stripeTokenHandler,
-    methodsPay,
-    paymethod,
-    onCancel,
-    cart
   } = props;
 
   const theme = useTheme();
@@ -126,49 +121,33 @@ const StripeElementsFormUI = (props: any) => {
     <View style={styles.container}>
       {publicKey ? (
         <View style={{ flex: 1 }}>
-          <StripeProvider 
-            publishableKey={publicKey}
-            merchantIdentifier={`merchant.${configs.apple_app_id}`}
-          >
-            {methodsPay?.includes(paymethod) ? (
-              <StripeMethodForm 
-                handleSource={handleSource}
-                onCancel={onCancel}
-                cart={cart}
-                setErrors={setErrors}
-                paymethod={paymethod}
-                devMode={publicKey?.includes('test')}
-              />
-            ) : (
-              <CardField
-                postalCodeEnabled={true}
-                cardStyle={{
-                  backgroundColor: '#FFFFFF',
-                  textColor: '#000000',
-                }}
-                style={{
-                  width: '100%',
-                  height: 50,
-                  marginVertical: 30,
-                  zIndex: 9999,
-                }}
-                onCardChange={(cardDetails: any) => setCard(cardDetails)}
-              />
-            )}
-          </StripeProvider>
-          {!methodsPay?.includes(paymethod) && (
-            <OButton
-              text={t('SAVE_CARD', 'Save card')}
-              bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-              borderColor={isCompleted ? theme.colors.primary :theme.colors.backgroundGray}
-              style={styles.btnAddStyle}
-              textStyle={{color: 'white'}}
-              imgRightSrc={null}
-              onClick={() => handleSaveCard()}
-              isDisabled={!isCompleted}
-              isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+          <StripeProvider publishableKey={publicKey}>
+            <CardField
+              postalCodeEnabled={true}
+              cardStyle={{
+                backgroundColor: '#FFFFFF',
+                textColor: '#000000',
+              }}
+              style={{
+                width: '100%',
+                height: 50,
+                marginVertical: 30,
+                zIndex: 9999,
+              }}
+              onCardChange={(cardDetails: any) => setCard(cardDetails)}
             />
-          )}
+          </StripeProvider>
+          <OButton
+            text={t('SAVE_CARD', 'Save card')}
+            bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+            borderColor={isCompleted ? theme.colors.primary :theme.colors.backgroundGray}
+            style={styles.btnAddStyle}
+            textStyle={{color: 'white'}}
+            imgRightSrc={null}
+            onClick={() => handleSaveCard()}
+            isDisabled={!isCompleted}
+            isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+          />
           {!!errors && (
             <ErrorMessage>
               <OText

package/src/components/StripeMethodForm/index.tsx

@@ -102,7 +102,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
       shippingMethods: [
         {
           amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
-          identifier: 'DPS',
+          identifier: 'standard',
           label: 'Courier',
           detail: 'Delivery',
           type: 'final',
@@ -125,7 +125,6 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           last4: paymentMethod.Card.last4
         }
       })
-      onCancel()
     }
   }
 

package/src/components/UpsellingProducts/index.tsx

@@ -37,7 +37,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
     imageStyle: {
       width: 120,
       height: 90,
-      resizeMode: 'cover',
+      resizeMode: 'contain',
       borderRadius: 10
     },
     closeUpsellingButton: {

package/src/components/UserProfileForm/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
+  UserFormDetails as UserProfileController,
   useSession,
   useLanguage,
 } from 'ordering-components/native';
@@ -13,6 +14,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import Ionicons from 'react-native-vector-icons/Ionicons'
 
 import {
+  OAlert,
   OIcon,
   OText
 } from '../shared';
@@ -20,18 +22,24 @@ import {
   Container,
   Names,
   UserInfoContainer,
-  LanguageContainer
+  LanguageContainer,
+  RemoveAccountContainer
 } from './styles';
 
-export const UserProfileForm = (props: ProfileParams) => {
+export const UserProfileFormUI = (props: ProfileParams) => {
   const {
-    navigation
+    navigation,
+    handleRemoveAccount,
+    removeAccountState
   } = props;
 
   const theme = useTheme();
-  const [{ user }] = useSession();
+  const [{ user }, { logout }] = useSession();
   const [, t] = useLanguage();
 
+  const isAdmin = user?.level === 0
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+
   const styles = StyleSheet.create({
     linkStyle: {
       color: theme.colors.primary,
@@ -44,6 +52,9 @@ export const UserProfileForm = (props: ProfileParams) => {
     },
     iconStyle: {
       fontSize: 24
+    },
+    removeAccount: {
+      flexDirection: 'row'
     }
   });
 
@@ -78,13 +89,31 @@ export const UserProfileForm = (props: ProfileParams) => {
     },
     chevronUp: {
       display: 'none'
-    }
+    },
   })
 
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
 
+  const onRemoveAccount = () => {
+    setConfirm({
+      open: true,
+      content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
+      title: t('ACCOUNT_ALERT', 'Account alert'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveAccount && handleRemoveAccount(user?.id)
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (removeAccountState?.result === 'OK') {
+      logout()
+    }
+  }, [removeAccountState])
+
   return (
     <Container>
       <View>
@@ -134,7 +163,35 @@ export const UserProfileForm = (props: ProfileParams) => {
           <LanguageSelector pickerStyle={_pickerStyle} />
         </LanguageContainer>
         <LogoutButton />
+        <RemoveAccountContainer>
+          <TouchableOpacity
+            disabled={isAdmin}
+            style={styles.removeAccount}
+            onPress={() => onRemoveAccount()}
+            activeOpacity={0.7}
+          >
+            <OIcon src={theme.images.general.user} width={20} color={theme.colors.black} style={{ marginEnd: 14 }} />
+            <OText size={14} weight={'400'} style={{ opacity: isAdmin ? 0.5 : 1, top: 1 }} color={theme.colors.red}>{t('REMOVE_ACCOUNT', 'Remove account')}</OText>
+          </TouchableOpacity>
+        </RemoveAccountContainer>
       </View>
+      <OAlert
+        open={confirm.open}
+        title={confirm.title}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      />
     </Container>
   );
 };
+
+export const UserProfileForm = (props: any) => {
+  const profileProps = {
+    ...props,
+    UIComponent: UserProfileFormUI,
+    useSessionUser: true
+  };
+  return <UserProfileController {...profileProps} />;
+};

package/src/components/UserProfileForm/styles.tsx

@@ -35,3 +35,11 @@ export const LanguageContainer = styled.View`
   align-items: center;
   margin-bottom: 10px;
 `
+
+export const RemoveAccountContainer = styled.View`
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-top: 15px;
+`

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

package/src/components/shared/OModal.tsx

@@ -78,7 +78,7 @@ const OModal = (props: Props): React.ReactElement => {
       animationType="slide"
       transparent={isTransparent}
       visible={open}
-      onRequestClose={() => { onClose() }}
+      onRequestClose={() => {  onClose && onClose() }}
       style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
     >
      {isAvoidKeyBoardView ? (

package/src/config.json

@@ -3,8 +3,6 @@
   "notification_app": "orderingapp",
   "app_name": "Ordering",
   "project": "reactdemo",
-  "apple_app_id": "com.delivery",
-  "android_app_id": "com.delivery",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/src/hooks/useCountdownTimer.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Hook for countdown seconds
+ * @param {int} initialCount
+ * @param {boolean} start
+ */
+export function useCountdownTimer (initialCount : number, start : boolean) {
+  const [count, setCount] = useState(initialCount)
+
+  useEffect(() => {
+    if (start) {
+      const secondsLeft = setInterval(() => {
+        setCount(c => c - (c === 0 ? 0 : 1))
+      }, 1000)
+      return () => clearInterval(secondsLeft)
+    }
+  }, [start])
+
+  return [
+    count,
+    setCount,
+    /** reset */
+    () => { setCount(initialCount) }
+  ]
+}

package/src/navigators/CheckoutNavigator.tsx

@@ -6,6 +6,7 @@ import AddressForm from '../pages/AddressForm'
 import CartList from '../pages/CartList'
 import CheckoutPage from '../pages/Checkout';
 import BusinessProductsList from '../pages/BusinessProductsList';
+import MultiCheckout from '../pages/MultiCheckout';
 
 const Stack = createStackNavigator();
 
@@ -53,6 +54,11 @@ const CheckoutNavigator = (props: any) => {
         component={AddressForm}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name="MultiCheckout"
+        children={() => <MultiCheckout {...checkoutProps} />}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   );
 }