PWA-1564: [bug]: Guest checkout, France region validation failed

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/__snapshots__/useCreditCard.spec.js.snap

@@ -14,7 +14,7 @@ Object {
     "lastName": "ba ln",
     "phoneNumber": "1234567891",
     "postcode": "78945",
-    "region": "TX",
+    "region": 5,
     "street1": "45678 blvd",
     "street2": "suite 300",
   },

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/useCreditCard.spec.js

@@ -27,7 +27,7 @@ const billingAddress = {
     },
     street: ['45678 blvd', 'suite 300'],
     city: 'Austin',
-    region: { code: 'TX' },
+    region: { code: 'TX', region_id: 5 },
     postcode: '78945',
     phoneNumber: '1234567891'
 };
@@ -446,7 +446,9 @@ describe('Testing payment nonce request workflow', () => {
             street1: 'test value',
             street2: 'test value',
             city: 'test value',
-            region: 'test value',
+            region: {
+                region_id: 20
+            },
             postcode: 'test value',
             phoneNumber: 'test value'
         };
@@ -479,7 +481,8 @@ describe('Testing payment nonce request workflow', () => {
             variables: {
                 ...billingAddress,
                 sameAsShipping: false,
-                cartId: '123'
+                cartId: '123',
+                region: 20
             }
         });
     });
@@ -763,12 +766,31 @@ describe('Testing stepNumber', () => {
     });
 
     test('Should set stepNumber to 1 if shouldSubmit is set to true', () => {
+        const testFormState = {
+            values: {
+                firstName: 'Unit',
+                lastName: 'Test',
+                country: '',
+                street1: '',
+                street2: '',
+                city: '',
+                region: { region_id: 7 },
+                postcode: '12345',
+                phoneNumber: '1234567890'
+            },
+            errors: {}
+        };
+        useFormState
+            .mockReturnValueOnce(testFormState)
+            .mockReturnValueOnce(testFormState);
+
         const { talonProps } = getTalonProps({
             shouldSubmit: true,
             operations,
             onSuccess: () => {},
             onReady: () => {},
-            onError: () => {}
+            onError: () => {},
+            resetShouldSubmit: () => {}
         });
 
         expect(talonProps.stepNumber).toBe(1);

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/creditCard.gql.js

@@ -41,6 +41,8 @@ export const GET_BILLING_ADDRESS = gql`
                 city
                 region {
                     code
+                    label
+                    region_id
                 }
                 postcode
                 phoneNumber: telephone
@@ -63,6 +65,7 @@ export const GET_SHIPPING_ADDRESS = gql`
                 city
                 region {
                     code
+                    region_id
                 }
                 postcode
                 phoneNumber: telephone
@@ -114,6 +117,8 @@ export const SET_BILLING_ADDRESS = gql`
                     city
                     region {
                         code
+                        label
+                        region_id
                     }
                     postcode
                     telephone

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/useCreditCard.js

@@ -36,7 +36,7 @@ export const mapAddressData = rawAddressData => {
             street1: street[0],
             street2: street[1],
             country: country.code,
-            region: region.code
+            region: region.region_id
         };
     } else {
         return {};
@@ -256,7 +256,7 @@ export const useCreditCard = props => {
                 street1,
                 street2,
                 city,
-                region,
+                region: region.region_id,
                 postcode,
                 phoneNumber,
                 sameAsShipping: false

packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/__tests__/__snapshots__/creditCard.spec.js.snap

@@ -131,7 +131,10 @@ exports[`Should return correct shape 1`] = `
             "root": "region",
           }
         }
+        fieldInput="region[label]"
+        fieldSelect="region[region_id]"
         initialValue="sample region"
+        optionValueKey="id"
         validate={[Function]}
       />
       <mock-Postcode

packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.js

@@ -266,6 +266,9 @@ const CreditCard = props => {
                         classes={fieldClasses.region}
                         initialValue={initialValues.region}
                         validate={isFieldRequired}
+                        fieldInput={'region[label]'}
+                        fieldSelect={'region[region_id]'}
+                        optionValueKey={'id'}
                     />
                     <Postcode
                         classes={fieldClasses.postal_code}

packages/venia-ui/lib/components/Region/region.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { func, shape, string } from 'prop-types';
+import { func, number, oneOfType, shape, string } from 'prop-types';
 import { useRegion } from '@magento/peregrine/lib/talons/Region/useRegion';
 
 import { mergeClasses } from '../../classify';
@@ -89,5 +89,5 @@ Region.propTypes = {
     translationId: string,
     optionValueKey: string,
     validate: func,
-    initialValue: string
+    initialValue: oneOfType([number, string])
 };