@salesforce/retail-react-app 1.0.0-preview.0

package/app/components/forms/useAddressFields.jsx

@@ -0,0 +1,196 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {useIntl, defineMessages} from 'react-intl'
+import {formatPhoneNumber} from '@salesforce/retail-react-app/app/utils/phone-utils'
+import {
+    stateOptions,
+    provinceOptions
+} from '@salesforce/retail-react-app/app/components/forms/state-province-options'
+
+const messages = defineMessages({
+    required: {defaultMessage: 'Required', id: 'use_address_fields.error.required'},
+    firstName: {defaultMessage: 'First Name', id: 'use_address_fields.label.first_name'},
+    lastName: {defaultMessage: 'Last Name', id: 'use_address_fields.label.last_name'},
+    phone: {defaultMessage: 'Phone', id: 'use_address_fields.label.phone'},
+    country: {defaultMessage: 'Country', id: 'use_address_fields.label.country'},
+    address: {defaultMessage: 'Address', id: 'use_address_fields.label.address'},
+    city: {defaultMessage: 'City', id: 'use_address_fields.label.city'},
+    state: {defaultMessage: 'State', id: 'use_address_fields.label.state'},
+    province: {defaultMessage: 'Province', id: 'use_address_fields.label.province'},
+    zipCode: {defaultMessage: 'Zip Code', id: 'use_address_fields.label.zipCode'},
+    postalCode: {defaultMessage: 'Postal Code', id: 'use_address_fields.label.postal_code'},
+    stateCodeInvalid: {
+        defaultMessage: 'Please enter 2-letter state/province.',
+        id: 'use_address_fields.error.state_code_invalid'
+    },
+    preferred: {defaultMessage: 'Set as default', id: 'use_address_fields.label.preferred'}
+})
+
+/**
+ * A React hook that provides the field definitions for an address form.
+ * @param {Object} form - The object returned from `useForm`
+ * @param {Object} form.control - The form control object
+ * @param {Object} form.formState.errors - An object containing field errors
+ * @returns {Object} Field definitions for use in a form
+ */
+export default function useAddressFields({
+    form: {
+        watch,
+        control,
+        formState: {errors}
+    },
+    prefix = ''
+}) {
+    const {formatMessage} = useIntl()
+
+    const countryCode = watch('countryCode')
+
+    const fields = {
+        firstName: {
+            name: `${prefix}firstName`,
+            label: formatMessage(messages.firstName),
+            defaultValue: '',
+            type: 'text',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your first name.',
+                    id: 'use_address_fields.error.please_enter_first_name'
+                })
+            },
+            error: errors[`${prefix}firstName`],
+            control
+        },
+        lastName: {
+            name: `${prefix}lastName`,
+            label: formatMessage(messages.lastName),
+            defaultValue: '',
+            type: 'text',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your last name.',
+                    id: 'use_address_fields.error.please_enter_last_name'
+                })
+            },
+            error: errors[`${prefix}lastName`],
+            control
+        },
+        phone: {
+            name: `${prefix}phone`,
+            label: formatMessage(messages.phone),
+            defaultValue: '',
+            type: 'tel',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your phone number.',
+                    id: 'use_address_fields.error.please_enter_phone_number'
+                })
+            },
+            error: errors[`${prefix}phone`],
+            inputProps: ({onChange}) => ({
+                inputMode: 'numeric',
+                onChange(evt) {
+                    onChange(formatPhoneNumber(evt.target.value))
+                }
+            }),
+            control
+        },
+        countryCode: {
+            name: `${prefix}countryCode`,
+            label: formatMessage(messages.country),
+            defaultValue: 'US',
+            type: 'select',
+            options: [
+                {value: 'CA', label: 'Canada'},
+                {value: 'US', label: 'United States'}
+            ],
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please select your country.',
+                    id: 'use_address_fields.error.please_select_your_country'
+                })
+            },
+            error: errors[`${prefix}countryCode`],
+            control
+        },
+        address1: {
+            name: `${prefix}address1`,
+            label: formatMessage(messages.address),
+            defaultValue: '',
+            type: 'text',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your address.',
+                    id: 'use_address_fields.error.please_select_your_address'
+                })
+            },
+            error: errors[`${prefix}address1`],
+            control
+        },
+        city: {
+            name: `${prefix}city`,
+            label: formatMessage(messages.city),
+            defaultValue: '',
+            type: 'text',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your city.',
+                    id: 'use_address_fields.error.please_select_your_city'
+                })
+            },
+            error: errors[`${prefix}city`],
+            control
+        },
+        stateCode: {
+            name: `${prefix}stateCode`,
+            label: formatMessage(countryCode === 'CA' ? messages.province : messages.state),
+            defaultValue: '',
+            type: 'select',
+            options: [
+                {value: '', label: ''},
+                ...(countryCode === 'CA' ? provinceOptions : stateOptions)
+            ],
+            rules: {
+                required: formatMessage(
+                    {
+                        defaultMessage: 'Please select your {stateOrProvince}.',
+                        id: 'use_address_fields.error.please_select_your_state_or_province'
+                    },
+                    {stateOrProvince: countryCode === 'CA' ? 'province' : 'state'}
+                )
+            },
+            error: errors[`${prefix}stateCode`],
+            control
+        },
+        postalCode: {
+            name: `${prefix}postalCode`,
+            label: formatMessage(countryCode === 'CA' ? messages.postalCode : messages.zipCode),
+            defaultValue: '',
+            type: 'text',
+            rules: {
+                required: formatMessage(
+                    {
+                        defaultMessage: 'Please enter your {postalOrZip}.',
+                        id: 'use_address_fields.error.please_enter_your_postal_or_zip'
+                    },
+                    {postalOrZip: countryCode === 'CA' ? 'postal code' : 'zip code'}
+                )
+            },
+            error: errors[`${prefix}postalCode`],
+            control
+        },
+        preferred: {
+            name: `${prefix}preferred`,
+            label: formatMessage(messages.preferred),
+            defaultValue: false,
+            type: 'checkbox',
+            rules: {},
+            control
+        }
+    }
+
+    return fields
+}

package/app/components/forms/useCreditCardFields.jsx

@@ -0,0 +1,146 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import cardValidator from 'card-validator'
+import {useIntl, defineMessages} from 'react-intl'
+
+const messages = defineMessages({
+    required: {defaultMessage: 'Required', id: 'use_credit_card_fields.error.required'},
+    cardNumberInvalid: {
+        defaultMessage: 'Please enter a valid card number.',
+        id: 'use_credit_card_fields.error.valid_card_number'
+    },
+    nameInvalid: {
+        defaultMessage: 'Please enter a valid name.',
+        id: 'use_credit_card_fields.error.valid_name'
+    },
+    dateInvalid: {
+        defaultMessage: 'Please enter a valid date.',
+        id: 'use_credit_card_fields.error.valid_date'
+    },
+    codeInvalid: {
+        defaultMessage: 'Please enter a valid security code.',
+        id: 'use_credit_card_fields.error.valid_security_code'
+    },
+    cardNumber: {defaultMessage: 'Card Number', id: 'use_credit_card_fields.label.card_number'},
+    cardType: {defaultMessage: 'Card Type', id: 'use_credit_card_fields.label.card_type'},
+    cardName: {defaultMessage: 'Name on Card', id: 'use_credit_card_fields.label.name'},
+    expiryDate: {defaultMessage: 'Expiration Date', id: 'use_credit_card_fields.label.expiry'},
+    securityCode: {
+        defaultMessage: 'Security Code',
+        id: 'use_credit_card_fields.label.security_code'
+    }
+})
+
+/**
+ * A React hook that provides the field definitions for a credit card form.
+ * @param {Object} form - The object returned from `useForm`
+ * @param {Object} form.control - The form control object
+ * @param {Object} form.errors - An object containing field errors
+ * @returns {Object} Field definitions for use in a form
+ */
+export default function useCreditCardFields({
+    form: {
+        control,
+        formState: {errors}
+    },
+    prefix = ''
+}) {
+    const {formatMessage} = useIntl()
+
+    const fields = {
+        number: {
+            name: `${prefix}number`,
+            label: formatMessage(messages.cardNumber),
+            defaultValue: '',
+            type: 'text',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your card number.',
+                    id: 'use_credit_card_fields.error.required_card_number'
+                }),
+                validate: (value) =>
+                    cardValidator.number(value).isValid || formatMessage(messages.cardNumberInvalid)
+            },
+            error: errors[`${prefix}number`],
+            inputProps: {
+                inputMode: 'numeric'
+            },
+            control
+        },
+        cardType: {
+            name: `${prefix}cardType`,
+            label: formatMessage(messages.cardType),
+            defaultValue: '',
+            type: 'hidden',
+            error: errors[`${prefix}cardType`],
+            control
+        },
+        holder: {
+            name: `${prefix}holder`,
+            label: formatMessage(messages.cardName),
+            defaultValue: '',
+            type: 'text',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your name as shown on your card.',
+                    id: 'use_credit_card_fields.error.required_name'
+                }),
+                validate: (value) =>
+                    cardValidator.cardholderName(value).isValid ||
+                    formatMessage(messages.nameInvalid)
+            },
+            error: errors[`${prefix}holder`],
+            control
+        },
+        expiry: {
+            name: `${prefix}expiry`,
+            label: formatMessage(messages.expiryDate),
+            defaultValue: '',
+            type: 'text',
+            placeholder: 'MM/YY',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your expiration date.',
+                    id: 'use_credit_card_fields.error.required_expiry'
+                }),
+                validate: (value) =>
+                    cardValidator.expirationDate(value).isValid ||
+                    formatMessage(messages.dateInvalid)
+            },
+            error: errors[`${prefix}expiry`],
+            inputProps: {
+                inputMode: 'numeric'
+            },
+            control
+        },
+        securityCode: {
+            name: `${prefix}securityCode`,
+            label: formatMessage(messages.securityCode),
+            defaultValue: '',
+            type: 'password',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your security code.',
+                    id: 'use_credit_card_fields.error.required_security_code'
+                }),
+                validate: (value) =>
+                    cardValidator.cvv(value).isValid || formatMessage(messages.codeInvalid)
+            },
+            error: errors[`${prefix}securityCode`],
+            inputProps: ({onChange}) => ({
+                inputMode: 'numeric',
+                maxLength: 4,
+                onChange(evt) {
+                    onChange(evt.target.value.replace(/[^0-9 ]+/, ''))
+                }
+            }),
+            control
+        }
+    }
+
+    return fields
+}

package/app/components/forms/useLoginFields.jsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {useIntl} from 'react-intl'
+
+export default function useLoginFields({
+    form: {
+        control,
+        formState: {errors}
+    },
+    prefix = ''
+}) {
+    const {formatMessage} = useIntl()
+    const fields = {
+        email: {
+            name: `${prefix}email`,
+            label: formatMessage({defaultMessage: 'Email', id: 'use_login_fields.label.email'}),
+            placeholder: 'you@email.com',
+            defaultValue: '',
+            type: 'email',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your email address.',
+                    id: 'use_login_fields.error.required_email'
+                })
+            },
+            error: errors?.[`${prefix}email`],
+            control
+        },
+        password: {
+            name: `${prefix}password`,
+            label: formatMessage({
+                defaultMessage: 'Password',
+                id: 'use_login_fields.label.password'
+            }),
+            defaultValue: '',
+            type: 'password',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your password.',
+                    id: 'use_login_fields.error.required_password'
+                })
+            },
+            error: errors?.[`${prefix}password`],
+            control
+        }
+    }
+    return fields
+}

package/app/components/forms/useProfileFields.jsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {useIntl} from 'react-intl'
+import {formatPhoneNumber} from '@salesforce/retail-react-app/app/utils/phone-utils'
+
+export default function useProfileFields({
+    form: {
+        control,
+        formState: {errors}
+    },
+    prefix = ''
+}) {
+    const {formatMessage} = useIntl()
+
+    const fields = {
+        firstName: {
+            name: `${prefix}firstName`,
+            label: formatMessage({
+                defaultMessage: 'First Name',
+                id: 'use_profile_fields.label.first_name'
+            }),
+            type: 'text',
+            defaultValue: '',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your first name.',
+                    id: 'use_profile_fields.error.required_first_name'
+                })
+            },
+            error: errors[`${prefix}firstName`],
+            control
+        },
+        lastName: {
+            name: `${prefix}lastName`,
+            label: formatMessage({
+                defaultMessage: 'Last Name',
+                id: 'use_profile_fields.label.last_name'
+            }),
+            type: 'text',
+            defaultValue: '',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your last name.',
+                    id: 'use_profile_fields.error.required_last_name'
+                })
+            },
+            error: errors[`${prefix}lastName`],
+            control
+        },
+        email: {
+            name: `${prefix}email`,
+            label: formatMessage({defaultMessage: 'Email', id: 'use_profile_fields.label.email'}),
+            placeholder: 'you@email.com',
+            type: 'email',
+            defaultValue: '',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter a valid email address.',
+                    id: 'use_profile_fields.error.required_email'
+                })
+            },
+            error: errors[`${prefix}email`],
+            control
+        },
+        phone: {
+            name: `${prefix}phone`,
+            label: formatMessage({
+                defaultMessage: 'Phone Number',
+                id: 'use_profile_fields.label.phone'
+            }),
+            defaultValue: '',
+            type: 'tel',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your phone number.',
+                    id: 'use_profile_fields.error.required_phone'
+                })
+            },
+            error: errors[`${prefix}phone`],
+            inputProps: ({onChange}) => ({
+                inputMode: 'numeric',
+                onChange(evt) {
+                    onChange(formatPhoneNumber(evt.target.value))
+                }
+            }),
+            control
+        }
+    }
+
+    return fields
+}

package/app/components/forms/usePromoCodeFields.jsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {useIntl} from 'react-intl'
+
+export default function usePromoCodeFields({
+    form: {
+        control,
+        formState: {errors}
+    },
+    prefix = ''
+}) {
+    const {formatMessage} = useIntl()
+
+    const fields = {
+        code: {
+            name: `${prefix}code`,
+            label: formatMessage({
+                defaultMessage: 'Promo Code',
+                id: 'use_promo_code_fields.label.promo_code'
+            }),
+            type: 'text',
+            defaultValue: '',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please provide a valid promo code.',
+                    id: 'use_promo_code_fields.error.required_promo_code'
+                })
+            },
+            error: errors[`${prefix}code`],
+            control
+        }
+    }
+
+    return fields
+}

package/app/components/forms/useRegistrationFields.jsx

@@ -0,0 +1,136 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {useIntl} from 'react-intl'
+import {validatePassword} from '@salesforce/retail-react-app/app/utils/password-utils'
+
+export default function useRegistrationFields({
+    form: {
+        control,
+        formState: {errors}
+    },
+    prefix = ''
+}) {
+    const {formatMessage} = useIntl()
+
+    const fields = {
+        firstName: {
+            name: `${prefix}firstName`,
+            label: formatMessage({
+                defaultMessage: 'First Name',
+                id: 'use_registration_fields.label.first_name'
+            }),
+            type: 'text',
+            defaultValue: '',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your first name.',
+                    id: 'use_registration_fields.error.required_first_name'
+                })
+            },
+            error: errors[`${prefix}firstName`],
+            control
+        },
+        lastName: {
+            name: `${prefix}lastName`,
+            label: formatMessage({
+                defaultMessage: 'Last Name',
+                id: 'use_registration_fields.label.last_name'
+            }),
+            type: 'text',
+            defaultValue: '',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your last name.',
+                    id: 'use_registration_fields.error.required_last_name'
+                })
+            },
+            error: errors[`${prefix}lastName`],
+            control
+        },
+        email: {
+            name: `${prefix}email`,
+            label: formatMessage({
+                defaultMessage: 'Email',
+                id: 'use_registration_fields.label.email'
+            }),
+            placeholder: 'you@email.com',
+            type: 'email',
+            defaultValue: '',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter a valid email address.',
+                    id: 'use_registration_fields.error.required_email'
+                })
+            },
+            error: errors[`${prefix}email`],
+            control
+        },
+        password: {
+            name: `${prefix}password`,
+            label: formatMessage({
+                defaultMessage: 'Password',
+                id: 'use_registration_fields.label.password'
+            }),
+            type: 'password',
+            defaultValue: '',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please create a password.',
+                    id: 'use_registration_fields.error.required_password'
+                }),
+                validate: {
+                    hasMinChars: (val) =>
+                        validatePassword(val).hasMinChars ||
+                        formatMessage({
+                            defaultMessage: 'Password must contain at least 8 characters.',
+                            id: 'use_registration_fields.error.minimum_characters'
+                        }),
+                    hasUppercase: (val) =>
+                        validatePassword(val).hasUppercase ||
+                        formatMessage({
+                            defaultMessage: 'Password must contain at least one uppercase letter.',
+                            id: 'use_registration_fields.error.uppercase_letter'
+                        }),
+                    hasLowercase: (val) =>
+                        validatePassword(val).hasLowercase ||
+                        formatMessage({
+                            defaultMessage: 'Password must contain at least one lowercase letter.',
+                            id: 'use_registration_fields.error.lowercase_letter'
+                        }),
+                    hasNumber: (val) =>
+                        validatePassword(val).hasNumber ||
+                        formatMessage({
+                            defaultMessage: 'Password must contain at least one number.',
+                            id: 'use_registration_fields.error.contain_number'
+                        }),
+                    hasSpecialChar: (val) =>
+                        validatePassword(val).hasSpecialChar ||
+                        formatMessage({
+                            defaultMessage: 'Password must contain at least one special character.',
+                            id: 'use_registration_fields.error.special_character'
+                        })
+                }
+            },
+            error: errors[`${prefix}password`],
+            control
+        },
+        acceptsMarketing: {
+            name: `${prefix}acceptsMarketing`,
+            label: formatMessage({
+                defaultMessage:
+                    'Sign me up for Salesforce emails (you can unsubscribe at any time)',
+                id: 'use_registration_fields.label.sign_up_to_emails'
+            }),
+            type: 'checkbox',
+            defaultValue: false,
+            error: errors[`${prefix}acceptsMarketing`],
+            control
+        }
+    }
+
+    return fields
+}