Fix displaying ountry are as readable name (#2910)

* Fix displaying country area

* Fix displaying country area

* Remove local code

src/components/AddressEdit/AddressEdit.tsx

@@ -77,7 +77,9 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
   } = props;
   const classes = useStyles(props);
   const intl = useIntl();
-  const { areas, isFieldAllowed } = useAddressValidation(data.country);
+  const { areas, isFieldAllowed, getDisplayValue } = useAddressValidation(
+    data.country,
+  );
 
   const formErrors = getFormErrors<
     keyof AddressTypeInput,
@@ -269,7 +271,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
               disabled={disabled}
               autocomplete="new-password"
               data-test-id="address-edit-country-area-field"
-              displayValue={data.countryArea}
+              displayValue={getDisplayValue(data.countryArea)}
               error={!!formErrors.countryArea}
               helperText={getErrorMessage(formErrors.countryArea, intl)}
               label={intl.formatMessage({

src/components/AddressEdit/useAddressValidation.test.ts

@@ -51,8 +51,8 @@ describe("useAddressValidation", () => {
 
     // Assert
     expect(current.areas).toEqual([
-      { label: "Alabama", value: "Alabama" },
-      { label: "Ancona", value: "Ancona" },
+      { label: "Alabama", value: "Alabama", raw: "AL" },
+      { label: "Ancona", value: "Ancona", raw: "AN" },
     ]);
     expect(current.loading).toBeFalsy();
     expect(useAddressValidationRulesQuery).toBeCalledWith({

src/components/AddressEdit/useAddressValidation.ts

@@ -5,10 +5,17 @@ import {
 } from "@saleor/graphql";
 import { ChoiceValue } from "@saleor/sdk/dist/apollo/types";
 
-const prepareChoices = (values: ChoiceValue[]) =>
+interface AreaChoices {
+  label: string;
+  value: string;
+  raw: string;
+}
+
+const prepareChoices = (values: ChoiceValue[]): AreaChoices[] =>
   values.map(v => ({
     label: v.verbose,
     value: v.verbose,
+    raw: v.raw,
   }));
 
 const selectRules = (data: AddressValidationRulesQuery) =>
@@ -45,14 +52,33 @@ const useAllowedFields = (data: AddressValidationRulesQuery) => {
   return { isAllowed };
 };
 
+const useDisplayValues = (areas: AreaChoices[]) => {
+  const isProvinceCode = (code: string) =>
+    code.length === 2 && code.toLocaleUpperCase() === code;
+
+  const getDisplayValue = (value: string) => {
+    if (isProvinceCode(value)) {
+      const area = areas.find(area => area.raw === value);
+
+      return area.value;
+    }
+
+    return value;
+  };
+
+  return { getDisplayValue };
+};
+
 export const useAddressValidation = (country?: string) => {
   const { data, loading } = useValidationRules(country);
   const areas = useAreas(data);
   const { isAllowed } = useAllowedFields(data);
+  const { getDisplayValue } = useDisplayValues(areas);
 
   return {
     areas,
     isFieldAllowed: isAllowed,
+    getDisplayValue,
     loading,
   };
 };

src/components/CompanyAddressInput/CompanyAddressForm.tsx

@@ -64,7 +64,9 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
     onChange,
     onCountryChange,
   } = props;
-  const { areas, isFieldAllowed } = useAddressValidation(data.country);
+  const { areas, isFieldAllowed, getDisplayValue } = useAddressValidation(
+    data.country,
+  );
   const classes = useStyles(props);
   const intl = useIntl();
 
@@ -200,7 +202,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
             disabled={disabled}
             autocomplete="new-password"
             data-test-id="address-edit-country-area-field"
-            displayValue={data.countryArea}
+            displayValue={getDisplayValue(data.countryArea)}
             error={!!formErrors.countryArea}
             helperText={getErrorMessage(formErrors.countryArea, intl)}
             label={intl.formatMessage({

src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx

@@ -87,7 +87,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
   const navigate = useNavigator();
 
   const [displayCountry, setDisplayCountry] = useStateFromProps(
-    shop?.companyAddress?.country.code || "",
+    shop?.companyAddress?.country.country || "",
   );
 
   const {