ordering-ui-react-native 0.16.74 → 0.16.75-release

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

@@ -1,21 +1,21 @@
 import React, { useState } from 'react'
-import { ScrollView, TouchableOpacity, View, StyleSheet, Platform } from 'react-native'
-import { useUtils, useLanguage } from 'ordering-components/native'
+import { ScrollView, TouchableOpacity, View, StyleSheet } from 'react-native'
+import { useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
-import FastImage from 'react-native-fast-image'
-import { OIcon, OText, OModal } from '../shared'
+import { OText, OModal } from '../shared'
 import { ProfessionalProfile } from '../ProfessionalProfile'
 import { ProfessionalFilterParams } from '../../types'
+import { SingleProfessionalCard } from './SingleProfessionalCard'
 
 export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
   const {
     professionals,
     professionalSelected,
-		handleChangeProfessionalSelected
+		handleChangeProfessionalSelected,
+    handleUpdateProfessionals
   } = props
 
   const theme = useTheme()
-  const [{ optimizeImage }] = useUtils()
   const [, t] = useLanguage()
   const [open, setOpen] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState(null)
@@ -30,6 +30,11 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
     setOpen(false)
   }
 
+  const onUpdateProfessionals = (id, changes) => {
+    const updatedProfessional = professionals.find(professional => professional.id === id)
+    handleUpdateProfessionals({ ...updatedProfessional, ...changes })
+  }
+
   const styles = StyleSheet.create({
     professionalItem: {
       flexDirection: 'row',
@@ -39,12 +44,7 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
       borderWidth: 1,
       marginRight: 12,
       minHeight: 64
-    },
-		photoStyle: {
-			width: 42,
-			height: 42,
-			borderRadius: 7.6
-		}
+    }
   })
 
   return (
@@ -73,43 +73,14 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
             </OText>
           </View>
         </TouchableOpacity>
-        {professionals.map((professional: any, i: number) => (
-          <TouchableOpacity
-            key={i}
-            onPress={() => handleOpenProfile(professional)}
-          >
-            <View
-              style={{
-                ...styles.professionalItem,
-                borderColor: (professional?.id === professionalSelected?.id)
-                  ? theme.colors.primary
-                  : theme.colors.border 
-              }}
-            >
-              {professional?.photo ? (
-                <FastImage
-                  style={styles.photoStyle}
-                  source={{
-                    uri: optimizeImage(professional?.photo, 'h_250,c_limit'),
-                    priority: FastImage.priority.normal,
-                  }}
-                  resizeMode={FastImage.resizeMode.cover}
-                />
-              ) : (
-                <OIcon
-                  src={theme?.images?.dummies?.product}
-                  style={styles.photoStyle}
-                />
-              )}
-              <OText
-                size={12}
-                style={{ marginLeft: 12 }}
-                weight={'400'}
-              >
-                {professional?.name} {professional?.lastname}
-              </OText>
-            </View>
-          </TouchableOpacity>
+        {professionals.map((professional: any) => (
+          <SingleProfessionalCard
+            key={professional.id}
+            professional={professional}
+            active={professional?.id === professionalSelected?.id}
+            handleProfessionalClick={handleOpenProfile}
+            handleUpdateProfessionals={onUpdateProfessionals}
+          />
         ))}
       </ScrollView>
       <OModal

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

@@ -6,7 +6,7 @@ import CalendarPicker from 'react-native-calendar-picker'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import moment from 'moment'
 import SelectDropdown from 'react-native-select-dropdown'
-import { OButton, OText } from '../shared'
+import { OButton, OText, OIcon } from '../shared'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ProfessionalProfileParams } from '../../types'
@@ -58,6 +58,9 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
       height: 40,
       marginBottom: 30
     },
+    photoStyle: {
+      alignSelf: 'center'
+    }
   })
 
   const onDateChange = (date: any) => {
@@ -144,20 +147,28 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
   }
 
   useEffect(() => {
-    if (selectDate === null) return
+    if (selectDate === null || !professional?.schedule) return
     const _times = getTimes(selectDate, professional)
     setTimeList(_times)
   }, [selectDate, professional])
 
   return (
     <Container>
-			<ProfessionalPhoto
-				source={{
-					uri:
-          professional?.photo ||
-						optimizeImage(theme.images.general.user, 'h_250,c_limit'),
-				}}
-      />
+      {!!professional?.photo ? (
+        <ProfessionalPhoto
+          source={{
+            uri: professional?.photo
+          }}
+        />
+      ) : (
+        <OIcon
+          src={theme.images.general.user}
+          style={styles.photoStyle}
+          cover={false}
+          width={200}
+          height={200}
+        />
+      )}
       <InfoWrapper>
         <OText
           size={20}

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'
@@ -17,234 +19,246 @@ 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, Platform, RefreshControl } from 'react-native'
-import FastImage from 'react-native-fast-image'
+import { View, StyleSheet, ScrollView, RefreshControl } from 'react-native'
 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
+      pt={20}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => handleOnRefresh()}
+        />
+      }
+    >
+      <NavBar
+        title={t('PROMOTIONS', 'Promotions')}
+        titleAlign={'center'}
+        onActionLeft={() => navigation.goBack()}
+        showCall={false}
+        style={{ paddingVertical: 0, 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} />
+  )
 }