ordering-ui-react-native 0.14.27 → 0.14.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.27",
+  "version": "0.14.28",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -70,6 +70,7 @@
     "react-native-bootsplash": "^3.2.3",
     "react-native-calendar-picker": "^7.1.2",
     "react-native-calendar-strip": "^2.2.5",
+    "react-native-color-matrix-image-filters": "^5.2.10",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
     "react-native-document-picker": "^5.2.0",

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

@@ -9,16 +9,19 @@ import {
 	BIInfo,
 	BIContentInfo,
 	BITotal,
-	BIActions
+	BIActions,
+	PriceContainer
 } from './styles';
-import { OAlert, OIcon, OText } from '../shared';
+import { OAlert, OButton, OIcon, OText } from '../shared';
 
 export const BusinessItemAccordion = (props: any) => {
 	const {
 		cart,
 		moment,
-    singleBusiness,
-		handleClearProducts
+		singleBusiness,
+		handleClearProducts,
+		handleClickCheckout,
+		checkoutButtonDisabled
 	} = props
 
 	const [orderState] = useOrder();
@@ -41,7 +44,7 @@ export const BusinessItemAccordion = (props: any) => {
 	}, [orderState?.carts])
 
 	return (
-		<BIContainer isClosed={isClosed}>
+		<BIContainer isClosed={isClosed} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
 				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
@@ -71,37 +74,39 @@ export const BusinessItemAccordion = (props: any) => {
 							{props.onNavigationRedirect && !isClosed && (
 								<>
 									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
-										<OText color={theme.colors.textSecondary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
+										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
 									</TouchableOpacity>
-									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 								</>
 							)}
 							{!isCartPending && !isClosed && (
-								<OAlert
-									title={t('DELETE_CART', 'Delete Cart')}
-									message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
-									onAccept={() => handleClearProducts()}
-								>
-									<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>{t('CLEAR_CART', 'Clear cart')}</OText>
-								</OAlert>
+								<>
+									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									<OAlert
+										title={t('DELETE_CART', 'Delete Cart')}
+										message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
+										onAccept={() => handleClearProducts()}
+									>
+										<OText size={12} lineHeight={18} color={theme.colors.primary} style={{ textDecorationLine: 'underline' }}>{t('CLEAR_CART', 'Clear cart')}</OText>
+									</OAlert>
+								</>
+							)}
+							{props.handleChangeStore && (
+								<>
+									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									<TouchableOpacity
+										onPress={props.handleChangeStore}
+									>
+										<OText
+											size={12}
+											lineHeight={18}
+											color={theme.colors.textSecondary}
+											style={{ textDecorationLine: 'underline' }}
+										>
+											{t('CHANGE_STORE', 'Change store')}
+										</OText>
+									</TouchableOpacity>
+								</>
 							)}
-              {props.handleChangeStore && (
-                <>
-                  <OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
-                  <TouchableOpacity
-                    onPress={props.handleChangeStore}
-                  >
-                    <OText
-                      size={12}
-                      lineHeight={18}
-                      color={theme.colors.textSecondary}
-                      style={{ textDecorationLine: 'underline' }}
-                    >
-                      {t('CHANGE_STORE', 'Change store')}
-                    </OText>
-                  </TouchableOpacity>
-                </>
-              )}
 						</View>
 					</BIContentInfo>
 				</BIInfo>
@@ -134,6 +139,19 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
+			{!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled && (
+				<PriceContainer>
+					<OText>{parsePrice(cart?.total)}</OText>
+					<OButton
+						onClick={handleClickCheckout}
+						textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+						style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+						text={t('CHECKOUT', 'Checkout')}
+						bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+						borderColor={theme.colors.primary}
+					/>
+				</PriceContainer>
+			)}
 
 			<BIContent style={{ display: isActive ? 'flex' : 'none' }}>
 				{props.children}

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

@@ -52,3 +52,10 @@ export const BIActions = styled.View`
   align-items: center;
   justify-content: flex-end;
 `
+
+export const PriceContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1
+`

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

@@ -42,7 +42,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   return (
     <ProductsContainer>
       {category.id &&
-        categoryState.products?.map((product: any) => (
+        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
           <SingleProductCard
             key={'prod_' + product.id}
             isSoldOut={product.inventoried && !product.quantity}
@@ -63,7 +63,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               {t('FEATURED', 'Featured')}
             </OText>
             <>
-              {categoryState.products?.map(
+              {categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map(
                 (product: any, i: any) =>
                   product.featured && (
                     <SingleProductCard
@@ -110,7 +110,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       </OText>
                     </View>
                     <>
-                      {products.map((product: any, i: any) => (
+                      {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                         <SingleProductCard
                           key={i}
                           isSoldOut={product.inventoried && !product.quantity}

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

@@ -145,6 +145,8 @@ const CartUI = (props: any) => {
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
         handleChangeStore={props.isFranchiseApp ? () => setOpenChangeStore(true) : null}
+        handleClickCheckout={() => setOpenUpselling(true)}
+        checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any) => (
           <ProductItemAccordion

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

@@ -12,6 +12,9 @@ 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 {
+	Grayscale
+} from 'react-native-color-matrix-image-filters'
 
 import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry, I18nManager } from 'react-native';
 
@@ -149,9 +152,12 @@ export const ProductOptionsUI = (props: any) => {
 		if (errors[`id:${id}`]) {
 			bgColor = 'rgba(255, 0, 0, 0.05)';
 		}
-		if (isSoldOut || maxProductQuantity <= 0) {
+		if (maxProductQuantity <= 0) {
 			bgColor = 'hsl(0, 0%, 72%)';
 		}
+		if (isSoldOut) {
+			bgColor = theme.colors.white;
+		}
 		return bgColor;
 	};
 
@@ -316,13 +322,15 @@ export const ProductOptionsUI = (props: any) => {
 												style={styles.slide1}
 												key={i}
 											>
-												<FastImage
-													style={{ height: '100%' }}
-													source={{
-														uri: optimizeImage(img, 'h_258,c_limit'),
-														priority: FastImage.priority.normal,
-													}}
-												/>
+												<Grayscale amount={isSoldOut ? 1 : 0}>
+													<FastImage
+														style={{ height: '100%' }}
+														source={{
+															uri: optimizeImage(img, 'h_258,c_limit'),
+															priority: FastImage.priority.normal,
+														}}
+													/>
+												</Grayscale>
 											</View>
 										))}
 									</Swiper>
@@ -346,17 +354,19 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-													<OIcon
-														url={img}
-														style={{
-															borderColor: theme.colors.lightGray,
-															borderRadius: 8,
-															minHeight: '100%'
-														}}
-														width={56}
-														height={56}
-														cover
-													/>
+													<Grayscale amount={isSoldOut ? 1 : 0}>
+														<OIcon
+															url={img}
+															style={{
+																borderColor: theme.colors.lightGray,
+																borderRadius: 8,
+																minHeight: '100%'
+															}}
+															width={56}
+															height={56}
+															cover
+														/>
+													</Grayscale>
 												</View>
 											</TouchableOpacity>
 
@@ -488,13 +498,7 @@ export const ProductOptionsUI = (props: any) => {
 															{t('INGREDIENTS', 'Ingredients')}
 														</OText>
 													</SectionTitle>
-													<WrapperIngredients
-														style={{
-															backgroundColor:
-																isSoldOut || maxProductQuantity <= 0
-																	? 'hsl(0, 0%, 72%)'
-																	: theme.colors.white,
-														}}>
+													<WrapperIngredients>
 														{product?.ingredients.map((ingredient: any) => (
 															<ProductIngredient
 																key={ingredient.id}
@@ -503,6 +507,7 @@ export const ProductOptionsUI = (props: any) => {
 																	productCart.ingredients[`id:${ingredient.id}`]
 																}
 																onChange={handleChangeIngredientState}
+																isSoldOut={isSoldOut}
 															/>
 														))}
 													</WrapperIngredients>
@@ -540,6 +545,7 @@ export const ProductOptionsUI = (props: any) => {
 																					return (
 																						<ProductOptionSubOption
 																							key={suboption.id}
+																							isSoldOut={isSoldOut}
 																							onChange={
 																								handleChangeSuboptionState
 																							}
@@ -573,13 +579,7 @@ export const ProductOptionsUI = (props: any) => {
 															{t('INGREDIENTS', 'Ingredients')}
 														</OText>
 													</SectionTitle>
-													<WrapperIngredients
-														style={{
-															backgroundColor:
-																isSoldOut || maxProductQuantity <= 0
-																	? 'hsl(0, 0%, 72%)'
-																	: theme.colors.white,
-														}}>
+													<WrapperIngredients>
 														{product?.ingredients.map((ingredient: any) => (
 															<ProductIngredient
 																key={ingredient.id}
@@ -588,6 +588,7 @@ export const ProductOptionsUI = (props: any) => {
 																	productCart.ingredients[`id:${ingredient.id}`]
 																}
 																onChange={handleChangeIngredientState}
+																isSoldOut={isSoldOut}
 															/>
 														))}
 													</WrapperIngredients>

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

@@ -10,18 +10,19 @@ const ProductIngredientUI = (props: any) => {
 	const {
 		state,
 		ingredient,
-		toggleSelect
+		toggleSelect,
+		isSoldOut
 	} = props
 
 	const theme = useTheme();
 
 	return (
-		<Container onPress={() => toggleSelect()}>
+		<Container disabled={isSoldOut} onPress={() => toggleSelect()}>
 			<View>
-				{state?.selected ? (
+				{state?.selected && !isSoldOut ? (
 					<MaterialCommunityIcon name='checkbox-marked' color={theme.colors.primary} size={24} />
 				) : (
-					<MaterialCommunityIcon name='checkbox-blank-outline' color={theme.colors.backgroundDark} size={24} />
+					<MaterialCommunityIcon name='checkbox-blank-outline' color='#cbcbcb' size={24} />
 				)}
 			</View>
 			<OText mLeft={10}>

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

@@ -53,8 +53,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 
 	return (
-		<Container disabled={disabled}>
-			<IconControl onPress={() => handleSuboptionClick()}>
+		<Container>
+			<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 				{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 					state?.selected ? (
 						<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
@@ -73,30 +73,30 @@ export const ProductOptionSubOptionUI = (props: any) => {
 				</OText>
 			</IconControl>
 			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
-			{option?.allow_suboption_quantity && (
+			{option?.allow_suboption_quantity && state?.selected && (
 				<QuantityControl>
-					<Checkbox disabled={state.quantity === 0} onPress={decrement}>
+					<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
 						<OIcon
 							src={theme.images.general.minus}
 							width={16}
-							color={state.quantity === 0 ? theme.colors.disabled : theme.colors.primary}
+							color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
 						/>
 					</Checkbox>
 					<OText mLeft={5} mRight={5}>
 						{state.quantity}
 					</OText>
-					<Checkbox disabled={disableIncrement} onPress={increment}>
+					<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
 						<OIcon
 							src={theme.images.general.plus}
 							width={16}
-							color={disableIncrement ? theme.colors.disabled : theme.colors.primary}
+							color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
 						/>
 					</Checkbox>
 				</QuantityControl>
 			)}
-			{option?.with_half_option && (
+			{option?.with_half_option && state?.selected && (
 				<PositionControl>
-					<Circle onPress={() => changePosition('left')}>
+					<Circle disabled={disabled} onPress={() => changePosition('left')}>
 						<OIcon
 							src={theme.images.general.half_l}
 							color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
@@ -104,14 +104,14 @@ export const ProductOptionSubOptionUI = (props: any) => {
 							style={styles.inverse}
 						/>
 					</Circle>
-					<Circle onPress={() => changePosition('whole')}>
+					<Circle disabled={disabled} onPress={() => changePosition('whole')}>
 						<OIcon
 							src={theme.images.general.half_f}
 							color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
 							width={16}
 						/>
 					</Circle>
-					<Circle onPress={() => changePosition('right')}>
+					<Circle disabled={disabled} onPress={() => changePosition('right')}>
 						<OIcon
 							src={theme.images.general.half_r}
 							color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}