Skip to content

Commit

Permalink
fix: Manage custom errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@acasazza
acasazza committed Mar 14, 2024
1 parent 13c704d commit 3edccab
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 126 deletions.
6 changes: 3 additions & 3 deletions packages/docs/stories/examples/checkout/002.addresses.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -493,16 +493,16 @@ export const CustomErrorMessages: StoryFn = () => {
<CustomerContainer isGuest>
<AddressesContainer shipToDifferentAddress={false}>
<BillingAddressForm
errorClassName='border-red-600'
key={billingAddress?.id}
customFieldMessageError={(props) => {
const regex = /^[a-zA-Z0-9\s]{1,32}$/gm
const regex = /[a-zA-Z]+/g
const phoneRegex = /\d/g
console.log('props', props)
if (
props.field === 'billing_address_first_name' &&
!regex.test(props.value)
) {
return 'Validation error - max 32 characters are allowed - this is a custom message'
return 'Validation error - only characters are allowed - this is a custom message'
}
if (props.field === 'billing_address_metadata_phone') {
return props.value === ''
Expand Down
128 changes: 56 additions & 72 deletions packages/react-components/src/components/addresses/BillingAddressForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ export function BillingAddressForm(props: Props): JSX.Element {
values,
errors,
reset: resetForm,
setValue: setValueForm
setValue: setValueForm,
setError: setErrorForm
} = useRapidForm()
const { setAddressErrors, setAddress, isBusiness } =
useContext(AddressesContext)
Expand All @@ -77,6 +78,35 @@ export function BillingAddressForm(props: Props): JSX.Element {
newResourceLoaded: { billing_address: true }
})
}
if (customFieldMessageError != null && Object.keys(values).length > 0) {
for (const name in values) {
if (Object.prototype.hasOwnProperty.call(values, name)) {
const field = values[name]
const fieldName = field.name
const value = field.value
const inError = errors[fieldName] != null
console.log('inError', inError)
if (
customFieldMessageError != null &&
fieldName != null &&
value != null &&
!inError
) {
const customMessage = customFieldMessageError({
field: fieldName,
value
})
if (customMessage != null) {
setErrorForm({
name: fieldName,
code: 'VALIDATION_ERROR',
message: customMessage
})
}
}
}
}
}
if (!isEmpty(errors)) {
const formErrors: BaseError[] = []
for (const fieldName in errors) {
Expand All @@ -95,90 +125,44 @@ export function BillingAddressForm(props: Props): JSX.Element {
})
}
} else {
const customMessage =
customFieldMessageError != null
? customFieldMessageError({
field: fieldName,
code,
message,
value: values[fieldName].value
})
: null
if (
customFieldMessageError != null &&
code === 'VALIDATION_ERROR' &&
!customMessage
) {
continue
}
formErrors.push({
code: code as CodeErrorType,
message: customMessage ?? message ?? '',
message: message ?? '',
resource: 'billing_address',
field: fieldName
})
}
}
setAddressErrors(formErrors, 'billing_address')
} else if (values && Object.keys(values).length > 0) {
const formErrors: BaseError[] = []
setAddressErrors([], 'billing_address')
for (const name in values) {
if (Object.prototype.hasOwnProperty.call(values, name)) {
const field = values[name]
const fieldName = field.name
const value = field.value
if (
customFieldMessageError != null &&
fieldName != null &&
value != null
) {
const customMessage = customFieldMessageError({
field: fieldName,
value
})
if (customMessage != null) {
formErrors.push({
code: 'VALIDATION_ERROR',
message: customMessage,
resource: 'billing_address',
field: fieldName
})
}
}
const field = values[name]
if (
field?.value ||
(field?.required === false && field?.type !== 'checkbox')
) {
values[name.replace('billing_address_', '')] = field.value
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
delete values[name]
}
}
if (formErrors.length > 0) {
setAddressErrors(formErrors, 'billing_address')
} else {
setAddressErrors([], 'billing_address')
for (const name in values) {
const field = values[name]
if (
field?.value ||
(field?.required === false && field?.type !== 'checkbox')
) {
values[name.replace('billing_address_', '')] = field.value
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
delete values[name]
}
if (field?.type === 'checkbox') {
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
delete values[name]
saveAddressToCustomerAddressBook({
type: 'billing_address',
value: field.checked
})
}
if (field?.type === 'checkbox') {
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
delete values[name]
saveAddressToCustomerAddressBook({
type: 'billing_address',
value: field.checked
})
}
setAddress({
// @ts-expect-error no type
values: {
...values,
...(isBusiness && { business: isBusiness })
},
resource: 'billing_address'
})
}
setAddress({
// @ts-expect-error no type
values: {
...values,
...(isBusiness && { business: isBusiness })
},
resource: 'billing_address'
})
}
const checkboxChecked =
ref.current?.querySelector(
Expand Down
90 changes: 39 additions & 51 deletions packages/react-components/src/components/addresses/ShippingAddressForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ export function ShippingAddressForm(props: Props): JSX.Element {
values,
errors,
reset: resetForm,
setValue: setValueForm
setValue: setValueForm,
setError: setErrorForm
} = useRapidForm()
const {
setAddressErrors,
Expand All @@ -76,6 +77,34 @@ export function ShippingAddressForm(props: Props): JSX.Element {
newResourceLoaded: { shipping_address: true }
})
}
if (customFieldMessageError != null && Object.keys(values).length > 0) {
for (const name in values) {
if (Object.prototype.hasOwnProperty.call(values, name)) {
const field = values[name]
const fieldName = field.name
const value = field.value
const inError = errors[fieldName] != null
if (
customFieldMessageError != null &&
fieldName != null &&
value != null &&
!inError
) {
const customMessage = customFieldMessageError({
field: fieldName,
value
})
if (customMessage != null) {
setErrorForm({
name: fieldName,
code: 'VALIDATION_ERROR',
message: customMessage
})
}
}
}
}
}
if (!isEmpty(errors)) {
const formErrors: BaseError[] = []
for (const fieldName in errors) {
Expand All @@ -94,25 +123,9 @@ export function ShippingAddressForm(props: Props): JSX.Element {
})
}
} else {
const customMessage =
customFieldMessageError != null
? customFieldMessageError({
field: fieldName,
code,
message,
value: values[fieldName].value
})
: null
if (
customFieldMessageError != null &&
code === 'VALIDATION_ERROR' &&
!customMessage
) {
continue
}
formErrors.push({
code: code as CodeErrorType,
message: customMessage ?? message ?? '',
message: message ?? '',
resource: 'shipping_address',
field: fieldName
})
Expand All @@ -126,10 +139,8 @@ export function ShippingAddressForm(props: Props): JSX.Element {
(shipToDifferentAddress || invertAddresses)
) {
setAddressErrors([], 'shipping_address')
const formErrors: BaseError[] = []
for (const name in values) {
const field = values[name]
const fieldName = field.name
if (
field?.value ||
(field?.required === false && field?.type !== 'checkbox')
Expand All @@ -146,38 +157,15 @@ export function ShippingAddressForm(props: Props): JSX.Element {
value: field.checked
})
}
if (
customFieldMessageError != null &&
field.name != null &&
field.value != null
) {
const customMessage = customFieldMessageError({
field: fieldName,
value: field.value
})
console.log('customMessage', customMessage)
if (customMessage != null) {
formErrors.push({
code: 'VALIDATION_ERROR',
message: customMessage,
resource: 'shipping_address',
field: fieldName
})
}
}
}
if (formErrors.length > 0) {
setAddressErrors(formErrors, 'shipping_address')
} else {
setAddress({
// @ts-expect-error no type
values: {
...values,
...(isBusiness && { business: isBusiness })
},
resource: 'shipping_address'
})
}
setAddress({
// @ts-expect-error no type
values: {
...values,
...(isBusiness && { business: isBusiness })
},
resource: 'shipping_address'
})
}
const checkboxChecked =
ref.current?.querySelector(
Expand Down

0 comments on commit 3edccab

Please sign in to comment.