feat: contact information form

manifest.json

@@ -1,13 +1,15 @@
 {
   "name": "address-form",
   "vendor": "vtex",
-  "version": "3.36.2",
+  "version": "3.36.3-beta.7",
   "title": "address-form React component",
   "description": "address-form React component",
   "defaultLocale": "en",
   "mustUpdateAt": "2019-01-08",
   "categories": [],
-  "registries": ["smartcheckout"],
+  "registries": [
+    "smartcheckout"
+  ],
   "settingsSchema": {},
   "dependencies": {
     "vtex.checkout": "0.x",

messages/context.json

@@ -98,5 +98,6 @@
   "address-form.field.municipalityDelegation": "Municipality/Delegation",
   "address-form.field.province": "Province",
   "address-form.field.receiverName": "Recipient",
-  "address-form.field.county": "County"
+  "address-form.field.county": "County",
+  "address-form.field.contactId": "Contact Id"
 }

messages/en.json

@@ -98,5 +98,6 @@
   "address-form.field.municipalityDelegation": "Municipality/Delegation",
   "address-form.field.province": "Province",
   "address-form.field.receiverName": "Recipient",
-  "address-form.field.county": "County"
+  "address-form.field.county": "County",
+  "address-form.field.contactId": "Contact Id"
 }

messages/es.json

@@ -98,5 +98,6 @@
   "address-form.field.municipalityDelegation": "Municipio/Delegación",
   "address-form.field.province": "Provincia",
   "address-form.field.receiverName": "Destinatario",
-  "address-form.field.county": "Condado"
+  "address-form.field.county": "Condado",
+  "address-form.field.contactId": "Id de Contacto"
 }

react/AddressContainer.js

@@ -12,6 +12,19 @@ import { AddressContext } from './addressContainerContext'
 import { injectRules } from './addressRulesContext'
 
 class AddressContainer extends Component {
+  constructor(props) {
+    super(props)
+    this.contactInfo = {
+      id: null,
+      email: null,
+      firstName: null,
+      lastName: null,
+      document: null,
+      phone: null,
+      documentType: null,
+    }
+  }
+
   componentDidMount() {
     if (
       this.props.shouldHandleAddressChangeOnMount &&
@@ -106,12 +119,34 @@ class AddressContainer extends Component {
     onChangeAddress(validatedAddress, ...args)
   }
 
+  handleContactInfoChange = (field) => {
+    return (this.contactInfo = {
+      ...this.contactInfo,
+      ...field,
+    })
+  }
+
   render() {
-    const { children, Input, address } = this.props
-    const { handleAddressChange } = this
+    const { children, Input, address, handleCompleteOmnishipping } = this.props
+    const { handleAddressChange, handleContactInfoChange, contactInfo } = this
+
+    if (!address?.contactId?.value) {
+      address.contactId = { value: null }
+    } else {
+      address.contactId = { value: address.contactId.value }
+    }
 
     return (
-      <AddressContext.Provider value={{ address, handleAddressChange, Input }}>
+      <AddressContext.Provider
+        value={{
+          address,
+          contactInfo,
+          handleContactInfoChange,
+          handleCompleteOmnishipping,
+          handleAddressChange,
+          Input,
+        }}
+      >
         {children}
       </AddressContext.Provider>
     )
@@ -136,6 +171,8 @@ AddressContainer.propTypes = {
   autoCompletePostalCode: PropTypes.bool,
   shouldHandleAddressChangeOnMount: PropTypes.bool,
   shouldAddFocusToNextInvalidField: PropTypes.bool,
+  contactInfo: PropTypes.object,
+  handleCompleteOmnishipping: PropTypes.func,
 }
 
 export default injectRules(AddressContainer)

react/ContactInfoForm.js

@@ -0,0 +1,236 @@
+import React, { useEffect, useState } from 'react'
+
+import styles from './ContactInfoForm.module.css'
+
+const Input = ({
+  id,
+  label,
+  type = 'text',
+  value = '',
+  name = '',
+  onChange = (_) => {},
+  placeholder = 'Optional',
+  error = '',
+}) => (
+  <p className={`${id} input text ${error && 'error'}`}>
+    <label htmlFor={id}>{label}</label>
+    <input
+      id={id}
+      autoComplete="on"
+      type={type}
+      className={`${error && 'error'} input-large`}
+      placeholder={placeholder ?? ''}
+      value={value ?? ''}
+      name={name ?? id}
+      onChange={(e) => onChange(e)}
+    />
+    {error ? <span className="help error">This field is required.</span> : null}
+  </p>
+)
+
+let gguid = 1
+
+function getGGUID(prefix = 0) {
+  return `${prefix}${(gguid++ * new Date().getTime() * -1)
+    .toString()
+    .replace('-', '')}`
+}
+
+const ContactInfoForm = ({
+  address,
+  onChangeAddress,
+  contactInfo = {},
+  onChangeContactInfo = (_, __) => {},
+  clientProfileData,
+  prevContactInfo,
+}) => {
+  const isPrevUserData = areEqual(prevContactInfo, clientProfileData)
+  const [useUserInfo, setUseUserInfo] = useState(
+    prevContactInfo?.id
+      ? address?.contactId?.value === prevContactInfo?.id && isPrevUserData
+      : true
+  )
+
+  const [localUserInfo, setLocalUserInfo] = useState(
+    prevContactInfo && !isPrevUserData
+      ? prevContactInfo
+      : {
+          email: null,
+          firstName: '',
+          lastName: '',
+          document: null,
+          phone: '',
+          documentType: null,
+        }
+  )
+
+  useEffect(() => {
+    if (address?.contactId?.value) {
+      return
+    }
+
+    address.contactId.value = prevContactInfo?.id ?? getGGUID(1234)
+
+    onChangeContactInfo({ id: address.contactId.value })
+    onChangeAddress(address)
+  }, [address, onChangeAddress, onChangeContactInfo, prevContactInfo])
+
+  useEffect(() => {
+    if (useUserInfo) {
+      onChangeContactInfo({
+        id: address?.contactId?.value ?? '',
+        email: '',
+        firstName: clientProfileData?.firstName ?? '',
+        lastName: clientProfileData?.lastName ?? '',
+        document: '',
+        phone: clientProfileData?.phone ?? '',
+        documentType: '',
+      })
+    } else {
+      onChangeContactInfo(localUserInfo)
+    }
+
+    onChangeAddress(address)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    useUserInfo,
+    localUserInfo,
+    onChangeContactInfo,
+    clientProfileData,
+    onChangeAddress,
+  ])
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+
+    setLocalUserInfo((prev) => ({ ...prev, [name]: value }))
+  }
+
+  return (
+    <div className={styles.mainContactInfoContainer}>
+      <label className={styles.contactInfoCheckbox}>
+        <input
+          type="checkbox"
+          checked={useUserInfo}
+          onChange={() => setUseUserInfo((prev) => !prev)}
+        />
+        Receiver Information same as contact Information
+      </label>
+      {!useUserInfo ? (
+        <div className={styles.mainContactInfoForm}>
+          <h4 className={styles.contactInfoTitle}>Receiver Information</h4>
+          <div>
+            <div className={styles.contactInfoFlex}>
+              <Input
+                id="custom-contact-information-first-name"
+                label="Receiver first name *"
+                name="firstName"
+                onChange={handleInputChange}
+                value={localUserInfo.firstName ?? ''}
+                placeholder="Required"
+                error={contactInfo?.error?.firstName}
+              />
+              <Input
+                id="custom-contact-information-last-name"
+                label="Receiver last name *"
+                name="lastName"
+                onChange={handleInputChange}
+                value={localUserInfo.lastName ?? ''}
+                placeholder="Required"
+                error={contactInfo?.error?.lastName}
+              />
+            </div>
+            <Input
+              id="custom-contact-information-phone"
+              label="Receiver phone *"
+              type="tel"
+              name="phone"
+              onChange={handleInputChange}
+              value={localUserInfo.phone ?? ''}
+              placeholder="Required"
+              error={contactInfo?.error?.phone}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+const areEqual = (obj1, obj2) => {
+  if (obj1 === obj2) {
+    return true
+  }
+
+  if (!obj1 || !obj2) {
+    return false
+  }
+
+  for (const key in obj1) {
+    if (key !== 'id' && key !== 'error') {
+      if (obj1[key] && obj1[key] !== obj2[key]) {
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+export const isContactInfoFormValid = (contactInfo, onChangeContactInfo) => {
+  const { firstName, lastName, phone } = contactInfo
+
+  if (firstName) {
+    if (lastName) {
+      if (phone) {
+        return true
+      }
+
+      onChangeContactInfo({
+        error: { phone: 'Required' },
+      })
+
+      return false
+    }
+
+    onChangeContactInfo({
+      error: { lastName: 'Required' },
+    })
+
+    return false
+  }
+
+  onChangeContactInfo({
+    error: { firstName: 'Required' },
+  })
+
+  return false
+}
+
+export const getPreviousContactInfo = (state) => {
+  const { orderForm: OFState, addressForm } = state
+  const browseOF = vtexjs?.checkout?.orderForm
+
+  const orderForm = browseOF ?? OFState?.orderForm
+
+  let contactId =
+    orderForm?.shippingData?.contactInformation?.find(
+      ({ id }) =>
+        addressForm?.addresses?.[addressForm?.residentialId]?.contactId
+          ?.value === id
+    ) ?? null
+
+  if (!contactId) {
+    contactId =
+      orderForm?.shippingData?.contactInformation?.find(
+        ({ id }) =>
+          orderForm?.shippingData?.availableAddresses?.find(
+            ({ addressId }) => addressId === addressForm?.residentialId
+          )?.contactId === id
+      ) ?? null
+  }
+
+  return contactId
+}
+
+export default ContactInfoForm

react/ContactInfoForm.module.css

@@ -0,0 +1,48 @@
+.mainContactInfoContainer {
+}
+.mainContactInfoForm {
+}
+
+.contactInfoCheckbox input {
+  margin: 0;
+  margin-right: 6px;
+  width: 16px;
+  height: 16px;
+}
+
+.contactInfoCheckbox {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  margin-top: 16px;
+  margin-bottom: 12px;
+}
+
+.contactInfoTitle {
+  font-size: 18px !important;
+  font-weight: 500 !important;
+}
+
+.contactInfoFlex {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.contactInfoFlex .input {
+  width: 100%;
+}
+
+.mainContactInfoForm :global(.input) {
+  padding-bottom: 15px;
+}
+
+.mainContactInfoForm :global(.input):global(.error) {
+  padding-bottom: 0;
+}
+
+@media (max-width: 768px) {
+  .contactInfoFlex {
+    flex-wrap: wrap;
+  }
+}