ordering-ui-react-native 0.22.32 → 0.22.34

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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/components/StripeMethodForm/index.tsx +4 -2
  3. package/src/types/index.tsx +2 -1
  4. package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx +5 -2
  5. package/themes/business/src/components/PreviousOrders/OrderItem.tsx +5 -4
  6. package/themes/original/src/components/MultiCartsPaymethodsAndWallets/index.tsx +1 -0
  7. package/themes/original/src/components/SignupForm/index.tsx +60 -58
  8. package/themes/original/src/components/StripeElementsForm/index.tsx +3 -1
  9. package/themes/original/src/components/UserFormDetails/index.tsx +71 -69
  10. package/themes/original/src/components/shared/OButton.tsx +2 -2
  11. package/themes/original/src/utils/index.tsx +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.22.32",
3
+ "version": "0.22.34",
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
@@ -17,7 +17,8 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
17
17
  methodPaySupported,
18
18
  setPlaceByMethodPay,
19
19
  cartTotal,
20
- androidAppId
20
+ androidAppId,
21
+ businessNames
21
22
  } = props
22
23
  const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
23
24
  const { presentApplePay, isApplePaySupported } = useApplePay();
@@ -152,7 +153,8 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
152
153
 
153
154
  const { error, paymentMethod } = await presentApplePay({
154
155
  cartItems: [{
155
- label: t('CART_APPLE_PAY_LABEL', 'Cart'),
156
+ label: businessNames ? `${businessNames.join(', ')} ${t('VIA_CHEW_APP', 'via Chew App')}`
157
+ : `${cart?.business?.name} ${t('VIA_CHEW_APP', 'via Chew App')}`,
156
158
  amount: cartTotal?.toString?.() ?? cart?.balance?.toString() ?? cart?.total?.toString?.(),
157
159
  paymentType: 'Immediate'
158
160
  }],
package/src/types/index.tsx CHANGED
@@ -495,5 +495,6 @@ export interface StripeMethodFormParams {
495
495
  methodPaySupported?: any,
496
496
  setPlaceByMethodPay?: any,
497
497
  cartTotal?: number,
498
- androidAppId?: string
498
+ androidAppId?: string,
499
+ businessNames?: Array<string>
499
500
  }
package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx CHANGED
@@ -22,6 +22,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
22
22
  import {
23
23
  useLanguage,
24
24
  useUtils,
25
+ useConfig
25
26
  } from 'ordering-components/native';
26
27
 
27
28
  interface OrderHeader {
@@ -49,8 +50,10 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
49
50
  } = props
50
51
  const theme = useTheme();
51
52
  const [, t] = useLanguage();
53
+ const [configState] = useConfig()
52
54
  const [{ parseDate, parsePrice }] = useUtils();
53
55
  const paymethodsLength = order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
56
+ const showExternalId = configState?.configs?.change_order_id?.value === '1'
54
57
 
55
58
  const styles = StyleSheet.create({
56
59
  icons: {
@@ -270,7 +273,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
270
273
 
271
274
  <OText numberOfLines={2} size={20} weight="600">
272
275
  <>
273
- {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id} `}
276
+ {`${t('INVOICE_ORDER_NO', 'Order No.')} ${showExternalId ? order?.external_id || order?.id : order?.id} `}
274
277
  {!order?.isLogistic && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
275
278
  <>
276
279
  {t('IS', 'is')}{' '}
@@ -284,7 +287,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
284
287
  )}
285
288
  </>
286
289
  </OText>
287
- {order?.external_id && (
290
+ {order?.external_id && !showExternalId && (
288
291
  <OText size={13}>
289
292
  <OText size={13} weight='bold'>{`${t('EXTERNAL_ID', 'External ID :')} `}</OText>
290
293
  {order?.external_id}
package/themes/business/src/components/PreviousOrders/OrderItem.tsx CHANGED
@@ -191,23 +191,24 @@ export const OrderItem = React.memo((props: any) => {
191
191
  {order?.external_id ?? t('NO_EXTERNAL_ID', 'No external Id ') + t('NO', 'Order No.') + order?.id}
192
192
  </OText>
193
193
  )}
194
- <OText
194
+ {!showExternalId && <OText
195
195
  style={styles.date}
196
196
  color={theme.colors.unselectText}
197
197
  numberOfLines={1}
198
198
  adjustsFontSizeToFit
199
199
  >
200
- {(!showExternalId && ((!!order?.order_group_id && order?.order_group && isLogisticOrder
200
+ {((!!order?.order_group_id && order?.order_group && isLogisticOrder
201
201
  ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
202
202
  : (t('NO', 'Order No.') + order?.id)
203
- ) + ' · '))}
203
+ ) + ' · ')}
204
204
  {order?.delivery_datetime_utc
205
205
  ? parseDate(order?.delivery_datetime_utc)
206
206
  : parseDate(order?.delivery_datetime, { utc: false })}
207
207
  </OText>
208
+ }
208
209
  {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
209
210
  <>
210
- <OText> · </OText>
211
+ {!showExternalId && <OText> · </OText>}
211
212
  <OText
212
213
  style={styles.date}
213
214
  color={
package/themes/original/src/components/MultiCartsPaymethodsAndWallets/index.tsx CHANGED
@@ -233,6 +233,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
233
233
  toSave
234
234
  businessId={businessIds[0]}
235
235
  businessIds={businessIds}
236
+ businessNames={openCarts?.map?.((cart : any) => cart?.business?.name)}
236
237
  publicKey={paymethodSelected?.data?.publishable}
237
238
  requirements={props.clientSecret}
238
239
  handleSource={handlePaymethodDataChange}
package/themes/original/src/components/SignupForm/index.tsx CHANGED
@@ -583,65 +583,67 @@ const SignupFormUI = (props: SignupParams) => {
583
583
  {sortInputFields({
584
584
  values: validationFields?.fields?.checkout,
585
585
  }).map(
586
- (field: any, i: number) =>
587
- !notValidationFields.includes(field.code) &&
588
- showField &&
589
- showField(field.code) &&
590
- (signUpTab === 'default' ||
591
- (signUpTab === 'otpEmail' && field.code === 'email')) && (
592
- <React.Fragment key={field.id}>
593
- {errors?.[`${field.code}`] && (
594
- <OText
595
- size={14}
596
- color={theme.colors.danger5}
597
- weight={'normal'}>
598
- {errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
599
- </OText>
600
- )}
601
- <Controller
602
- control={control}
603
- render={({ onChange, value }: any) => (
604
- <OInput
605
- placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
606
- style={style.inputStyle}
607
- icon={
608
- field.code === 'email'
609
- ? theme.images.general.email
610
- : theme.images.general.user
611
- }
612
- value={value}
613
- onChange={(val: any) =>
614
- field.code !== 'email'
615
- ? (onChange(val))
616
- : handleChangeInputEmail(val, onChange)
617
- }
618
- autoCapitalize={
619
- field.code === 'email' ? 'none' : 'sentences'
620
- }
621
- autoCorrect={field.code === 'email' && false}
622
- type={
623
- field.code === 'email' ? 'email-address' : 'default'
624
- }
625
- autoCompleteType={
626
- field.code === 'email' ? 'email' : 'off'
627
- }
628
- returnKeyType="next"
629
- blurOnSubmit={false}
630
- forwardRef={(ref: any) => handleRefs(ref, field.code)}
631
- onSubmitEditing={() =>
632
- field.code === 'email'
633
- ? phoneRef?.current?.focus?.()
634
- : handleFocusRef(getNextFieldCode(i))
635
- }
636
- borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
637
- />
586
+ (item: any, i: number) => {
587
+ const field = item?.validation_field || item
588
+ return (!notValidationFields.includes(field.code) &&
589
+ showField &&
590
+ showField(field.code) &&
591
+ (signUpTab === 'default' ||
592
+ (signUpTab === 'otpEmail' && field.code === 'email')) && (
593
+ <React.Fragment key={field.id}>
594
+ {errors?.[`${field.code}`] && (
595
+ <OText
596
+ size={14}
597
+ color={theme.colors.danger5}
598
+ weight={'normal'}>
599
+ {errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
600
+ </OText>
638
601
  )}
639
- name={field.code}
640
- rules={getInputRules(field)}
641
- defaultValue=""
642
- />
643
- </React.Fragment>
644
- ),
602
+ <Controller
603
+ control={control}
604
+ render={({ onChange, value }: any) => (
605
+ <OInput
606
+ placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
607
+ style={style.inputStyle}
608
+ icon={
609
+ field.code === 'email'
610
+ ? theme.images.general.email
611
+ : theme.images.general.user
612
+ }
613
+ value={value}
614
+ onChange={(val: any) =>
615
+ field.code !== 'email'
616
+ ? (onChange(val))
617
+ : handleChangeInputEmail(val, onChange)
618
+ }
619
+ autoCapitalize={
620
+ field.code === 'email' ? 'none' : 'sentences'
621
+ }
622
+ autoCorrect={field.code === 'email' && false}
623
+ type={
624
+ field.code === 'email' ? 'email-address' : 'default'
625
+ }
626
+ autoCompleteType={
627
+ field.code === 'email' ? 'email' : 'off'
628
+ }
629
+ returnKeyType="next"
630
+ blurOnSubmit={false}
631
+ forwardRef={(ref: any) => handleRefs(ref, field.code)}
632
+ onSubmitEditing={() =>
633
+ field.code === 'email'
634
+ ? phoneRef?.current?.focus?.()
635
+ : handleFocusRef(getNextFieldCode(i))
636
+ }
637
+ borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
638
+ />
639
+ )}
640
+ name={field.code}
641
+ rules={getInputRules(field)}
642
+ defaultValue=""
643
+ />
644
+ </React.Fragment>
645
+ ))
646
+ }
645
647
  )}
646
648
 
647
649
  {(!!showInputPhoneNumber && (signUpTab === 'default' || signUpTab === 'otpCellphone')) && (
package/themes/original/src/components/StripeElementsForm/index.tsx CHANGED
@@ -36,7 +36,8 @@ const StripeElementsFormUI = (props: any) => {
36
36
  cartTotal,
37
37
  publicKeyAddCard,
38
38
  urlScheme,
39
- androidAppId
39
+ androidAppId,
40
+ businessNames
40
41
  } = props;
41
42
 
42
43
  const theme = useTheme();
@@ -228,6 +229,7 @@ const StripeElementsFormUI = (props: any) => {
228
229
  methodPaySupported={methodPaySupported}
229
230
  setPlaceByMethodPay={setPlaceByMethodPay}
230
231
  androidAppId={androidAppId}
232
+ businessNames={businessNames}
231
233
  />
232
234
  ) : (
233
235
  <CardField
package/themes/original/src/components/UserFormDetails/index.tsx CHANGED
@@ -304,80 +304,82 @@ export const UserFormDetailsUI = (props: any) => {
304
304
  {sortInputFields({
305
305
  values: validationFields.fields?.checkout,
306
306
  }).map(
307
- (field: any) =>
308
- showField &&
309
- showField(field.code) && ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
310
- <React.Fragment key={field.id}>
311
- <Controller
312
- key={field.id}
313
- control={control}
314
- render={() => (
315
- <>
316
- <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
317
- {t(field?.code?.toUpperCase(), field?.name)}
318
- </OText>
319
- <OInput
320
- name={field.code}
321
- placeholder={t(
322
- field.code.toUpperCase(),
323
- field?.name,
324
- )}
325
- inputStyle={styles.inputStyle}
326
- style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
327
- autoCapitalize={
328
- field.code === 'email' ? 'none' : 'sentences'
329
- }
330
- isDisabled={false}
331
- value={
332
- formState?.changes[field.code] ??
333
- (user && user[field.code]) ??
334
- ''
335
- }
336
- onChange={(val: any) => {
337
- field.code !== 'email'
338
- ? setValue(field.code, val.target.value)
339
- : setValue(
340
- field.code,
341
- val.target.value
342
- .toLowerCase()
343
- .replace(
344
- /[&,()%";:ç?<>{}\\[\]\s]/g,
345
- '',
346
- ),
347
- );
348
- field.code !== 'email'
349
- ? handleChangeInput(val)
350
- : handleChangeInput({
351
- target: {
352
- name: 'email',
353
- value: val.target.value
307
+ (item: any) => {
308
+ const field = item?.validation_field || item
309
+ return (showField &&
310
+ showField(field.code) && ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
311
+ <React.Fragment key={field.id}>
312
+ <Controller
313
+ key={field.id}
314
+ control={control}
315
+ render={() => (
316
+ <>
317
+ <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
318
+ {t(field?.code?.toUpperCase(), field?.name)}
319
+ </OText>
320
+ <OInput
321
+ name={field.code}
322
+ placeholder={t(
323
+ field.code.toUpperCase(),
324
+ field?.name,
325
+ )}
326
+ inputStyle={styles.inputStyle}
327
+ style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
328
+ autoCapitalize={
329
+ field.code === 'email' ? 'none' : 'sentences'
330
+ }
331
+ isDisabled={false}
332
+ value={
333
+ formState?.changes[field.code] ??
334
+ (user && user[field.code]) ??
335
+ ''
336
+ }
337
+ onChange={(val: any) => {
338
+ field.code !== 'email'
339
+ ? setValue(field.code, val.target.value)
340
+ : setValue(
341
+ field.code,
342
+ val.target.value
354
343
  .toLowerCase()
355
344
  .replace(
356
345
  /[&,()%";:ç?<>{}\\[\]\s]/g,
357
346
  '',
358
347
  ),
359
- },
360
- });
361
- }}
362
- autoCorrect={field.code === 'email' && false}
363
- type={
364
- field.code === 'email'
365
- ? 'email-address'
366
- : 'default'
367
- }
368
- returnKeyType="done"
369
- autoCompleteType={
370
- field.code === 'email' ? 'email' : 'off'
371
- }
372
- />
373
- </>
374
- )}
375
- name={field.code}
376
- rules={getInputRules(field)}
377
- defaultValue={user && user[field.code]}
378
- />
379
- </React.Fragment>
380
- ),
348
+ );
349
+ field.code !== 'email'
350
+ ? handleChangeInput(val)
351
+ : handleChangeInput({
352
+ target: {
353
+ name: 'email',
354
+ value: val.target.value
355
+ .toLowerCase()
356
+ .replace(
357
+ /[&,()%";:ç?<>{}\\[\]\s]/g,
358
+ '',
359
+ ),
360
+ },
361
+ });
362
+ }}
363
+ autoCorrect={field.code === 'email' && false}
364
+ type={
365
+ field.code === 'email'
366
+ ? 'email-address'
367
+ : 'default'
368
+ }
369
+ returnKeyType="done"
370
+ autoCompleteType={
371
+ field.code === 'email' ? 'email' : 'off'
372
+ }
373
+ />
374
+ </>
375
+ )}
376
+ name={field.code}
377
+ rules={getInputRules(field)}
378
+ defaultValue={user && user[field.code]}
379
+ />
380
+ </React.Fragment>
381
+ ))
382
+ },
381
383
  )}
382
384
  {showInputBirthday && (
383
385
  <>
package/themes/original/src/components/shared/OButton.tsx CHANGED
@@ -119,7 +119,7 @@ const OButton = (props: Props): React.ReactElement => {
119
119
  style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
120
120
  disabled={props.isDisabledWithSameStyles}
121
121
  >
122
- <StyledButton style={{ ...props.style, backgroundColor: theme?.general?.components?.buttons?.color ?? props.bgColor, borderColor: theme?.general?.components?.buttons?.color ?? props.borderColor, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
122
+ <StyledButton style={{ ...props.style, backgroundColor: props.bgColor ?? theme?.general?.components?.buttons?.color, borderColor: props.borderColor ?? theme?.general?.components?.buttons?.color, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
123
123
  {props.icon ? (
124
124
  <props.icon {...props.iconProps} />
125
125
  ) : null}
@@ -127,7 +127,7 @@ const OButton = (props: Props): React.ReactElement => {
127
127
  <OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
128
128
  ) : null}
129
129
  {props.text ? (
130
- <StyledText style={{ ...props.textStyle, color: theme?.general?.components?.buttons?.buttonTextColor ?? props?.textStyle?.color }}>{props.text}</StyledText>
130
+ <StyledText style={{ ...props.textStyle, color: props?.textStyle?.color ?? theme?.general?.components?.buttons?.buttonTextColor }}>{props.text}</StyledText>
131
131
  ) : null}
132
132
  {props.imgRightSrc ? (
133
133
  <EndImage style={props.imgRightStyle} source={props.imgRightSrc} />
package/themes/original/src/utils/index.tsx CHANGED
@@ -258,7 +258,7 @@ export const sortInputFields = ({ fields, values }: any) => {
258
258
 
259
259
  fieldsBase.forEach((f: any) => {
260
260
  fieldsArray && fieldsArray.forEach((field: any) => {
261
- if (f === field.code) {
261
+ if (f === (field.validation_field?.code || field?.code)) {
262
262
  fieldsSorted.push(field)
263
263
  }
264
264
  })