ordering-ui-react-native 0.17.72 → 0.17.73-release

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

@@ -0,0 +1,108 @@
+import React from 'react'
+import {
+  useSession,
+  useUtils,
+  SingleProfessionalCard as SingleProfessionalCardController
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import { OIcon, OText } from '../../shared'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+
+const SingleProfessionalCardUI = (props) => {
+  const {
+    professional,
+    handleFavoriteProfessional,
+    active,
+    handleProfessionalClick
+  } = props
+
+  const theme = useTheme()
+  const [{ auth }] = useSession()
+  const [{ optimizeImage }] = useUtils()
+
+  const handleChangeFavorite = () => {
+    if (auth) {
+      handleFavoriteProfessional && handleFavoriteProfessional(!professional?.favorite)
+    }
+  }
+
+  const styles = StyleSheet.create({
+    professionalItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 7.6,
+      padding: 11,
+      borderWidth: 1,
+      marginRight: 12,
+      minHeight: 64
+    },
+		photoStyle: {
+			width: 42,
+			height: 42,
+			borderRadius: 7.6
+		},
+    favoriteIconStyle: {
+			width: 16,
+			height: 16,
+		},
+  })
+
+  return (
+    <TouchableOpacity
+      onPress={() => handleProfessionalClick(professional)}
+    >
+      <View
+        style={{
+          ...styles.professionalItem,
+          borderColor: active
+            ? 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?.general?.user}
+            cover={false}
+            style={styles.photoStyle}
+          />
+        )}
+        <View style={{ marginLeft: 12 }}>
+          <OText
+            size={12}
+            weight={'400'}
+          >
+            {professional?.name} {professional?.lastname}
+          </OText>
+
+          <TouchableOpacity
+            onPress={() => handleChangeFavorite()}
+          >
+            {professional?.favorite
+              ? <IconAntDesign name='heart' size={16} color={theme.colors.danger5} />
+              : <IconAntDesign name='hearto' size={16} color={theme.colors.danger5} />
+            }
+          </TouchableOpacity>
+        </View>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+export const SingleProfessionalCard = (props) => {
+  const singleProfessionalCardProps = {
+    ...props,
+    UIComponent: SingleProfessionalCardUI
+  }
+  return <SingleProfessionalCardController {...singleProfessionalCardProps} />
+}

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,44 +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?.general?.user}
-                  cover={false}
-                  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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { StyleSheet, Platform, View, Dimensions } from 'react-native'
+import { StyleSheet, Platform, View, Dimensions, Text } from 'react-native'
 import { useUtils, useLanguage, useConfig } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 import CalendarPicker from 'react-native-calendar-picker'
@@ -60,7 +60,12 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
     },
     photoStyle: {
       alignSelf: 'center'
-    }
+    },
+    dropDownRow: {
+      color: theme.colors.primary,
+      fontSize: 14,
+      marginHorizontal: 0
+    },
   })
 
   const onDateChange = (date: any) => {
@@ -92,6 +97,28 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
     setIsEnabled(menu?.schedule?.[day]?.enabled || false)
   }
 
+  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
+    if (!isStartScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+
+    const busyTimes = 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())
+    })
+    return valid
+  }
+
   const getTimes = (curdate: any, menu: any) => {
     validateSelectedDate(curdate, menu)
     const date = new Date()
@@ -147,7 +174,7 @@ 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])
@@ -238,10 +265,12 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
                   paddingTop: 8,
                   paddingHorizontal: 12
                 }}
-                rowTextStyle={{
-                  color: theme.colors.disabled,
-                  fontSize: 14,
-                  marginHorizontal: 0
+                renderCustomizedRowChild={(item, index) => {
+                  return (
+                    <Text style={[styles.dropDownRow, { color: isBusyTime(professional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                      {item.text}
+                    </Text>
+                  )
                 }}
                 renderDropdownIcon={() => dropDownIcon()}
                 dropdownOverlayColor='transparent'

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

@@ -143,7 +143,7 @@ const PromotionsUI = (props: PromotionParams) => {
             <WrapperSingleOffer key={offer.id}>
               <SingleOfferContainer>
                 <FastImage
-                  style={{ height: 80, width: 80, aspectRatio: 3 / 2, borderRadius: 8 }}
+                  style={{ height: 80, width: 80, aspectRatio: 1, borderRadius: 8 }}
                   source={typeof offer?.image !== 'number' ? {
                     uri: optimizeImage(offer?.image, 'h_1024,c_limit'),
                     priority: FastImage.priority.normal,
@@ -212,7 +212,7 @@ const PromotionsUI = (props: PromotionParams) => {
             </OText>
             <ScrollView
               showsVerticalScrollIndicator={false}
-              style={{ height: '75%' }}
+              style={{ height: '68%' }}
             >
               {offerSelected?.businesses?.map((business: any) => {
                 return (

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

@@ -9,6 +9,7 @@ export const PromotionsContainer = styled.View`
 export const WrapperSingleOffer = styled.View`
   flex-direction: column;
   width: 100%;
+  margin-bottom: 30px;
 `
 
 export const SingleOfferContainer = styled.View`
@@ -16,11 +17,12 @@ export const SingleOfferContainer = styled.View`
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 `
 
 export const OfferInformation = styled.View`
   justify-content: space-between;
+  min-width: 70%;
   max-width: 70%;
 `
 

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

@@ -74,13 +74,22 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
           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>
 

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

@@ -13,7 +13,7 @@ import { OIcon, OText } from '../shared';
 export const ScheduleAccordion = (props: any) => {
 
 	const {
-		scheduleFormatted,
+		timeFormated,
 		schedule,
 		weekIndex
 	} = props
@@ -52,9 +52,9 @@ export const ScheduleAccordion = (props: any) => {
 					{schedule?.lapses?.map((lapse: any) => (
 						schedule?.enabled ?
 							<OText mBottom={16}>
-								{scheduleFormatted(lapse.open) +
+								{timeFormated(lapse.open) +
 									' - ' +
-									scheduleFormatted(lapse.close)}
+									timeFormated(lapse.close)}
 							</OText>
 							:
 							<OText color={theme.colors.red} mBottom={16}>

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()
@@ -65,6 +69,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   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,23 +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 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: any) => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
+      ? 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: any) => {
-      return (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).valueOf() &&
-        moment(dateSelected).valueOf() <= moment.utc(item?.end).local().valueOf()) ||
-        (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).add(duration, 'minutes').valueOf() &&
-        moment(dateSelected).add(duration, 'minutes').valueOf() <= moment.utc(item?.end).local().valueOf())
+    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
   }
@@ -140,6 +165,11 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     )
   }
 
+  const handleUpdateGuest = () => {
+		const guestToken = uuid.v4()
+		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+	}
+
   const customDayHeaderStylesCallback = () => {
     return {
       textStyle: {
@@ -371,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')
                         }
@@ -453,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'
@@ -529,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 || isBusyTime(currentProfessional)}
+                  isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional, dateSelected)}
                   textStyle={{ fontSize: 14, color: theme.colors.white }}
                 />
               )}
@@ -563,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>
       )}
@@ -616,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;
+`