ordering-ui-react-native 0.17.61 → 0.17.63

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

@@ -1,15 +1,17 @@
 import React, { useState } from 'react'
 import { PromotionsController, useLanguage, useUtils } from 'ordering-components/native'
+import FastImage from 'react-native-fast-image'
 import {
-    PromotionsContainer,
-    SingleOfferContainer,
-    OfferInformation,
-    SearchBarContainer,
-    SingleBusinessOffer,
-    AvailableBusinesses,
-    OfferData,
-    Code,
-    BusinessInfo
+  PromotionsContainer,
+  SingleOfferContainer,
+  OfferInformation,
+  SearchBarContainer,
+  SingleBusinessOffer,
+  AvailableBusinesses,
+  OfferData,
+  Code,
+  BusinessInfo,
+  WrapperSingleOffer
 } from './styles'
 import { SearchBar } from '../SearchBar'
 import NavBar from '../NavBar'
@@ -18,233 +20,244 @@ import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
 import { View, StyleSheet, ScrollView, Platform, RefreshControl } from 'react-native'
-import FastImage from 'react-native-fast-image'
 import { PromotionParams } from '../../types'
 import { Container } from '../../layouts/Container'
 
 const PromotionsUI = (props: PromotionParams) => {
-    const {
-        navigation,
-        offersState,
-        handleSearchValue,
-        searchValue,
-        loadOffers,
-        offerSelected,
-        setOfferSelected
-    } = props
+  const {
+    navigation,
+    offersState,
+    handleSearchValue,
+    searchValue,
+    loadOffers,
+    offerSelected,
+    setOfferSelected
+  } = props
 
-    const theme = useTheme();
+  const theme = useTheme();
 
-    const styles = StyleSheet.create({
-        productStyle: {
-            width: 75,
-            height: 75,
-            borderRadius: 7.6
-        },
-        buttonStyle: {
-            width: 55,
-            height: 25,
-            paddingLeft: 0,
-            paddingRight: 0
-        },
-        offerTitle: {
-            fontSize: 12
-        },
-        offerDescription: {
-            color: '#909BA9',
-            fontSize: 10
-        },
-        offerExtraInfo: {
-            fontSize: 10
-        },
-        modalButtonStyle: {
-            width: 100,
-            height: 35,
-            paddingLeft: 0,
-            paddingRight: 0,
-            borderRadius: 7.6
-        }
-    });
+  const styles = StyleSheet.create({
+    productStyle: {
+      width: 75,
+      height: 75,
+      borderRadius: 7.6
+    },
+    buttonStyle: {
+      width: '100%',
+      height: 35,
+      paddingLeft: 0,
+      paddingRight: 0,
+      borderRadius: 8
+    },
+    offerTitle: {
+      fontSize: 14
+    },
+    offerDescription: {
+      color: '#909BA9',
+      fontSize: 12
+    },
+    offerExtraInfo: {
+      fontSize: 12
+    },
+    modalButtonStyle: {
+      width: 100,
+      height: 35,
+      paddingLeft: 0,
+      paddingRight: 0,
+      borderRadius: 7.6
+    }
+  });
 
-    const [, t] = useLanguage()
-    const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
-    const [openModal, setOpenModal] = useState(false)
-    const [refreshing] = useState(false);
+  const [, t] = useLanguage()
+  const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
+  const [openModal, setOpenModal] = useState(false)
+  const [refreshing] = useState(false);
 
-    const handleClickOffer = (offer: any) => {
-        setOpenModal(true)
-        setOfferSelected(offer)
-    }
+  const handleClickOffer = (offer: any) => {
+    setOpenModal(true)
+    setOfferSelected(offer)
+  }
 
-    const handleBusinessClick = (store: any) => {
-        setOpenModal(false)
-        navigation.navigate('Business', { store: store.slug })
-    }
+  const handleBusinessClick = (store: any) => {
+    setOpenModal(false)
+    navigation.navigate('Business', { store: store.slug })
+  }
 
-    const handleOnRefresh = () => {
-        if (!offersState.loading) {
-            loadOffers();
-        }
+  const handleOnRefresh = () => {
+    if (!offersState.loading) {
+      loadOffers();
     }
+  }
 
-    const filteredOffers = offersState?.offers?.filter((offer: any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
-    const targetString = offerSelected?.target === 1
-        ? t('SUBTOTAL', 'Subtotal')
-        : offerSelected?.target === 2
-            ? t('DELIVERY_FEE', 'Delivery fee')
-            : t('SERVICE_FEE', 'Service fee')
+  const filteredOffers = offersState?.offers?.filter((offer: any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
+  const targetString = offerSelected?.target === 1
+    ? t('SUBTOTAL', 'Subtotal')
+    : offerSelected?.target === 2
+      ? t('DELIVERY_FEE', 'Delivery fee')
+      : t('SERVICE_FEE', 'Service fee')
 
-    return (
-        <Container
-            noPadding
-            refreshControl={
-                <RefreshControl
-                    refreshing={refreshing}
-                    onRefresh={() => handleOnRefresh()}
+  return (
+    <Container
+      noPadding
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => handleOnRefresh()}
+        />
+      }
+    >
+      <NavBar
+        title={t('PROMOTIONS', 'Promotions')}
+        titleAlign={'center'}
+        onActionLeft={() => navigation.goBack()}
+        showCall={false}
+        style={{ paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginLeft: 20 }}
+      />
+      <PromotionsContainer>
+        <SearchBarContainer>
+          <SearchBar
+            placeholder={t('SEARCH_OFFERS', 'Search offers')}
+            onSearch={handleSearchValue}
+          />
+        </SearchBarContainer>
+
+        {offersState?.loading && (
+          <>
+            {[...Array(5).keys()].map((key, i) => (
+              <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
+                <PlaceholderLine height={10} width={45} />
+                <PlaceholderLine height={10} width={60} />
+                <PlaceholderLine height={10} width={75} />
+              </Placeholder>
+            ))}
+          </>
+        )}
+        {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
+          <NotFoundSource
+            content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
+          />
+        )}
+        <ScrollView>
+          {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer: any) => (
+            <WrapperSingleOffer key={offer.id}>
+              <SingleOfferContainer>
+                <FastImage
+                  style={{ height: 80, width: 80, aspectRatio: 3 / 2, borderRadius: 8 }}
+                  source={typeof offer?.image !== 'number' ? {
+                    uri: optimizeImage(offer?.image, 'h_1024,c_limit'),
+                    priority: FastImage.priority.normal,
+                  } : theme.images?.dummies?.businessLogo}
                 />
-            }
+                <OfferInformation>
+                  <OText style={styles.offerTitle} numberOfLines={2}>{offer?.name}</OText>
+                  {!!offer?.description && (
+                    <OText style={styles.offerDescription} numberOfLines={2}>{offer?.description}</OText>
+                  )}
+                  <OText style={styles.offerExtraInfo}>
+                    {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
+                  </OText>
+                  <AvailableBusinesses>
+                    <OText style={styles.offerExtraInfo} numberOfLines={1}>
+                      {t('APPLY_FOR', 'Apply for')}:
+                      {offer.businesses.map((business: any, i: number) => (
+                        <React.Fragment key={i}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
+                      ))}
+                    </OText>
+                  </AvailableBusinesses>
+                </OfferInformation>
+              </SingleOfferContainer>
+              <OButton
+                onClick={() => handleClickOffer(offer)}
+                text={t('VIEW', 'View')}
+                style={styles.buttonStyle}
+                textStyle={{ fontSize: 14, color: '#fff', flexWrap: 'nowrap' }}
+              />
+            </WrapperSingleOffer>
+          ))}
+        </ScrollView>
+        <OModal
+          open={openModal}
+          entireModal
+          title={``}
+          onClose={() => setOpenModal(false)}
         >
-            <NavBar
-                title={t('PROMOTIONS', 'Promotions')}
-                titleAlign={'center'}
-                onActionLeft={() => navigation.goBack()}
-                showCall={false}
-                style={{ paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginLeft: 20 }}
-            />
-            <PromotionsContainer>
-                <SearchBarContainer>
-                    <SearchBar
-                        placeholder={t('SEARCH_OFFERS', 'Search offers')}
-                        onSearch={handleSearchValue}
-                    />
-                </SearchBarContainer>
-
-                {offersState?.loading && (
-                    <>
-                        {[...Array(5).keys()].map((key, i) => (
-                            <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
-                                <PlaceholderLine height={10} width={45} />
-                                <PlaceholderLine height={10} width={60} />
-                                <PlaceholderLine height={10} width={75} />
-                            </Placeholder>
-                        ))}
-                    </>
-                )}
-                {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
-                    <NotFoundSource
-                        content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
-                    />
-                )}
-                <ScrollView>
-                    {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer: any) => (
-                        <SingleOfferContainer key={offer.id}>
-                            <OfferInformation>
-                                <OText style={styles.offerTitle} numberOfLines={2}>{offer?.name}</OText>
-                                {!!offer?.description && (
-                                    <OText style={styles.offerDescription} numberOfLines={2}>{offer?.description}</OText>
-                                )}
-                                <OText style={styles.offerExtraInfo}>
-                                    {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
-                                </OText>
-                                <AvailableBusinesses>
-                                    <OText style={styles.offerExtraInfo} numberOfLines={1}>
-                                        {t('APPLY_FOR', 'Apply for')}:
-                                        {offer.businesses.map((business: any, i: number) => (
-                                            <React.Fragment key={i}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
-                                        ))}
-                                    </OText>
-                                </AvailableBusinesses>
-                            </OfferInformation>
-                            <OButton
-                                onClick={() => handleClickOffer(offer)}
-                                text={t('VIEW', 'View')}
-                                style={styles.buttonStyle}
-                                textStyle={{ fontSize: 10, color: '#fff', flexWrap: 'nowrap' }}
-                            />
-                        </SingleOfferContainer>
-                    ))}
-                </ScrollView>
-                <OModal
-                    open={openModal}
-                    onClose={() => setOpenModal(false)}
-                    entireModal
-
-                    title={``}
-                >
-                    <View style={{ padding: 20 }}>
-                        <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
-                            {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
-                        </OText>
-                        <OfferData>
-                            {offerSelected?.type === 2 && (
-                                <Code>
-                                    <OText>{t('YOUR_CODE', 'Your code')}</OText>
-                                    <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
-                                </Code>
-                            )}
-                            <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
-                            {offerSelected?.auto && (
-                                <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
-                            )}
-                            {!!offerSelected?.minimum && (
-                                <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purchase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
-                            )}
-                            {!!offerSelected?.max_discount && (
-                                <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
-                            )}
-                            {!!offerSelected?.description && (
-                                <OText>{offerSelected?.description}</OText>
-                            )}
-                        </OfferData>
-                        <OText style={{ marginTop: 10, marginBottom: 10 }}>
-                            {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
-                        </OText>
-                        <ScrollView style={{ height: '75%' }}>
-                            {offerSelected?.businesses?.map((business: any) => {
-                                return (
-                                    <SingleBusinessOffer key={business.id}>
-                                        {business?.logo ? (
-                                            <FastImage
-                                                style={styles.productStyle}
-                                                source={{
-                                                    uri: optimizeImage(business?.logo, 'h_250,c_limit'),
-                                                    priority: FastImage.priority.normal,
-                                                }}
-                                                resizeMode={FastImage.resizeMode.cover}
-                                            />
-                                        ) : (
-                                            <OIcon
-                                                src={theme?.images?.dummies?.product}
-                                                style={styles.productStyle}
-                                            />
-                                        )}
-                                        <BusinessInfo>
-                                            <OText style={{ maxWidth: '60%' }}>{business.name}</OText>
-                                            <OButton
-                                                onClick={() => handleBusinessClick(business)}
-                                                text={t('GO_TO_BUSINESSS', 'Go to business')}
-                                                style={styles.modalButtonStyle}
-                                                textStyle={{ fontSize: 10, color: '#fff' }}
-                                            />
-                                        </BusinessInfo>
-                                    </SingleBusinessOffer>
-                                )
-                            })}
-                        </ScrollView>
-                    </View>
-                </OModal>
-            </PromotionsContainer>
-        </Container>
-    )
+          <View style={{ padding: 20 }}>
+            <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
+              {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
+            </OText>
+            <OfferData>
+              {offerSelected?.type === 2 && (
+                <Code>
+                  <OText>{t('YOUR_CODE', 'Your code')}</OText>
+                  <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
+                </Code>
+              )}
+              <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
+              {offerSelected?.auto && (
+                <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
+              )}
+              {!!offerSelected?.minimum && (
+                <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purchase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
+              )}
+              {!!offerSelected?.max_discount && (
+                <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
+              )}
+              {!!offerSelected?.description && (
+                <OText>{offerSelected?.description}</OText>
+              )}
+            </OfferData>
+            <OText style={{ marginTop: 10, marginBottom: 10 }}>
+              {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
+            </OText>
+            <ScrollView
+              showsVerticalScrollIndicator={false}
+              style={{ height: '75%' }}
+            >
+              {offerSelected?.businesses?.map((business: any) => {
+                return (
+                  <SingleBusinessOffer key={business.id}>
+                    {business?.logo ? (
+                      <FastImage
+                        style={styles.productStyle}
+                        source={{
+                          uri: optimizeImage(business?.logo, 'h_250,c_limit'),
+                          priority: FastImage.priority.normal,
+                        }}
+                        resizeMode={FastImage.resizeMode.cover}
+                      />
+                    ) : (
+                      <OIcon
+                        src={theme?.images?.dummies?.product}
+                        style={styles.productStyle}
+                      />
+                    )}
+                    <BusinessInfo>
+                      <OText style={{ maxWidth: '60%' }}>{business.name}</OText>
+                      <OButton
+                        onClick={() => handleBusinessClick(business)}
+                        text={t('GO_TO_BUSINESSS', 'Go to business')}
+                        style={styles.modalButtonStyle}
+                        textStyle={{ fontSize: 10, color: '#fff' }}
+                      />
+                    </BusinessInfo>
+                  </SingleBusinessOffer>
+                )
+              })}
+            </ScrollView>
+          </View>
+        </OModal>
+      </PromotionsContainer>
+    </Container>
+  )
 }
 
 export const Promotions = (props: PromotionParams) => {
-    const PromotionsProps = {
-        ...props,
-        UIComponent: PromotionsUI
-    }
+  const PromotionsProps = {
+    ...props,
+    UIComponent: PromotionsUI
+  }
 
-    return (
-        <PromotionsController {...PromotionsProps} />
-    )
+  return (
+    <PromotionsController {...PromotionsProps} />
+  )
 }

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

@@ -6,18 +6,22 @@ export const PromotionsContainer = styled.View`
 	padding-right: 40px;
 `
 
+export const WrapperSingleOffer = styled.View`
+  flex-direction: column;
+  width: 100%;
+`
+
 export const SingleOfferContainer = styled.View`
   flex-direction: row;
   width: 100%;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
-
 `
 
 export const OfferInformation = styled.View`
   justify-content: space-between;
-  max-width: 75%;
+  max-width: 70%;
 `
 
 export const SearchBarContainer = styled.View`
@@ -29,6 +33,7 @@ export const SearchBarContainer = styled.View`
 
 export const SingleBusinessOffer = styled.View`
   flex-direction: row;
+  margin-bottom: 10px;
 `
 
 export const AvailableBusinesses = styled.View`

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

@@ -44,6 +44,9 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 
 	const theme = useTheme();
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+
+	const textSize = isChewLayout ? 12 : 10
 
 	const styles = StyleSheet.create({
 		container: {
@@ -77,8 +80,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			textTransform: 'uppercase',
 		},
 		productStyle: {
-			width: 75,
-			height: 75,
+			width: 85,
+			height: 85,
 			borderRadius: 7.6
 		},
 		quantityContainer: {
@@ -176,7 +179,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 						<CardInfo>
 							<View style={styles.titleWrapper}>
 								<OText
-									size={12}
+									size={textSize + 2}
 									weight={'500'}
 									numberOfLines={1}
 									ellipsizeMode="tail"
@@ -204,7 +207,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								)}
 							</PricesContainer>
 							<OText
-								size={10}
+								size={textSize}
 								numberOfLines={!isPreviously ? 2 : 1}
 								ellipsizeMode="tail"
 								color={theme.colors.textSecondary}
@@ -213,7 +216,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							</OText>
 							{isPreviously && (
 								<OText
-									size={10}
+									size={textSize}
 									numberOfLines={1}
 									ellipsizeMode="tail"
 									color={theme.colors.primary}
@@ -230,7 +233,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
 								>
 									<OText
-										size={10}
+										size={textSize}
 										weight={'400'}
 										color={theme.colors.white}
 										numberOfLines={2}
@@ -241,21 +244,14 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</OText>
 								</RibbonBox>
 							)}
-							{product?.images ? (
-								<FastImage
-									style={styles.productStyle}
-									source={{
-										uri: optimizeImage(product?.images, 'h_250,c_limit'),
-										priority: FastImage.priority.normal,
-									}}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
-							) : (
-								<OIcon
-									src={theme?.images?.dummies?.product}
-									style={styles.productStyle}
-								/>
-							)}
+							<FastImage
+								style={styles.productStyle}
+								source={product?.images ? {
+									uri: optimizeImage(product?.images, 'h_250,c_limit'),
+									priority: FastImage.priority.normal,
+								} : theme?.images?.dummies?.product}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
 						</LogoWrapper>
 
 						{(isSoldOut || maxProductQuantity <= 0) && (

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

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components/native'
 export const CardInfo = styled.View`
   padding-start: 3px;
   flex: 1;
+  min-height: 85px;
 `
 export const SoldOut = styled.View`
   position: absolute;

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

@@ -152,9 +152,11 @@ const UserDetailsUI = (props: any) => {
 			{!(validationFields.loading || formState.loading) && (
 				<UDContainer>
 					<UDHeader>
-						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
-							{t('CUSTOMER_DETAILS', 'Customer Details')}
-						</OText>
+						{props.HeaderTitle ?? (
+							<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
+								{t('CUSTOMER_DETAILS', 'Customer Details')}
+							</OText>
+						)}
 						{cartStatus !== 2 && !requiredFields && (
 							!isEdit ? (
 								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>

package/themes/original/src/components/shared/HeaderTitle.tsx

@@ -13,7 +13,7 @@ const HeaderTitle = (props: any) => {
       weight={Platform.OS === 'ios' ? '600' : 'bold'}
       style={style ?? {
         marginTop: Platform.OS === 'android' ? 50 : 30,
-        paddingHorizontal: 40,
+        paddingHorizontal: props.ph ?? 40,
         textTransform: 'capitalize',
         color: props.titleColor || theme.colors.textNormal,
       }}

package/themes/original/src/layouts/Container.tsx

@@ -18,7 +18,7 @@ export const Container = (props: any) => {
     <View
       style={{
         flex: 1,
-        paddingTop: insets.top,
+        paddingTop: props.pt ?? insets.top,
         backgroundColor: theme.colors.backgroundPage
       }}
     >