ordering-ui-react-native 0.15.10-release → 0.15.12-release

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

@@ -0,0 +1,233 @@
+import React, { useState } from 'react'
+import { PromotionsController, useLanguage, useUtils, useEvent } from 'ordering-components/native'
+import {
+    PromotionsContainer,
+    SingleOfferContainer,
+    OfferInformation,
+    SearchBarContainer,
+    SingleBusinessOffer,
+    AvailableBusinesses,
+    OfferData,
+    Code,
+    BusinessInfo
+} from './styles'
+import { SearchBar } from '../SearchBar'
+import NavBar from '../NavBar'
+import { useTheme } from 'styled-components/native';
+import { OButton, OIcon, OModal, OText } from '../shared'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { NotFoundSource } from '../NotFoundSource'
+import { View, StyleSheet, ScrollView } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import { PromotionParams } from '../../types'
+const PromotionsUI = (props: PromotionParams) => {
+    const {
+        navigation,
+        offersState,
+        handleSearchValue,
+        searchValue,
+        offerSelected,
+        setOfferSelected
+    } = props
+
+    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 [, t] = useLanguage()
+    const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
+    const [openModal, setOpenModal] = useState(false)
+
+    const handleClickOffer = (offer: any) => {
+        setOpenModal(true)
+        setOfferSelected(offer)
+    }
+
+    const handleBusinessClick = (store: any) => {
+        setOpenModal(false)
+        navigation.navigate('Business', { store: store.slug })
+    }
+
+    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 (
+        <PromotionsContainer>
+            <NavBar
+                onActionLeft={() => navigation.goBack()}
+                btnStyle={{ paddingLeft: 0 }}
+                paddingTop={20}
+                style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
+                title={t('PROMOTIONS', 'Promotions')}
+                titleAlign={'center'}
+                titleStyle={{ fontSize: 16, marginRight: 0, marginLeft: 0, marginBottom: 10 }}
+                titleWrapStyle={{ paddingHorizontal: 0 }}
+            />
+            <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>
+    )
+}
+
+export const Promotions = (props: PromotionParams) => {
+    const PromotionsProps = {
+        ...props,
+        UIComponent: PromotionsUI
+    }
+
+    return (
+        <PromotionsController {...PromotionsProps} />
+    )
+}

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

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components/native'
+
+export const PromotionsContainer = styled.View`
+  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%;
+`
+
+export const SearchBarContainer = styled.View`
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+`
+
+export const SingleBusinessOffer = styled.View`
+  flex-direction: row;
+`
+
+export const AvailableBusinesses = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+`
+
+export const OfferData = styled.View`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`
+
+export const Code = styled.View`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 10px;
+`
+
+export const ValueOfOffer = styled.View``
+
+export const BusinessInfo = styled.View`
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 10px;
+`

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

@@ -7,10 +7,11 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer } from './styles';
+import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
 import { StyleSheet } from 'react-native';
 import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
+import { shape } from '../../utils';
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
 	const {
@@ -46,8 +47,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		productStyle: {
 			width: 75,
 			height: 75,
-			borderRadius: 7.6,
-			marginStart: 12
+			borderRadius: 7.6
 		},
 		quantityContainer: {
 			position: 'absolute',
@@ -136,21 +136,42 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					{product?.description}
 				</OText>
 			</CardInfo>
-			{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}
-				/>
-			)}
+			<LogoWrapper>
+				{product?.ribbon?.enabled && (
+					<RibbonBox
+						bgColor={product?.ribbon?.color}
+						isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
+						isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
+					>
+						<OText
+							size={10}
+							weight={'400'}
+							color={theme.colors.white}
+							numberOfLines={2}
+              ellipsizeMode='tail'
+							lineHeight={13}
+						>
+							{product?.ribbon?.text}
+						</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}
+					/>
+				)}
+			</LogoWrapper>
+
 			{(isSoldOut || maxProductQuantity <= 0) && (
 				<SoldOut>
 					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const CardContainer = styled.TouchableOpacity`
   flex: 1;
@@ -31,3 +31,30 @@ export const PricesContainer = styled.View`
   flex-direction: row;
   align-items: center;
 `
+
+export const LogoWrapper = styled.View`
+  position: relative;
+  margin-left: 12px;
+`
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  right: -4px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 60px;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`

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

@@ -16,6 +16,7 @@ import { LogoutButton } from '../LogoutButton'
 import { LanguageSelector } from '../LanguageSelector'
 import MessageCircle from 'react-native-vector-icons/AntDesign'
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import FastImage from 'react-native-fast-image'
 
 import {
@@ -101,7 +102,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	const { top, bottom } = useSafeAreaInsets();
 
 	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
-
+	const IsPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
@@ -178,6 +179,12 @@ const ProfileListUI = (props: ProfileParams) => {
 							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('WALLETS', 'Wallets')}</OText>
 						</ListItem>
 					)}
+					{IsPromotionsEnabled && (
+						<ListItem onPress={() => onRedirect('Promotions', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
+							<MaterialIcons name='local-offer' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('PROMOTIONS', 'Promotions')}</OText>
+						</ListItem>
+					)}
 					<ListItem onPress={() => navigation.navigate('Help', {})} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.ic_help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>

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

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import FastImage from 'react-native-fast-image'
 import {
   WalletList,
   useLanguage,
@@ -15,7 +16,10 @@ import {
   TransactionsWrapper,
   OTabs,
   OTab,
-  SectionContent
+  SectionContent,
+  LoyaltyContent,
+  LoyaltyWrapp,
+  LoyaltyImg
 } from './styles'
 
 import NavBar from '../NavBar'
@@ -27,6 +31,7 @@ const WalletsUI = (props: any) => {
   const {
     navigation,
     walletList,
+    userLoyaltyLevel,
     transactionsList,
     setWalletSelected,
     isWalletCashEnabled,
@@ -38,12 +43,27 @@ const WalletsUI = (props: any) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
 
+  const styles = StyleSheet.create({
+    logoStyle: {
+      width: 120,
+      height: 120,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }
+  });
+
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
 
   const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
   const currentWalletSelected = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === tabSelected)) ?? null
 
+  const loyaltyLevel = Object.keys(userLoyaltyLevel.loyaltyLevel ?? {}).length > 0 && userLoyaltyLevel.loyaltyLevel
+
   const walletName: any = {
     cash: {
       name: t('CASH_WALLET', 'Cash Wallet'),
@@ -86,6 +106,7 @@ const WalletsUI = (props: any) => {
       />
 
       {!walletList.loading &&
+        !userLoyaltyLevel.loading &&
         !walletList.error &&
         walletList.wallets?.length > 0 &&
       (
@@ -106,6 +127,39 @@ const WalletsUI = (props: any) => {
           </OTabs>
 
           <SectionContent>
+            {!!loyaltyLevel && (
+              <LoyaltyContent>
+                <LoyaltyWrapp>
+                  <OText size={20}>
+                    {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}:`}
+                  </OText>
+                  {loyaltyLevel.image ? (
+                    <FastImage
+                      style={styles.logoStyle}
+                      source={{
+                        uri: loyaltyLevel.image,
+                        priority: FastImage.priority.high,
+                        cache:FastImage.cacheControl.web
+                      }}
+                      resizeMode={FastImage.resizeMode.contain}
+                    />
+                  ) : (
+                    <LoyaltyImg
+                      source={theme.images.dummies.loyaltyLevel}
+                      resizeMode='contain'
+                    />
+                  )}
+                  <OText
+                    size={22}
+                    weight='bold'
+                    style={{ textTransform: 'uppercase' }}
+                    color={theme.colors.primary}
+                  >
+                    {loyaltyLevel.name}
+                  </OText>
+                </LoyaltyWrapp>
+              </LoyaltyContent>
+            )}
             <BalanceElement>
               <OText size={20} style={{fontWeight: '600'}}>
                 {currentWalletSelected?.type === 'cash'
@@ -172,7 +226,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {walletList?.loading && (
+      {(walletList?.loading || userLoyaltyLevel.loading) && (
         <>
           <View>
             <Placeholder Animation={Fade}>
@@ -196,7 +250,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {!walletList?.loading && (walletList?.error || !walletList?.wallets?.length) && (
+      {!walletList?.loading && !userLoyaltyLevel.loading && (walletList?.error || !walletList?.wallets?.length) && (
         <NotFoundSource
           content={walletList?.error
             ? t('ERROR_NOT_FOUND_WALLETS', 'Sorry, an error has occurred')

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

@@ -41,3 +41,24 @@ export const OTabs = styled.View`
 export const OTab = styled.View`
   padding-horizontal: 10px;
 `;
+
+export const LoyaltyContent = styled.View`
+  width: 100%;
+  margin-bottom: 20px;
+`
+
+export const LoyaltyWrapp = styled.View`
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`
+
+export const LoyaltyImg = styled.ImageBackground`
+  position: relative;
+  height: 150px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`

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

@@ -58,7 +58,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 				btnStyle={{ paddingLeft: 0 }}
 				paddingTop={0}
 				style={{ paddingBottom: 0 }}
-				title={t('HOW_WILL_YOUR_ORDER_TYPE', 'How will your order type?')}
+				title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 				titleAlign={'center'}
 				titleStyle={{ fontSize: 14 }}
 			/>