ordering-ui-react-native 0.11.56 → 0.11.57

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

@@ -1,138 +1,138 @@
-import React, { useEffect } from 'react';
-import { StyleSheet, Alert } from 'react-native';
-import { CouponControl as CouponController, useLanguage } from 'ordering-components/native';
-
-import {
-  CContainer,
-  CCWrapper,
-  CCButton
-} from './styles';
-
-import { OInput, OButton, OAlert, OText } from '../shared';
-import { useTheme } from 'styled-components/native';
-
-const CouponControlUI = (props: any) => {
-  const {
-    couponDefault,
-    couponInput,
-    handleButtonApplyClick,
-    handleRemoveCouponClick,
-    onChangeInputCoupon,
-    confirm,
-    setConfirm
-  } = props
-
-  const theme = useTheme()
-  const [, t] = useLanguage()
-
-  const styles = StyleSheet.create({
-    inputsStyle: {
-      borderColor: theme.colors.disabled,
-      borderBottomRightRadius: 0,
-      borderBottomLeftRadius: 8,
-      borderTopRightRadius: 0,
-      borderTopLeftRadius: 8,
-      flex: 1,
-      height: 52
-    },
-    buttonApplyStyle: {
-      borderBottomRightRadius: 8,
-      borderBottomLeftRadius: 0,
-      borderTopRightRadius: 8,
-      borderTopLeftRadius: 0,
-    },
-    textButtonApplyStyle: {
-      color: theme.colors.primary,
-      marginLeft: 0,
-      marginRight: 0
-    },
-    disabledTextButtonApplyStyle: {
-      color: theme.colors.white,
-      marginLeft: 0,
-      marginRight: 0
-    }
-  });
-
-  const handleOnAccept = () => {
-    if (!confirm.error) {
-      handleRemoveCouponClick && handleRemoveCouponClick()
-    }
-    onChangeInputCoupon('')
-  }
-
-  const cleanSetConfirm = () => {
-    setConfirm({ ...confirm, open: false, error: false })
-  }
-
-  useEffect(() => {
-    if (confirm.content) {
-      Alert.alert(
-        t('COUPON_ERROR', 'Coupon Error'),
-        confirm.content[0],
-        [
-          {
-            text: t('CANCEL', 'cancel'),
-            onPress: () => cleanSetConfirm(),
-            style: 'cancel'
-          },
-          {
-            text: t('ACCEPT', 'Accept'),
-            onPress: () => cleanSetConfirm()
-          }
-        ],
-        { cancelable: false }
-      )
-    }
-  }, [confirm])
-
-  return (
-    <CContainer>
-      {couponDefault ? (
-        <OAlert
-          title={t('REMOVE_COUPON', 'Remove Coupon')}
-          message={t('QUESTION_DELETE_COUPON', 'Are you sure that you want to delete the coupon?')}
-          onAccept={() => handleOnAccept()}
-        >
-          <CCButton>
-            <OText
-              size={16}
-              color={theme.colors.white}
-              style={{ textAlign: 'center' }}
-            >
-              {`${t('REMOVE_COUPON', 'Remove Coupon')} ${couponDefault}`}
-            </OText>
-          </CCButton>
-        </OAlert>
-      ) : (
-        <CCWrapper>
-          <OInput
-            placeholder={t('HAVE_PROMO_CODE', 'Do you have a promo code?')}
-            onChange={(e: any) => onChangeInputCoupon(e)}
-            style={styles.inputsStyle}
-          />
-          <OButton
-            onClick={() => handleButtonApplyClick()}
-            bgColor={theme.colors.primaryLight}
-            borderColor={theme.colors.primaryLight}
-            textStyle={styles.textButtonApplyStyle}
-            disabledTextStyle={styles.disabledTextButtonApplyStyle}
-            style={styles.buttonApplyStyle}
-            imgRightSrc={null}
-            text={t('APPLY', 'Apply')}
-            isDisabled={!couponInput}
-          />
-        </CCWrapper>
-      )}
-    </CContainer>
-  )
-}
-
-export const CouponControl = (props: any) => {
-  const couponProp = {
-    ...props,
-    UIComponent: CouponControlUI
-  }
-  return (
-    <CouponController {...couponProp} />
-  )
-}
+import React, { useEffect } from 'react';
+import { StyleSheet, Alert } from 'react-native';
+import { CouponControl as CouponController, useLanguage } from 'ordering-components/native';
+
+import {
+  CContainer,
+  CCWrapper,
+  CCButton
+} from './styles';
+
+import { OInput, OButton, OAlert, OText } from '../shared';
+import { useTheme } from 'styled-components/native';
+
+const CouponControlUI = (props: any) => {
+  const {
+    couponDefault,
+    couponInput,
+    handleButtonApplyClick,
+    handleRemoveCouponClick,
+    onChangeInputCoupon,
+    confirm,
+    setConfirm
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const styles = StyleSheet.create({
+    inputsStyle: {
+      borderColor: theme.colors.disabled,
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 8,
+      borderTopRightRadius: 0,
+      borderTopLeftRadius: 8,
+      flex: 1,
+      height: 52
+    },
+    buttonApplyStyle: {
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 0,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 0,
+    },
+    textButtonApplyStyle: {
+      color: theme.colors.primary,
+      marginLeft: 0,
+      marginRight: 0
+    },
+    disabledTextButtonApplyStyle: {
+      color: theme.colors.white,
+      marginLeft: 0,
+      marginRight: 0
+    }
+  });
+
+  const handleOnAccept = () => {
+    if (!confirm.error) {
+      handleRemoveCouponClick && handleRemoveCouponClick()
+    }
+    onChangeInputCoupon('')
+  }
+
+  const cleanSetConfirm = () => {
+    setConfirm({ ...confirm, open: false, error: false })
+  }
+
+  useEffect(() => {
+    if (confirm.content) {
+      Alert.alert(
+        t('COUPON_ERROR', 'Coupon Error'),
+        confirm.content[0],
+        [
+          {
+            text: t('CANCEL', 'cancel'),
+            onPress: () => cleanSetConfirm(),
+            style: 'cancel'
+          },
+          {
+            text: t('ACCEPT', 'Accept'),
+            onPress: () => cleanSetConfirm()
+          }
+        ],
+        { cancelable: false }
+      )
+    }
+  }, [confirm])
+
+  return (
+    <CContainer>
+      {couponDefault ? (
+        <OAlert
+          title={t('REMOVE_COUPON', 'Remove Coupon')}
+          message={t('QUESTION_DELETE_COUPON', 'Are you sure that you want to delete the coupon?')}
+          onAccept={() => handleOnAccept()}
+        >
+          <CCButton>
+            <OText
+              size={16}
+              color={theme.colors.white}
+              style={{ textAlign: 'center' }}
+            >
+              {`${t('REMOVE_COUPON', 'Remove Coupon')} ${couponDefault}`}
+            </OText>
+          </CCButton>
+        </OAlert>
+      ) : (
+        <CCWrapper>
+          <OInput
+            placeholder={t('HAVE_PROMO_CODE', 'Do you have a promo code?')}
+            onChange={(e: any) => onChangeInputCoupon(e)}
+            style={styles.inputsStyle}
+          />
+          <OButton
+            onClick={() => handleButtonApplyClick()}
+            bgColor={theme.colors.primaryLight}
+            borderColor={theme.colors.primaryLight}
+            textStyle={styles.textButtonApplyStyle}
+            disabledTextStyle={styles.disabledTextButtonApplyStyle}
+            style={styles.buttonApplyStyle}
+            imgRightSrc={null}
+            text={t('APPLY', 'Apply')}
+            isDisabled={!couponInput}
+          />
+        </CCWrapper>
+      )}
+    </CContainer>
+  )
+}
+
+export const CouponControl = (props: any) => {
+  const couponProp = {
+    ...props,
+    UIComponent: CouponControlUI
+  }
+  return (
+    <CouponController {...couponProp} />
+  )
+}

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

@@ -1,22 +1,22 @@
-import styled from 'styled-components/native';
-
-export const CContainer = styled.View`
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-  padding: 5px 0px;
-`
-
-export const CCWrapper = styled.View`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-`
-
-export const CCButton = styled.View`
-  width: 100%;
-  background-color: ${(props: any) => props.theme.colors.backgroundGray};
-  padding: 10px;
-  border-radius: 50px;
-`
+import styled from 'styled-components/native';
+
+export const CContainer = styled.View`
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 5px 0px;
+`
+
+export const CCWrapper = styled.View`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`
+
+export const CCButton = styled.View`
+  width: 100%;
+  background-color: ${(props: any) => props.theme.colors.backgroundGray};
+  padding: 10px;
+  border-radius: 50px;
+`

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

@@ -1,144 +1,144 @@
-import React, { useEffect } from 'react';
-import { useLanguage, ToastType, useToast } from 'ordering-components/native';
-import { _setStoreData } from '../../../../../src/providers/StoreUtil';
-
-import { OButton, OInput, OText } from '../shared';
-import { useForm, Controller } from 'react-hook-form';
-import { StyleSheet, View } from 'react-native';
-import { Container } from '../../layouts/Container';
-import NavBar from '../NavBar';
-import { OSActions } from '../OrderDetails/styles';
-import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
-import { useTheme } from 'styled-components/native';
-
-const CustomerName = (props: Props): React.ReactElement => {
-  const {
-    navigation,
-    onProceedToPay
-  } = props;
-
-  const theme = useTheme()
-  const [, t] = useLanguage();
-  const { control, handleSubmit, errors } = useForm();
-  const [, { showToast }] = useToast();
-  const [orientationState] = useDeviceOrientation();
-
-  const onSubmit = (values: any) => {
-    _setStoreData('customer_name', {customerName: values.name});
-    onProceedToPay()
-  };
-
-  const styles = StyleSheet.create({
-    inputStyle: {
-      borderRadius: 4,
-      marginBottom: 20,
-      borderWidth: 1,
-      borderColor: theme.colors.disabled,
-      height: 44
-    },
-  });
-
-  useEffect(() => {
-    if (Object.keys(errors)?.length > 0) {
-      // Convert all errors in one string to show in toast provider
-      const list = Object.values(errors);
-      let stringError = '';
-      list.map((item: any, i: number) => {
-        stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
-      });
-      showToast(ToastType.Error, stringError);
-    }
-  }, [errors]);
-
-  const goToBack = () => navigation?.goBack();
-
-  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
-    }}
-    style={{
-      width: orientationState?.orientation === PORTRAIT
-        ? orientationState?.dimensions.width - 40
-        : orientationState?.dimensions.width * 0.5,
-    }}
-  />);
-
-  return (
-    <>
-      <Container>
-        <NavBar
-          title={t('YOUR_NAME', 'Your name')}
-          onActionLeft={goToBack}
-          btnStyle={{paddingLeft: 0}}
-        />
-
-        <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
-          <OText
-            size={orientationState?.dimensions?.width * 0.05}
-          >
-            {t('WHOM_MIGHT_THIS', 'Whom might this')} {'\n'}
-            <OText
-              size={orientationState?.dimensions?.width * 0.05}
-              weight={'700'}
-            >
-              {`${t('ORDER_BE_FOR', 'order be for?')}`}
-            </OText>
-          </OText>
-        </View>
-
-        <Controller
-          control={control}
-          render={({ onChange, value }: any) => (
-            <OInput
-              placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
-              style={{
-                ...styles.inputStyle,
-                width: orientationState?.orientation === PORTRAIT
-                  ? orientationState?.dimensions.width - 40
-                  : orientationState?.dimensions.width * 0.5,
-              }}
-              value={value}
-              autoCapitalize="words"
-              autoCorrect={false}
-              onChange={(val: any) => onChange(val)}
-            />
-          )}
-          name="name"
-          rules={{
-            required: t(
-              'VALIDATION_ERROR_REQUIRED',
-              'The field Customer Name is required',
-            ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
-            pattern: {
-              value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
-              message: t(
-                'INVALID_ERROR',
-                'Invalid name',
-              ).replace('_attribute_', t('NAME', 'Name')),
-            }
-          }}
-          defaultValue=""
-        />
-
-        {orientationState?.orientation === LANDSCAPE && submitButton}
-      </Container>
-
-      {(orientationState?.orientation === PORTRAIT) && (
-        <OSActions>
-          {submitButton}
-        </OSActions>
-      )}
-    </>
-  );
-};
-
-interface Props {
-  navigation: any;
-  onProceedToPay: any;
-}
-
-export default CustomerName;
+import React, { useEffect } from 'react';
+import { useLanguage, ToastType, useToast } from 'ordering-components/native';
+import { _setStoreData } from '../../../../../src/providers/StoreUtil';
+
+import { OButton, OInput, OText } from '../shared';
+import { useForm, Controller } from 'react-hook-form';
+import { StyleSheet, View } from 'react-native';
+import { Container } from '../../layouts/Container';
+import NavBar from '../NavBar';
+import { OSActions } from '../OrderDetails/styles';
+import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import { useTheme } from 'styled-components/native';
+
+const CustomerName = (props: Props): React.ReactElement => {
+  const {
+    navigation,
+    onProceedToPay
+  } = props;
+
+  const theme = useTheme()
+  const [, t] = useLanguage();
+  const { control, handleSubmit, errors } = useForm();
+  const [, { showToast }] = useToast();
+  const [orientationState] = useDeviceOrientation();
+
+  const onSubmit = (values: any) => {
+    _setStoreData('customer_name', {customerName: values.name});
+    onProceedToPay()
+  };
+
+  const styles = StyleSheet.create({
+    inputStyle: {
+      borderRadius: 4,
+      marginBottom: 20,
+      borderWidth: 1,
+      borderColor: theme.colors.disabled,
+      height: 44
+    },
+  });
+
+  useEffect(() => {
+    if (Object.keys(errors)?.length > 0) {
+      // Convert all errors in one string to show in toast provider
+      const list = Object.values(errors);
+      let stringError = '';
+      list.map((item: any, i: number) => {
+        stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
+      });
+      showToast(ToastType.Error, stringError);
+    }
+  }, [errors]);
+
+  const goToBack = () => navigation?.goBack();
+
+  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
+    }}
+    style={{
+      width: orientationState?.orientation === PORTRAIT
+        ? orientationState?.dimensions.width - 40
+        : orientationState?.dimensions.width * 0.5,
+    }}
+  />);
+
+  return (
+    <>
+      <Container>
+        <NavBar
+          title={t('YOUR_NAME', 'Your name')}
+          onActionLeft={goToBack}
+          btnStyle={{paddingLeft: 0}}
+        />
+
+        <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
+          <OText
+            size={orientationState?.dimensions?.width * 0.05}
+          >
+            {t('WHOM_MIGHT_THIS', 'Whom might this')} {'\n'}
+            <OText
+              size={orientationState?.dimensions?.width * 0.05}
+              weight={'700'}
+            >
+              {`${t('ORDER_BE_FOR', 'order be for?')}`}
+            </OText>
+          </OText>
+        </View>
+
+        <Controller
+          control={control}
+          render={({ onChange, value }: any) => (
+            <OInput
+              placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+              style={{
+                ...styles.inputStyle,
+                width: orientationState?.orientation === PORTRAIT
+                  ? orientationState?.dimensions.width - 40
+                  : orientationState?.dimensions.width * 0.5,
+              }}
+              value={value}
+              autoCapitalize="words"
+              autoCorrect={false}
+              onChange={(val: any) => onChange(val)}
+            />
+          )}
+          name="name"
+          rules={{
+            required: t(
+              'VALIDATION_ERROR_REQUIRED',
+              'The field Customer Name is required',
+            ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
+            pattern: {
+              value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
+              message: t(
+                'INVALID_ERROR',
+                'Invalid name',
+              ).replace('_attribute_', t('NAME', 'Name')),
+            }
+          }}
+          defaultValue=""
+        />
+
+        {orientationState?.orientation === LANDSCAPE && submitButton}
+      </Container>
+
+      {(orientationState?.orientation === PORTRAIT) && (
+        <OSActions>
+          {submitButton}
+        </OSActions>
+      )}
+    </>
+  );
+};
+
+interface Props {
+  navigation: any;
+  onProceedToPay: any;
+}
+
+export default CustomerName;

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

@@ -1,10 +1,10 @@
-import styled from 'styled-components/native'
-
-export const OSActions = styled.View`
-  position: absolute;
-  bottom: 0px;
-  width: 100%;
-  background-color: #FFF;
-	z-index: 1000;
-	padding: 20px;
-`
+import styled from 'styled-components/native'
+
+export const OSActions = styled.View`
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  background-color: #FFF;
+	z-index: 1000;
+	padding: 20px;
+`