ordering-ui-react-native 0.14.68 → 0.14.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.68",
+  "version": "0.14.69",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -108,6 +108,7 @@
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^11.6.4",
+    "react-native-youtube-iframe": "^2.2.2",
     "rn-placeholder": "^3.0.3",
     "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",

package/src/components/shared/OIcon.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import { ImageStyle } from 'react-native'
 import styled from 'styled-components/native'
+import { useTheme } from 'styled-components/native'
 
 const Wrapper = styled.View``
 
@@ -23,10 +24,12 @@ interface Props {
 }
 
 const OImage = (props: Props): React.ReactElement => {
+  const theme = useTheme();
+  
   return (
     <Wrapper style={{ borderRadius: props.style?.borderRadius, overflow: 'hidden', marginHorizontal: props.style?.marginHorizontal }}>
       <SImage
-        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : require('../../assets/icons/lunch.png')}
+        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : theme.images.general.lunch || require('../../assets/icons/lunch.png')}
         style={{
           tintColor: props.color,
           flex: props.isWrap ? 1 : 0,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ProductsList, useLanguage, useUtils } from 'ordering-components/native';
+import { ProductsList, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
@@ -31,6 +31,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
   const [, t] = useLanguage();
   const [{ optimizeImage }] = useUtils()
+  const [{ configs }] = useConfig()
+  const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
 
   const handleOnLayout = (event: any, categoryId: any) => {
     const _categoriesLayout = { ...categoriesLayout }
@@ -80,52 +82,47 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           </View>
         )}
 
-      {!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}
-                      onLayout={(event: any) => handleOnLayout(event, category.id)}
-                    >
-                      <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.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
-                        <SingleProductCard
-                          key={i}
-                          isSoldOut={product.inventoried && !product.quantity}
-                          businessId={businessId}
-                          product={product}
-                          onProductClick={onProductClick}
-                          productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-                        />
-                      ))}
-                    </>
-                  </>
-                )}
-              </React.Fragment>
-            );
-          })}
+      {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
+        const products = !isUseParentCategory
+          ? categoryState?.products?.filter((product : any) => product?.category_id === category?.id) ?? []
+          : categoryState?.products?.filter((product : any) => category?.children?.some((cat : any) => cat.category_id === product?.category_id)) ?? []
+        return (
+          <React.Fragment key={'cat_' + category.id}>
+            {products.length > 0 && (
+              <>
+                <View
+                  style={bpStyles.catWrap}
+                  onLayout={(event: any) => handleOnLayout(event, category.id)}
+                >
+                  <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.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
+                    <SingleProductCard
+                      key={i}
+                      isSoldOut={product.inventoried && !product.quantity}
+                      businessId={businessId}
+                      product={product}
+                      onProductClick={onProductClick}
+                      productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                    />
+                  ))}
+                </>
+              </>
+            )}
+          </React.Fragment>
+        );
+      })}
 
       {(categoryState.loading || isBusinessLoading) && (
         <>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import {
 	ProductForm as ProductOptions,
 	useSession,
@@ -12,11 +12,12 @@ import { ProductOption } from '../ProductOption';
 import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import YoutubePlayer from "react-native-youtube-iframe"
 import {
 	Grayscale
 } from 'react-native-color-matrix-image-filters'
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView, Button, Alert } from 'react-native';
 
 import {
 	WrapHeader,
@@ -158,6 +159,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [indexGallery, setIndexGallery] = useState(0)
 	const [selOpt, setSelectedOpt] = useState(0);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
+	const [playing, setPlaying] = useState(false);
 	const [qtyBy, setQtyBy] = useState({
 		weight_unit: false,
 		pieces: true
@@ -216,7 +218,7 @@ export const ProductOptionsUI = (props: any) => {
 
 	const handleRedirectLogin = () => {
 		navigation.navigate('Login', {
-			store_slug:  props.businessSlug
+			store_slug: props.businessSlug
 		});
 	};
 
@@ -224,15 +226,34 @@ export const ProductOptionsUI = (props: any) => {
 		setQtyBy({ [val]: true, [!val]: false })
 	}
 
+	const onStateChange = useCallback((state) => {
+		if (state === "ended") {
+			setPlaying(false);
+		}
+	}, []);
+
+	const togglePlaying = useCallback(() => {
+		setPlaying((prev) => !prev);
+	}, []);
+
 	useEffect(() => {
-		const productImgList: any = []
-		product?.images && productImgList.push(product.images)
+		const imageList: any = []
+		const videoList: any = []
+		product?.images && imageList.push(product.images)
 		if (product?.gallery && product?.gallery.length > 0) {
 			for (const img of product?.gallery) {
-				productImgList.push(img.file)
+				if (img?.file) {
+					imageList.push(img?.file)
+				}
+				if (img?.video) {
+					const keys = img?.video.split('/')
+					const _videoId = keys[keys.length - 1]
+					videoList.push(_videoId)
+				}
 			}
 		}
-		setGallery(productImgList)
+		const gallery = imageList.concat(videoList)
+		setGallery(gallery)
 
 		if (product?.weight && product?.weight_unit) {
 			setIsHaveWeight(true)
@@ -349,18 +370,30 @@ export const ProductOptionsUI = (props: any) => {
 											</View>
 										}
 									>
-										{gallery.length > 0 && gallery.map((img, i) => (
+										{gallery && gallery.length > 0 && gallery.map((img, i) => (
 											<View
 												style={styles.slide1}
 												key={i}
 											>
-												<FastImage
-													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
-													source={{
-														uri: optimizeImage(img, 'h_258,c_limit'),
-														priority: FastImage.priority.normal,
-													}}
-												/>
+												{img.includes('image') ? (
+													<FastImage
+														style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
+														source={{
+															uri: optimizeImage(img, 'h_258,c_limit'),
+															priority: FastImage.priority.normal,
+														}}
+													/>
+												) : (
+													<>
+														<YoutubePlayer
+															height={300}
+															play={playing}
+															videoId={img}
+															onChangeState={onStateChange}
+														/>
+														<Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
+													</>
+												)}
 											</View>
 										))}
 									</Swiper>
@@ -384,18 +417,33 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-													<OIcon
-														url={img}
-														style={{
-															borderColor: theme.colors.lightGray,
-															borderRadius: 8,
-															minHeight: '100%',
-															opacity: isSoldOut ? 0.5 : 1
-														}}
-														width={56}
-														height={56}
-														cover
-													/>
+													{img.includes('image') ? (
+														<OIcon
+															url={img}
+															style={{
+																borderColor: theme.colors.lightGray,
+																borderRadius: 8,
+																minHeight: '100%',
+																opacity: isSoldOut ? 0.5 : 1
+															}}
+															width={56}
+															height={56}
+															cover
+														/>
+													) : (
+														<OIcon
+															url={'http://img.youtube.com/vi/' + img + '/0.jpg'}
+															style={{
+																borderColor: theme.colors.lightGray,
+																borderRadius: 8,
+																minHeight: '100%',
+																opacity: isSoldOut ? 0.5 : 1
+															}}
+															width={56}
+															height={56}
+															cover
+														/>
+													)}
 												</View>
 											</TouchableOpacity>
 

package/themes/original/src/types/index.tsx

@@ -203,7 +203,7 @@ export interface BusinessProductsListParams {
 	errors?: any;
 	businessId?: number;
 	category?: any;
-	categories?: Array<any>;
+	categories: Array<any>;
 	categoryState?: any;
 	onProductClick?: any;
 	handleSearchRedirect?: () => {};