ordering-ui-react-native 0.16.12 → 0.16.15

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

@@ -0,0 +1,243 @@
+import React, { useState } from 'react'
+import {
+  useLanguage,
+  useConfig,
+  useUtils,
+  MultiCartsPaymethodsAndWallets as MultiCartsPaymethodsAndWalletsController
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { View, TouchableOpacity, FlatList, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native'
+import { Placeholder,	PlaceholderLine, Fade } from 'rn-placeholder'
+import { OText, OIcon, OModal, OButton } from '../shared'
+import { getIconCard, flatArray } from '../../utils'
+import { StripeElementsForm } from '../StripeElementsForm'
+import { StripeCardsList } from '../StripeCardsList'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import {
+  PMContainer,
+  PMItem,
+  WalletItem
+} from './styles'
+
+const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
+  const {
+    businessIds,
+    paymethodsAndWallets,
+    walletsState,
+    businessPaymethods,
+    paymethodSelected,
+    handleSelectPaymethod,
+    handleSelectWallet,
+    handlePaymethodDataChange
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ parsePrice }] = useUtils()
+
+	const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
+
+  const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
+  const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
+
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+      isActive: isWalletCashEnabled
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+      isActive: isWalletPointsEnabled
+    }
+  }
+
+  const getPayIcon = (method: string) => {
+		switch (method) {
+			case 'cash':
+				return theme.images.general.cash
+			case 'card_delivery':
+				return theme.images.general.carddelivery
+			case 'paypal':
+				return theme.images.general.paypal
+			case 'stripe':
+				return theme.images.general.stripe
+			case 'stripe_direct':
+				return theme.images.general.stripecc
+			case 'stripe_connect':
+				return theme.images.general.stripes
+			case 'stripe_redirect':
+				return theme.images.general.stripesb
+			default:
+				return theme.images.general.creditCard
+		}
+	}
+
+  const renderPaymethods = ({ item }: any) => {
+		return (
+			<TouchableOpacity
+				onPress={() => handleSelectPaymethod(item)}
+			>
+				<PMItem
+					key={item.id}
+					isActive={paymethodSelected?.paymethod_id === item.paymethod_id}
+				>
+					<OIcon
+						src={getPayIcon(item.paymethod?.gateway)}
+						width={20}
+						height={20}
+						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : theme.colors.backgroundDark}
+					/>
+					<OText
+						size={10}
+						style={{ margin: 0, marginTop: 4 }}
+						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : '#000'}
+					>
+						{t(item?.paymethod?.gateway.toUpperCase(), item?.paymethod?.name)}
+					</OText>
+				</PMItem>
+			</TouchableOpacity>
+		)
+	}
+
+  return (
+    <PMContainer>
+      <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+        {t('PAYMENT_METHODS', 'Payment Methods')}
+      </OText>
+      {paymethodsAndWallets.loading ? (
+        <Placeholder style={{ marginTop: 10 }} Animation={Fade}>
+          <View style={{ display: 'flex', flexDirection: 'row' }}>
+            {[...Array(3)].map((_, i) => (
+              <PlaceholderLine
+                key={i}
+                width={37}
+                height={80}
+                noMargin
+                style={{ borderRadius: 10, marginRight: 10 }}
+              />
+            ))}
+          </View>
+        </Placeholder>
+      ) : (
+        <FlatList
+          horizontal
+					showsHorizontalScrollIndicator={false}
+          data={businessPaymethods.result.filter((paymethod: any) => paymethodsAndWallets.paymethods.find((item: any) => item.id === paymethod.paymethod_id))}
+					renderItem={renderPaymethods}
+					keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
+        />
+      )}
+      {!paymethodsAndWallets.loading && !paymethodsAndWallets.error && paymethodsAndWallets.paymethods.length === 0 && (
+        <OText size={12} style={{ margin: 0 }}>
+          {t('NO_PAYMENT_METHODS', 'No payment methods!')}
+        </OText>
+      )}
+
+      {paymethodSelected?.paymethod?.gateway === 'stripe' && (
+        <View>
+          <OButton
+						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
+						bgColor={theme.colors.white}
+						borderColor={theme.colors.primary}
+						style={styles.btnAddStyle}
+						textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+						imgRightSrc={null}
+						onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+					/>
+          <StripeCardsList
+						paymethod={paymethodSelected?.paymethod}
+						businessId={businessIds[0]}
+            businessIds={businessIds}
+						publicKey={paymethodSelected?.data?.publishable}
+						payType={paymethodSelected?.paymethod?.name}
+						onSelectCard={handlePaymethodDataChange}
+					/>
+        </View>
+      )}
+
+      {(paymethodsAndWallets.loading || walletsState.loading) ? (
+        <>
+          {[...Array(2).keys()].map(i => (
+            <PlaceholderLine
+              key={i}
+              height={40}
+              noMargin
+              style={{ marginBottom: 10 }}
+            />
+          ))}
+        </>
+      ) : (
+        <>
+          {walletsState.result.filter((wallet: any) => paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type)).map((wallet: any, idx: any) => walletName[wallet.type]?.isActive && (
+            <WalletItem
+              key={wallet.type}
+              isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
+              onPress={() => handleSelectWallet(paymethodSelected.wallet_id === wallet.id ? false : true, wallet)}
+            >
+              {paymethodSelected.wallet_id === wallet.id ? (
+                <MaterialCommunityIcons
+                  name="checkbox-marked"
+                  size={25}
+                  color={theme.colors.primary}
+                />
+              ) : (
+                <MaterialCommunityIcons
+                  name="checkbox-blank-outline"
+                  size={25}
+                  color={theme.colors.disabled}
+                />
+              )}
+              <OText size={12} style={{ flex: 1, marginLeft: 15 }}>{walletName[wallet.type]?.name}</OText>
+              <OText size={12}>{parsePrice(wallet.balance)}</OText>
+            </WalletItem>
+          ))}
+        </>
+      )}
+
+      <OModal
+				entireModal
+				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
+				open={addCardOpen.stripe}
+				onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+				style={{ backgroundColor: 'red' }}
+			>
+				<KeyboardAvoidingView
+					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+					keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
+					enabled={Platform.OS === 'ios' ? true : false}
+				>
+					<StripeElementsForm
+						toSave
+						businessId={businessIds[0]}
+            businessIds={businessIds}
+            publicKey={paymethodSelected?.data?.publishable}
+						requirements={props.clientSecret}
+						onSelectCard={handlePaymethodDataChange}
+						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+					/>
+				</KeyboardAvoidingView>
+			</OModal>
+    </PMContainer>
+  )
+}
+
+const styles = StyleSheet.create({
+	btnAddStyle: {
+		marginVertical: 20,
+		borderRadius: 7.6,
+		shadowOpacity: 0,
+		height: 44,
+		borderWidth: 1
+	},
+})
+
+
+export const MultiCartsPaymethodsAndWallets = (props: any) => {
+  const multiCartsPaymethodsAndWalletsProps = {
+    ...props,
+    UIComponent: MultiCartsPaymethodsAndWalletsUI
+  }
+  return <MultiCartsPaymethodsAndWalletsController {...multiCartsPaymethodsAndWalletsProps} />
+}

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

@@ -0,0 +1,46 @@
+import styled, { css } from 'styled-components/native'
+
+export const PMContainer = styled.View`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`
+export const PMItem = styled.View`
+  width: 120px;
+  height: 50px;
+  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 WalletItem = styled.TouchableOpacity`
+  width: 100%;
+  display: flex;
+  padding: 20px 0;
+  margin-top: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  ${(props: any) => props.isBottomBorder && css`
+    border-bottom-width: 1px;
+    border-bottom-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  `}
+`

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

@@ -0,0 +1,291 @@
+import React, { useState, useEffect } from 'react'
+import {
+  useLanguage,
+  useConfig,
+  useUtils,
+  useOrder,
+  useValidationFields,
+  useSession,
+  useToast,
+	ToastType,
+  MultiCheckout as MultiCheckoutController
+} from 'ordering-components/native'
+import { View, StyleSheet, Platform } from 'react-native'
+import { useTheme } from 'styled-components/native';
+import { Container } from '../../layouts/Container';
+import NavBar from '../NavBar';
+import { OText, OIcon, OModal } from '../shared';
+import { getTypesText } from '../../utils';
+import { UserDetails } from '../UserDetails'
+import { AddressDetails } from '../AddressDetails'
+import { MultiCartsPaymethodsAndWallets } from '../MultiCartsPaymethodsAndWallets'
+import { Cart } from '../Cart'
+import { FloatingButton } from '../FloatingButton'
+
+import {
+  ChContainer,
+  ChSection,
+  ChHeader,
+  CHMomentWrapper,
+  ChUserDetails,
+  ChAddress,
+  ChCarts,
+  CartsHeader,
+  CCNotCarts,
+  ChCartsTotal
+} from './styles'
+
+const mapConfigs = {
+	mapZoom: 16,
+	mapSize: {
+		width: 640,
+		height: 190
+	}
+}
+
+const MultiCheckoutUI = (props: any) => {
+  const {
+    navigation,
+    placing,
+    openCarts,
+    totalCartsPrice,
+    handleGroupPlaceOrder,
+    paymethodSelected,
+    handleSelectPaymethod,
+    handleSelectWallet,
+    handlePaymethodDataChange
+  } = props
+
+	const theme = useTheme();
+  const styles = StyleSheet.create({
+    pagePadding: {
+			paddingLeft: 40,
+			paddingRight: 40
+		},
+    wrapperNavbar: Platform.OS === 'ios'
+			? { paddingVertical: 0, paddingHorizontal: 40 }
+			: { paddingVertical: 20, paddingHorizontal: 40 }
+  })
+
+	const [, { showToast }] = useToast();
+  const [, t] = useLanguage()
+	const [{ configs }] = useConfig();
+	const [{ parsePrice, parseDate }] = useUtils();
+	const [{ options, carts, loading }, { confirmCart }] = useOrder();
+	const [validationFields] = useValidationFields();
+  const [{ user }] = useSession()
+
+	const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
+  const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || placing
+
+	const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
+	const [phoneUpdate, setPhoneUpdate] = useState(false);
+	const [userErrors, setUserErrors] = useState<any>([]);
+  const handleMomentClick = () => {
+		if (isPreOrder) {
+			navigation.navigate('MomentOption')
+		}
+	}
+
+  const checkValidationFields = () => {
+		setUserErrors([])
+		const errors = []
+		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
+
+		Object.values(validationFields?.fields?.checkout).map((field: any) => {
+			if (field?.required && !notFields.includes(field.code)) {
+				if (!user[field?.code]) {
+					errors.push(t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `The field ${field?.name} is required`))
+				}
+			}
+		})
+
+		if (
+			!user?.cellphone &&
+			((validationFields?.fields?.checkout?.cellphone?.enabled &&
+				validationFields?.fields?.checkout?.cellphone?.required) ||
+				configs?.verification_phone_required?.value === '1')
+		) {
+			errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
+		}
+
+		if (phoneUpdate) {
+			errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
+		}
+
+		setUserErrors(errors)
+	}
+
+  const togglePhoneUpdate = (val: boolean) => {
+		setPhoneUpdate(val)
+	}
+
+  const handlePlaceOrder = () => {
+    if (!userErrors.length) {
+      handleGroupPlaceOrder && handleGroupPlaceOrder()
+      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)
+    setIsUserDetailsEdit(true)
+  }
+
+  useEffect(() => {
+		if (validationFields && validationFields?.fields?.checkout) {
+			checkValidationFields()
+		}
+	}, [validationFields, user])
+
+  return (
+    <>
+      <Container noPadding>
+        <View style={styles.wrapperNavbar}>
+          <NavBar
+            isVertical
+            title={t('CHECKOUT', 'Checkout')}
+            titleAlign={'center'}
+            onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+            showCall={false}
+            btnStyle={{ paddingLeft: 0 }}
+            style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+            titleWrapStyle={{ paddingHorizontal: 0 }}
+            titleStyle={{ marginRight: 0, marginLeft: 0 }}
+          />
+        </View>
+        <ChContainer style={styles.pagePadding}>
+          <ChSection style={{ paddingTop: 0 }}>
+            <ChHeader>
+              <CHMomentWrapper onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
+                <OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(options?.type || 1), 'Delivery')}</OText>
+                <OIcon
+                  src={theme.images.general.arrow_down}
+                  width={10}
+                  style={{ marginStart: 8 }}
+                />
+              </CHMomentWrapper>
+              <CHMomentWrapper
+                onPress={() => handleMomentClick()}
+                disabled={loading}
+              >
+                <OText size={12} numberOfLines={1} ellipsizeMode='tail' color={theme.colors.textSecondary}>
+                  {options?.moment
+                    ? parseDate(options?.moment, { outputFormat: configs?.dates_moment_format?.value })
+                    : t('ASAP_ABBREVIATION', 'ASAP')}
+                </OText>
+                {isPreOrder && (
+                  <OIcon
+                    src={theme.images.general.arrow_down}
+                    width={10}
+                    style={{ marginStart: 8 }}
+                  />
+                )}
+              </CHMomentWrapper>
+            </ChHeader>
+            <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 18, marginHorizontal: -40 }} />
+          </ChSection>
+
+          <ChSection>
+            <ChUserDetails>
+              <UserDetails
+                isUserDetailsEdit={isUserDetailsEdit}
+                useValidationFields
+                useDefualtSessionManager
+                useSessionUser
+                isCheckout
+                phoneUpdate={phoneUpdate}
+                togglePhoneUpdate={togglePhoneUpdate}
+              />
+            </ChUserDetails>
+            <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+          </ChSection>
+
+          <ChSection>
+            <ChAddress>
+              <AddressDetails
+                navigation={navigation}
+                isMultiCheckout
+                openCarts={openCarts}
+                apiKey={configs?.google_maps_api_key?.value}
+                mapConfigs={mapConfigs}
+              />
+            </ChAddress>
+            <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+          </ChSection>
+
+          <ChSection>
+            <MultiCartsPaymethodsAndWallets
+              openCarts={openCarts}
+              paymethodSelected={paymethodSelected}
+              handleSelectPaymethod={handleSelectPaymethod}
+              handleSelectWallet={handleSelectWallet}
+              handlePaymethodDataChange={handlePaymethodDataChange}
+            />
+            <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+          </ChSection>
+
+          <ChSection>
+            <ChCarts>
+              <CartsHeader>
+                <OText size={16} lineHeight={24} color={theme.colors.textNormal} style={{ fontWeight: '500' }}>
+                  {t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}
+                </OText>
+              </CartsHeader>
+              {openCarts.map((cart: any) => (
+                <React.Fragment key={cart.uuid}>
+                  <Cart
+                    cart={cart}
+                    cartuuid={cart.uuid}
+                    isMultiCheckout
+                  />
+                  <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+                </React.Fragment>
+              ))}
+              {openCarts.length === 0 && (
+                <CCNotCarts>
+                  <OText size={24} style={{ textAlign: 'center' }}>
+                    {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
+                  </OText>
+                </CCNotCarts>
+              )}
+              {openCarts.length > 0 && (
+                <ChCartsTotal>
+                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+                      {t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
+                    </OText>
+                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
+                  </View>
+                  <OText size={12} color={theme.colors.mediumGray} mRight={70} style={{ marginTop: 10 }}>
+                    {t('MULTI_CHECKOUT_DESCRIPTION', 'You will receive a receipt for each business. The payment is not combined between multiple stores. Each payment is processed by the store')}
+                  </OText>
+                </ChCartsTotal>
+              )}
+            </ChCarts>
+          </ChSection>
+        </ChContainer>
+      </Container>
+      
+      <FloatingButton
+				handleClick={() => handlePlaceOrder()}
+        isSecondaryBtn={isDisablePlaceOrderButton}
+        disabled={isDisablePlaceOrderButton}
+        btnText={placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order')}
+        btnRightValueShow
+				btnRightValue={parsePrice(totalCartsPrice)}
+        iosBottom={30}
+      />
+    </>
+  )
+}
+
+export const MultiCheckout = (props: any) => {
+  const multiCheckoutProps = {
+    ...props,
+    UIComponent: MultiCheckoutUI
+  }
+  return <MultiCheckoutController {...multiCheckoutProps} />
+}

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

@@ -0,0 +1,59 @@
+import styled from 'styled-components/native'
+
+export const ChContainer = styled.View`
+  margin-bottom: 60px;
+`
+export const ChSection = styled.View`
+  padding-top: 30px;
+`
+export const ChHeader = styled.View`
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  margin: 0px;
+`
+export const CHMomentWrapper = styled.TouchableOpacity`
+	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
+	border-radius: 7.6px;
+	font-size: 12px;
+	max-width: 240px;
+	height: 26px;
+	align-items: center;
+	justify-content: center;
+	padding-horizontal: 8px;
+	flex-direction: row;
+	margin-end: 12px;
+`
+export const ChUserDetails = styled.View`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 34px;
+`
+export const ChAddress = styled.View`
+  width: 100%;
+`
+export const ChCarts = styled.View`
+  display: flex;
+  flex-direction: column;
+  padding: 0 0 20px;
+`
+export const CartsHeader = styled.View`
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+`
+export const CCNotCarts = styled.View`
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+  margin: auto;
+`
+export const ChCartsTotal = styled.View`
+  margin-top: 16px;
+`