ordering-ui-react-native 0.14.13 → 0.14.17

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

@@ -1,277 +1,277 @@
-import React, { useEffect, useState } from 'react';
-import { View } from 'react-native';
-import { useTheme } from 'styled-components/native';
-
-import {
-  PaymentOptions as PaymentOptionsController,
-  useLanguage,
-  ToastType,
-  useToast
-} from 'ordering-components/native';
-
-
-import { OText } from '../shared';
-
-import NavBar from '../NavBar';
-import { Container } from '../../layouts/Container';
-import OptionCard from '../OptionCard';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
-import GridContainer from '../../layouts/GridContainer';
-import { OModal, PaymentOptionStripe } from '../../../../../src';
-
-const PaymentOptionsUI = (props: any) => {
-  const {
-    cart,
-    onNavigationRedirect,
-    isDisabled,
-    paymethodData,
-    handlePaymethodDataChange,
-    errorCash,
-    isLoading,
-    paymethodsList,
-    setPaymethodData,
-    handlePaymethodClick,
-    isOpenMethod,
-    navigation,
-    handlerClickPlaceOrder,
-    placing,
-    errors,
-    paySelected,
-  } = props;
-
-  const theme = useTheme();
-  const [, {showToast}] = useToast();
-  const [, t] = useLanguage();
-  const [orientationState] = useDeviceOrientation();
-  const [userErrors, setUserErrors] = useState<any>([]);
-  const [isOpenModal, setIsOpenModal] = useState(false)
-  const paymethodSelected =
-    paySelected || props.paymethodSelected || isOpenMethod.paymethod;
-
-  useEffect(() => {
-    if (paymethodsList.paymethods.length === 1) {
-      handlePaymethodClick &&
-        handlePaymethodClick(paymethodsList.paymethods[0]);
-    }
-  }, [paymethodsList.paymethods]);
-
-  useEffect(() => {
-    if (paymethodSelected?.gateway !== 'cash' && errorCash) {
-      props.setErrorCash(false);
-    }
-  }, [paymethodSelected]);
-
-  useEffect(() => {
-    if (props.paySelected && props.paySelected?.data) {
-      setPaymethodData && setPaymethodData(props.paySelected?.data);
-    }
-  }, [paySelected]);
-
-  useEffect(() => {
-    if (
-      !errors &&
-      !errorCash &&
-      isOpenMethod?.paymethod &&
-      !placing &&
-      !isLoading &&
-      paySelected &&
-      paySelected?.gateway !== 'stripe'
-    ) {
-      handlePlaceOrder();
-      return;
-    }
-  }, [isOpenMethod.paymethod, placing, isLoading, paySelected]);
-
-  // const includePaymethods = ['cash', 'card_delivery', 'stripe'];
-  const includePaymethods = ['cash', 'card_delivery'];
-
-  const supportedMethods = paymethodsList.paymethods.filter((p: any) =>
-    includePaymethods.includes(p.gateway),
-  );
-
-  const cashIndex: number = supportedMethods?.findIndex(
-    (item: any) => item?.gateway === 'cash',
-  );
-  const cardOnDeliveryIndex = supportedMethods?.findIndex(
-    (item: any) => item?.gateway === 'card_delivery',
-  );
-  const stripeIndex = supportedMethods?.findIndex(
-    (item: any) => item?.gateway === 'stripe',
-  );
-  const onSelectPaymethod = (paymethod: any, isPopupMethod: boolean) => {
-    handlePaymethodClick(paymethod);
-  };
-
-  const handlePlaceOrder = () => {
-    if (!userErrors.length) {
-      handlerClickPlaceOrder && handlerClickPlaceOrder();
-      return;
-    }
-    let stringError = '';
-    Object.values(userErrors).map((item: any, i: number) => {
-      stringError +=
-        i + 1 === userErrors.length
-          ? `- ${item?.message || item}`
-          : `- ${item?.message || item}\n`;
-    });
-
-    showToast(ToastType.Error, stringError);
-  };
-
-  const cardStyle = {
-    width:
-      orientationState?.orientation === PORTRAIT
-        ? orientationState?.dimensions?.width - 40
-        : orientationState?.dimensions?.width * 0.47,
-    height:
-      orientationState?.orientation === PORTRAIT
-        ? orientationState?.dimensions?.height * 0.34
-        : orientationState?.dimensions?.height * 0.55,
-  };
-
-  const propsOfItems = {
-    CASH_ID:
-      cashIndex !== -1
-        ? {
-            style: cardStyle,
-            title: t('CASH', 'Cash'),
-            description: t(
-              'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
-              'Pay with cash in the front counter',
-            ),
-            bgImage: theme.images.general.cash,
-            icon: theme.images.general.shoppingCart,
-            callToActionText: t('LETS_GO', 'LETS_GO'),
-            onClick: () =>
-              onSelectPaymethod(supportedMethods[cashIndex], false),
-            ...supportedMethods[cashIndex],
-          }
-        : null,
-
-    CARD_ON_DELIVERY_ID:
-      cardOnDeliveryIndex !== -1
-        ? {
-            style: cardStyle,
-            title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
-            description: t(
-              'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
-              'We accept every debit or credit card',
-            ),
-            bgImage: theme.images.general.carddelivery,
-            icon: theme.images.general.pushPin,
-            callToActionText: t("LETS_GO", "Let's go"),
-            onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
-            ...supportedMethods[cardOnDeliveryIndex],
-          }
-        : null,
-    STRIPE:
-      stripeIndex !== -1
-        ? {
-            style: cardStyle,
-            title: t('STRIPE', supportedMethods[stripeIndex]?.name),
-            description: t('STRIPE', 'Stripe'),
-            bgImage: theme.images.general.carddelivery,
-            icon: theme.images.general.pushPin,
-            callToActionText: t('INSERT_INFO', 'Test info'),
-            onClick: () => {
-              onSelectPaymethod(supportedMethods[stripeIndex], false);
-              setIsOpenModal(true)
-            },
-            ...supportedMethods[stripeIndex],
-          }
-        : null,
-  };
-
-  const goToBack = () => navigation?.goBack();
-
-  return (
-    <>
-      <Spinner visible={isLoading || placing} />
-
-      <Container nestedScrollEnabled>
-        <NavBar
-          title={t('PAYMENT_METHODS', 'Payment methods')}
-          onActionLeft={goToBack}
-          btnStyle={{paddingLeft: 0}}
-        />
-
-        <View
-          style={{marginVertical: orientationState?.dimensions?.height * 0.03}}>
-          <OText size={orientationState?.dimensions?.width * 0.048}>
-            {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
-            <OText
-              size={orientationState?.dimensions?.width * 0.048}
-              weight={'700'}>
-              {`${t('LIKE_TO_PAY', 'like to pay')}?`}
-            </OText>
-          </OText>
-        </View>
-
-        {supportedMethods?.length > 0 && (
-          <GridContainer style={{justifyContent: 'space-between'}}>
-            {propsOfItems.CARD_ON_DELIVERY_ID && (
-              <View style={{marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0}}>
-                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke/>
-              </View>
-            )}
-
-            <View
-              style={{
-                width:
-                  orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.0016
-                    : 1,
-                height:
-                  orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions?.height * 0.018
-                    : 1,
-              }}
-            />
-
-            {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
-
-            <View
-              style={{
-                width:
-                  orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.0016
-                    : 1,
-                height:
-                  orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions?.height * 0.018
-                    : 1,
-              }}
-            />
-
-            {propsOfItems.STRIPE && (
-              <OptionCard {...propsOfItems?.STRIPE} />
-            )}
-          </GridContainer>
-        )}
-        <View style={{height: orientationState?.dimensions?.height * 0.05}} />
-        <OModal
-          open={isOpenModal}
-          onClose={() => setIsOpenModal(false)}
-          onCancel={() => setIsOpenModal(false)}
-          entireModal
-          customClose
-        >
-          <PaymentOptionStripe
-            {...props}
-            onClose={() => setIsOpenModal(false)}
-          />
-        </OModal>
-      </Container>
-    </>
-  );
-};
-
-export const PaymentOptions = (props: any) => {
-  const paymentOptions = {
-    ...props,
-    UIComponent: PaymentOptionsUI,
-  };
-  return <PaymentOptionsController {...paymentOptions} />;
-};
-
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { useTheme } from 'styled-components/native';
+
+import {
+  PaymentOptions as PaymentOptionsController,
+  useLanguage,
+  ToastType,
+  useToast
+} from 'ordering-components/native';
+
+
+import { OText } from '../shared';
+
+import NavBar from '../NavBar';
+import { Container } from '../../layouts/Container';
+import OptionCard from '../OptionCard';
+import Spinner from 'react-native-loading-spinner-overlay';
+import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import GridContainer from '../../layouts/GridContainer';
+import { OModal, PaymentOptionStripe } from '../../../../../src';
+
+const PaymentOptionsUI = (props: any) => {
+  const {
+    cart,
+    onNavigationRedirect,
+    isDisabled,
+    paymethodData,
+    handlePaymethodDataChange,
+    errorCash,
+    isLoading,
+    paymethodsList,
+    setPaymethodData,
+    handlePaymethodClick,
+    isOpenMethod,
+    navigation,
+    handlerClickPlaceOrder,
+    placing,
+    errors,
+    paySelected,
+  } = props;
+
+  const theme = useTheme();
+  const [, {showToast}] = useToast();
+  const [, t] = useLanguage();
+  const [orientationState] = useDeviceOrientation();
+  const [userErrors, setUserErrors] = useState<any>([]);
+  const [isOpenModal, setIsOpenModal] = useState(false)
+  const paymethodSelected =
+    paySelected || props.paymethodSelected || isOpenMethod.paymethod;
+
+  useEffect(() => {
+    if (paymethodsList.paymethods.length === 1) {
+      handlePaymethodClick &&
+        handlePaymethodClick(paymethodsList.paymethods[0]);
+    }
+  }, [paymethodsList.paymethods]);
+
+  useEffect(() => {
+    if (paymethodSelected?.gateway !== 'cash' && errorCash) {
+      props.setErrorCash(false);
+    }
+  }, [paymethodSelected]);
+
+  useEffect(() => {
+    if (props.paySelected && props.paySelected?.data) {
+      setPaymethodData && setPaymethodData(props.paySelected?.data);
+    }
+  }, [paySelected]);
+
+  useEffect(() => {
+    if (
+      !errors &&
+      !errorCash &&
+      isOpenMethod?.paymethod &&
+      !placing &&
+      !isLoading &&
+      paySelected &&
+      paySelected?.gateway !== 'stripe'
+    ) {
+      handlePlaceOrder();
+      return;
+    }
+  }, [isOpenMethod.paymethod, placing, isLoading, paySelected]);
+
+  // const includePaymethods = ['cash', 'card_delivery', 'stripe'];
+  const includePaymethods = ['cash', 'card_delivery'];
+
+  const supportedMethods = paymethodsList.paymethods.filter((p: any) =>
+    includePaymethods.includes(p.gateway),
+  );
+
+  const cashIndex: number = supportedMethods?.findIndex(
+    (item: any) => item?.gateway === 'cash',
+  );
+  const cardOnDeliveryIndex = supportedMethods?.findIndex(
+    (item: any) => item?.gateway === 'card_delivery',
+  );
+  const stripeIndex = supportedMethods?.findIndex(
+    (item: any) => item?.gateway === 'stripe',
+  );
+  const onSelectPaymethod = (paymethod: any, isPopupMethod: boolean) => {
+    handlePaymethodClick(paymethod);
+  };
+
+  const handlePlaceOrder = () => {
+    if (!userErrors.length) {
+      handlerClickPlaceOrder && handlerClickPlaceOrder();
+      return;
+    }
+    let stringError = '';
+    Object.values(userErrors).map((item: any, i: number) => {
+      stringError +=
+        i + 1 === userErrors.length
+          ? `- ${item?.message || item}`
+          : `- ${item?.message || item}\n`;
+    });
+
+    showToast(ToastType.Error, stringError);
+  };
+
+  const cardStyle = {
+    width:
+      orientationState?.orientation === PORTRAIT
+        ? orientationState?.dimensions?.width - 40
+        : orientationState?.dimensions?.width * 0.47,
+    height:
+      orientationState?.orientation === PORTRAIT
+        ? orientationState?.dimensions?.height * 0.34
+        : orientationState?.dimensions?.height * 0.55,
+  };
+
+  const propsOfItems = {
+    CASH_ID:
+      cashIndex !== -1
+        ? {
+            style: cardStyle,
+            title: t('CASH', 'Cash'),
+            description: t(
+              'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
+              'Pay with cash in the front counter',
+            ),
+            bgImage: theme.images.general.cash,
+            icon: theme.images.general.shoppingCart,
+            callToActionText: t('LETS_GO', 'LETS_GO'),
+            onClick: () =>
+              onSelectPaymethod(supportedMethods[cashIndex], false),
+            ...supportedMethods[cashIndex],
+          }
+        : null,
+
+    CARD_ON_DELIVERY_ID:
+      cardOnDeliveryIndex !== -1
+        ? {
+            style: cardStyle,
+            title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
+            description: t(
+              'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
+              'We accept every debit or credit card',
+            ),
+            bgImage: theme.images.general.carddelivery,
+            icon: theme.images.general.pushPin,
+            callToActionText: t("LETS_GO", "Let's go"),
+            onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
+            ...supportedMethods[cardOnDeliveryIndex],
+          }
+        : null,
+    STRIPE:
+      stripeIndex !== -1
+        ? {
+            style: cardStyle,
+            title: t('STRIPE', supportedMethods[stripeIndex]?.name),
+            description: t('STRIPE', 'Stripe'),
+            bgImage: theme.images.general.carddelivery,
+            icon: theme.images.general.pushPin,
+            callToActionText: t('INSERT_INFO', 'Test info'),
+            onClick: () => {
+              onSelectPaymethod(supportedMethods[stripeIndex], false);
+              setIsOpenModal(true)
+            },
+            ...supportedMethods[stripeIndex],
+          }
+        : null,
+  };
+
+  const goToBack = () => navigation?.goBack();
+
+  return (
+    <>
+      <Spinner visible={isLoading || placing} />
+
+      <Container nestedScrollEnabled>
+        <NavBar
+          title={t('PAYMENT_METHODS', 'Payment methods')}
+          onActionLeft={goToBack}
+          btnStyle={{paddingLeft: 0}}
+        />
+
+        <View
+          style={{marginVertical: orientationState?.dimensions?.height * 0.03}}>
+          <OText size={orientationState?.dimensions?.width * 0.048}>
+            {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
+            <OText
+              size={orientationState?.dimensions?.width * 0.048}
+              weight={'700'}>
+              {`${t('LIKE_TO_PAY', 'like to pay')}?`}
+            </OText>
+          </OText>
+        </View>
+
+        {supportedMethods?.length > 0 && (
+          <GridContainer style={{justifyContent: 'space-between'}}>
+            {propsOfItems.CARD_ON_DELIVERY_ID && (
+              <View style={{marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0}}>
+                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke/>
+              </View>
+            )}
+
+            <View
+              style={{
+                width:
+                  orientationState?.orientation === LANDSCAPE
+                    ? orientationState?.dimensions?.width * 0.0016
+                    : 1,
+                height:
+                  orientationState?.orientation === PORTRAIT
+                    ? orientationState?.dimensions?.height * 0.018
+                    : 1,
+              }}
+            />
+
+            {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+
+            <View
+              style={{
+                width:
+                  orientationState?.orientation === LANDSCAPE
+                    ? orientationState?.dimensions?.width * 0.0016
+                    : 1,
+                height:
+                  orientationState?.orientation === PORTRAIT
+                    ? orientationState?.dimensions?.height * 0.018
+                    : 1,
+              }}
+            />
+
+            {propsOfItems.STRIPE && (
+              <OptionCard {...propsOfItems?.STRIPE} />
+            )}
+          </GridContainer>
+        )}
+        <View style={{height: orientationState?.dimensions?.height * 0.05}} />
+        <OModal
+          open={isOpenModal}
+          onClose={() => setIsOpenModal(false)}
+          onCancel={() => setIsOpenModal(false)}
+          entireModal
+          customClose
+        >
+          <PaymentOptionStripe
+            {...props}
+            onClose={() => setIsOpenModal(false)}
+          />
+        </OModal>
+      </Container>
+    </>
+  );
+};
+
+export const PaymentOptions = (props: any) => {
+  const paymentOptions = {
+    ...props,
+    UIComponent: PaymentOptionsUI,
+  };
+  return <PaymentOptionsController {...paymentOptions} />;
+};
+

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

@@ -1,55 +1,55 @@
-import styled, { css } from 'styled-components/native';
-
-export const PMContainer = styled.View`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`
-
-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.isDisabled && css`
-    pointer-events: none;
-  `} */
-
-  ${(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;
+`
+
+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.isDisabled && css`
+    pointer-events: none;
+  `} */
+
+  ${(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;
+`