ordering-ui-react-native 0.17.24 → 0.17.25-release

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

@@ -56,7 +56,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
       if (order?.driver && !order?.user_review) {
         onNavigationRedirect('ReviewDriver', { order: order })
       } else {
-        onNavigationRedirect('MyOrders')
+        onNavigationRedirect('BottomTab', { screen: 'MyOrders' })
       }
     }
   }, [formState])
@@ -67,27 +67,39 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
         <NavBar
           title={t('REVIEW_PRODUCT', 'Review product')}
           titleAlign={'center'}
-          onActionLeft={() => onNavigationRedirect('MyOrders')}
+          onActionLeft={() => onNavigationRedirect('BottomTab', { screen: 'MyOrders' })}
           showCall={false}
           btnStyle={{ paddingLeft: 0 }}
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
-        {order?.products?.map((product: any) => !product?.deleted && (
-          <SingleProductReview
-            key={product.id}
-            product={product}
-            formState={formState}
-            handleChangeFormState={handleChangeFormState}
-          />
+        {order?.products && order.products.length > 0 && order?.products.map(productsOrder => (
+          productsOrder?.length ? productsOrder?.map((product: any, i: any) => !product?.deleted ?
+            <SingleProductReview
+              key={i}
+              product={product}
+              formState={formState}
+              handleChangeFormState={handleChangeFormState}
+            /> : null
+          ) : (!productsOrder?.deleted ? (
+            <SingleProductReview
+              product={productsOrder}
+              formState={formState}
+              handleChangeFormState={handleChangeFormState}
+            />
+          ) : null
+          )
         ))}
       </ReviewProductsContainer>
 
       <FloatingBottomContainer>
         <ActionContainer>
           <SkipButton
-            onPress={() => (order?.driver && !order?.user_review) ? onNavigationRedirect('ReviewDriver', { order: order }) : onNavigationRedirect('MyOrders')}
+            onPress={() => (order?.driver && !order?.user_review) ?
+              onNavigationRedirect('ReviewDriver', { order: order }) :
+              onNavigationRedirect('BottomTab', { screen: 'MyOrders' })
+            }
           >
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
@@ -95,7 +107,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
             textStyle={{ color: theme.colors.white, paddingRight: 10 }}
             text={order?.driver && !order?.user_review ? t('CONTINUE', 'Continue') : t('SEND_REVIEW', 'Send Review')}
             style={{ borderRadius: 8 }}
-			      imgRightSrc={theme.images.general.arrow_right}
+            imgRightSrc={theme.images.general.arrow_right}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
             isDisabled={formState.loading || formState?.changes?.length === 0}
             onClick={() => handleContinueClick()}

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

@@ -8,7 +8,8 @@ import {
   FormReviews,
   ActionContainer,
   RatingStarContainer,
-  PlacedDate
+  PlacedDate,
+  MultiLogosContainer
 } from './styles'
 import { OButton, OIcon, OText } from '../shared'
 import { StyleSheet, View, I18nManager } from 'react-native';
@@ -79,13 +80,30 @@ export const ReviewTrigger = (props: any) => {
     <>
       <ReviewOrderContainer>
         <BusinessLogo>
-          <View style={styles.logoWrapper}>
-            <OIcon
-              url={order?.logo}
-              width={80}
-              height={80}
-            />
-          </View>
+          {typeof order?.logo === 'string' || !order?.logo ? (
+            <View style={styles.logoWrapper}>
+              <OIcon
+                url={order?.logo}
+                width={80}
+                height={80}
+              />
+            </View>
+          ) : (
+            <MultiLogosContainer>
+              {order?.logo?.map((logo : string, i : number) => (
+                <React.Fragment key={logo}>
+                  <View style={styles.logoWrapper}>
+                    <OIcon
+                      url={logo}
+                      width={80}
+                      height={80}
+                    />
+                  </View>
+                </React.Fragment>
+              ))}
+            </MultiLogosContainer>
+
+          )}
         </BusinessLogo>
         {!!order?.business_name && <OText style={{ textAlign: 'center', marginTop: 15 }} color={theme.colors.textNormal}>{order?.business_name}</OText>}
         <View style={{ flex: 1, justifyContent: 'flex-end' }}>
@@ -115,4 +133,4 @@ export const ReviewTrigger = (props: any) => {
       </FloatingBottomContainer>
     </>
   )
-}
+}

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

@@ -31,4 +31,11 @@ export const RatingStarContainer = styled.View`
 `
 export const PlacedDate = styled.View`
   margin-top: 30px;
-`
+`
+
+export const MultiLogosContainer = styled.View`
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  width: 100%;
+`

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import { Platform, View } from 'react-native'
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+
+import {
+	Accordion,
+	AccordionSection,
+	DropdownWrapper,
+} from './styles'
+import { OIcon, OText } from '../shared';
+
+export const ScheduleAccordion = (props: any) => {
+
+	const {
+		scheduleFormatted,
+		schedule,
+		weekIndex
+	} = props
+
+	const [isActive, setActiveState] = useState(false)
+	const [, t] = useLanguage()
+	const theme = useTheme();
+
+	const daysOfWeek = [
+		t('DAY7', 'Sunday'),
+		t('DAY1', 'Monday'),
+		t('DAY2', 'Tuesday'),
+		t('DAY3', 'Wednesday'),
+		t('DAY4', 'Thursday'),
+		t('DAY5', 'Friday'),
+		t('DAY6', 'Saturday'),
+	];
+
+	return (
+		<AccordionSection>
+			<Accordion
+				onPress={() => setActiveState(!isActive)}
+				activeOpacity={1}
+			>
+				<DropdownWrapper>
+					<OText
+						mBottom={16}
+						mRight={8}
+						lineHeight={21}
+						size={14}
+						weight={Platform.OS === 'android' ? 'bold' : '600'}
+					>{daysOfWeek[weekIndex]}</OText>
+					<OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} />
+				</DropdownWrapper>
+				<View style={{ display: isActive ? 'flex' : 'none', paddingStart: 20 }}>
+					{schedule?.lapses?.map((lapse: any) => (
+						schedule?.enabled ?
+							<OText mBottom={16}>
+								{scheduleFormatted(lapse.open) +
+									' - ' +
+									scheduleFormatted(lapse.close)}
+							</OText>
+							:
+							<OText color={theme.colors.red} mBottom={16}>
+								{t('CLOSED', 'Closed')}
+							</OText>
+					))}
+				</View>
+			</Accordion>
+		</AccordionSection>
+	)
+}

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components/native'
+
+export const AccordionSection = styled.View`
+  background: #FFF;
+`
+
+export const Accordion = styled.TouchableOpacity`
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+export const DropdownWrapper = styled.View`
+  flex-direction: row;
+`

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useTheme } from 'styled-components/native'
-import { Platform, View, StyleSheet, Dimensions, ScrollView, TouchableOpacity } from 'react-native'
+import { Platform, View, StyleSheet, Dimensions, ScrollView, TouchableOpacity, Text } from 'react-native'
 import { OText, OButton, OModal, OIcon } from '../shared'
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -11,6 +11,8 @@ import FeatherIcon from 'react-native-vector-icons/Feather';
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ServiceFormParams } from '../../types'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import uuid from 'react-native-uuid';
+import { orderTypeList } from '../../utils'
 
 import {
   ProductForm as ProductFormController,
@@ -45,7 +47,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     maxProductQuantity,
     onClose,
     professionalListState,
-    isCartProduct
+    isCartProduct,
+    actionStatus,
+    handleCreateGuestUser
   } = props
 
   const theme = useTheme()
@@ -60,11 +64,14 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [selectDate, setSelectedDate] = useState<any>(new Date())
   const [timeList, setTimeList] = useState<any>([])
   const [isEnabled, setIsEnabled] = useState(false)
-  const [timeSelected, setTimeSelected] = useState(null)
+  const [timeSelected, setTimeSelected] = useState<string | null>(null)
   const [dateSelected, setDateSelected] = useState<any>(null)
   const [isOpen, setIsOpen] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState<any>(null)
 
+  const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
   const dropdownRef = useRef<any>(null)
 
   const styles = StyleSheet.create({
@@ -103,17 +110,41 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       height: 40,
       marginBottom: 30
     },
+    dropDownRow: {
+      color: theme.colors.primary,
+      fontSize: 14,
+      marginHorizontal: 0
+    },
     professionalList: {
       paddingHorizontal: 40,
-      paddingVertical: 30
+      paddingVertical: 30,
     }
   })
 
-  const isBusyTime = (professional: any) => {
-    if (professional?.busy_times?.length === 0 || !dateSelected) return false
-    const valid = professional?.busy_times.some((item: any) => {
-      return moment(item?.start).valueOf() <= moment(dateSelected).valueOf() &&
-        moment(dateSelected).valueOf() <= moment(item?.end).valueOf()
+  const getMomentTime = (time) => {
+    const _moment = moment(`${moment(selectDate).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
+    return _moment
+  }
+
+  const isBusyTime = (professional, selectedMoment) => {
+    if (!selectedMoment) return false
+    const startDay = moment(selectedMoment).utc().format('d')
+    const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
+    const duration = product?.duration ?? 0
+    const endDay = moment(selectedMoment).add(duration - 1, 'minutes').utc().format('d')
+    const isEndScheduleEnabled = professional?.schedule?.[endDay]?.enabled
+    if (!isStartScheduleEnabled || !isEndScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+
+    const busyTimes = isCartProduct
+      ? professional?.busy_times.filter(item => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
+      : [...professional?.busy_times]
+    const valid = busyTimes.some(item => {
+      return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
+        moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
+        (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
+        moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -134,6 +165,11 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     )
   }
 
+  const handleUpdateGuest = () => {
+		const guestToken = uuid.v4()
+		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+	}
+
   const customDayHeaderStylesCallback = () => {
     return {
       textStyle: {
@@ -248,6 +284,12 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       setCurrentProfessional(professional)
     }
   }, [isCartProduct, professionalListState?.professionals])
+
+  useEffect(() => {
+    if (!productCart?.calendar_event?.start) return
+    setSelectedDate(moment.utc(productCart?.calendar_event?.start).local())
+    setTimeSelected(moment.utc(productCart?.calendar_event?.start).local().format('HH:mm'))
+  }, [productCart])
   
   return (
     <>
@@ -359,9 +401,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                         size={12}
                         weight={'400'}
                         lineHeight={17}
-                        color={isBusyTime(currentProfessional) ? theme.colors.danger5 : theme.colors.success500}
+                        color={isBusyTime(currentProfessional, dateSelected) ? theme.colors.danger5 : theme.colors.success500}
                       >
-                        {isBusyTime(currentProfessional)
+                        {isBusyTime(currentProfessional, dateSelected)
                           ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
                           : t('AVAILABLE', 'Available')
                         }
@@ -409,7 +451,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                 {(timeList?.length > 0 && isEnabled) ? (
                   <SelectDropdown
                     ref={dropdownRef} 
-                    defaultValue={timeSelected}
+                    defaultValueByIndex={timeList.findIndex((item: any) => item.value === timeSelected)}
                     data={timeList}
                     onSelect={(selectedItem, index) => {
                       setTimeSelected(selectedItem?.value)
@@ -441,10 +483,12 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       paddingTop: 8,
                       paddingHorizontal: 12
                     }}
-                    rowTextStyle={{
-                      color: theme.colors.disabled,
-                      fontSize: 14,
-                      marginHorizontal: 0
+                    renderCustomizedRowChild={(item, index) => {
+                      return (
+                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                          {item.text}
+                        </Text>
+                      )
                     }}
                     renderDropdownIcon={() => dropDownIcon()}
                     dropdownOverlayColor='transparent'
@@ -517,7 +561,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       ? t('SOLD_OUT', 'Sold out')
                       : t('BOOK', 'Book'))}
                   style={styles.buttonStyle}
-                  isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected}
+                  isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional, dateSelected)}
                   textStyle={{ fontSize: 14, color: theme.colors.white }}
                 />
               )}
@@ -551,6 +595,17 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                   }}
                 />
               )}
+              {!auth && guestCheckoutEnabled && orderTypeEnabled &&  (
+                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                  {actionStatus?.loading ? (
+                    <Placeholder Animation={Fade}>
+                      <PlaceholderLine width={60} height={20} />
+                    </Placeholder>
+                  ) : (
+                    <OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+                  )}
+                </TouchableOpacity>
+              )}
           </ButtonWrapper>
         </Container>
       )}
@@ -604,9 +659,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     size={12}
                     weight={'400'}
                     lineHeight={17}
-                    color={isBusyTime(professional) ? theme.colors.danger5 : theme.colors.success500}
+                    color={isBusyTime(professional, dateSelected) ? theme.colors.danger5 : theme.colors.success500}
                   >
-                    {isBusyTime(professional)
+                    {isBusyTime(professional, dateSelected)
                       ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
                       : t('AVAILABLE', 'Available')
                     }

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, TouchableOpacity } from 'react-native'
+import { View, TouchableOpacity, Platform } from 'react-native'
 import { useLanguage, useSession, useUtils, Sessions as SessionsController } from 'ordering-components/native'
 import NavBar from '../NavBar'
 import { SessionsParams } from '../../types'
@@ -12,7 +12,8 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import {
   SessionsWrapper,
   SessionItem,
-  DurationWrapper
+  DurationWrapper,
+  Container
 } from './styles'
 
 export const SessionsUI = (props: SessionsParams) => {
@@ -27,7 +28,7 @@ export const SessionsUI = (props: SessionsParams) => {
   const [, t] = useLanguage()
   const [{ user }] = useSession()
   const [{ parseDate }] = useUtils()
-	const theme = useTheme()
+  const theme = useTheme()
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
@@ -61,7 +62,9 @@ export const SessionsUI = (props: SessionsParams) => {
   }
 
   return (
-    <>
+    <Container
+      pdng={Platform.OS === 'ios' ? '10px' : '0'}
+    >
       <NavBar
         title={t('SESSIONS', 'Sessions')}
         titleAlign={'center'}
@@ -77,11 +80,11 @@ export const SessionsUI = (props: SessionsParams) => {
               <SessionItem key={i}>
                 <Placeholder Animation={Fade}>
                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                    <View style={{ flex: 1}}>
+                    <View style={{ flex: 1 }}>
                       <PlaceholderLine width={40} />
                       <PlaceholderLine width={40} />
                     </View>
-                    <PlaceholderLine width={5}/>
+                    <PlaceholderLine width={5} />
                   </View>
                 </Placeholder>
               </SessionItem>
@@ -120,7 +123,7 @@ export const SessionsUI = (props: SessionsParams) => {
                   style={{ borderRadius: 7.6, marginTop: 20 }}
                 />
               </SessionsWrapper>
-             ) : (
+            ) : (
               <OText>{t('YOU_DONT_HAVE_ANY_SESSIONS', 'You don\'t have any sessions')}</OText>
             )
           )}
@@ -147,7 +150,7 @@ export const SessionsUI = (props: SessionsParams) => {
         onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
         onClose={() => setConfirm({ ...confirm, open: false, title: null })}
       />
-    </>
+    </Container>
   )
 }
 

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

@@ -13,3 +13,8 @@ export const SessionItem = styled.View`
 export const DurationWrapper = styled.View`
   /* flex-direction: row; */
 `
+
+export const Container = styled.View`
+  padding-top: ${(props: any) => props.pdng};
+  margin-bottom: 50px;
+`