ordering-ui-react-native 0.21.34-test → 0.21.34

package/src/components/PaymentOptions/styles.tsx

@@ -1,52 +1,52 @@
-import styled, { css } from 'styled-components/native';
-
-export const PMContainer = styled.View`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-`
-
-export const PMList = styled.View`
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-`
-
-export const PMItem = styled.View`
-  width: 120px;
-  height: 80px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  margin-right: 10px;
-  margin-top: 10px;
-  text-align: center;
-  background-color: ${(props: any) => props.theme.colors.inputDisabled};
-
-  ${(props: any) => props.theme?.rtl && css`
-    margin-left: 10px;
-    margin-right: 0;
-  `}
-
-  ${(props: any) => props.isActive ? css`
-    background-color: ${(props: any) => props.theme.colors.primary};
-  ` : css`
-    border: 1px solid #EAEAEA;
-  `}
-`
-
-export const PMCardSelected = styled.View`
-  padding: 30px 0px 0px;
-`
-
-export const PMCardItemContent = styled.View`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  font-weight: bold;
-`
+import styled, { css } from 'styled-components/native';
+
+export const PMContainer = styled.View`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`
+
+export const PMList = styled.View`
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+`
+
+export const PMItem = styled.View`
+  width: 120px;
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  margin-right: 10px;
+  margin-top: 10px;
+  text-align: center;
+  background-color: ${(props: any) => props.theme.colors.inputDisabled};
+
+  ${(props: any) => props.theme?.rtl && css`
+    margin-left: 10px;
+    margin-right: 0;
+  `}
+
+  ${(props: any) => props.isActive ? css`
+    background-color: ${(props: any) => props.theme.colors.primary};
+  ` : css`
+    border: 1px solid #EAEAEA;
+  `}
+`
+
+export const PMCardSelected = styled.View`
+  padding: 30px 0px 0px;
+`
+
+export const PMCardItemContent = styled.View`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-weight: bold;
+`

package/src/components/PaymentOptionsWebView/index.tsx

@@ -1,172 +1,172 @@
-import React, { useRef, useState } from 'react'
-import { View } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
-import WebView from 'react-native-webview';
-import { ActivityIndicator } from 'react-native-paper';
-
-import {
-  ToastType,
-  useToast,
-  useApi,
-  useLanguage,
-  useConfig,
-  useOrder
-} 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,
-  additionalParams?: any
-  title?: string
-}
-export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
-  const {
-    onNavigationRedirect,
-    uri,
-    user,
-    token,
-    cart,
-    currency,
-    webviewPaymethod,
-    setShowGateway,
-    setOpenOrderCreating,
-    locationId,
-    title,
-    additionalParams = {}
-  } = props
-
-  const webviewRef = useRef<any>(null)
-  const [, { showToast }] = useToast();
-  const [ordering] = useApi()
-  const [{ configs }] = useConfig();
-  const [, t] = useLanguage();
-  const [, { confirmCart }] = useOrder()
-
-  const [progClr, setProgClr] = useState('#424242');
-  const [prog, setProg] = useState(true);
-
-  const handleCloseWebview = () => {
-    setProg(true);
-    setShowGateway({ open: false, closedByUser: true })
-  }
-
-  const onMessage = async (e: any) => {
-    if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
-      let payment = JSON.parse(e.nativeEvent.data);
-      if (payment?.response && payment?.responsetext && payment.orderid) {
-        const credomaticData = {
-          credomatic: {
-            ...payment
-          }
-        }
-        const confirmCartRes = await confirmCart(payment.orderid, credomaticData)
-        if (confirmCartRes.error) {
-          showToast(ToastType.Error, confirmCartRes.error.message)
-        }
-        if (confirmCartRes.result.order?.uuid) {
-          onNavigationRedirect?.('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
-        }
-      }
-
-      if (payment === 'api error' || payment === 'Cancelled by user') {
-        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 })
-        }
-        setProg(true);
-        setShowGateway({ closedByUser: false, open: false })
-      }
-    }
-  }
-
-  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
-        }}>
-        {title || (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}
-        originWhitelist={["*"]}
-        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,
-              ...additionalParams
-            }
-          }
-          setProg(false);
-          webviewRef?.current?.postMessage?.(JSON.stringify(message))
-        }}
-      />
-    </View>
-  )
-}
+import React, { useRef, useState } from 'react'
+import { View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import WebView from 'react-native-webview';
+import { ActivityIndicator } from 'react-native-paper';
+
+import {
+  ToastType,
+  useToast,
+  useApi,
+  useLanguage,
+  useConfig,
+  useOrder
+} 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,
+  additionalParams?: any
+  title?: string
+}
+export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
+  const {
+    onNavigationRedirect,
+    uri,
+    user,
+    token,
+    cart,
+    currency,
+    webviewPaymethod,
+    setShowGateway,
+    setOpenOrderCreating,
+    locationId,
+    title,
+    additionalParams = {}
+  } = props
+
+  const webviewRef = useRef<any>(null)
+  const [, { showToast }] = useToast();
+  const [ordering] = useApi()
+  const [{ configs }] = useConfig();
+  const [, t] = useLanguage();
+  const [, { confirmCart }] = useOrder()
+
+  const [progClr, setProgClr] = useState('#424242');
+  const [prog, setProg] = useState(true);
+
+  const handleCloseWebview = () => {
+    setProg(true);
+    setShowGateway({ open: false, closedByUser: true })
+  }
+
+  const onMessage = async (e: any) => {
+    if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
+      let payment = JSON.parse(e.nativeEvent.data);
+      if (payment?.response && payment?.responsetext && payment.orderid) {
+        const credomaticData = {
+          credomatic: {
+            ...payment
+          }
+        }
+        const confirmCartRes = await confirmCart(payment.orderid, credomaticData)
+        if (confirmCartRes.error) {
+          showToast(ToastType.Error, confirmCartRes.error.message)
+        }
+        if (confirmCartRes.result.order?.uuid) {
+          onNavigationRedirect?.('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
+        }
+      }
+
+      if (payment === 'api error' || payment === 'Cancelled by user') {
+        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 })
+        }
+        setProg(true);
+        setShowGateway({ closedByUser: false, open: false })
+      }
+    }
+  }
+
+  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
+        }}>
+        {title || (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}
+        originWhitelist={["*"]}
+        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,
+              ...additionalParams
+            }
+          }
+          setProg(false);
+          webviewRef?.current?.postMessage?.(JSON.stringify(message))
+        }}
+      />
+    </View>
+  )
+}

package/src/components/PhoneInputNumber/index.tsx

@@ -1,115 +1,115 @@
-import React, { useEffect, useRef, useState } from 'react';
-import PhoneInput from "react-native-phone-number-input";
-import { StyleSheet } from 'react-native';
-import { useLanguage, useConfig } from 'ordering-components/native';
-
-import { Wrapper } from './styles'
-
-import { PhoneInputParams } from '../../types';
-import { OText } from '../shared';
-import {transformCountryCode, verifyCountryCode} from '../../utils'
-import {I18nManager} from 'react-native'
-import { useTheme } from 'styled-components/native';
-
-export const PhoneInputNumber = (props: PhoneInputParams) => {
-  const {
-    data,
-    handleData,
-    defaultValue,
-    defaultCode,
-    forwardRef,
-    textInputProps
-  } = props
-
-  const theme = useTheme();
-
-  const style = StyleSheet.create({
-    input: {
-      backgroundColor: theme.colors.white,
-      borderRadius: 25,
-      borderWidth: 1,
-      borderColor: theme.colors.disabled,
-      paddingVertical: 0,
-      flexGrow: 1,
-      flex: 1,
-      height: 50,
-    }
-  })
-
-  const [, t] = useLanguage()
-  const [{ configs }] = useConfig()
-  const phoneInput = useRef<PhoneInput>(null);
-  const [userphoneNumber, setUserphoneNumber] = useState('');
-
-  const handleChangeNumber = (number: any) => {
-    setUserphoneNumber(number)
-  }
-
-  useEffect(() => {
-    if((defaultValue && userphoneNumber) || !defaultValue){
-     if (userphoneNumber === '') return;
-      if (userphoneNumber) {
-        const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
-        const callingCode = phoneInput.current?.getCallingCode();
-        const formattedNumber = phoneInput.current?.getNumberAfterPossiblyEliminatingZero();
-        const regex = /^[0-9]*$/
-        const cellphone = userphoneNumber.slice(0, 0) + userphoneNumber.slice(1, userphoneNumber.length)
-        const validNumber = regex.test(cellphone)
-        if ((!checkValid && formattedNumber?.number) || !validNumber) {
-          handleData && handleData({
-            ...data,
-            error: t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')
-          })
-          return
-        }
-        handleData && handleData({
-          ...data,
-          error: '',
-          phone: {
-            country_phone_code: callingCode,
-            cellphone: formattedNumber?.number
-          }
-        })
-      } else {
-        handleData && handleData({
-          ...data,
-          error: '',
-          phone: {
-            country_phone_code: null,
-            cellphone: null
-          }
-        })
-      }
-    }
-  }, [userphoneNumber])
-
-  return (
-    <Wrapper>
-      <PhoneInput
-        ref={phoneInput}
-        defaultValue={userphoneNumber || defaultValue}
-        defaultCode={defaultCode ?
-					!isNaN(defaultCode)
-						? transformCountryCode(defaultCode)
-						: verifyCountryCode(defaultCode)
-					: verifyCountryCode(configs?.default_country_code?.value)}
-        onChangeFormattedText={(text : string) => handleChangeNumber(text)}
-        withDarkTheme
-        textInputStyle={{textAlign: I18nManager.isRTL ? 'right' : 'left'}}
-        countryPickerProps={{withAlphaFilter:true}}
-        textContainerStyle={style.input}
-        placeholder={t('PHONE_NUMBER', 'Phone Number')}
-        textInputProps={{autoCompleteType: 'tel', ref: forwardRef, ...textInputProps}}
-      />
-      {!!data?.error && (
-        <OText
-          size={16}
-          color={theme.colors.error}
-          style={{ textAlign: 'center', marginTop: 5 }}
-          >
-          {data.error}
-        </OText>
-      )}
-    </Wrapper>
-  )
-}
+import React, { useEffect, useRef, useState } from 'react';
+import PhoneInput from "react-native-phone-number-input";
+import { StyleSheet } from 'react-native';
+import { useLanguage, useConfig } from 'ordering-components/native';
+
+import { Wrapper } from './styles'
+
+import { PhoneInputParams } from '../../types';
+import { OText } from '../shared';
+import {transformCountryCode, verifyCountryCode} from '../../utils'
+import {I18nManager} from 'react-native'
+import { useTheme } from 'styled-components/native';
+
+export const PhoneInputNumber = (props: PhoneInputParams) => {
+  const {
+    data,
+    handleData,
+    defaultValue,
+    defaultCode,
+    forwardRef,
+    textInputProps
+  } = props
+
+  const theme = useTheme();
+
+  const style = StyleSheet.create({
+    input: {
+      backgroundColor: theme.colors.white,
+      borderRadius: 25,
+      borderWidth: 1,
+      borderColor: theme.colors.disabled,
+      paddingVertical: 0,
+      flexGrow: 1,
+      flex: 1,
+      height: 50,
+    }
+  })
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const phoneInput = useRef<PhoneInput>(null);
+  const [userphoneNumber, setUserphoneNumber] = useState('');
+
+  const handleChangeNumber = (number: any) => {
+    setUserphoneNumber(number)
+  }
+
+  useEffect(() => {
+    if((defaultValue && userphoneNumber) || !defaultValue){
+     if (userphoneNumber === '') return;
+      if (userphoneNumber) {
+        const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
+        const callingCode = phoneInput.current?.getCallingCode();
+        const formattedNumber = phoneInput.current?.getNumberAfterPossiblyEliminatingZero();
+        const regex = /^[0-9]*$/
+        const cellphone = userphoneNumber.slice(0, 0) + userphoneNumber.slice(1, userphoneNumber.length)
+        const validNumber = regex.test(cellphone)
+        if ((!checkValid && formattedNumber?.number) || !validNumber) {
+          handleData && handleData({
+            ...data,
+            error: t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')
+          })
+          return
+        }
+        handleData && handleData({
+          ...data,
+          error: '',
+          phone: {
+            country_phone_code: callingCode,
+            cellphone: formattedNumber?.number
+          }
+        })
+      } else {
+        handleData && handleData({
+          ...data,
+          error: '',
+          phone: {
+            country_phone_code: null,
+            cellphone: null
+          }
+        })
+      }
+    }
+  }, [userphoneNumber])
+
+  return (
+    <Wrapper>
+      <PhoneInput
+        ref={phoneInput}
+        defaultValue={userphoneNumber || defaultValue}
+        defaultCode={defaultCode ?
+					!isNaN(defaultCode)
+						? transformCountryCode(defaultCode)
+						: verifyCountryCode(defaultCode)
+					: verifyCountryCode(configs?.default_country_code?.value)}
+        onChangeFormattedText={(text : string) => handleChangeNumber(text)}
+        withDarkTheme
+        textInputStyle={{textAlign: I18nManager.isRTL ? 'right' : 'left'}}
+        countryPickerProps={{withAlphaFilter:true}}
+        textContainerStyle={style.input}
+        placeholder={t('PHONE_NUMBER', 'Phone Number')}
+        textInputProps={{autoCompleteType: 'tel', ref: forwardRef, ...textInputProps}}
+      />
+      {!!data?.error && (
+        <OText
+          size={16}
+          color={theme.colors.error}
+          style={{ textAlign: 'center', marginTop: 5 }}
+          >
+          {data.error}
+        </OText>
+      )}
+    </Wrapper>
+  )
+}