fix: Add Canada vs International Labels for Address Complete

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/components/PanelBody.tsx

@@ -162,10 +162,16 @@ export const PanelBody = ({
                     {t("addElementDialog.addressComplete.city")}
                   </div>
                   <div className="description-text mt-5 cursor-not-allowed rounded-sm p-2 bg-gray-100 text-slate-600">
-                    {t("addElementDialog.addressComplete.province")}
+                    {item.properties.addressComponents?.canadianOnly &&
+                      t("addElementDialog.addressComplete.components.province")}
+                    {!item.properties.addressComponents?.canadianOnly &&
+                      t("addElementDialog.addressComplete.components.provinceOrState")}
                   </div>
                   <div className="description-text mt-5 cursor-not-allowed rounded-sm p-2 bg-gray-100 text-slate-600">
-                    {t("addElementDialog.addressComplete.postal")}
+                    {item.properties.addressComponents?.canadianOnly &&
+                      t("addElementDialog.addressComplete.components.postalCode")}
+                    {!item.properties.addressComponents?.canadianOnly &&
+                      t("addElementDialog.addressComplete.components.postalCodeOrZip")}
                   </div>
                 </div>
                 <div className="mb-4 mt-4 ml-4 self-end w-1/2">

components/clientComponents/forms/AddressComplete/AddressComplete.tsx

@@ -322,7 +322,9 @@ export const AddressComplete = (props: AddressCompleteProps): React.ReactElement
 
         <div className="mb-6">
           <Label htmlFor={`${name}-province`} className="gc-label">
-            {t("addElementDialog.addressComplete.province")}
+            {props.canadianOnly && t("addElementDialog.addressComplete.components.province")}
+            {!props.canadianOnly &&
+              t("addElementDialog.addressComplete.components.provinceOrState")}
           </Label>
           <input
             type="text"
@@ -338,7 +340,9 @@ export const AddressComplete = (props: AddressCompleteProps): React.ReactElement
 
         <div className="mb-6">
           <Label htmlFor={`${name}-postal`} className="gc-label">
-            {t("addElementDialog.addressComplete.postal")}
+            {props.canadianOnly && t("addElementDialog.addressComplete.components.postalCode")}
+            {!props.canadianOnly &&
+              t("addElementDialog.addressComplete.components.postalCodeOrZip")}
           </Label>
           <input
             id={`${name}-postal`}

components/clientComponents/forms/AddressComplete/types.ts

@@ -71,3 +71,14 @@ export interface AddressElements {
   postalCode: string;
   country: string;
 }
+
+// AddressComplete String Labels {
+export interface AddressCompleteLabels {
+  streetAddress: string;
+  city: string;
+  province: string;
+  postalCode: string;
+  provinceOrState: string;
+  postalCodeOrZip: string;
+  country: string;
+}

components/clientComponents/forms/Review/Review.tsx

@@ -17,7 +17,7 @@ import {
 import { randomId } from "@lib/client/clientHelpers";
 import { DateFormat, DateObject } from "../FormattedDate/types";
 import { getFormattedDateFromObject } from "../FormattedDate/utils";
-import { AddressElements } from "../AddressComplete/types";
+import { AddressElements, AddressCompleteLabels } from "../AddressComplete/types";
 import { getAddressAsReviewElements, getAddressAsString } from "../AddressComplete/utils";
 
 type ReviewItem = {
@@ -33,7 +33,7 @@ type ReviewElement = {
   element: FormElement | undefined;
 };
 
-const addressCompleteStrings = {} as AddressElements;
+const addressCompleteStrings = {} as AddressCompleteLabels;
 
 function formatElementValues(element: ReviewElement) {
   if (!element.values) {
@@ -141,12 +141,21 @@ function getReviewItemElements(
 
         const addressFormValue = formValues[elementId] as string;
         const addressValues = JSON.parse(addressFormValue) as AddressElements;
+        const canadaOnly = element.properties?.addressComponents?.canadianOnly;
 
         const titleSet = {
           streetAddress: parentTitle + " - " + addressCompleteStrings.streetAddress,
           city: parentTitle + " - " + addressCompleteStrings.city,
-          province: parentTitle + " - " + addressCompleteStrings.province,
-          postalCode: parentTitle + " - " + addressCompleteStrings.postalCode,
+          province:
+            parentTitle +
+            " - " +
+            (canadaOnly ? addressCompleteStrings.province : addressCompleteStrings.provinceOrState),
+          postalCode:
+            parentTitle +
+            " - " +
+            (canadaOnly
+              ? addressCompleteStrings.postalCode
+              : addressCompleteStrings.postalCodeOrZip),
           country: parentTitle + " - " + addressCompleteStrings.country,
         } as AddressElements;
 
@@ -188,6 +197,12 @@ export const Review = ({ language }: { language: Language }): React.ReactElement
   addressCompleteStrings.city = t("addressComponents.city", { lng: language });
   addressCompleteStrings.province = t("addressComponents.province", { lng: language });
   addressCompleteStrings.postalCode = t("addressComponents.postalCode", { lng: language });
+  addressCompleteStrings.provinceOrState = t("addressComponents.provinceOrState", {
+    lng: language,
+  });
+  addressCompleteStrings.postalCodeOrZip = t("addressComponents.postalCodeOrZip", {
+    lng: language,
+  });
   addressCompleteStrings.country = t("addressComponents.country", { lng: language });
   //This is done here, as useTranslation is inacessible inside useMemo.
 

i18n/translations/en/form-builder.json

@@ -72,10 +72,11 @@
       "components": {
         "unitNumber": "Unit number",
         "civicNumber": "Civic number",
-        "streetName": "Street name",
-        "city": "City or town",
-        "province": "Province, territory, or state",
-        "postalCode": "Postal or zip code",
+        "city": "City, town, or community",
+        "province": "Province or territory",
+        "provinceOrState": "Province, territory, or state",
+        "postalCode": "Postal code",
+        "postalCodeOrZip": "Postal or zip code",
         "country": "Country"
       }
     },

i18n/translations/en/review.json

@@ -10,8 +10,10 @@
     "civicNumber": "Civic number",
     "streetName": "Street name",
     "city": "City or town",
-    "province": "Province, territory, or state",
-    "postalCode": "Postal or zip code",
+    "province": "Province or territory",
+    "postalCode": "Postal code",
+    "provinceOrState": "Province, territory, or state",
+    "postalCodeOrZip": "Postal or zip code",
     "country": "Country"
   }
 }

i18n/translations/fr/form-builder.json

@@ -72,10 +72,11 @@
       "components": {
         "unitNumber": "Numéro de l’unité",
         "civicNumber": "Numéro civique",
-        "streetName": "Nom de la rue",
         "city": "Ville ou communauté",
-        "province": "Province, territoire ou état",
-        "postalCode": "Code postal ou zip",
+        "province": "Province ou territoire",
+        "provinceOrState": "Province, territoire ou état",
+        "postalCode": "Code postal",
+        "postalCodeOrZip": "Code postal ou zip",
         "country": "Pays"
       }
     },

i18n/translations/fr/review.json

@@ -10,8 +10,10 @@
     "civicNumber": "Numéro civique",
     "streetName": "Nom de la rue",
     "city": "Ville ou communauté",
-    "province": "Province, territoire ou état",
-    "postalCode": "Code postal ou zip",
+    "province": "Province ou territoire",
+    "postalCode": "Code postal",
+    "provinceOrState": "Province, territoire ou état",
+    "postalCodeOrZip": "Code postal ou zip",
     "country": "Pays"
   }
 }