ordering-ui-react-native 0.17.22 → 0.17.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/themes/original/src/components/BusinessesListing/index.tsx +5 -2
  3. package/themes/original/src/components/LanguageSelector/index.tsx +3 -2
  4. package/themes/original/src/components/OrderDetails/index.tsx +63 -10
  5. package/themes/original/src/components/OrderDetails/styles.tsx +10 -0
  6. package/themes/original/src/components/ProductItemAccordion/index.tsx +167 -138
  7. package/themes/original/src/components/ServiceForm/index.tsx +301 -278
  8. package/themes/original/src/types/index.tsx +4 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.17.22",
3
+ "version": "0.17.24",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/original/src/components/BusinessesListing/index.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  import React, { useState, useEffect } from 'react'
3
- import { useOrder, useSession, useLanguage } from 'ordering-components/native';
3
+ import { useOrder, useSession, useLanguage, useConfig } from 'ordering-components/native';
4
4
 
5
5
  import { useTheme } from 'styled-components/native'
6
6
  import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
@@ -16,6 +16,8 @@ export const BusinessesListing = (props: any) => {
16
16
  const [, t] = useLanguage();
17
17
  const [{ auth }] = useSession()
18
18
  const [, { getLastOrderHasNoReview }] = useOrder();
19
+ const [{ configs }] = useConfig()
20
+ const isShowReviewsPopupEnabled = configs?.show_reviews_popups_enabled?.value === '1'
19
21
 
20
22
  const [, setIsReviewed] = useState()
21
23
  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
@@ -74,8 +76,9 @@ export const BusinessesListing = (props: any) => {
74
76
  }
75
77
 
76
78
  useEffect(() => {
79
+ if (!isShowReviewsPopupEnabled) return
77
80
  (checkNotificationStatus?.checked && auth) && _getLastOrderHasNoReview()
78
- }, [checkNotificationStatus, auth])
81
+ }, [checkNotificationStatus, auth, isShowReviewsPopupEnabled])
79
82
 
80
83
  return (
81
84
  <>
package/themes/original/src/components/LanguageSelector/index.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
2
+ import { LanguageSelector as LanguageSelectorController, useOrder, useLanguage } from 'ordering-components/native'
3
3
  import { useTheme } from 'styled-components/native';
4
4
  import { Platform, StyleSheet, View } from 'react-native'
5
5
 
@@ -11,6 +11,7 @@ import { OIcon } from '../shared'
11
11
  const LanguageSelectorUI = (props: LanguageSelectorParams) => {
12
12
 
13
13
  const [orderState] = useOrder()
14
+ const [state] = useLanguage()
14
15
 
15
16
  const theme = useTheme();
16
17
 
@@ -74,7 +75,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
74
75
  useNativeAndroidPickerStyle={false}
75
76
  placeholder={{}}
76
77
  Icon={() => <View style={pickerStyle ? pickerStyle.icon : _pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.white} style={{ width: '100%' }} /></View>}
77
- disabled={orderState.loading}
78
+ disabled={orderState.loading || state.loading}
78
79
  />
79
80
  </>
80
81
  ) : <DummyContainer />}
package/themes/original/src/components/OrderDetails/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from 'react';
1
+ import React, { useState, useEffect, useMemo } from 'react';
2
2
  import { View, StyleSheet, BackHandler, Platform, Linking, RefreshControl } from 'react-native';
3
3
  import LinearGradient from 'react-native-linear-gradient';
4
4
  import { _setStoreData } from '../../providers/StoreUtil';
@@ -31,7 +31,8 @@ import {
31
31
  Map,
32
32
  Divider,
33
33
  OrderAction,
34
- PlaceSpotWrapper
34
+ PlaceSpotWrapper,
35
+ ProfessionalPhoto
35
36
  } from './styles';
36
37
  import { OButton, OIcon, OModal, OText } from '../shared';
37
38
  import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -94,6 +95,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
94
95
  display: 'flex',
95
96
  alignItems: 'center',
96
97
  flexDirection: 'row'
98
+ },
99
+ professionalBlock: {
100
+ borderBottomColor: theme.colors.border,
101
+ borderBottomWidth: 1,
102
+ marginVertical: 10,
103
+ paddingVertical: 5
97
104
  }
98
105
  });
99
106
 
@@ -448,6 +455,59 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
448
455
  lng: parseFloat(location?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
449
456
  } : location)
450
457
 
458
+ const getProductList = () => {
459
+ const professionalList = order?.products.reduce((prev: any, current: any) => {
460
+ const found = prev.find((item: any) => item.id === current?.calendar_event?.professional?.id)
461
+ if (found || !current?.calendar_event) {
462
+ return prev
463
+ }
464
+ return [...prev, current?.calendar_event?.professional]
465
+ }, [])
466
+
467
+ return (
468
+ <>
469
+ {professionalList?.length > 0 && professionalList.map((professional: any, i: number) => (
470
+ <View key={i} style={styles.professionalBlock}>
471
+ <View style={{ flexDirection: 'row', alignItems: 'center', width: '100%' }}>
472
+ {professional?.photo ? (
473
+ <ProfessionalPhoto
474
+ source={{
475
+ uri: professional?.photo
476
+ }}
477
+ imageStyle={{ borderRadius: 8 }}
478
+ />
479
+ ) : (
480
+ <OIcon
481
+ src={theme.images.general.user}
482
+ cover={false}
483
+ width={80}
484
+ height={80}
485
+ />
486
+ )}
487
+ <OText size={12} lineHeight={18} weight={'500'} numberOfLines={1}>{professional?.name} {professional?.lastname}</OText>
488
+ </View>
489
+ {order?.products.filter((product: any) => product?.calendar_event?.professional?.id === professional?.id).map((product: any, i: number) => (
490
+ <ProductItemAccordion
491
+ key={product?.id || i}
492
+ product={product}
493
+ isFromCheckout
494
+ />
495
+ ))}
496
+ </View>
497
+ ))}
498
+ {order?.products.filter((product: any) => !product?.calendar_event).map((product: any, i: number) => (
499
+ <ProductItemAccordion
500
+ key={product?.id || i}
501
+ product={product}
502
+ isFromCheckout
503
+ />
504
+ ))}
505
+ </>
506
+ )
507
+ }
508
+
509
+ const sortedProductList = useMemo(() => getProductList(), [order?.products])
510
+
451
511
  useEffect(() => {
452
512
  if (driverLocation) {
453
513
  parsedLocations[0] = {
@@ -876,14 +936,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
876
936
  </OrderAction>
877
937
  </HeaderInfo>
878
938
  <OrderProducts>
879
- {order?.products?.length &&
880
- order?.products.map((product: any, i: number) => (
881
- <ProductItemAccordion
882
- key={product?.id || i}
883
- product={product}
884
- isFromCheckout
885
- />
886
- ))}
939
+ {sortedProductList}
887
940
  </OrderProducts>
888
941
  <OrderBill>
889
942
  <View style={{ height: 1, backgroundColor: theme.colors.border, marginBottom: 17 }} />
package/themes/original/src/components/OrderDetails/styles.tsx CHANGED
@@ -132,3 +132,13 @@ export const OrderAction = styled.View`
132
132
  export const PlaceSpotWrapper = styled.View`
133
133
  padding-horizontal: 40px;
134
134
  `
135
+
136
+ export const ProfessionalPhoto = styled.ImageBackground`
137
+ width: 100%;
138
+ position: relative;
139
+ max-height: 80px;
140
+ height: 80px;
141
+ width: 80px;
142
+ resize-mode: cover;
143
+ margin-right: 10px;
144
+ `;
package/themes/original/src/components/ProductItemAccordion/index.tsx CHANGED
@@ -4,6 +4,7 @@ import { useUtils, useLanguage, useOrder } from 'ordering-components/native'
4
4
  import { useTheme } from 'styled-components/native';
5
5
  import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
6
6
  import RNPickerSelect from 'react-native-picker-select'
7
+ import { ServiceForm } from '../ServiceForm';
7
8
 
8
9
  import {
9
10
  Accordion,
@@ -18,7 +19,7 @@ import {
18
19
  ProductSubOption,
19
20
  ProductComment
20
21
  } from './styles'
21
- import { OIcon, OText, OAlert } from '../shared'
22
+ import { OIcon, OText, OAlert, OModal } from '../shared'
22
23
 
23
24
  import { ProductItemAccordionParams } from '../../types'
24
25
 
@@ -71,6 +72,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
71
72
  const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
72
73
 
73
74
  const [isActive, setActiveState] = useState(false)
75
+ const [isServiceOpen, setIsServiceOpen] = useState(false)
74
76
  // const [setHeight, setHeightState] = useState({ height: new Animated.Value(0) })
75
77
  // const [setRotate, setRotateState] = useState({ angle: new Animated.Value(0) })
76
78
 
@@ -92,6 +94,14 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
92
94
  return product
93
95
  }
94
96
 
97
+ const handleEditProduct = (curProduct: any) => {
98
+ if (!curProduct?.calendar_event) {
99
+ onEditProduct && onEditProduct(curProduct)
100
+ return
101
+ }
102
+ setIsServiceOpen(true)
103
+ }
104
+
95
105
  /* const toggleAccordion = () => {
96
106
  if ((!product?.valid_menu && isCartProduct)) return
97
107
  if (isActive) {
@@ -133,148 +143,167 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
133
143
  })
134
144
 
135
145
  return (
136
- <AccordionSection>
137
- <Accordion
138
- isValid={product?.valid ?? true}
139
- onPress={() => (!product?.valid_menu && isCartProduct)
140
- ? {}
141
- : setActiveState(!isActive)}
142
- activeOpacity={1}
143
- >
144
- <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
145
- <ContentInfo>
146
- {(product?.images || theme?.images?.dummies?.product) && (
147
- <ProductImage>
148
- {isFromCheckout ? (
149
- <OIcon url={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_100,c_limit')} style={{ ...styles.productImage, ...{ width: 82, height: 82 } }} />
150
- ) : (
151
- <OIcon url={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_100,c_limit')} style={styles.productImage} />
152
- )}
153
- </ProductImage>
154
- )}
155
- {!!product?.calendar_event ? (
156
- <View style={{ flex: 1, marginLeft: 10, flexDirection: 'column' }}>
157
- <View>
158
- <OText size={12} lineHeight={18} weight={'400'} numberOfLines={1}>{product?.name}</OText>
146
+ <>
147
+ <AccordionSection>
148
+ <Accordion
149
+ isValid={product?.valid ?? true}
150
+ onPress={() => (!product?.valid_menu && isCartProduct)
151
+ ? {}
152
+ : setActiveState(!isActive)}
153
+ activeOpacity={1}
154
+ >
155
+ <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
156
+ <ContentInfo>
157
+ {(product?.images || theme?.images?.dummies?.product) && (
158
+ <ProductImage>
159
+ {isFromCheckout ? (
160
+ <OIcon url={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_100,c_limit')} style={{ ...styles.productImage, ...{ width: 82, height: 82 } }} />
161
+ ) : (
162
+ <OIcon url={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_100,c_limit')} style={styles.productImage} />
163
+ )}
164
+ </ProductImage>
165
+ )}
166
+ {!!product?.calendar_event ? (
167
+ <View style={{ flex: 1, marginLeft: 10, flexDirection: 'column' }}>
168
+ <View>
169
+ <OText size={12} lineHeight={18} weight={'400'} numberOfLines={1}>{product?.name}</OText>
170
+ </View>
171
+ <OText size={10} color={theme.colors.textSecondary} style={{ marginTop: 3 }}>
172
+ {parseDate(product?.calendar_event?.start, { outputFormat: 'hh:mm a' })} - {parseDate(product?.calendar_event?.end, { outputFormat: 'hh:mm a' })}
173
+ </OText>
159
174
  </View>
160
- <OText size={10} color={theme.colors.textSecondary} style={{ marginTop: 3 }}>
161
- {parseDate(product?.calendar_event?.start, { outputFormat: 'hh:mm a' })} - {parseDate(product?.calendar_event?.end, { outputFormat: 'hh:mm a' })}
162
- </OText>
163
- </View>
164
- ): (
165
- <>
166
- {isCartProduct && !isCartPending && getProductMax && (
167
- <ProductInfo>
168
- <RNPickerSelect
169
- items={productOptions}
170
- onValueChange={handleChangeQuantity}
171
- value={product.quantity.toString()}
172
- style={pickerStyle}
173
- useNativeAndroidPickerStyle={false}
174
- placeholder={{}}
175
- Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
176
- disabled={orderState.loading}
177
- />
178
- </ProductInfo>
179
- )}
180
- {isFromCheckout && (
181
- <ProductQuantity>
182
- <OText size={12} lineHeight={18}>
183
- {product?.quantity}
184
- </OText>
185
- </ProductQuantity>
186
- )}
187
- <View style={{ flex: 1 }}>
188
- <OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
175
+ ): (
176
+ <>
177
+ {isCartProduct && !isCartPending && getProductMax && (
178
+ <ProductInfo>
179
+ <RNPickerSelect
180
+ items={productOptions}
181
+ onValueChange={handleChangeQuantity}
182
+ value={product.quantity.toString()}
183
+ style={pickerStyle}
184
+ useNativeAndroidPickerStyle={false}
185
+ placeholder={{}}
186
+ Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
187
+ disabled={orderState.loading}
188
+ />
189
+ </ProductInfo>
190
+ )}
191
+ {isFromCheckout && (
192
+ <ProductQuantity>
193
+ <OText size={12} lineHeight={18}>
194
+ {product?.quantity}
195
+ </OText>
196
+ </ProductQuantity>
197
+ )}
198
+ <View style={{ flex: 1 }}>
199
+ <OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
200
+ </View>
201
+ </>
202
+ )}
203
+ <View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end', maxWidth: 100 }}>
204
+ <View style={{ flexDirection: 'row' }}>
205
+ <OText size={12} lineHeight={18} weight={'400'}>{parsePrice(product.total || product.price)}</OText>
206
+ {(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (
207
+ <MaterialCommunityIcon name='chevron-down' size={18} />
208
+ )}
209
+ </View>
210
+ <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
211
+ {onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
212
+ <TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginEnd: 7 }}>
213
+ <OIcon
214
+ src={theme.images.general.pencil}
215
+ width={16}
216
+ color={theme.colors.textSecondary}
217
+ />
218
+ </TouchableOpacity>
219
+ )}
220
+ {onDeleteProduct && isCartProduct && !isCartPending && (
221
+ <OAlert
222
+ title={t('DELETE_PRODUCT', 'Delete Product')}
223
+ message={t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?')}
224
+ onAccept={() => onDeleteProduct(product)}
225
+ >
226
+ <OIcon
227
+ src={theme.images.general.trash}
228
+ width={17}
229
+ color={theme.colors.textSecondary}
230
+ />
231
+ </OAlert>
232
+ )}
189
233
  </View>
190
- </>
191
- )}
192
- <View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end', maxWidth: 100 }}>
193
- <View style={{ flexDirection: 'row' }}>
194
- <OText size={12} lineHeight={18} weight={'400'}>{parsePrice(product.total || product.price)}</OText>
195
- {(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (
196
- <MaterialCommunityIcon name='chevron-down' size={18} />
197
- )}
198
234
  </View>
199
- <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
200
- {onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
201
- <TouchableOpacity onPress={() => onEditProduct(product)} style={{ marginEnd: 7 }}>
202
- <OIcon
203
- src={theme.images.general.pencil}
204
- width={16}
205
- color={theme.colors.textSecondary}
206
- />
207
- </TouchableOpacity>
208
- )}
209
- {onDeleteProduct && isCartProduct && !isCartPending && (
210
- <OAlert
211
- title={t('DELETE_PRODUCT', 'Delete Product')}
212
- message={t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?')}
213
- onAccept={() => onDeleteProduct(product)}
214
- >
215
- <OIcon
216
- src={theme.images.general.trash}
217
- width={17}
218
- color={theme.colors.textSecondary}
219
- />
220
- </OAlert>
221
- )}
235
+ </ContentInfo>
236
+ </View>
237
+ {((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
238
+ (!product?.valid_menu && isCartProduct && !isCartPending)) && (
239
+ <View style={{ alignItems: 'flex-end', width: '100%', }}>
240
+ <OText size={14} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
241
+ {t('NOT_AVAILABLE', 'Not available')}
242
+ </OText>
222
243
  </View>
223
- </View>
224
- </ContentInfo>
225
- </View>
226
- {((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
227
- (!product?.valid_menu && isCartProduct && !isCartPending)) && (
228
- <View style={{ alignItems: 'flex-end', width: '100%', }}>
229
- <OText size={14} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
230
- {t('NOT_AVAILABLE', 'Not available')}
231
- </OText>
232
- </View>
233
- )}
234
- </Accordion>
235
-
236
- <View style={{ display: isActive ? 'flex' : 'none', paddingStart: 40 }}>
237
- <Animated.View>
238
- <AccordionContent>
239
- {productInfo().ingredients.length > 0 && productInfo().ingredients.some((ingredient: any) => !ingredient.selected) && (
240
- <ProductOptionsList>
241
- <OText size={10} color={theme.colors.textSecondary}>{t('INGREDIENTS', 'Ingredients')}</OText>
242
- {productInfo().ingredients.map((ingredient: any) => !ingredient.selected && (
243
- <OText size={10} color={theme.colors.textThird} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
244
- ))}
245
- </ProductOptionsList>
246
- )}
247
- {productInfo().options.length > 0 && (
248
- <ProductOptionsList>
249
- {productInfo().options.map((option: any, i: number) => (
250
- <ProductOption key={option.id + i}>
251
- <OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
252
- {option.suboptions.map((suboption: any) => (
253
- <ProductSubOption key={suboption.id}>
254
- <OText size={10} color={theme.colors.textThird}>
255
- {getFormattedSubOptionName({
256
- quantity: suboption.quantity,
257
- name: suboption.name,
258
- position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
259
- price: parsePrice(suboption.price)
260
- })}
261
- </OText>
262
- </ProductSubOption>
263
- ))}
264
- </ProductOption>
265
- ))}
266
- </ProductOptionsList>
267
244
  )}
268
- {product.comment && (
269
- <ProductComment>
270
- <OText size={10} color={theme.colors.textSecondary}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
271
- <OText size={10} color={theme.colors.textThird}>{product.comment}</OText>
272
- </ProductComment>
273
- )}
274
- </AccordionContent>
275
- </Animated.View>
276
- </View>
277
- </AccordionSection>
245
+ </Accordion>
246
+
247
+ <View style={{ display: isActive ? 'flex' : 'none', paddingStart: 40 }}>
248
+ <Animated.View>
249
+ <AccordionContent>
250
+ {productInfo().ingredients.length > 0 && productInfo().ingredients.some((ingredient: any) => !ingredient.selected) && (
251
+ <ProductOptionsList>
252
+ <OText size={10} color={theme.colors.textSecondary}>{t('INGREDIENTS', 'Ingredients')}</OText>
253
+ {productInfo().ingredients.map((ingredient: any) => !ingredient.selected && (
254
+ <OText size={10} color={theme.colors.textThird} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
255
+ ))}
256
+ </ProductOptionsList>
257
+ )}
258
+ {productInfo().options.length > 0 && (
259
+ <ProductOptionsList>
260
+ {productInfo().options.map((option: any, i: number) => (
261
+ <ProductOption key={option.id + i}>
262
+ <OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
263
+ {option.suboptions.map((suboption: any) => (
264
+ <ProductSubOption key={suboption.id}>
265
+ <OText size={10} color={theme.colors.textThird}>
266
+ {getFormattedSubOptionName({
267
+ quantity: suboption.quantity,
268
+ name: suboption.name,
269
+ position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
270
+ price: parsePrice(suboption.price)
271
+ })}
272
+ </OText>
273
+ </ProductSubOption>
274
+ ))}
275
+ </ProductOption>
276
+ ))}
277
+ </ProductOptionsList>
278
+ )}
279
+ {product.comment && (
280
+ <ProductComment>
281
+ <OText size={10} color={theme.colors.textSecondary}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
282
+ <OText size={10} color={theme.colors.textThird}>{product.comment}</OText>
283
+ </ProductComment>
284
+ )}
285
+ </AccordionContent>
286
+ </Animated.View>
287
+ </View>
288
+ </AccordionSection>
289
+ <OModal
290
+ open={isServiceOpen}
291
+ onClose={() => setIsServiceOpen(false)}
292
+ entireModal
293
+ >
294
+ <ServiceForm
295
+ isCartProduct
296
+ isService
297
+ businessId={product?.business_id}
298
+ categoryId={product?.category_id}
299
+ productId={product?.id}
300
+ productCart={product}
301
+ onSave={() => setIsServiceOpen(false)}
302
+ onClose={() => setIsServiceOpen(false)}
303
+ professionalSelected={product?.calendar_event?.professional}
304
+ />
305
+ </OModal>
306
+ </>
278
307
  )
279
308
  }
280
309
 
package/themes/original/src/components/ServiceForm/index.tsx CHANGED
@@ -10,6 +10,8 @@ import CalendarPicker from 'react-native-calendar-picker'
10
10
  import FeatherIcon from 'react-native-vector-icons/Feather';
11
11
  import { useSafeAreaInsets } from 'react-native-safe-area-context'
12
12
  import { ServiceFormParams } from '../../types'
13
+ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
14
+
13
15
  import {
14
16
  ProductForm as ProductFormController,
15
17
  useUtils,
@@ -35,14 +37,15 @@ const screenWidth = Dimensions.get('window').width
35
37
  const ServiceFormUI = (props: ServiceFormParams) => {
36
38
  const {
37
39
  professionalSelected,
38
- product,
40
+ productObject,
39
41
  handleSave,
40
42
  productCart,
41
43
  navigation,
42
44
  isSoldOut,
43
45
  maxProductQuantity,
44
46
  onClose,
45
- professionalList
47
+ professionalListState,
48
+ isCartProduct
46
49
  } = props
47
50
 
48
51
  const theme = useTheme()
@@ -52,6 +55,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
52
55
  const [{ configs }] = useConfig()
53
56
  const [orderState] = useOrder()
54
57
  const [{ auth }] = useSession()
58
+ const { product, loading, error } = productObject;
55
59
 
56
60
  const [selectDate, setSelectedDate] = useState<any>(new Date())
57
61
  const [timeList, setTimeList] = useState<any>([])
@@ -153,7 +157,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
153
157
  }
154
158
 
155
159
  const handleRedirectLogin = () => {
156
- navigation.navigate('Login', {
160
+ navigation && navigation.navigate('Login', {
157
161
  store_slug: props.businessSlug
158
162
  });
159
163
  onClose && onClose()
@@ -209,7 +213,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
209
213
  }
210
214
 
211
215
  const addressRedirect = () => {
212
- navigation.navigate('AddressList')
216
+ navigation && navigation.navigate('AddressList')
213
217
  onClose && onClose()
214
218
  }
215
219
 
@@ -234,304 +238,323 @@ const ServiceFormUI = (props: ServiceFormParams) => {
234
238
  }, [selectDate, timeSelected])
235
239
 
236
240
  useEffect(() => {
237
- if (!professionalSelected) return
241
+ if (!professionalSelected?.schedule) return
238
242
  setCurrentProfessional(professionalSelected)
239
243
  }, [professionalSelected])
244
+
245
+ useEffect(() => {
246
+ if (isCartProduct && professionalListState?.professionals?.length > 0) {
247
+ const professional = professionalListState?.professionals?.find((item: any) => item.id === professionalSelected?.id)
248
+ setCurrentProfessional(professional)
249
+ }
250
+ }, [isCartProduct, professionalListState?.professionals])
240
251
 
241
252
  return (
242
253
  <>
243
- <Container>
244
- {!!product?.images ? (
245
- <ProfessionalPhoto
246
- source={{
247
- uri: product?.images
248
- }}
249
- />
250
- ) : (
251
- <OIcon
252
- src={theme?.images?.dummies?.product}
253
- cover={false}
254
- style={{ alignSelf: 'center' }}
255
- width={200}
256
- height={200}
254
+ {loading && !error && (
255
+ <Placeholder Animation={Fade}>
256
+ <PlaceholderLine
257
+ height={258}
258
+ style={{ borderRadius: 0 }}
259
+ width={screenWidth}
257
260
  />
258
- )}
259
- <InfoWrapper>
260
- <OText
261
- size={20}
262
- style={{ marginBottom: 4 }}
263
- weight={Platform.OS === 'ios' ? '600' : 'bold'}
264
- >
265
- {product?.name}
266
- </OText>
267
- <OText
268
- size={16}
269
- style={{ marginBottom: 10 }}
270
- weight={'400'}
271
- >
272
- {parsePrice(product?.price)} • {product?.duration}min
273
- </OText>
274
- <OText
275
- size={14}
276
- weight={'400'}
277
- color={theme?.colors?.disabled}
278
- >
279
- {product?.description}
280
- </OText>
281
- </InfoWrapper>
282
- <Divider />
283
- <ProfessionalWrapper>
284
- <View
285
- style={{
286
- flexDirection: 'row',
287
- justifyContent: 'space-between',
288
- alignItems: 'center',
289
- marginBottom: 23
290
- }}
291
- >
261
+ </Placeholder>
262
+ )}
263
+ {!loading && !error && (
264
+ <Container>
265
+ {!!product?.images ? (
266
+ <ProfessionalPhoto
267
+ source={{
268
+ uri: product?.images
269
+ }}
270
+ />
271
+ ) : (
272
+ <OIcon
273
+ src={theme?.images?.dummies?.product}
274
+ cover={false}
275
+ style={{ alignSelf: 'center' }}
276
+ width={200}
277
+ height={200}
278
+ />
279
+ )}
280
+ <InfoWrapper>
292
281
  <OText
293
- size={16}
282
+ size={20}
283
+ style={{ marginBottom: 4 }}
294
284
  weight={Platform.OS === 'ios' ? '600' : 'bold'}
295
285
  >
296
- {t('PROFESSIONAL', 'Professional')}
286
+ {product?.name}
297
287
  </OText>
298
- <OText
299
- size={10}
300
- weight={'400'}
301
- color={theme.colors?.danger5}
302
- >
303
- {t('REQUIRED', 'Required')}
304
- </OText>
305
- </View>
306
- <TouchableOpacity
307
- style={styles.professionalSelect}
308
- onPress={() => setIsOpen(true)}
309
- >
310
- {!!currentProfessional ? (
311
- <>
312
- <View style={{ flexDirection: 'row' }}>
313
- {!!currentProfessional?.photo ? (
314
- <FastImage
315
- style={styles.photoStyle}
316
- source={{
317
- uri: optimizeImage(currentProfessional?.photo, 'h_250,c_limit'),
318
- priority: FastImage.priority.normal,
319
- }}
320
- resizeMode={FastImage.resizeMode.cover}
321
- />
322
- ) : (
323
- <OIcon
324
- src={theme?.images?.general?.user}
325
- cover={false}
326
- style={styles.photoStyle}
327
- />
328
- )}
329
- <View style={{ marginLeft: 14 }}>
330
- <OText
331
- size={14}
332
- weight={'400'}
333
- lineHeight={22}
334
- >
335
- {currentProfessional?.name} {currentProfessional?.lastname}
336
- </OText>
337
- <OText
338
- size={12}
339
- weight={'400'}
340
- lineHeight={17}
341
- color={isBusyTime(currentProfessional) ? theme.colors.danger5 : theme.colors.success500}
342
- >
343
- {isBusyTime(currentProfessional)
344
- ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
345
- : t('AVAILABLE', 'Available')
346
- }
347
- </OText>
348
- </View>
349
- </View>
350
- </>
351
- ) : (
352
- <OText size={12}>{t('SELECT_PROFESSIONAL', 'Select professional')}</OText>
353
- )}
354
- <View style={{ marginLeft: 5 }}>
355
- <IconAntDesign
356
- name='down'
357
- color={theme.colors.textThird}
358
- size={12}
359
- />
360
- </View>
361
- </TouchableOpacity>
362
- </ProfessionalWrapper>
363
- <ScheduleWrapper>
364
- <View
365
- style={{
366
- flexDirection: 'row',
367
- justifyContent: 'space-between',
368
- alignItems: 'center',
369
- marginBottom: 23
370
- }}
371
- >
372
288
  <OText
373
289
  size={16}
374
- weight={Platform.OS === 'ios' ? '600' : 'bold'}
290
+ style={{ marginBottom: 10 }}
291
+ weight={'400'}
375
292
  >
376
- {t('SCHEDULE', 'Schedule')}
293
+ {parsePrice(product?.price)} • {product?.duration}min
377
294
  </OText>
378
295
  <OText
379
- size={10}
296
+ size={14}
380
297
  weight={'400'}
381
- color={theme.colors?.danger5}
298
+ color={theme?.colors?.disabled}
382
299
  >
383
- {t('REQUIRED', 'Required')}
300
+ {product?.description}
384
301
  </OText>
385
- </View>
386
- {!!currentProfessional?.schedule ? (
387
- <CalendarWrapper>
388
- {(timeList?.length > 0 && isEnabled) ? (
389
- <SelectDropdown
390
- ref={dropdownRef}
391
- defaultValue={timeSelected}
392
- data={timeList}
393
- onSelect={(selectedItem, index) => {
394
- setTimeSelected(selectedItem?.value)
395
- }}
396
- buttonTextAfterSelection={(selectedItem, index) => {
397
- return selectedItem?.text
398
- }}
399
- rowTextForSelection={(item, index) => {
400
- return item.text
401
- }}
402
- buttonStyle={{borderRadius: 7.6, ...styles.selectOption}}
403
- buttonTextStyle={{
404
- color: theme.colors.disabled,
405
- fontSize: 14,
406
- textAlign: 'left',
407
- marginHorizontal: 0
408
- }}
409
- dropdownStyle={{
410
- borderRadius: 8,
411
- borderColor: theme.colors.lightGray,
412
- marginTop: Platform.OS === 'ios' ? 12 : -top
413
- }}
414
- rowStyle={{
415
- borderBottomColor: theme.colors.backgroundGray100,
416
- backgroundColor: theme.colors.backgroundGray100,
417
- height: 30,
418
- flexDirection: 'column',
419
- alignItems: 'flex-start',
420
- paddingTop: 8,
421
- paddingHorizontal: 12
422
- }}
423
- rowTextStyle={{
424
- color: theme.colors.disabled,
425
- fontSize: 14,
426
- marginHorizontal: 0
427
- }}
428
- renderDropdownIcon={() => dropDownIcon()}
429
- dropdownOverlayColor='transparent'
430
- />
302
+ </InfoWrapper>
303
+ <Divider />
304
+ <ProfessionalWrapper>
305
+ <View
306
+ style={{
307
+ flexDirection: 'row',
308
+ justifyContent: 'space-between',
309
+ alignItems: 'center',
310
+ marginBottom: 23
311
+ }}
312
+ >
313
+ <OText
314
+ size={16}
315
+ weight={Platform.OS === 'ios' ? '600' : 'bold'}
316
+ >
317
+ {t('PROFESSIONAL', 'Professional')}
318
+ </OText>
319
+ <OText
320
+ size={10}
321
+ weight={'400'}
322
+ color={theme.colors?.danger5}
323
+ >
324
+ {t('REQUIRED', 'Required')}
325
+ </OText>
326
+ </View>
327
+ <TouchableOpacity
328
+ style={styles.professionalSelect}
329
+ onPress={() => setIsOpen(true)}
330
+ >
331
+ {!!currentProfessional ? (
332
+ <>
333
+ <View style={{ flexDirection: 'row' }}>
334
+ {!!currentProfessional?.photo ? (
335
+ <FastImage
336
+ style={styles.photoStyle}
337
+ source={{
338
+ uri: optimizeImage(currentProfessional?.photo, 'h_250,c_limit'),
339
+ priority: FastImage.priority.normal,
340
+ }}
341
+ resizeMode={FastImage.resizeMode.cover}
342
+ />
343
+ ) : (
344
+ <OIcon
345
+ src={theme?.images?.general?.user}
346
+ cover={false}
347
+ style={styles.photoStyle}
348
+ />
349
+ )}
350
+ <View style={{ marginLeft: 14 }}>
351
+ <OText
352
+ size={14}
353
+ weight={'400'}
354
+ lineHeight={22}
355
+ >
356
+ {currentProfessional?.name} {currentProfessional?.lastname}
357
+ </OText>
358
+ <OText
359
+ size={12}
360
+ weight={'400'}
361
+ lineHeight={17}
362
+ color={isBusyTime(currentProfessional) ? theme.colors.danger5 : theme.colors.success500}
363
+ >
364
+ {isBusyTime(currentProfessional)
365
+ ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
366
+ : t('AVAILABLE', 'Available')
367
+ }
368
+ </OText>
369
+ </View>
370
+ </View>
371
+ </>
431
372
  ) : (
432
- <OText
433
- size={12}
434
- style={{ marginBottom: 30 }}
435
- weight={'400'}
436
- color={theme.colors?.danger5}
437
- >
438
- {t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')}
439
- </OText>
373
+ <OText size={12}>{t('SELECT_PROFESSIONAL', 'Select professional')}</OText>
440
374
  )}
441
- <CalendarPicker
442
- previousComponent={
443
- <FeatherIcon
444
- name='chevron-left'
445
- color={theme.colors.disabled}
446
- size={24}
447
- style={{ marginHorizontal: 4 }}
448
- />
449
- }
450
- nextComponent={
451
- <FeatherIcon
452
- name='chevron-right'
453
- color={theme.colors.disabled}
454
- size={24}
455
- style={{ marginHorizontal: 4 }}
375
+ <View style={{ marginLeft: 5 }}>
376
+ <IconAntDesign
377
+ name='down'
378
+ color={theme.colors.textThird}
379
+ size={12}
380
+ />
381
+ </View>
382
+ </TouchableOpacity>
383
+ </ProfessionalWrapper>
384
+ <ScheduleWrapper>
385
+ <View
386
+ style={{
387
+ flexDirection: 'row',
388
+ justifyContent: 'space-between',
389
+ alignItems: 'center',
390
+ marginBottom: 23
391
+ }}
392
+ >
393
+ <OText
394
+ size={16}
395
+ weight={Platform.OS === 'ios' ? '600' : 'bold'}
396
+ >
397
+ {t('SCHEDULE', 'Schedule')}
398
+ </OText>
399
+ <OText
400
+ size={10}
401
+ weight={'400'}
402
+ color={theme.colors?.danger5}
403
+ >
404
+ {t('REQUIRED', 'Required')}
405
+ </OText>
406
+ </View>
407
+ {!!currentProfessional?.schedule ? (
408
+ <CalendarWrapper>
409
+ {(timeList?.length > 0 && isEnabled) ? (
410
+ <SelectDropdown
411
+ ref={dropdownRef}
412
+ defaultValue={timeSelected}
413
+ data={timeList}
414
+ onSelect={(selectedItem, index) => {
415
+ setTimeSelected(selectedItem?.value)
416
+ }}
417
+ buttonTextAfterSelection={(selectedItem, index) => {
418
+ return selectedItem?.text
419
+ }}
420
+ rowTextForSelection={(item, index) => {
421
+ return item.text
422
+ }}
423
+ buttonStyle={{borderRadius: 7.6, ...styles.selectOption}}
424
+ buttonTextStyle={{
425
+ color: theme.colors.disabled,
426
+ fontSize: 14,
427
+ textAlign: 'left',
428
+ marginHorizontal: 0
429
+ }}
430
+ dropdownStyle={{
431
+ borderRadius: 8,
432
+ borderColor: theme.colors.lightGray,
433
+ marginTop: Platform.OS === 'ios' ? 12 : -top
434
+ }}
435
+ rowStyle={{
436
+ borderBottomColor: theme.colors.backgroundGray100,
437
+ backgroundColor: theme.colors.backgroundGray100,
438
+ height: 30,
439
+ flexDirection: 'column',
440
+ alignItems: 'flex-start',
441
+ paddingTop: 8,
442
+ paddingHorizontal: 12
443
+ }}
444
+ rowTextStyle={{
445
+ color: theme.colors.disabled,
446
+ fontSize: 14,
447
+ marginHorizontal: 0
448
+ }}
449
+ renderDropdownIcon={() => dropDownIcon()}
450
+ dropdownOverlayColor='transparent'
456
451
  />
457
- }
458
- width={screenWidth - 110}
459
- selectedDayTextColor={theme.colors.white}
460
- selectedDayColor={theme.colors.primary}
461
- todayBackgroundColor={theme.colors.border}
462
- dayLabelsWrapper={{ borderColor: theme.colors.clear }}
463
- onDateChange={onDateChange}
464
- minDate={new Date()}
465
- customDayHeaderStyles={customDayHeaderStylesCallback}
466
- selectedStartDate={selectDate}
467
- />
468
- </CalendarWrapper>
469
- ) : (
452
+ ) : (
453
+ <OText
454
+ size={12}
455
+ style={{ marginBottom: 30 }}
456
+ weight={'400'}
457
+ color={theme.colors?.danger5}
458
+ >
459
+ {t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')}
460
+ </OText>
461
+ )}
462
+ <CalendarPicker
463
+ previousComponent={
464
+ <FeatherIcon
465
+ name='chevron-left'
466
+ color={theme.colors.disabled}
467
+ size={24}
468
+ style={{ marginHorizontal: 4 }}
469
+ />
470
+ }
471
+ nextComponent={
472
+ <FeatherIcon
473
+ name='chevron-right'
474
+ color={theme.colors.disabled}
475
+ size={24}
476
+ style={{ marginHorizontal: 4 }}
477
+ />
478
+ }
479
+ width={screenWidth - 110}
480
+ selectedDayTextColor={theme.colors.white}
481
+ selectedDayColor={theme.colors.primary}
482
+ todayBackgroundColor={theme.colors.border}
483
+ dayLabelsWrapper={{ borderColor: theme.colors.clear }}
484
+ onDateChange={onDateChange}
485
+ minDate={new Date()}
486
+ customDayHeaderStyles={customDayHeaderStylesCallback}
487
+ selectedStartDate={selectDate}
488
+ />
489
+ </CalendarWrapper>
490
+ ) : (
491
+ <OText
492
+ size={16}
493
+ style={{ marginBottom: 30, textAlign: 'center' }}
494
+ color={theme?.colors?.disabled}
495
+ weight={Platform.OS === 'ios' ? '600' : 'bold'}
496
+ >
497
+ {t('NO_SCHEDULE', 'No schedule')}
498
+ </OText>
499
+ )}
500
+ </ScheduleWrapper>
501
+ <ButtonWrapper>
470
502
  <OText
471
- size={16}
472
- style={{ marginBottom: 30, textAlign: 'center' }}
473
- color={theme?.colors?.disabled}
503
+ size={14}
474
504
  weight={Platform.OS === 'ios' ? '600' : 'bold'}
475
505
  >
476
- {t('NO_SCHEDULE', 'No schedule')}
506
+ {dateSelected && moment(dateSelected).format('hh:mm A')}
477
507
  </OText>
478
- )}
479
- </ScheduleWrapper>
480
- <ButtonWrapper>
481
- <OText
482
- size={14}
483
- weight={Platform.OS === 'ios' ? '600' : 'bold'}
484
- >
485
- {dateSelected && moment(dateSelected).format('hh:mm A')}
486
- </OText>
487
- {((productCart &&
488
- auth &&
489
- orderState.options?.address_id)) && (
490
- <OButton
491
- bgColor={theme.colors.primary}
492
- onClick={() => handleSaveService()}
493
- text={orderState.loading
494
- ? t('LOADING', 'Loading')
495
- : ((isSoldOut || maxProductQuantity <= 0)
496
- ? t('SOLD_OUT', 'Sold out')
497
- : t('BOOK', 'Book'))}
498
- style={styles.buttonStyle}
499
- isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected}
500
- textStyle={{ fontSize: 14, color: theme.colors.white }}
501
- />
502
- )}
503
- {auth &&
504
- !orderState.options?.address_id &&
505
- (orderState.loading ? (
506
- <OButton
507
- isDisabled
508
- text={t('LOADING', 'Loading')}
509
- imgRightSrc=""
510
- textStyle={{ fontSize: 10 }}
511
- />
512
- ) : (
513
- <OButton onClick={() => addressRedirect()} />
514
- ))}
515
- {!auth && (
516
- <OButton
517
- isDisabled={isSoldOut || maxProductQuantity <= 0}
518
- onClick={() => handleRedirectLogin()}
519
- text={
520
- isSoldOut || maxProductQuantity <= 0
521
- ? t('SOLD_OUT', 'Sold out')
522
- : t('LOGIN_SIGNUP', 'Login / Sign Up')
523
- }
524
- imgRightSrc=""
525
- textStyle={{ color: theme.colors.primary, fontSize: 14 }}
526
- style={{
527
- height: 44,
528
- borderColor: theme.colors.primary,
529
- backgroundColor: theme.colors.white,
530
- }}
531
- />
532
- )}
533
- </ButtonWrapper>
534
- </Container>
508
+ {((productCart &&
509
+ auth &&
510
+ orderState.options?.address_id)) && (
511
+ <OButton
512
+ bgColor={theme.colors.primary}
513
+ onClick={() => handleSaveService()}
514
+ text={orderState.loading
515
+ ? t('LOADING', 'Loading')
516
+ : ((isSoldOut || maxProductQuantity <= 0)
517
+ ? t('SOLD_OUT', 'Sold out')
518
+ : t('BOOK', 'Book'))}
519
+ style={styles.buttonStyle}
520
+ isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected}
521
+ textStyle={{ fontSize: 14, color: theme.colors.white }}
522
+ />
523
+ )}
524
+ {auth &&
525
+ !orderState.options?.address_id &&
526
+ (orderState.loading ? (
527
+ <OButton
528
+ isDisabled
529
+ text={t('LOADING', 'Loading')}
530
+ imgRightSrc=""
531
+ textStyle={{ fontSize: 10 }}
532
+ />
533
+ ) : (
534
+ <OButton onClick={() => addressRedirect()} />
535
+ ))}
536
+ {!auth && (
537
+ <OButton
538
+ isDisabled={isSoldOut || maxProductQuantity <= 0}
539
+ onClick={() => handleRedirectLogin()}
540
+ text={
541
+ isSoldOut || maxProductQuantity <= 0
542
+ ? t('SOLD_OUT', 'Sold out')
543
+ : t('LOGIN_SIGNUP', 'Login / Sign Up')
544
+ }
545
+ imgRightSrc=""
546
+ textStyle={{ color: theme.colors.primary, fontSize: 14 }}
547
+ style={{
548
+ height: 44,
549
+ borderColor: theme.colors.primary,
550
+ backgroundColor: theme.colors.white,
551
+ }}
552
+ />
553
+ )}
554
+ </ButtonWrapper>
555
+ </Container>
556
+ )}
557
+
535
558
  <OModal
536
559
  open={isOpen}
537
560
  onClose={() => setIsOpen(false)}
@@ -546,7 +569,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
546
569
  {t('ANY_OROFESSIONAL_MEMBER', 'Any professional member')}
547
570
  </OText>
548
571
  </View>
549
- {professionalList?.map((professional: any) => (
572
+ {professionalListState?.professionals?.map((professional: any) => (
550
573
  <TouchableOpacity
551
574
  key={professional?.id}
552
575
  style={styles.professionalItem}
package/themes/original/src/types/index.tsx CHANGED
@@ -743,7 +743,10 @@ export interface ServiceFormParams {
743
743
  maxProductQuantity: any,
744
744
  businessSlug?: string,
745
745
  onClose: any,
746
- professionalList: any
746
+ professionalList: any,
747
+ productObject?: any,
748
+ professionalListState?: any,
749
+ isCartProduct?: any
747
750
  }
748
751
 
749
752
  export interface ProfessionalFilterParams {