ordering-ui-react-native 0.12.56 → 0.12.60

package/themes/franchises/src/components/OrderDetails/styles.tsx

@@ -1,120 +0,0 @@
-import styled from 'styled-components/native'
-
-export const OrderDetailsContainer = styled.ScrollView`
-  
-`
-
-export const NavBack = styled.TouchableOpacity`
-
-`
-
-
-export const Header = styled.View`
-  padding: 10px 40px;
-  flex: 1;
-`
-
-export const Logo = styled.View`
-  margin-right: 20px;
-`
-
-export const OrderContent = styled.View`
-`
-
-export const OrderBusiness = styled.View`
-  position: relative; 
-  padding-vertical: 10px;
-  padding-horizontal: 40px;
-  background-color: ${(props: any) => props.theme.colors.white};
-  align-items: flex-start;
-`
-export const Icons = styled.View`
-  flex-direction: row;
-  align-items: center;
-`
-
-export const OrderInfo = styled.View`
-  padding: 10px 0;
-  flex: 1;
-`
-
-export const OrderData = styled.View`
-  
-`
-
-
-export const OrderStatus = styled.View`
-  padding: 20px;
-  align-items: center;
-  width: 35%;
-  flex-wrap: wrap;
-`
-
-export const StaturBar = styled.View`
-	margin-top: 30px;
-	margin-bottom: 18px;
-`
-
-export const StatusImage = styled.View`
-  
-`
-
-export const SectionTitle = styled.View`
-  
-`
-
-export const OrderCustomer = styled.View`
-  padding: 20px 40px 10px;
-  background-color: ${(props: any) => props.theme.colors.white};
-`
-
-export const OrderDriver = styled(OrderCustomer)``
-
-export const Customer = styled.View`
-  flex-direction: row;
-  align-items: center;
-`
-
-export const CustomerPhoto = styled.View`
-  margin-right: 20px;
-`
-
-export const InfoBlock = styled.View`
-  width: 100%;
-`
-
-export const HeaderInfo = styled.View`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-  padding: 20px 40px;
-`
-
-export const OrderProducts = styled(OrderCustomer)``
-
-export const Table = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-  align-items: center;
-  padding-bottom: 10px;
-`
-
-export const OrderBill = styled.View`
-  padding-horizontal: 40px;
-  padding-vertical: 10px;
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.white};
-`
-
-export const Total = styled.View`
-  border-top-width: 1px;
-  border-top-color: ${(props: any) => props.theme.colors.border};
-  padding-vertical: 10px
-`
-
-export const Map = styled.View`
-  width: 100%;
-  height: 250px;
-  margin-top: 20px;
-  border-radius: 20px
-`

package/themes/franchises/src/components/OrderSummary/index.tsx

@@ -1,266 +0,0 @@
-import React, { useState } from 'react';
-import { ActivityIndicator, TouchableOpacity, View } from 'react-native'
-import {
-  Cart,
-  useOrder,
-  useLanguage,
-  useUtils,
-  useConfig,
-  useValidationFields,
-} from 'ordering-components/native';
-
-import {
-  OSContainer,
-  OSProductList,
-  OSBill,
-  OSTable,
-  OSRow
-} from './styles';
-
-import { ProductItemAccordion } from '../ProductItemAccordion';
-import { CouponControl } from '../CouponControl';
-import { OInput, OModal, OText } from '../shared';
-import { ProductForm } from '../ProductForm';
-import { verifyDecimals } from '../../utils';
-import { TaxInformation } from '../TaxInformation';
-import AntIcon from 'react-native-vector-icons/AntDesign'
-import { useTheme } from 'styled-components/native';
-
-const OrderSummaryUI = (props: any) => {
-  const {
-    cart,
-    changeQuantity,
-    getProductMax,
-    offsetDisabled,
-    removeProduct,
-    isCartPending,
-    isFromCheckout,
-    commentState,
-    handleChangeComment
-  } = props;
-
-  const theme = useTheme()
-  const [, t] = useLanguage();
-  const [{ configs }] = useConfig();
-  const [orderState] = useOrder();
-  const [{ parsePrice, parseNumber }] = useUtils();
-  const [validationFields] = useValidationFields();
-  const [openProduct, setModalIsOpen] = useState(false)
-  const [curProduct, setCurProduct] = useState<any>(null)
-  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
-
-  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
-
-  const handleDeleteClick = (product: any) => {
-    removeProduct(product, cart)
-  }
-
-  const handleEditProduct = (product: any) => {
-    setCurProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handlerProductAction = (product: any) => {
-    if (Object.keys(product).length) {
-      setModalIsOpen(false)
-    }
-  }
-
-  const getIncludedTaxes = () => {
-    if (cart?.taxes === null) {
-      return cart.business.tax_type === 1 ? cart?.tax : 0
-    } else {
-      return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
-      }, 0)
-    }
-  }
-
-  return (
-    <OSContainer>
-      {cart?.products?.length > 0 && (
-        <>
-          <OSProductList>
-            {cart?.products.map((product: any) => (
-              <ProductItemAccordion
-                key={product.code}
-                product={product}
-                isCartPending={isCartPending}
-                isCartProduct
-                changeQuantity={changeQuantity}
-                getProductMax={getProductMax}
-                offsetDisabled={offsetDisabled}
-                onDeleteProduct={handleDeleteClick}
-                onEditProduct={handleEditProduct}
-                isFromCheckout={isFromCheckout}
-              />
-            ))}
-          </OSProductList>
-          {cart?.valid && (
-            <OSBill>
-              <OSTable>
-                <OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
-                <OText size={12}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
-              </OSTable>
-              {cart?.discount > 0 && cart?.total >= 0 && (
-                <OSTable>
-                  {cart?.discount_type === 1 ? (
-                    <OText size={12}>
-                      {t('DISCOUNT', 'Discount')}
-                      <OText size={12}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
-                    </OText>
-                  ) : (
-                    <OText size={12}>{t('DISCOUNT', 'Discount')}</OText>
-                  )}
-                  <OText size={12}>- {parsePrice(cart?.discount || 0)}</OText>
-                </OSTable>
-              )}
-              {
-                cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
-                  <OSTable key={tax?.id}>
-                    <OSRow>
-                      <OText size={12} numberOfLines={1}>
-                        {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                        {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
-                      </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
-                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
-                      </TouchableOpacity>
-                    </OSRow>
-                    <OText size={12}>{parsePrice(tax?.summary?.tax || 0)}</OText>
-                  </OSTable>
-                ))
-              }
-              {
-                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
-                  <OSTable key={fee.id}>
-                    <OSRow>
-                      <OText size={12} numberOfLines={1}>
-                        {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                        ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
-                      </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
-                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
-                      </TouchableOpacity>
-                    </OSRow>
-                    <OText size={12}>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
-                  </OSTable>
-                ))
-              }
-              {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
-                <OSTable>
-                  <OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                  <OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
-                </OSTable>
-              )}
-              {cart?.driver_tip > 0 && (
-                <OSTable>
-                  <OText size={12}>
-                    {t('DRIVER_TIP', 'Driver tip')}
-                    {cart?.driver_tip_rate > 0 &&
-                      parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-                      !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                      (
-                        `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
-                      )}
-                  </OText>
-                  <OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
-                </OSTable>
-              )}
-              {isCouponEnabled && !isCartPending && (
-                <View>
-                  <View style={{ paddingVertical: 5 }}>
-                    <CouponControl
-                      businessId={cart.business_id}
-                      price={cart.total}
-                    />
-                  </View>
-                </View>
-              )}
-              {cart?.total >= 1 && (
-                <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
-                  <OSTable style={{ marginTop: 15 }}>
-                    <OText size={14} style={{ fontWeight: 'bold' }}>
-                      {t('TOTAL', 'Total')}
-                    </OText>
-                    <OText size={14} style={{ fontWeight: 'bold' }} >
-                      {parsePrice(cart?.total)}
-                    </OText>
-                  </OSTable>
-                </View>
-              )}
-              {cart?.status !== 2 && (
-                <OSTable>
-                  <View style={{ width: '100%', marginTop: 20 }}>
-                    <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
-                    <View style={{ flex: 1, width: '100%' }}>
-                      <OInput
-                        value={cart?.comment}
-                        placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
-                        onChange={(value: string) => handleChangeComment(value)}
-                        style={{
-                          alignItems: 'flex-start',
-                          width: '100%',
-                          height: 100,
-                          borderColor: theme.colors.textSecondary,
-                          paddingRight: 50,
-                          marginTop: 10
-                        }}
-                        multiline
-                      />
-                      {commentState?.loading && (
-                        <View style={{ position: 'absolute', right: 20 }}>
-                          <ActivityIndicator
-                            size='large'
-                            style={{ height: 100 }}
-                            color={theme.colors.primary}
-                          />
-                        </View>
-                      )}
-                    </View>
-                  </View>
-                </OSTable>
-              )}
-            </OSBill>
-          )}
-          <OModal
-            open={openProduct}
-            entireModal
-            customClose
-            onClose={() => setModalIsOpen(false)}
-          >
-            <ProductForm
-              isCartProduct
-              productCart={curProduct}
-              businessSlug={cart?.business?.slug}
-              businessId={cart?.business_id}
-              categoryId={curProduct?.category_id}
-              productId={curProduct?.id}
-              onSave={handlerProductAction}
-              onClose={() => setModalIsOpen(false)}
-              isFromCheckout={isFromCheckout}
-            />
-          </OModal>
-          <OModal
-            open={openTaxModal.open}
-            onClose={() => setOpenTaxModal({ open: false, data: null })}
-            entireModal
-          >
-            <TaxInformation data={openTaxModal.data} products={cart.products} />
-          </OModal>
-        </>
-      )}
-    </OSContainer>
-  )
-}
-
-export const OrderSummary = (props: any) => {
-  const orderSummaryProps = {
-    ...props,
-    UIComponent: OrderSummaryUI
-  }
-
-  return (
-    <Cart {...orderSummaryProps} />
-  )
-}

package/themes/franchises/src/components/OrderSummary/styles.tsx

@@ -1,41 +0,0 @@
-import styled from 'styled-components/native';
-
-export const OSContainer = styled.View`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`
-
-export const OSProductList = styled.View``
-
-export const OSBill = styled.View`
-  padding: 14px 0px 20px;
-  border-top-width: 1px;
-  border-top-color: ${(props: any) => props.theme.colors.border};
-  margin-top: 20px;
-`
-
-export const OSTable = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding-vertical: 5px;
-`
-
-export const OSTotal = styled.View`
-  border-top-width: 1px;
-  border-top-color: #d9d9d9;
-  margin-top: 15px;
-`
-
-export const OSCoupon = styled.View`
-  width: 100%;
-  padding: 5px 0px;
-`
-
-export const OSRow = styled.View`
-  flex-direction: row;
-  overflow: hidden;
-  width: 80%;
-`

package/themes/franchises/src/components/OrderTypeSelector/index.tsx

@@ -1,92 +0,0 @@
-import React from 'react'
-import {
-	OrderTypeControl,
-	useLanguage,
-	useOrder,
-} from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import { Platform, View } from 'react-native'
-import { BgImage, ListWrapper, MaskCont, OrderTypeWrapper, Wrapper } from './styles'
-import { OrderTypeSelectParams } from '../../types'
-import { OIcon, OText } from '../shared'
-import NavBar from '../NavBar';
-import { ORDER_TYPES } from '../../config/constants';
-
-const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
-	const {
-		navigation,
-		handleChangeOrderType,
-		typeSelected,
-		defaultValue,
-		configTypes,
-		orderTypes
-	} = props
-
-	const theme = useTheme();
-	const [orderState] = useOrder();
-	const [, t] = useLanguage();
-	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	
-	const items = _orderTypes.map((type) => {
-		return {
-			value: type.value,
-			label: t(type.content, type.content),
-			description: t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
-		}
-	})
-
-	const goToBack = () => !orderState?.loading && navigation?.canGoBack() && navigation.goBack();
-
-	const handleChangeOrderTypeCallback = (orderType: number) => {
-		if (!orderState.loading) {
-			handleChangeOrderType(orderType)
-		}
-	}
-
-	return (
-		<Wrapper>
-			<NavBar
-				onActionLeft={() => goToBack()}
-				btnStyle={{ paddingLeft: 0 }}
-				paddingTop={0}
-				style={{ paddingBottom: 0 }}
-				title={t('HOW_WILL_YOUR_ORDER_TYPE', 'How will your order type?')}
-				titleAlign={'center'}
-				titleStyle={{ fontSize: 14 }}
-			/>
-			{
-			items.length > 0 && (
-				<ListWrapper>
-				{
-					items.map((item: any, idx: number) => 
-						<OrderTypeWrapper key={idx} disabled={orderState.loading} onPress={() => handleChangeOrderTypeCallback(item.value)}>
-							<BgImage source={theme.images.orderTypes[`type${item?.value || 1}`]} resizeMode={'cover'} style={{opacity: item?.value == typeSelected || typeSelected === undefined ? 1 : 0.4}}>
-								<MaskCont>
-									<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
-									<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
-									<View style={{flexDirection: 'row', alignItems: 'center'}}>
-										<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
-										<OIcon src={theme.images.general.arrow_left} width={16} color={theme.colors.white} style={{transform: [{ rotate: '180deg' }], marginStart: 4}} />
-									</View>
-								</MaskCont>
-							</BgImage>
-						</OrderTypeWrapper>
-					)
-				}
-				</ListWrapper>
-				)
-			}
-		</Wrapper>
-	)
-}
-
-export const OrderTypeSelector = (props: any) => {
-
-	const orderTypeProps = {
-		...props,
-		UIComponent: OrderTypeSelectorUI,
-		orderTypes: props.orderType || ORDER_TYPES
-	}
-
-	return <OrderTypeControl {...orderTypeProps} />
-}

package/themes/franchises/src/components/OrderTypeSelector/styles.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components/native'
-
-export const OrderTypeWrapper = styled.TouchableOpacity`
-  height: 100px;
-  min-height: 100px;
-  border-radius: 7.6px;
-  overflow: hidden;
-  margin-bottom: 24px;
-`
-export const Wrapper = styled.View`
-	flex: 1;
-`;
-
-export const ListWrapper = styled.View`
-  margin-top: 20px;
-`;
-
-export const BgImage = styled.ImageBackground`
-  width: 100%;
-  height: 100px;
-`;
-export const MaskCont = styled.View`
-  justify-content: center;
-  padding: 16px 39px;
-  background-color: #0000004D;
-  height: 100%;
-`;