From 3fcce6aab04eca38b18127c88f05e95aef0b1490 Mon Sep 17 00:00:00 2001
From: Rajesh Kumar <glo71317@adobe.com>
Date: Tue, 26 Apr 2022 14:09:09 +0530
Subject: [PATCH 1/2] AC-2792::Common inputs lack autocomplete attributes
 (pattern)

---
 .../ShippingInformation/AddressForm/guestForm.js      | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
index 8ee395f71a..39d5e534ad 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
@@ -145,7 +145,7 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
-                            autoComplete="off"
+                            autoComplete="Shipping email"
                             field="email"
                             id="email"
                             data-cy="GuestForm-email"
@@ -174,6 +174,7 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete="First Name"
                             field="firstname"
                             id="firstname"
                             data-cy="GuestForm-firstName"
@@ -190,6 +191,7 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete="lastName"
                             field="lastname"
                             id="lastname"
                             data-cy="GuestForm-lastName"
@@ -199,6 +201,7 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.country}>
                     <Country
+                        autoComplete="Country"
                         validate={isRequired}
                         data-cy="GuestForm-country"
                     />
@@ -212,6 +215,7 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete="Street Address"
                             field="street[0]"
                             id="street0"
                             data-cy="GuestForm-street0"
@@ -229,6 +233,7 @@ const GuestForm = props => {
                         optional={true}
                     >
                         <TextInput
+                            autoComplete="Street Address 2"
                             field="street[1]"
                             id="street1"
                             data-cy="GuestForm-street1"
@@ -244,6 +249,7 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete="City"
                             field="city"
                             id="city"
                             data-cy="GuestForm-city"
@@ -253,6 +259,7 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.region}>
                     <Region
+                        autoComplete="State"
                         validate={isRequired}
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
@@ -262,6 +269,7 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.postcode}>
                     <Postcode
+                        autoComplete="Post Code"
                         validate={isRequired}
                         data-cy="GuestForm-postcode"
                     />
@@ -275,6 +283,7 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete="Phone Number"
                             field="telephone"
                             id="telephone"
                             data-cy="GuestForm-telephone"

From be66dc457364206443635fa4a9768df42dc7318f Mon Sep 17 00:00:00 2001
From: Rajesh Kumar <glo71317@adobe.com>
Date: Mon, 2 May 2022 17:40:47 +0530
Subject: [PATCH 2/2] AC-AC-2792:Resolve internationalisation all strings
 should be translatable.

---
 .../i18n/fr_FR.json                           |  1 +
 packages/venia-ui/i18n/en_US.json             |  1 +
 .../__snapshots__/guestForm.spec.js.snap      | 44 ++++++++++++++--
 .../AddressForm/guestForm.js                  | 50 +++++++++++++++----
 4 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/packages/extensions/venia-sample-language-packs/i18n/fr_FR.json b/packages/extensions/venia-sample-language-packs/i18n/fr_FR.json
index db5c2a019f..ee3a1c27a4 100644
--- a/packages/extensions/venia-sample-language-packs/i18n/fr_FR.json
+++ b/packages/extensions/venia-sample-language-packs/i18n/fr_FR.json
@@ -352,6 +352,7 @@
     "shippingForm.getShippingOptions": "Obtenez les options d'expédition",
     "shippingForm.loading": "Chargement des méthodes ...",
     "shippingForm.zip": "Code postal",
+    "shippingForm.shippingEmail":"Livraison Courriel",
     "shippingInformation.cardTitle": "Informations sur l'expedition",
     "shippingInformation.editTitle": "1. Informations d'expédition",
     "shippingInformation.loading": "Récupération des informations d'expédition...",
diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index 330e88de57..9f87d0a502 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -401,6 +401,7 @@
     "shippingForm.getShippingOptions": "Get Shipping Options",
     "shippingForm.loading": "Loading Methods...",
     "shippingForm.zip": "ZIP",
+    "shippingForm.shippingEmail":"Shipping Email",
     "shippingInformation.cardTitle": "Shipping Information",
     "shippingInformation.editTitle": "1. Shipping Information",
     "shippingInformation.loading": "Fetching Shipping Information...",
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
index 0b79b977ff..b67883b062 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
@@ -36,7 +36,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -91,6 +91,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -136,6 +137,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -160,6 +162,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -188,6 +191,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -241,6 +245,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -286,6 +291,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -310,6 +316,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -341,6 +348,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -386,6 +394,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"
@@ -477,7 +486,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -532,6 +541,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -577,6 +587,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -601,6 +612,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -629,6 +641,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -682,6 +695,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -727,6 +741,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -751,6 +766,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -782,6 +798,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -827,6 +844,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"
@@ -914,7 +932,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -961,6 +979,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -1006,6 +1025,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -1030,6 +1050,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -1058,6 +1079,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -1111,6 +1133,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -1156,6 +1179,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -1180,6 +1204,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -1211,6 +1236,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -1256,6 +1282,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"
@@ -1369,7 +1396,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -1416,6 +1443,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -1461,6 +1489,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -1485,6 +1514,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -1513,6 +1543,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -1566,6 +1597,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -1611,6 +1643,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -1635,6 +1668,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -1666,6 +1700,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -1711,6 +1746,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
index 39d5e534ad..c2cda920cb 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
@@ -145,7 +145,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
-                            autoComplete="Shipping email"
+                            autoComplete={formatMessage({
+                                id: 'shippingForm.shippingEmail',
+                                defaultMessage: 'Shipping Email'
+                            })}
                             field="email"
                             id="email"
                             data-cy="GuestForm-email"
@@ -174,7 +177,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
-                            autoComplete="First Name"
+                            autoComplete={formatMessage({
+                                id: 'global.firstName',
+                                defaultMessage: 'First Name'
+                            })}
                             field="firstname"
                             id="firstname"
                             data-cy="GuestForm-firstName"
@@ -191,7 +197,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
-                            autoComplete="lastName"
+                            autoComplete={formatMessage({
+                                id: 'global.lastName',
+                                defaultMessage: 'Last Name'
+                            })}
                             field="lastname"
                             id="lastname"
                             data-cy="GuestForm-lastName"
@@ -201,7 +210,10 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.country}>
                     <Country
-                        autoComplete="Country"
+                        autoComplete={formatMessage({
+                            id: 'country.label',
+                            defaultMessage: 'Country'
+                        })}
                         validate={isRequired}
                         data-cy="GuestForm-country"
                     />
@@ -215,7 +227,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
-                            autoComplete="Street Address"
+                            autoComplete={formatMessage({
+                                id: 'global.streetAddress',
+                                defaultMessage: 'Street Address'
+                            })}
                             field="street[0]"
                             id="street0"
                             data-cy="GuestForm-street0"
@@ -233,7 +248,10 @@ const GuestForm = props => {
                         optional={true}
                     >
                         <TextInput
-                            autoComplete="Street Address 2"
+                            autoComplete={formatMessage({
+                                id: 'global.streetAddress2',
+                                defaultMessage: 'Street Address 2'
+                            })}
                             field="street[1]"
                             id="street1"
                             data-cy="GuestForm-street1"
@@ -249,7 +267,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
-                            autoComplete="City"
+                            autoComplete={formatMessage({
+                                id: 'global.city',
+                                defaultMessage: 'City'
+                            })}
                             field="city"
                             id="city"
                             data-cy="GuestForm-city"
@@ -259,7 +280,10 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.region}>
                     <Region
-                        autoComplete="State"
+                        autoComplete={formatMessage({
+                            id: 'region.label',
+                            defaultMessage: 'State'
+                        })}
                         validate={isRequired}
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
@@ -269,7 +293,10 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.postcode}>
                     <Postcode
-                        autoComplete="Post Code"
+                        autoComplete={formatMessage({
+                            id: 'postcode.label',
+                            defaultMessage: 'ZIP / Postal Code'
+                        })}
                         validate={isRequired}
                         data-cy="GuestForm-postcode"
                     />
@@ -283,7 +310,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
-                            autoComplete="Phone Number"
+                            autoComplete={formatMessage({
+                                id: 'global.phoneNumber',
+                                defaultMessage: 'Phone Number'
+                            })}
                             field="telephone"
                             id="telephone"
                             data-cy="GuestForm-telephone"