ordering-ui-react-native 0.12.56 → 0.12.60

package/themes/single-business/src/components/OrderSummary/index.tsx

@@ -1,25 +1,25 @@
 import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native'
+import { ActivityIndicator, TouchableOpacity, View } from 'react-native'
 import {
-	Cart,
-	useOrder,
-	useLanguage,
-	useUtils,
-	useConfig,
-	useValidationFields,
+  Cart,
+  useOrder,
+  useLanguage,
+  useUtils,
+  useConfig,
+  useValidationFields,
 } from 'ordering-components/native';
 
 import {
-	OSContainer,
-	OSProductList,
-	OSBill,
-	OSTable,
+  OSContainer,
+  OSProductList,
+  OSBill,
+  OSTable,
   OSRow
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OModal, OText } from '../shared';
+import { OInput, OModal, OText } from '../shared';
 import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
@@ -27,42 +27,44 @@ import { TaxInformation } from '../TaxInformation';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 
 const OrderSummaryUI = (props: any) => {
-	const {
-		cart,
-		changeQuantity,
-		getProductMax,
-		offsetDisabled,
-		removeProduct,
-		isCartPending,
-		isFromCheckout
-	} = props;
+  const {
+    cart,
+    changeQuantity,
+    getProductMax,
+    offsetDisabled,
+    removeProduct,
+    isCartPending,
+    isFromCheckout,
+    handleChangeComment,
+    commentState
+  } = 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 [, 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 isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
-	const handleDeleteClick = (product: any) => {
-		removeProduct(product, cart)
-	}
+  const handleDeleteClick = (product: any) => {
+    removeProduct(product, cart)
+  }
 
-	const handleEditProduct = (product: any) => {
-		setCurProduct(product)
-		setModalIsOpen(true)
-	}
+  const handleEditProduct = (product: any) => {
+    setCurProduct(product)
+    setModalIsOpen(true)
+  }
 
-	const handlerProductAction = (product: any) => {
-		if (Object.keys(product).length) {
-			setModalIsOpen(false)
-		}
-	}
+  const handlerProductAction = (product: any) => {
+    if (Object.keys(product).length) {
+      setModalIsOpen(false)
+    }
+  }
 
   const getIncludedTaxes = () => {
     if (cart?.taxes === null) {
@@ -74,46 +76,46 @@ const OrderSummaryUI = (props: any) => {
     }
   }
 
-	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>
-							)}
-							{
+  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>
@@ -145,68 +147,101 @@ const OrderSummaryUI = (props: any) => {
                   </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>
-							)}
-						</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>
+              {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
+                        inputStyle={{ color: theme.colors.textPrimary, fontSize: 12 }}
+                      />
+                      {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 })}
@@ -214,19 +249,19 @@ const OrderSummaryUI = (props: any) => {
           >
             <TaxInformation data={openTaxModal.data} products={cart.products} />
           </OModal>
-				</>
-			)}
-		</OSContainer>
-	)
+        </>
+      )}
+    </OSContainer>
+  )
 }
 
 export const OrderSummary = (props: any) => {
-	const orderSummaryProps = {
-		...props,
-		UIComponent: OrderSummaryUI
-	}
+  const orderSummaryProps = {
+    ...props,
+    UIComponent: OrderSummaryUI
+  }
 
-	return (
-		<Cart {...orderSummaryProps} />
-	)
+  return (
+    <Cart {...orderSummaryProps} />
+  )
 }

package/themes/franchises/index.tsx

@@ -1,111 +0,0 @@
-import { AddressForm } from './src/components/AddressForm';
-import { AddressDetails } from './src/components/AddressDetails';
-import { Home } from './src/components/Home';
-import { LoginForm } from './src/components/LoginForm';
-import { SignupForm } from './src/components/SignupForm';
-import { ActiveOrders } from './src/components/ActiveOrders';
-import { AddressList } from './src/components/AddressList';
-import { AppleLogin } from './src/components/AppleLogin';
-import { BusinessesListing } from './src/components/BusinessesListing';
-import { BusinessProductsListing } from './src/components/BusinessProductsListing';
-import { CartContent } from './src/components/CartContent';
-import { Checkout } from './src/components/Checkout';
-import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
-import { MomentOption } from './src/components/MomentOption';
-import { OrdersOption } from './src/components/OrdersOption';
-import { OrderDetails } from './src/components/OrderDetails';
-import { UserProfileForm } from './src/components/UserProfileForm';
-import { ReviewOrder } from './src/components/ReviewOrder';
-import { UserProfile } from './src/components/UserProfile';
-import { NotFoundSource } from './src/components/NotFoundSource';
-import { Help } from './src/components/Help';
-import { HelpOrder } from './src/components/HelpOrder';
-import { HelpGuide } from './src/components/HelpGuide';
-import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
-import { OrderTypeSelector } from './src/components/OrderTypeSelector';
-import Notifications from './src/components/Notifications';
-import { ReviewProduct } from './src/components/ReviewProduct';
-import { ReviewDriver } from './src/components/ReviewDriver';
-
-import { Toast } from './src/components/shared/OToast';
-import {
-	OText,
-	OButton,
-	OInput,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-	OModal,
-	OBottomPopup,
-} from './src/components/shared';
-
-import { Container } from './src/layouts/Container';
-import { SafeAreaContainer } from './src/layouts/SafeAreaContainer';
-import {
-	_retrieveStoreData,
-	_setStoreData,
-	_removeStoreData,
-	_clearStoreData
-} from './src/providers/StoreUtil';
-
-export {
-	AddressForm,
-	AddressDetails,
-	Home as HomeView,
-	SignupForm,
-	LoginForm,
-	ActiveOrders,
-	AddressList,
-	AppleLogin,
-	BusinessesListing,
-	BusinessProductsListing,
-	CartContent,
-	Checkout,
-	ForgotPasswordForm,
-	MomentOption,
-	OrdersOption,
-	OrderDetails,
-	UserProfileForm,
-	ReviewOrder,
-	UserProfile,
-	NotFoundSource,
-	Help,
-	HelpGuide,
-	HelpOrder,
-	HelpAccountAndPayment,
-	OrderTypeSelector,
-	Notifications,
-	ReviewProduct,
-	ReviewDriver,
-
-	// OComponents
-	Toast,
-	OText,
-	OButton,
-	OInput,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-	OModal,
-	OBottomPopup,
-
-	// layout
-	Container,
-	SafeAreaContainer,
-
-	// utils
-	_retrieveStoreData,
-	_setStoreData,
-	_removeStoreData,
-	_clearStoreData
-}

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

@@ -1,134 +0,0 @@
-import React, { useEffect } from 'react';
-import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
-import { OIcon, OIconButton, OText } from '../shared';
-import {
-	ActiveOrdersContainer,
-	Card,
-	Information,
-	Logo,
-	OrderInformation,
-	BusinessInformation,
-	Price,
-} from './styles';
-import { View, StyleSheet } from 'react-native';
-
-import { ActiveOrdersParams } from '../../types';
-import moment from 'moment';
-import { useTheme } from 'styled-components/native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-
-export const ActiveOrders = (props: ActiveOrdersParams) => {
-	const {
-		onNavigationRedirect,
-		orders,
-		pagination,
-		loadMoreOrders,
-		getOrderStatus,
-		isPreorders
-	} = props;
-
-	const theme = useTheme();
-	const [{ configs }] = useConfig();
-	const [, t] = useLanguage();
-	const [{ parseDate, parsePrice, optimizeImage }] = useUtils();
-
-	const formatDate = (date: string, option?: any) => {
-		return option?.utc ? moment.utc(date).format('DD/MM/YY \u2022 h:m a') : moment(date).format('DD/MM/YY \u2022 h:m a');
-	};
-
-	const handleClickCard = (uuid: string) => {
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: uuid });
-	};
-
-	const handleLike = () => {
-
-	}
-
-	const Order = ({ order, index }: { order: any; index: number }) => (
-		<React.Fragment>
-			<Card
-				isMiniCard={configs?.google_maps_api_key?.value}
-				onPress={() => handleClickCard(order?.uuid)}
-				activeOpacity={0.7}>
-				<Information>
-					{/* {!!order.business?.logo && (
-						<Logo>
-							<OIcon
-								url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-								style={styles.logo}
-							/>
-						</Logo>
-					)} */}
-					<OrderInformation>
-						<BusinessInformation>
-							<OText size={12} lineHeight={18} weight={600} numberOfLines={1} ellipsizeMode={'tail'}>
-								{`${t('ORDER_NO', 'Order No')}.${order.id}`}
-							</OText>
-							<OText size={10} lineHeight={21} color={theme.colors.textSecondary}>
-								{order?.delivery_datetime_utc
-									? formatDate(order?.delivery_datetime_utc)
-									: formatDate(order?.delivery_datetime, { utc: false })}
-							</OText>
-							{/* {order?.status !== 0 && ( */}
-							<OText
-								color={theme.colors.primary}
-								size={10}
-								lineHeight={15}
-								weight={400}
-								numberOfLines={2}>
-								{getOrderStatus(order.status)?.value}
-							</OText>
-							{/* )} */}
-						</BusinessInformation>
-						<Price>
-							<OText size={12} lineHeight={18}>
-								{parsePrice(order?.summary?.total || order?.total)}
-							</OText>
-							{!isPreorders &&
-								<TouchableOpacity onPress={handleLike}>
-									<OIcon src={theme.images.general.heart} color={theme.colors.red} width={16} />
-								</TouchableOpacity>
-							}
-						</Price>
-					</OrderInformation>
-				</Information>
-			</Card>
-		</React.Fragment>
-	);
-
-	return (
-		<>
-			<ActiveOrdersContainer isMiniCards={configs?.google_maps_api_key?.value}>
-				{orders.length > 0 &&
-					orders.map((order: any, index: any) => (
-						<Order key={order?.id || order?.uuid} order={order} index={index} />
-					))}
-			</ActiveOrdersContainer>
-			<View
-				style={{
-					height: 8,
-					backgroundColor: theme.colors.backgroundGray100,
-					marginHorizontal: -40,
-				}}
-			/>
-		</>
-	);
-};
-
-const styles = StyleSheet.create({
-	logo: {
-		borderRadius: 7.6,
-		width: 64,
-		height: 64,
-	},
-	orderNumber: {
-		flexDirection: 'row',
-		marginVertical: 3,
-	},
-	loadOrders: {
-		justifyContent: 'center',
-		alignItems: 'center',
-		minWidth: 230,
-	},
-});

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

@@ -1,44 +0,0 @@
-import styled from 'styled-components/native'
-
-export const ActiveOrdersContainer = styled.View`
-  margin-bottom: 20px;
-`
-
-export const Card = styled.TouchableOpacity`
-  flex: 1;
-`
-
-export const Map = styled.View`
-  flex: 1;
-  height: 125px;
-  margin-bottom: 22px
-`
-
-export const Information = styled.View`
-  flex-direction: row;
-  align-items: center;
-  padding-vertical: 5px;
-  margin-bottom: 12px;
-`
-
-export const Logo = styled.View`
-	border-radius: 7.6px;
-	box-shadow: 0 1px 2px #0000001A;
-`
-
-export const OrderInformation = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-`
-
-export const BusinessInformation = styled.View`
-	flex-basis: 65%;
-`
-
-export const Price = styled.View`
-  justify-content: flex-start;
-  align-items: flex-end;
-  margin-left: 10px;
-  width: 30%;
-`