[dev]: Refactor Checkout

packages/venia-concept/src/components/Checkout/addressForm.js

@@ -48,7 +48,7 @@ const AddressForm = props => {
                 acc[key] = initialValues[key];
                 return acc;
             }, {}),
-        [fields, initialValues]
+        [initialValues]
     );
 
     const handleCancel = useCallback(() => {
@@ -174,12 +174,13 @@ AddressForm.propTypes = {
         email: string,
         firstname: string,
         footer: string,
+        heading: string,
         lastname: string,
         postcode: string,
+        root: string,
         region_code: string,
         street0: string,
         telephone: string,
-        textInput: string,
         validation: string
     }),
     countries: array,

packages/venia-concept/src/components/Checkout/editableForm.js

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+import { array, bool, func, object, oneOf, shape, string } from 'prop-types';
+
+import AddressForm from './addressForm';
+import PaymentsForm from './paymentsForm';
+import ShippingForm from './shippingForm';
+
+/**
+ * The EditableForm component renders the actual edit forms for the sections
+ * within the form.
+ */
+const EditableForm = props => {
+    const {
+        editing,
+        editOrder,
+        submitShippingAddress,
+        submitShippingMethod,
+        submitPaymentMethodAndBillingAddress,
+        submitting,
+        isAddressIncorrect,
+        incorrectAddressMessage,
+        directory: { countries }
+    } = props;
+
+    const handleCancel = useCallback(() => {
+        editOrder(null);
+    }, [editOrder]);
+
+    const handleSubmitAddressForm = useCallback(
+        formValues => {
+            submitShippingAddress({
+                formValues
+            });
+        },
+        [submitShippingAddress]
+    );
+
+    const handleSubmitPaymentsForm = useCallback(
+        formValues => {
+            submitPaymentMethodAndBillingAddress({
+                formValues
+            });
+        },
+        [submitPaymentMethodAndBillingAddress]
+    );
+
+    const handleSubmitShippingForm = useCallback(
+        formValues => {
+            submitShippingMethod({
+                formValues
+            });
+        },
+        [submitShippingMethod]
+    );
+
+    switch (editing) {
+        case 'address': {
+            const { shippingAddress } = props;
+
+            return (
+                <AddressForm
+                    cancel={handleCancel}
+                    countries={countries}
+                    isAddressIncorrect={isAddressIncorrect}
+                    incorrectAddressMessage={incorrectAddressMessage}
+                    initialValues={shippingAddress}
+                    submit={handleSubmitAddressForm}
+                    submitting={submitting}
+                />
+            );
+        }
+        case 'paymentMethod': {
+            const { billingAddress } = props;
+
+            return (
+                <PaymentsForm
+                    cancel={handleCancel}
+                    countries={countries}
+                    initialValues={billingAddress}
+                    submit={handleSubmitPaymentsForm}
+                    submitting={submitting}
+                />
+            );
+        }
+        case 'shippingMethod': {
+            const { availableShippingMethods, shippingMethod } = props;
+            return (
+                <ShippingForm
+                    availableShippingMethods={availableShippingMethods}
+                    cancel={handleCancel}
+                    shippingMethod={shippingMethod}
+                    submit={handleSubmitShippingForm}
+                    submitting={submitting}
+                />
+            );
+        }
+        default: {
+            return null;
+        }
+    }
+};
+
+EditableForm.propTypes = {
+    availableShippingMethods: array,
+    editing: oneOf(['address', 'paymentMethod', 'shippingMethod']),
+    editOrder: func.isRequired,
+    shippingAddress: object,
+    shippingMethod: string,
+    submitShippingAddress: func.isRequired,
+    submitShippingMethod: func.isRequired,
+    submitPaymentMethodAndBillingAddress: func.isRequired,
+    submitting: bool,
+    isAddressIncorrect: bool,
+    incorrectAddressMessage: string,
+    directory: shape({
+        countries: array
+    })
+};
+
+export default EditableForm;