ordering-ui-react-native 0.15.98 → 0.15.99

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/StripeMethodForm/index.tsx +21 -22
  3. package/themes/business/src/components/LogoutButton/index.tsx +1 -1
  4. package/themes/original/src/components/BusinessProductsListing/index.tsx +10 -1
  5. package/themes/original/src/components/OrderDetails/index.tsx +2 -1
  6. package/themes/original/src/components/UserFormDetails/index.tsx +1 -1
  7. package/themes/original/src/components/UserVerification/index.tsx +178 -192
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.15.98",
3
+ "version": "0.15.99",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/src/components/StripeMethodForm/index.tsx CHANGED
@@ -131,7 +131,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
131
131
 
132
132
  return (
133
133
  <>
134
- {paymethod === 'google_pay' && (
134
+ {paymethod === 'google_pay' ? (
135
135
  <View>
136
136
  <OButton
137
137
  textStyle={{
@@ -145,27 +145,26 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
145
145
  style={{ marginTop: 20 }}
146
146
  />
147
147
  </View>
148
- // ) : (
149
- // <View>
150
- // {isApplePaySupported ? (
151
- // <>
152
- // <OText>{t('APPLE_PAY_PAYMENT', 'Apple pay payment')}</OText>
153
- // <ApplePayButton
154
- // onPress={pay}
155
- // type="plain"
156
- // buttonStyle="black"
157
- // borderRadius={4}
158
- // style={{
159
- // width: '100%',
160
- // height: 50,
161
- // }}
162
- // />
163
- // </>
164
- // ) : (
165
- // <OText>{t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported')}</OText>
166
- // )}
167
- // </View>
168
- // )}
148
+ ) : (
149
+ <View>
150
+ {isApplePaySupported ? (
151
+ <>
152
+ <OText>{t('APPLE_PAY_PAYMENT', 'Apple pay payment')}</OText>
153
+ <ApplePayButton
154
+ onPress={pay}
155
+ type="plain"
156
+ buttonStyle="black"
157
+ borderRadius={4}
158
+ style={{
159
+ width: '100%',
160
+ height: 50,
161
+ }}
162
+ />
163
+ </>
164
+ ) : (
165
+ <OText>{t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported')}</OText>
166
+ )}
167
+ </View>
169
168
  )}
170
169
  <Spinner
171
170
  visible={loadingGooglePayment}
package/themes/business/src/components/LogoutButton/index.tsx CHANGED
@@ -15,7 +15,7 @@ const LogoutButtonUI = (props: any) => {
15
15
  const data = await _retrieveStoreData('notification_state');
16
16
  const res = await handleLogoutClick(data);
17
17
  if (res) {
18
- _clearStoreData({ excludedKeys: ['project_name'] });
18
+ _clearStoreData({ excludedKeys: ['isTutorial'] });
19
19
  }
20
20
  };
21
21
 
package/themes/original/src/components/BusinessProductsListing/index.tsx CHANGED
@@ -177,7 +177,16 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
177
177
  const _carts = orderState?.carts?.[adjustBusinessId]
178
178
  const products = _carts?.products
179
179
  const unavailableProducts = products.filter((product: any) => product.valid !== true)
180
- unavailableProducts.length > 0 && multiRemoveProducts && multiRemoveProducts(unavailableProducts, _carts)
180
+ const alreadyRemoved = await _retrieveStoreData('already-removed')
181
+ _removeStoreData('already-removed')
182
+ if (unavailableProducts.length > 0) {
183
+ multiRemoveProducts && await multiRemoveProducts(unavailableProducts, _carts)
184
+ return
185
+ }
186
+
187
+ if (alreadyRemoved === 'removed') {
188
+ setAlertState({ open: true, content: [t('NOT_AVAILABLE_PRODUCT', 'This product is not available.')] })
189
+ }
181
190
  }
182
191
 
183
192
  const removeCartByReOrder = async () => {
package/themes/original/src/components/OrderDetails/index.tsx CHANGED
@@ -398,10 +398,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
398
398
  const products = carts?.[_businessId]?.products
399
399
  const available = products.every((product: any) => product.valid === true)
400
400
 
401
- if (available && reorderState?.result?.uuid) {
401
+ if (available && reorderState?.result?.uuid && (products?.length === order?.products.length)) {
402
402
  onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
403
403
  } else {
404
404
  _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
405
+ products?.length !== order?.products.length && _setStoreData('already-removed', JSON.stringify('removed'))
405
406
  navigation.navigate('Business', { store: businessData?.slug })
406
407
  }
407
408
  }
package/themes/original/src/components/UserFormDetails/index.tsx CHANGED
@@ -229,7 +229,7 @@ export const UserFormDetailsUI = (props: any) => {
229
229
 
230
230
  useEffect(() => {
231
231
  if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
232
- setWillVerifyOtpState(true)
232
+ setWillVerifyOtpState?.(true)
233
233
  }
234
234
  }, [phoneInputData])
235
235
 
package/themes/original/src/components/UserVerification/index.tsx CHANGED
@@ -7,6 +7,7 @@ import {
7
7
  TextInput,
8
8
  SafeAreaView,
9
9
  TouchableOpacity,
10
+ ScrollView,
10
11
  } from 'react-native';
11
12
  import {
12
13
  UserVerification as UserVerificationController,
@@ -81,7 +82,6 @@ const UserVerificationUI = (props: any) => {
81
82
  const [containerIsFocused, setContainerIsFocused] = useState(false);
82
83
 
83
84
  const [phoneState, setPhoneState] = useState<any>(null)
84
- const [modalIsOpen, setModalIsOpen] = useState(false)
85
85
  const [verificationState, setVerificationState] = useState({ email: false, phone: false })
86
86
 
87
87
  const codeDigitsArray = new Array(CODE_LENGTH).fill(0);
@@ -155,7 +155,7 @@ const UserVerificationUI = (props: any) => {
155
155
 
156
156
  const containerStyle =
157
157
  containerIsFocused && isFocused
158
- ? {...style.inputContainer, ...style.inputContainerFocused}
158
+ ? { ...style.inputContainer, ...style.inputContainerFocused }
159
159
  : style.inputContainer;
160
160
 
161
161
  return (
@@ -250,8 +250,8 @@ const UserVerificationUI = (props: any) => {
250
250
  showToast(
251
251
  ToastType.Error,
252
252
  verifyEmailState?.errorSendCode?.[0]
253
- ?? verifyEmailState?.errorCheckCode?.[0]
254
- ?? t('ERROR', 'Error'),
253
+ ?? verifyEmailState?.errorCheckCode?.[0]
254
+ ?? t('ERROR', 'Error'),
255
255
  );
256
256
  setTimeout(() => {
257
257
  cleanErrorsState();
@@ -264,8 +264,8 @@ const UserVerificationUI = (props: any) => {
264
264
  showToast(
265
265
  ToastType.Error,
266
266
  verifyPhoneState?.errorSendCode?.[0]
267
- ?? verifyPhoneState?.errorCheckCode?.[0]
268
- ?? t('ERROR', 'Error'),
267
+ ?? verifyPhoneState?.errorCheckCode?.[0]
268
+ ?? t('ERROR', 'Error'),
269
269
  );
270
270
  setTimeout(() => {
271
271
  cleanErrorsState();
@@ -296,209 +296,195 @@ const UserVerificationUI = (props: any) => {
296
296
 
297
297
  return (
298
298
  <SafeAreaView style={{ flex: 1 }}>
299
- <Container>
300
- <WrapperActions>
301
- <WrapperText>
302
- <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
303
- {t('VERIFICATION_CODE', 'Verification Code')}
304
- </OText>
305
- {isEmailVerifyRequired && (
306
- <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
307
- {!verificationState.email ? (
308
- t('VERIFICATION_EMAIL_CODE_MESSAGE', 'In order to continue using our platform please verify your email')
309
- ) : (
310
- t('VERIFICATION_EMAIL_CODE_SENT_MESSAGE', 'Please type the verification code sent to your email')
311
- )}
299
+ <ScrollView>
300
+ <Container>
301
+ <WrapperActions>
302
+ <WrapperText>
303
+ <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
304
+ {t('VERIFICATION_CODE', 'Verification Code')}
312
305
  </OText>
313
- )}
314
-
315
- {isPhoneVerifyRequired && !isEmailVerifyRequired && (
316
- <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
317
- {!verificationState.phone ? (
318
- t('VERIFICATION_PHONE_CODE_MESSAGE', 'In order to continue using our platform please verify your phone number')
319
- ) : (
320
- t('VERIFICATION_PHONE_CODE_SENT_MESSAGE', 'Please, enter the verification code we sent to your mobile ending with :number').replace(':number', lastNumbers)
321
- )}
322
- </OText>
323
- )}
324
- </WrapperText>
325
- <View style={{ position: 'absolute', top: 0, right: 0 }}>
326
- <LogoutButton iconSize={20} />
327
- </View>
328
- </WrapperActions>
329
-
330
- {isEmailVerifyRequired && (
331
- !verificationState.email ? (
332
- <InputWrapper>
333
- <OInput
334
- placeholder={user?.email}
335
- style={style.inputStyle}
336
- icon={theme.images.general.email}
337
- isDisabled
338
- />
339
- </InputWrapper>
340
- ) : (
341
- <>
342
- <WrappCountdown>
343
- <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
344
- <OText
345
- size={26}
346
- color={timer === '00:00' ? theme.colors.error: theme.colors.success}
347
- >
348
- {timer}
349
- </OText>
350
- </CountDownContainer>
351
- </WrappCountdown>
352
-
353
- <InputsSection>
354
- <OtpSection>
355
- <DigitInput
356
- disabled={otpState.length === CODE_LENGTH}
357
- onPress={handleOnPress}
358
- >
359
- {codeDigitsArray.map(toDigitInput)}
360
- </DigitInput>
361
- <TextInput
362
- ref={ref}
363
- value={otpState}
364
- placeholder='0'
365
- onChangeText={setOtpState}
366
- onSubmitEditing={handleOnBlur}
367
- keyboardType="number-pad"
368
- returnKeyType="done"
369
- textContentType="oneTimeCode"
370
- maxLength={CODE_LENGTH}
371
- style={style.hiddenCodeInput}
372
- />
373
- </OtpSection>
374
- </InputsSection>
375
-
376
- <WrapperText>
377
- <TouchableOpacity
378
- onPress={() => handleSendOtp()}
379
- >
380
- <OText color={theme.colors.primary}>
381
- {t('RESEND_AGAIN', 'Resend again?')}
382
- </OText>
383
- </TouchableOpacity>
384
- </WrapperText>
385
- </>
386
- )
387
- )}
388
-
389
- {isPhoneVerifyRequired && !isEmailVerifyRequired && (
390
- !verificationState.phone ? (
391
- phoneState?.formatted ? (
392
- <>
393
- <InputWrapper phone>
394
- <PhoneInputNumber
395
- handleData={() => {}}
396
- defaultValue={phoneState?.cellphone}
397
- defaultCode={phoneState?.country_phone_code.replace('+', '')}
398
- boxStyle={style.phoneSelect}
399
- inputStyle={style.phoneInputStyle}
400
- textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
401
- noDropIcon
402
- isDisabled
403
- />
404
- </InputWrapper>
405
- </>
306
+ {isEmailVerifyRequired && (
307
+ <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
308
+ {!verificationState.email ? (
309
+ t('VERIFICATION_EMAIL_CODE_MESSAGE', 'In order to continue using our platform please verify your email')
310
+ ) : (
311
+ t('VERIFICATION_EMAIL_CODE_SENT_MESSAGE', 'Please type the verification code sent to your email')
312
+ )}
313
+ </OText>
314
+ )}
315
+
316
+ {isPhoneVerifyRequired && !isEmailVerifyRequired && (
317
+ <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
318
+ {!verificationState.phone ? (
319
+ t('VERIFICATION_PHONE_CODE_MESSAGE', 'In order to continue using our platform please verify your phone number')
320
+ ) : (
321
+ t('VERIFICATION_PHONE_CODE_SENT_MESSAGE', 'Please, enter the verification code we sent to your mobile ending with :number').replace(':number', lastNumbers)
322
+ )}
323
+ </OText>
324
+ )}
325
+ </WrapperText>
326
+ <View style={{ position: 'absolute', top: 0, right: 0 }}>
327
+ <LogoutButton iconSize={20} />
328
+ </View>
329
+ </WrapperActions>
330
+
331
+ {isEmailVerifyRequired && (
332
+ !verificationState.email ? (
333
+ <InputWrapper>
334
+ <OInput
335
+ placeholder={user?.email}
336
+ style={style.inputStyle}
337
+ icon={theme.images.general.email}
338
+ isDisabled
339
+ />
340
+ </InputWrapper>
406
341
  ) : (
407
342
  <>
343
+ <WrappCountdown>
344
+ <CountDownContainer color={timer === '00:00' ? theme.colors.error : theme.colors.success}>
345
+ <OText
346
+ size={26}
347
+ color={timer === '00:00' ? theme.colors.error : theme.colors.success}
348
+ >
349
+ {timer}
350
+ </OText>
351
+ </CountDownContainer>
352
+ </WrappCountdown>
353
+
354
+ <InputsSection>
355
+ <OtpSection>
356
+ <DigitInput
357
+ disabled={otpState.length === CODE_LENGTH}
358
+ onPress={handleOnPress}
359
+ >
360
+ {codeDigitsArray.map(toDigitInput)}
361
+ </DigitInput>
362
+ <TextInput
363
+ ref={ref}
364
+ value={otpState}
365
+ placeholder='0'
366
+ onChangeText={setOtpState}
367
+ onSubmitEditing={handleOnBlur}
368
+ keyboardType="number-pad"
369
+ returnKeyType="done"
370
+ textContentType="oneTimeCode"
371
+ maxLength={CODE_LENGTH}
372
+ style={style.hiddenCodeInput}
373
+ />
374
+ </OtpSection>
375
+ </InputsSection>
376
+
377
+ <WrapperText>
378
+ <TouchableOpacity
379
+ onPress={() => handleSendOtp()}
380
+ >
381
+ <OText color={theme.colors.primary}>
382
+ {t('RESEND_AGAIN', 'Resend again?')}
383
+ </OText>
384
+ </TouchableOpacity>
385
+ </WrapperText>
386
+ </>
387
+ )
388
+ )}
389
+
390
+ {isPhoneVerifyRequired && !isEmailVerifyRequired && (
391
+ !verificationState.phone ? (
392
+ phoneState?.formatted ? (
393
+ <>
394
+ <InputWrapper phone>
395
+ <PhoneInputNumber
396
+ handleData={() => { }}
397
+ defaultValue={phoneState?.cellphone}
398
+ defaultCode={phoneState?.country_phone_code.replace('+', '')}
399
+ boxStyle={style.phoneSelect}
400
+ inputStyle={style.phoneInputStyle}
401
+ textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
402
+ noDropIcon
403
+ isDisabled
404
+ />
405
+ </InputWrapper>
406
+ </>
407
+ ) : (
408
408
  <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
409
409
  {t('WARNING_PHONE_CODE_VALIDATION', 'Please update your phone number to continue')}
410
410
  </OText>
411
+ )
412
+ ) : (
413
+ <>
414
+ <WrappCountdown>
415
+ <CountDownContainer color={timer === '00:00' ? theme.colors.error : theme.colors.success}>
416
+ <OText
417
+ size={26}
418
+ color={timer === '00:00' ? theme.colors.error : theme.colors.success}
419
+ >
420
+ {timer}
421
+ </OText>
422
+ </CountDownContainer>
423
+ </WrappCountdown>
424
+
425
+ <InputsSection>
426
+ <OtpSection>
427
+ <DigitInput
428
+ disabled={otpState.length === CODE_LENGTH}
429
+ onPress={handleOnPress}
430
+ >
431
+ {codeDigitsArray.map(toDigitInput)}
432
+ </DigitInput>
433
+ <TextInput
434
+ ref={ref}
435
+ value={otpState}
436
+ placeholder='0'
437
+ onChangeText={setOtpState}
438
+ onSubmitEditing={handleOnBlur}
439
+ keyboardType="number-pad"
440
+ returnKeyType="done"
441
+ textContentType="oneTimeCode"
442
+ maxLength={CODE_LENGTH}
443
+ style={style.hiddenCodeInput}
444
+ />
445
+ </OtpSection>
446
+ </InputsSection>
447
+
411
448
  <WrapperText>
412
449
  <TouchableOpacity
413
- onPress={() => setModalIsOpen(true)}
450
+ onPress={() => handleSendOtp('phone')}
451
+ disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
414
452
  >
415
453
  <OText color={theme.colors.primary}>
416
- {t('UPDATE_PROFILE', 'Update profile')}
454
+ {t('RESEND_AGAIN', 'Resend again?')}
417
455
  </OText>
418
456
  </TouchableOpacity>
419
457
  </WrapperText>
420
458
  </>
421
459
  )
422
- ) : (
423
- <>
424
- <WrappCountdown>
425
- <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
426
- <OText
427
- size={26}
428
- color={timer === '00:00' ? theme.colors.error: theme.colors.success}
429
- >
430
- {timer}
431
- </OText>
432
- </CountDownContainer>
433
- </WrappCountdown>
434
-
435
- <InputsSection>
436
- <OtpSection>
437
- <DigitInput
438
- disabled={otpState.length === CODE_LENGTH}
439
- onPress={handleOnPress}
440
- >
441
- {codeDigitsArray.map(toDigitInput)}
442
- </DigitInput>
443
- <TextInput
444
- ref={ref}
445
- value={otpState}
446
- placeholder='0'
447
- onChangeText={setOtpState}
448
- onSubmitEditing={handleOnBlur}
449
- keyboardType="number-pad"
450
- returnKeyType="done"
451
- textContentType="oneTimeCode"
452
- maxLength={CODE_LENGTH}
453
- style={style.hiddenCodeInput}
454
- />
455
- </OtpSection>
456
- </InputsSection>
457
-
458
- <WrapperText>
459
- <TouchableOpacity
460
- onPress={() => handleSendOtp('phone')}
461
- disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
462
- >
463
- <OText color={theme.colors.primary}>
464
- {t('RESEND_AGAIN', 'Resend again?')}
465
- </OText>
466
- </TouchableOpacity>
467
- </WrapperText>
468
- </>
469
- )
470
- )}
471
-
472
- </Container>
473
- <ButtonsActions>
474
- <View style={{ width: '100%' }}>
475
- <OButton
476
- onClick={(verificationState.email || verificationState.phone)
477
- ? () => setVerificationState({ email: false, phone: false })
478
- : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
479
- }
480
- text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
481
- bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
482
- borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
483
- textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
484
- imgRightSrc={null}
485
- isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
486
- style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
460
+ )}
461
+
462
+ </Container>
463
+ <ButtonsActions>
464
+ <View style={{ width: '100%' }}>
465
+ <OButton
466
+ onClick={(verificationState.email || verificationState.phone)
467
+ ? () => setVerificationState({ email: false, phone: false })
468
+ : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
469
+ }
470
+ text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
471
+ bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
472
+ borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
473
+ textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
474
+ imgRightSrc={null}
475
+ isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
476
+ style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
477
+ />
478
+ </View>
479
+ </ButtonsActions>
480
+ <View style={{ paddingHorizontal: 20, paddingBottom: 80 }}>
481
+ <UserDetails
482
+ user={user}
483
+ isEdit
484
+ isVerifiedPhone
487
485
  />
488
486
  </View>
489
- </ButtonsActions>
490
-
491
- <OModal
492
- open={modalIsOpen}
493
- entireModal
494
- customClose
495
- onClose={() => setModalIsOpen(false)}
496
- >
497
- <UserDetails
498
- user={user}
499
- handleSuccessUpdate={() => setModalIsOpen(false)}
500
- />
501
- </OModal>
487
+ </ScrollView>
502
488
  </SafeAreaView>
503
489
  )
504
490
  }