ordering-ui-react-native 0.12.57 → 0.12.58

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

@@ -1,87 +0,0 @@
-import React from 'react';
-import { BusinessProductsCategories as ProductsCategories } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { ScrollView, StyleSheet, View } from 'react-native';
-import { Tab } from './styles';
-import { OText } from '../shared';
-import { BusinessProductsCategoriesParams } from '../../types';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-
-const BusinessProductsCategoriesUI = (props: any) => {
-	const {
-		featured,
-		categories,
-		handlerClickCategory,
-		categorySelected,
-		loading,
-	} = props;
-
-	const theme = useTheme();
-	const styles = StyleSheet.create({
-		container: {
-			paddingVertical: 14,
-			borderColor: theme.colors.clear,
-		},
-		featuredStyle: {
-			display: 'none',
-		},
-	});
-
-	return (
-		<ScrollView
-			horizontal
-			style={{ ...styles.container, borderBottomWidth: loading ? 0 : 1 }}
-			contentContainerStyle={{ paddingHorizontal: 40 }}
-			showsHorizontalScrollIndicator={false}>
-			{loading && (
-				<Placeholder Animation={Fade}>
-					<View style={{ flexDirection: 'row' }}>
-						{[...Array(4)].map((item, i) => (
-							<PlaceholderLine key={i} width={10} style={{ marginRight: 5 }} />
-						))}
-					</View>
-				</Placeholder>
-			)}
-			{!loading &&
-				categories &&
-				categories.length &&
-				categories.map((category: any) => (
-					<Tab
-						key={category.name}
-						onPress={() => handlerClickCategory(category)}
-						style={[
-							category.id === 'featured' && !featured && styles.featuredStyle,
-							{
-								borderColor:
-									categorySelected?.id === category.id
-										? theme.colors.textNormal
-										: theme.colors.border,
-							},
-						]}>
-						<OText
-							size={categorySelected?.id === category.id ? 14 : 12}
-							weight={categorySelected?.id === category.id ? '600' : '400'}
-							color={
-								categorySelected?.id === category.id
-									? theme.colors.textNormal
-									: theme.colors.textSecondary
-							}
-							style={{ alignSelf: 'center' }}>
-							{category.name}
-						</OText>
-					</Tab>
-				))}
-		</ScrollView>
-	);
-};
-
-export const BusinessProductsCategories = (
-	props: BusinessProductsCategoriesParams,
-) => {
-	const businessProductsCategoriesProps = {
-		...props,
-		UIComponent: BusinessProductsCategoriesUI,
-	};
-
-	return <ProductsCategories {...businessProductsCategoriesProps} />;
-};

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

@@ -1,8 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Tab = styled.TouchableOpacity`
-  padding-horizontal: 10px;
-  padding-vertical: 10px;
-  justify-content: center;
-	border-bottom-width: 1px;
-`

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

@@ -1,199 +0,0 @@
-import React from 'react';
-import { ProductsList, useLanguage, useUtils } from 'ordering-components/native';
-import { SingleProductCard } from '../SingleProductCard';
-import { NotFoundSource } from '../NotFoundSource';
-import { BusinessProductsListParams } from '../../types';
-import { OIcon, OText } from '../shared';
-import { ProductsContainer, ErrorMessage, WrapperNotFound } from './styles';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native';
-
-const BusinessProductsListUI = (props: BusinessProductsListParams) => {
-  const {
-    errors,
-    businessId,
-    category,
-    categories,
-    categoryState,
-    onProductClick,
-    featured,
-    searchValue,
-    isBusinessLoading,
-    handleSearchRedirect,
-    handleClearSearch,
-    errorQuantityProducts,
-    handleCancelSearch,
-  } = props;
-
-  const [, t] = useLanguage();
-  const [{ optimizeImage }] = useUtils()
-
-  return (
-    <ProductsContainer>
-      {category.id &&
-        categoryState.products?.map((product: any) => (
-          <SingleProductCard
-            key={'prod_' + product.id}
-            isSoldOut={product.inventoried && !product.quantity}
-            product={product}
-            businessId={businessId}
-            onProductClick={() => onProductClick(product)}
-          />
-        ))}
-
-      {!category.id &&
-        featured &&
-        categoryState?.products?.find((product: any) => product.featured) && (
-          <>
-            <OText size={16} weight={'600'} mBottom={15}>
-              {t('FEATURED', 'Featured')}
-            </OText>
-            <>
-              {categoryState.products?.map(
-                (product: any) =>
-                  product.featured && (
-                    <SingleProductCard
-                      key={product.id}
-                      isSoldOut={product.inventoried && !product.quantity}
-                      product={product}
-                      businessId={businessId}
-                      onProductClick={onProductClick}
-                    />
-                  ),
-              )}
-            </>
-          </>
-        )}
-
-      {!category.id &&
-        categories &&
-        categories
-          .filter((category) => category.id !== null)
-          .map((category, i, _categories) => {
-            const products =
-              categoryState.products?.filter(
-                (product: any) => product.category_id === category.id,
-              ) || [];
-            return (
-              <React.Fragment key={'cat_' + category.id}>
-                {products.length > 0 && (
-                  <>
-                    <View style={bpStyles.catWrap}>
-                      <View style={bpStyles.catIcon}>
-                        <OIcon
-                          url={optimizeImage(category.image, 'h_100,c_limit')}
-                          width={41}
-                          height={41}
-                          style={{ borderRadius: 7.6 }}
-                        />
-                      </View>
-                      <OText size={16} weight="600">
-                        {category.name}
-                      </OText>
-                    </View>
-                    <>
-                      {products.map((product: any) => (
-                        <SingleProductCard
-                          key={product.id}
-                          isSoldOut={product.inventoried && !product.quantity}
-                          businessId={businessId}
-                          product={product}
-                          onProductClick={onProductClick}
-                        />
-                      ))}
-                    </>
-                  </>
-                )}
-              </React.Fragment>
-            );
-          })}
-
-      {(categoryState.loading || isBusinessLoading) && (
-        <>
-          {[...Array(categoryState?.pagination?.nextPageItems).keys()].map(
-            (item, i) => (
-              <Placeholder key={i} style={{ padding: 5 }} Animation={Fade}>
-                <View style={{ flexDirection: 'row' }}>
-                  <PlaceholderLine
-                    width={24}
-                    height={70}
-                    style={{ marginRight: 10, marginBottom: 10 }}
-                  />
-                  <Placeholder style={{ paddingVertical: 10 }}>
-                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
-                    <PlaceholderLine width={20} />
-                  </Placeholder>
-                </View>
-              </Placeholder>
-            ),
-          )}
-        </>
-      )}
-      {!categoryState.loading &&
-        !isBusinessLoading &&
-        categoryState.products.length === 0 &&
-        !errors &&
-        !(
-          (searchValue && errorQuantityProducts) ||
-          (!searchValue && !errorQuantityProducts)
-        ) && (
-          <WrapperNotFound>
-            <NotFoundSource
-              content={
-                !searchValue
-                  ? t(
-                      'ERROR_NOT_FOUND_PRODUCTS_TIME',
-                      'No products found at this time',
-                    )
-                  : t(
-                      'ERROR_NOT_FOUND_PRODUCTS',
-                      'No products found, please change filters.',
-                    )
-              }
-              btnTitle={
-                !searchValue
-                  ? t('SEARCH_REDIRECT', 'Go to Businesses')
-                  : t('CLEAR_FILTERS', 'Clear filters')
-              }
-              onClickButton={() =>
-                !searchValue
-                  ? handleSearchRedirect && handleSearchRedirect()
-                  : handleCancelSearch && handleCancelSearch()
-              }
-            />
-          </WrapperNotFound>
-        )}
-
-      {errors &&
-        errors.length > 0 &&
-        errors.map((e: any, i: number) => (
-          <ErrorMessage key={i}>
-            <OText space>ERROR:</OText>
-            <OText>{e}</OText>
-          </ErrorMessage>
-        ))}
-    </ProductsContainer>
-  );
-};
-
-const bpStyles = StyleSheet.create({
-  catWrap: { flexDirection: 'row', alignItems: 'center', height: 41, marginBottom: 19 },
-  catIcon: {
-    borderRadius: 7.6,
-    shadowColor: '#000000',
-    shadowOpacity: 0.1,
-    shadowOffset: { width: 0, height: 0 },
-    shadowRadius: 1,
-    marginEnd: 13,
-  },
-});
-
-export const BusinessProductsList = (props: BusinessProductsListParams) => {
-  const businessProductsListProps = {
-    ...props,
-    UIComponent: BusinessProductsListUI,
-  };
-
-  return <ProductsList {...businessProductsListProps} />;
-};

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

@@ -1,14 +0,0 @@
-import styled from 'styled-components/native'
-
-export const ProductsContainer = styled.View`
-`
-export const ErrorMessage = styled.View`
-  padding: 20px;
-  width: 100%;
-  background-color: #CCCCCC;
-  font-weight: bold;
-`
-
-export const WrapperNotFound = styled.View`
-  height: 500px;
-`

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

@@ -1,292 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet } from 'react-native'
-import { useTheme } from 'styled-components/native';
-import {
-	BusinessAndProductList,
-	useLanguage,
-	useOrder,
-	useSession,
-	useUtils,
-} from 'ordering-components/native'
-import { OButton, OIcon, OModal, OText } from '../shared'
-import { BusinessBasicInformation } from '../BusinessBasicInformation'
-import { SearchBar } from '../SearchBar'
-import { BusinessProductsCategories } from '../BusinessProductsCategories'
-import { BusinessProductsList } from '../BusinessProductsList'
-import { BusinessProductsListingParams } from '../../types'
-import {
-	WrapHeader,
-	TopHeader,
-	WrapSearchBar,
-	WrapContent,
-	BusinessProductsListingContainer
-} from './styles'
-import { FloatingButton } from '../FloatingButton'
-import { ProductForm } from '../ProductForm'
-import { UpsellingProducts } from '../UpsellingProducts'
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { _setStoreData } from '../../providers/StoreUtil';
-
-const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
-	const {
-		navigation,
-		errors,
-		businessState,
-		categoryState,
-		handleChangeSearch,
-		categorySelected,
-		searchValue,
-		handleChangeCategory,
-		handleSearchRedirect,
-		featuredProducts,
-		errorQuantityProducts,
-		header,
-		logo
-	} = props
-
-	const theme = useTheme();
-	const [, t] = useLanguage()
-	const [{ auth }] = useSession()
-	const [orderState] = useOrder()
-	const [{ parsePrice }] = useUtils()
-	const { top, bottom } = useSafeAreaInsets()
-
-	const styles = StyleSheet.create({
-		mainContainer: {
-			flex: 1,
-		},
-		BackIcon: {
-			paddingRight: 20,
-		},
-		headerItem: {
-			flexDirection: 'row',
-			alignItems: 'center',
-			marginVertical: 2,
-			marginHorizontal: 20,
-		},
-		btnBackArrow: {
-			borderWidth: 0,
-			backgroundColor: theme.colors.clear,
-			shadowColor: theme.colors.clear,
-			paddingLeft: 40,
-			paddingRight: 40
-		},
-		searchIcon: {
-			borderWidth: 0,
-			paddingEnd: 40,
-			shadowColor: theme.colors.clear,
-			backgroundColor: theme.colors.clear,
-		}
-	})
-
-	const { business, loading, error } = businessState
-	const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
-	const [curProduct, setCurProduct] = useState(null)
-	const [openUpselling, setOpenUpselling] = useState(false)
-	const [canOpenUpselling, setCanOpenUpselling] = useState(false)
-	const [showSearch, setShowSearch] = useState(false);
-
-	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
-
-	const onRedirect = (route: string, params?: any) => {
-		navigation.navigate(route, params)
-	}
-
-	const onProductClick = (product: any) => {
-		setCurProduct(product)
-	}
-
-	const handleCancel = () => {
-		handleChangeSearch('')
-	}
-
-	const handleCloseProductModal = () => {
-		setCurProduct(null)
-	}
-
-	const handlerProductAction = () => {
-		handleCloseProductModal()
-	}
-
-	const handleUpsellingPage = () => {
-		onRedirect('CheckoutNavigator', {
-			screen: 'CheckoutPage',
-			cartUuid: currentCart?.uuid,
-			businessLogo: logo,
-			businessName: business?.name,
-			cartTotal: currentCart?.total
-		})
-		setOpenUpselling(false)
-	}
-
-	const handleCloseUpsellingPage = () => {
-		setOpenUpselling(false)
-	}
-
-	useEffect(() => {
-		if (!orderState.loading) {
-			handleCloseProductModal()
-		}
-	}, [orderState.loading])
-
-	useEffect(() => {
-		if (businessState?.business?.logo) {
-			_setStoreData('b_logo', {businessLogo: businessState.business?.logo});
-		} else {
-			console.log('logo undefined!!')
-		}
-	}, [businessState])
-
-	return (
-		<>
-			<BusinessProductsListingContainer style={styles.mainContainer} isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}>
-				<WrapHeader>
-					<TopHeader style={{top: top}}>
-						<OButton
-							imgLeftSrc={theme.images.general.arrow_left}
-							imgRightSrc={null}
-							style={styles.btnBackArrow}
-							onClick={() => navigation?.canGoBack() && navigation.goBack()}
-							imgLeftStyle={{ tintColor: theme.colors.textSecondary, width: 20 }}
-						/>
-						<OButton
-							imgLeftSrc={theme.images.general.search}
-							imgRightSrc={null}
-							style={styles.searchIcon}
-							onClick={() => setShowSearch(!showSearch)}
-							imgLeftStyle={{ tintColor: theme.colors.textSecondary, width: 18 }}
-						/>
-					</TopHeader>
-					<BusinessBasicInformation
-						navigation={navigation}
-						businessState={businessState}
-						openBusinessInformation={openBusinessInformation}
-						logo={logo}
-						isMini
-					/>
-				</WrapHeader>
-				<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-				{!loading && business?.id && (
-					<>
-						{showSearch && 
-							<WrapSearchBar>
-								<SearchBar
-									onSearch={handleChangeSearch}
-									isCancelXButtonShow
-									noBorderShow
-									placeholder={t('SEARCH', 'Search')}
-									lazyLoad={businessState?.business?.lazy_load_products_recommended}
-								/>
-							</WrapSearchBar>
-						}
-						{!(business?.categories?.length === 0) && (
-							<BusinessProductsCategories
-								categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
-								categorySelected={categorySelected}
-								onClickCategory={handleChangeCategory}
-								featured={featuredProducts}
-								openBusinessInformation={openBusinessInformation}
-							/>
-						)}
-						<WrapContent>
-							<BusinessProductsList
-								categories={[
-									{ id: null, name: t('ALL', 'All') },
-									{ id: 'featured', name: t('FEATURED', 'Featured') },
-									...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
-								]}
-								category={categorySelected}
-								categoryState={categoryState}
-								businessId={business.id}
-								errors={errors}
-								onProductClick={onProductClick}
-								handleSearchRedirect={handleSearchRedirect}
-								featured={featuredProducts}
-								searchValue={searchValue}
-								handleClearSearch={handleChangeSearch}
-								errorQuantityProducts={errorQuantityProducts}
-								handleCancelSearch={handleCancel}
-							/>
-						</WrapContent>
-					</>
-				)}
-				{loading && !error && (
-					<>
-						<BusinessProductsCategories
-							categories={[]}
-							categorySelected={categorySelected}
-							onClickCategory={handleChangeCategory}
-							featured={featuredProducts}
-							openBusinessInformation={openBusinessInformation}
-							loading={loading}
-						/>
-						<WrapContent>
-							<BusinessProductsList
-								categories={[]}
-								category={categorySelected}
-								categoryState={categoryState}
-								isBusinessLoading={loading}
-								errorQuantityProducts={errorQuantityProducts}
-							/>
-						</WrapContent>
-					</>
-				)}
-			</BusinessProductsListingContainer>
-			{!loading && auth && !openUpselling && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
-				<FloatingButton
-					btnText={
-						currentCart?.subtotal >= currentCart?.minimum
-							? !openUpselling ? t('VIEW_CART', 'View Cart') : t('LOADING', 'Loading')
-							: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
-					}
-					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum}
-					btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
-					btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
-					btnLeftValue={currentCart?.products?.length}
-					btnRightValue={parsePrice(currentCart?.total)}
-					disabled={openUpselling || currentCart?.subtotal < currentCart?.minimum}
-					handleClick={() => setOpenUpselling(true)}
-					hasBottom
-				/>
-			)}
-			<OModal
-				open={!!curProduct}
-				onClose={handleCloseProductModal}
-				entireModal
-				customClose
-			>
-				<ProductForm
-					product={curProduct}
-					businessSlug={business.slug}
-					businessId={business.id}
-					onClose={handleCloseProductModal}
-					navigation={navigation}
-					onSave={handlerProductAction}
-				/>
-			</OModal>
-			{openUpselling && (
-				<UpsellingProducts
-					businessId={currentCart?.business_id}
-					business={currentCart?.business}
-					cartProducts={currentCart?.products}
-					cart={currentCart}
-					handleUpsellingPage={handleUpsellingPage}
-					handleCloseUpsellingPage={handleCloseUpsellingPage}
-					openUpselling={openUpselling}
-					canOpenUpselling={canOpenUpselling}
-					setCanOpenUpselling={setCanOpenUpselling}
-				/>
-			)}
-		</>
-	)
-}
-
-export const BusinessProductsListing = (props: BusinessProductsListingParams) => {
-	const businessProductslistingProps = {
-		...props,
-		UIComponent: BusinessProductsListingUI
-	}
-	return (
-		<BusinessAndProductList {...businessProductslistingProps} />
-	)
-}

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

@@ -1,30 +0,0 @@
-import styled, { css } from 'styled-components/native'
-
-export const WrapHeader = styled.View`
-  position: relative;
-  padding-bottom: 35px;
-`
-export const TopHeader = styled.View`
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 1;
-  height: 60px;
-  min-height: 60px;
-  width: 100%;
-`
-export const WrapSearchBar = styled.View`
-  padding: 8px 30px;
-  background-color: ${(props: any) => props.theme.colors.white};
-  flex: 1;
-`
-export const WrapContent = styled.View`
-  padding: 10px 40px;
-`
-
-export const BusinessProductsListingContainer = styled.ScrollView`
-  flex: 1;
-  ${({ isActiveFloatingButtom }: { isActiveFloatingButtom: boolean }) => isActiveFloatingButtom && css`
-    margin-bottom: 50px;
-  `}
-`