ordering-ui-react-native 0.21.49-test → 0.21.49-test-v2

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

@@ -59,3 +59,22 @@ export const CartDivider = styled.View`
   background-color:  ${(props: any) => props.theme.colors.backgroundGray100};
   margin: 20px -40px 0;
 `
+
+
+export const TopActionsHeader = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  min-width: 30px;
+  padding-right: 15px;
+`;
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 60px;
+  min-height: 60px;
+`
+

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

@@ -13,6 +13,8 @@ import { OAlert } from '../../../../../src/components/shared'
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
 import { ListItem } from '../UserProfile/styles';
+import moment from 'moment';
+import { DatePickerUI } from '../DatePicker';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -81,6 +83,8 @@ export const UserFormDetailsUI = (props: any) => {
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
 	const [isModalOpen, setIsModalOpen] = useState(false)
+	const [birthdate, setBirthdate] = useState(user?.birthdate ?? null)
+	const [showDatePicker, setShowDatePicker] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -92,6 +96,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const isAdmin = user?.level === 0
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
 
 	const handleSuccessSignup = (user: any) => {
 		login({
@@ -206,6 +211,13 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	const _handleChangeDate = (date: any) => {
+		setBirthdate(date)
+		const _birthdate = moment(date).format('YYYY-MM-DD')
+		handleChangeInput({ target: { name: 'birthdate', value: _birthdate } })
+		setShowDatePicker(false)
+	}
+
 	const onRemoveAccount = () => {
 		setConfirm({
 			open: true,
@@ -268,6 +280,14 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
 
+	useEffect(() => {
+		if (!validationFields.loading && birthdate) {
+			setValue('birthdate', formState?.result?.result
+				? formState?.result?.result?.birthdate
+				: formState?.changes?.birthdate ?? (user && user?.birthdate) ?? '')
+		}
+	}, [validationFields, birthdate])
+
 	useEffect(() => {
 		if (!requiredFields || formState?.changes?.length === 0) return
 		const _isValid = requiredFields.every((key: any) => formState?.changes[key])
@@ -359,7 +379,21 @@ export const UserFormDetailsUI = (props: any) => {
 										</React.Fragment>
 									),
 							)}
-
+							{showInputBirthday && (
+								<WrapperPhone>
+									<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+										{t('BIRTHDATE', 'Birthdate')}
+									</OText>
+									<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ alignSelf: 'flex-start' }}>
+											{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+										</OText>
+									</TouchableOpacity>
+									{showDatePicker && (
+										<DatePickerUI birthdate={birthdate} handleChangeDate={_handleChangeDate} />
+									)}
+								</WrapperPhone>
+							)}
 							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
@@ -468,12 +502,25 @@ export const UserFormDetailsUI = (props: any) => {
 								? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
 								: t('CONTINUE', 'Continue'))
 					}
-					bgColor={theme.colors.white}
-					textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+					bgColor={theme.colors.primary}
+					textStyle={{ 
+						color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white, 
+						fontSize: 14 
+					}}
 					borderColor={theme.colors.primary}
 					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
-					style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
+					style={{
+						borderRadius: 7.6,
+						shadowOpacity: 0,
+						width: '100%',
+						borderWidth: 1,
+						marginTop: 20,
+						marginBottom: 20,
+						backgroundColor: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.lightGray : theme.colors.primary,
+						borderColor: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.white : theme.colors.primary,
+						opacity: !user?.guest_id && (formState.loading || !isValid) ? 0.3 : 1,
+					}}
 					onClick={!user?.guest_id ? handleSubmit(onSubmit) : () => setIsModalOpen(true)}
 				/>
 			)}

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

@@ -101,7 +101,7 @@ const ProfileListUI = (props: ProfileParams) => {
 			marginEnd: 14
 		},
 		pagePadding: {
-			paddingHorizontal: isChewLayout ? 20 : 40
+			paddingHorizontal: 20
 		},
 		messageIconStyle: {
 			fontSize: 18,

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

@@ -3,6 +3,7 @@ import styled from 'styled-components/native'
 export const Container = styled.View`
   display: flex;
   flex-direction: column;
+  width: 100%;
 `
 
 export const TransactionsWrapper = styled.View`

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

@@ -141,6 +141,7 @@ const WalletsUI = (props: any) => {
               showCall={false}
               paddingTop={10}
               btnStyle={{ paddingLeft: 0 }}
+              isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
             />
             {isChewLayout && !openHistory && (

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

@@ -1,7 +1,6 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  padding-horizontal: 20px;
   padding-bottom: 20px;
   padding-top: ${(props: any) => props.pdng};
 `

package/themes/original/src/components/shared/OModal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Modal, StyleSheet, Text, SafeAreaView, View, TouchableOpacity, Platform } from "react-native";
-import { OIcon } from '.';
-import styled, { useTheme } from 'styled-components/native';
+import styled from 'styled-components/native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 interface Props {
 	open?: boolean;
@@ -50,17 +50,15 @@ const OModal = (props: Props): React.ReactElement => {
 		isAvoidKeyBoardView
 	} = props
 
-	const theme = useTheme();
-
 	const renderSafeAreaView = () => (
 		<SafeAreaView style={styles.container}>
 			{!entireModal ? (
 				<View style={styles.centeredView}>
 					<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
-						<TouchableOpacity style={{...styles.wrapperIcon, ...styleContainerCloseButton}} onPress={onClose}>
-							<OIcon
-								src={theme.images.general.close}
-								width={16}
+						<TouchableOpacity style={{ ...styles.wrapperIcon, ...styleContainerCloseButton }} onPress={onClose}>
+							<AntDesignIcon
+								name='close'
+								size={26}
 								style={isNotDecoration && (styleCloseButton || styles.cancelBtn)}
 							/>
 						</TouchableOpacity>
@@ -73,9 +71,9 @@ const OModal = (props: Props): React.ReactElement => {
 					{!customClose && (
 						<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
 							<TouchableOpacity style={styles.wrapperIcon} onPress={onClose}>
-								<OIcon
-									src={theme.images.general.close}
-									width={16}
+								<AntDesignIcon
+									name='close'
+									size={26}
 									style={styleCloseButton || styles.cancelBtn}
 								/>
 							</TouchableOpacity>
@@ -93,7 +91,7 @@ const OModal = (props: Props): React.ReactElement => {
 			animationType="slide"
 			transparent={isTransparent}
 			visible={open}
-			onRequestClose={() =>  onClose && onClose()}
+			onRequestClose={() => onClose && onClose()}
 			style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
 		>
 			{isAvoidKeyBoardView ? (
@@ -125,8 +123,8 @@ const styles = StyleSheet.create({
 		flex: 1,
 		justifyContent: 'space-between',
 		alignItems: 'flex-start',
-		paddingLeft: 40,
-		paddingRight: 40,
+		paddingLeft: 20,
+		paddingRight: 20,
 		marginBottom: 40
 	},
 	cancelBtn: {

package/themes/original/src/layouts/Container.tsx

@@ -6,7 +6,7 @@ import { Platform, View } from 'react-native';
 const ContainerStyled = styled.ScrollView`
   flex: 1;
   ${(props: any) => !props.noPadding && css`
-    padding: ${Platform.OS === 'ios' ? '0px 40px' : '20px 40px'};
+    padding: ${Platform.OS === 'ios' ? '0px 20px' : '20px 20px'};
   `}
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;

package/themes/business/src/components/StarPrinter/SearchPrinter.tsx

@@ -1,106 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  Button,
-  FlatList,
-  PermissionsAndroid,
-  Platform
-} from 'react-native';
-
-import {
-  InterfaceType,
-  StarDeviceDiscoveryManager,
-  StarDeviceDiscoveryManagerFactory,
-  StarPrinter
-} from 'react-native-star-io10';
-import { useTheme } from 'styled-components';
-import { OIconButton } from '../shared';
-
-const SearchStarPrinter = ({ navigation }: any) => {
-  let _manager: StarDeviceDiscoveryManager;
-  const theme = useTheme();
-
-  const [state, setState] = useState({
-    bluetoothIsEnabled: true,
-    bluetoothLeIsEnabled: true,
-    printers: [],
-  })
-
-  const _onPressDiscoveryButton = async () => {
-
-    setState({
-      ...state,
-      printers: [],
-    });
-
-    try {
-      await _manager?.stopDiscovery()
-
-      const interfaceTypes: Array<InterfaceType> = []
-
-      if (state.bluetoothIsEnabled) {
-        interfaceTypes.push(InterfaceType.Bluetooth);
-      }
-      if (state.bluetoothLeIsEnabled) {
-        interfaceTypes.push(InterfaceType.BluetoothLE);
-      }
-
-      _manager = await StarDeviceDiscoveryManagerFactory.create(interfaceTypes);
-      _manager.discoveryTime = 10000;
-
-      _manager.onPrinterFound = (printer: StarPrinter) => {
-        const printers = state.printers;
-        printers.push(printer);
-        setState({
-          ...state,
-          printers: printers
-        });
-
-        console.log(`Found printer: ${printer.connectionSettings.identifier}.`);
-      };
-
-      _manager.onDiscoveryFinished = () => {
-        console.log(`Discovery finished.`);
-      };
-
-
-      await _manager.startDiscovery();
-    }
-    catch (error) {
-      console.log(`Error: ${String(error)}`);
-    }
-  }
-
-  const handleArrowBack = () => {
-    navigation?.canGoBack() && navigation.goBack();
-  };
-
-  return (
-    <View style={{ margin: 50 }}>
-      <OIconButton
-        icon={theme.images.general.arrow_left}
-        iconStyle={{ width: 20, height: 20 }}
-        borderColor={theme.colors.clear}
-        style={{ maxWidth: 40, justifyContent: 'flex-end' }}
-        onClick={() => handleArrowBack()}
-      />
-      <Text>Interface</Text>
-
-      <View
-        style={{ width: 100, marginTop: 30 }}>
-        <Button
-          title="Discovery"
-          onPress={async () => await _onPressDiscoveryButton()}
-        />
-      </View>
-      <FlatList
-        style={{ marginTop: 30 }}
-        data={state.printers}
-        renderItem={({ item }) => <Text>{item.connectionSettings.interfaceType} : {item.connectionSettings.identifier}</Text>}
-        keyExtractor={(item, index) => index.toString()} />
-    </View>
-  );
-};
-
-export default SearchStarPrinter;

package/themes/business/src/components/StarPrinter/index.tsx

@@ -1,235 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  Button,
-  TextInput,
-  PermissionsAndroid,
-  Platform
-} from 'react-native';
-
-import {
-  Picker
-} from '@react-native-picker/picker';
-
-import {
-  InterfaceType,
-  StarConnectionSettings,
-  StarXpandCommand,
-  StarPrinter
-} from 'react-native-star-io10';
-
-
-const HandleStarPrinter = ({ navigation }) => {
-
-  const [state, setState] = React.useState({
-    interfaceType: InterfaceType.Bluetooth,
-    identifier: '00:11:62:00:00:00',
-    imageBase64: ''
-  });
-
-  const _onPressPrintButton = async () => {
-    const settings = new StarConnectionSettings();
-    settings.interfaceType = state.interfaceType;
-    settings.identifier = state.identifier;
-
-
-    const printer = new StarPrinter(settings);
-
-    try {
-      const builder = new StarXpandCommand.StarXpandCommandBuilder();
-      builder.addDocument(new StarXpandCommand.DocumentBuilder()
-        .addPrinter(new StarXpandCommand.PrinterBuilder()
-          .actionPrintImage(new StarXpandCommand.Printer.ImageParameter("logo_01.png", 406))
-          .styleInternationalCharacter(StarXpandCommand.Printer.InternationalCharacterType.Usa)
-          .styleCharacterSpace(0)
-          .styleAlignment(StarXpandCommand.Printer.Alignment.Center)
-          .actionPrintText("Star Clothing Boutique\n" +
-            "123 Star Road\n" +
-            "City, State 12345\n" +
-            "\n")
-          .styleAlignment(StarXpandCommand.Printer.Alignment.Left)
-          .actionPrintText("Date:MM/DD/YYYY    Time:HH:MM PM\n" +
-            "--------------------------------\n" +
-            "\n")
-          .actionPrintText("SKU         Description    Total\n" +
-            "300678566   PLAIN T-SHIRT  10.99\n" +
-            "300692003   BLACK DENIM    29.99\n" +
-            "300651148   BLUE DENIM     29.99\n" +
-            "300642980   STRIPED DRESS  49.99\n" +
-            "300638471   BLACK BOOTS    35.99\n" +
-            "\n" +
-            "Subtotal                  156.95\n" +
-            "Tax                         0.00\n" +
-            "--------------------------------\n")
-          .actionPrintText("Total     ")
-          .add(new StarXpandCommand.PrinterBuilder()
-            .styleMagnification(new StarXpandCommand.MagnificationParameter(2, 2))
-            .actionPrintText("   $156.95\n")
-          )
-          .actionPrintText("--------------------------------\n" +
-            "\n" +
-            "Charge\n" +
-            "156.95\n" +
-            "Visa XXXX-XXXX-XXXX-0123\n" +
-            "\n")
-          .add(new StarXpandCommand.PrinterBuilder()
-            .styleInvert(true)
-            .actionPrintText("Refunds and Exchanges\n")
-          )
-          .actionPrintText("Within ")
-          .add(new StarXpandCommand.PrinterBuilder()
-            .styleUnderLine(true)
-            .actionPrintText("30 days")
-          )
-          .actionPrintText(" with receipt\n")
-          .actionPrintText("And tags attached\n" +
-            "\n")
-          .styleAlignment(StarXpandCommand.Printer.Alignment.Center)
-          .actionPrintBarcode(new StarXpandCommand.Printer.BarcodeParameter('0123456',
-            StarXpandCommand.Printer.BarcodeSymbology.Jan8)
-            .setBarDots(3)
-            .setBarRatioLevel(StarXpandCommand.Printer.BarcodeBarRatioLevel.Level0)
-            .setHeight(5)
-            .setPrintHri(true))
-          .actionFeedLine(1)
-          .actionPrintQRCode(new StarXpandCommand.Printer.QRCodeParameter('Hello World.\n')
-            .setModel(StarXpandCommand.Printer.QRCodeModel.Model2)
-            .setLevel(StarXpandCommand.Printer.QRCodeLevel.L)
-            .setCellSize(8))
-          .actionCut(StarXpandCommand.Printer.CutType.Partial)
-        )
-      );
-
-      const commands = await builder.getCommands();
-
-      await printer.open();
-      await printer.print(commands);
-
-      console.log(`Success`);
-    }
-    catch (error) {
-      console.log(`Error: ${String(error)}`);
-    }
-    finally {
-      await printer.close();
-      await printer.dispose();
-    }
-  }
-
-
-  const onSearchPrint = () => {
-    navigation.navigate('SearchStarPrinter')
-  }
-
-  const onPrintStatus = async () => {
-    const settings = new StarConnectionSettings();
-    settings.interfaceType = InterfaceType.Lan;
-    settings.identifier = '00:11:62:00:00:00';
-    const printer = new StarPrinter(settings);
-
-    try {
-      // Connect to the printer.
-      await printer.open();
-
-      // Get printer status.
-      const status = await printer.getStatus();
-      console.log(status);
-    }
-    catch (error) {
-      // Error.
-      console.log(error);
-    }
-    finally {
-      // Disconnect from the printer and dispose object.
-      await printer.close();
-      await printer.dispose();
-    }
-  }
-
-  const onPrinterMonitor = async () => {
-    let printer: StarPrinter;
-    const settings = new StarConnectionSettings();
-    settings.interfaceType = InterfaceType.Lan;
-    settings.identifier = '00:11:62:00:00:00';
-    printer = new StarPrinter(settings);
-
-    // Callback for printer state changed.
-    printer.printerDelegate.onReady = () => {
-      console.log(`Printer: Ready`);
-    }
-    printer.drawerDelegate.onOpenCloseSignalSwitched = (openCloseSignal: any) => {
-      console.log(`Drawer: Open Close Signal Switched: ${String(openCloseSignal)}`);
-    }
-    printer.inputDeviceDelegate.onDataReceived = (data: any) => {
-      console.log(`Input Device: DataReceived ${String(data)}`);
-    }
-    printer.displayDelegate.onConnected = () => {
-      console.log(`Display: Connected`);
-    }
-    // ...
-    // Please refer to document for other callback.
-
-    try {
-      // Connect to the printer.
-      await printer.open();
-    }
-    catch (error) {
-      // Error.
-      console.log(error);
-    }
-  }
-
-  return (
-    <View style={{ margin: 50 }}>
-      <View style={{ flexDirection: 'row' }}>
-        <Text style={{ width: 100 }}>Interface</Text>
-        <Picker
-          style={{ width: 200, marginLeft: 20, justifyContent: 'center' }}
-          selectedValue={state.interfaceType}
-          onValueChange={(value) => {
-            setState({ ...state, interfaceType: value });
-          }}>
-          <Picker.Item label='Bluetooth' value={InterfaceType.Bluetooth} />
-          <Picker.Item label='Bluetooth LE' value={InterfaceType.BluetoothLE} />
-        </Picker>
-      </View>
-      <View style={{ flexDirection: 'row', marginTop: 30 }}>
-        <Text style={{ width: 100 }}>Identifier</Text>
-        <TextInput
-          style={{ width: 200, marginLeft: 20 }}
-          value={state.identifier}
-          onChangeText={(value) => {
-            setState({ ...state, identifier: value });
-          }}
-        />
-      </View>
-      <View style={{ width: 100, marginTop: 20 }}>
-        <Button
-          title="Search Printer"
-          onPress={onSearchPrint}
-        />
-      </View>
-      <View style={{ width: 100, marginTop: 20 }}>
-        <Button
-          title="Printer status"
-          onPress={onPrintStatus}
-        />
-      </View>
-      <View style={{ width: 100, marginTop: 20 }}>
-        <Button
-          title="Printer monitor"
-          onPress={onPrinterMonitor}
-        />
-      </View>
-      <View style={{ width: 100, marginTop: 20 }}>
-        <Button
-          title="Print"
-          onPress={async () => await _onPressPrintButton()}
-        />
-      </View>
-    </View>
-  );
-};
-
-export default HandleStarPrinter;