ordering-ui-react-native 0.22.32 → 0.22.33

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 (5) hide show
  1. package/package.json +1 -1
  2. package/themes/original/src/components/SignupForm/index.tsx +60 -58
  3. package/themes/original/src/components/UserFormDetails/index.tsx +71 -69
  4. package/themes/original/src/components/shared/OButton.tsx +2 -2
  5. 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.33",
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/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/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
  })