[dev]: Refactor Checkout (#1309)

* Refactor addressForm: * fix unit tests * fix bug in checkout reducer where street address was not saved * Refactor checkoutButton and cart components. * Had to modify miniCart for new checkoutButton props * Updated unit tests * Refactor Label component and update one implementation to use id referenced by htmlFor * Remove unused resetButton component * Refactor section component * Remove submitButton component * Refactor wrapper/container * Refactor shippingForm * Refactor paymentsForm and fix but in billing address reducer * Refactor Flow to function component * Refactor Form to function component * Refactor braintreedropin component * Remove unused type value from submit actions * Refactor flow container to just connect and assign props. * Add jsdoc * Update packages/venia-concept/src/components/Checkout/flow.js Co-Authored-By: Andy Terranova <[email protected]> * First pass at feedback. * Break form into separate files * fix hook in dropin * alphabetize props * fix footer from merge * Remove unnecessary useCallback * Remove another unnecessary useCallback * Update verbage to invalid/valid vs incorrect/correct * Refactor payments form items into separate component
magento · Jun 27, 2019 · c3228b4 · c3228b4 · vercel · Jun 27, 2019
1 parent 58184db
commit c3228b4
Show file tree

Hide file tree

Showing 46 changed files with 2,163 additions and 1,828 deletions.
diff --git a/packages/venia-concept/src/actions/checkout/asyncActions.js b/packages/venia-concept/src/actions/checkout/asyncActions.js
@@ -153,7 +153,7 @@ export const submitShippingAddress = payload =>
         } catch (error) {
             dispatch(
                 actions.shippingAddress.reject({
-                    incorrectAddressMessage: error.message
+                    invalidAddressMessage: error.message
                 })
             );
             return null;

diff --git a/...es/venia-concept/src/components/Checkout/__tests__/__snapshots__/addressForm.spec.js.snap b/...es/venia-concept/src/components/Checkout/__tests__/__snapshots__/addressForm.spec.js.snap
@@ -375,7 +375,7 @@ exports[`does not renders validation block with message if address is incorrect
   >
     <button
       className="button"
-      onClick={[Function]}
+      onClick={[MockFunction]}
       type="button"
     >
       <span
@@ -773,7 +773,7 @@ exports[`renders an AddressForm component 1`] = `
   >
     <button
       className="button"
-      onClick={[Function]}
+      onClick={[MockFunction]}
       type="button"
     >
       <span
@@ -1173,7 +1173,7 @@ exports[`renders validation block with message if address is incorrect 1`] = `
   >
     <button
       className="button"
-      onClick={[Function]}
+      onClick={[MockFunction]}
       type="button"
     >
       <span

diff --git a/packages/venia-concept/src/components/Checkout/__tests__/__snapshots__/cart.spec.js.snap b/packages/venia-concept/src/components/Checkout/__tests__/__snapshots__/cart.spec.js.snap
@@ -6,6 +6,48 @@ exports[`renders a Cart component 1`] = `
 >
   <div
     className="footer"
-  />
+  >
+    <button
+      className="root_highPriority"
+      disabled={false}
+      onClick={[MockFunction]}
+      type="button"
+    >
+      <span
+        className="content"
+      >
+        <span
+          className="root"
+        >
+          <svg
+            fill="none"
+            height={16}
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              height="11"
+              rx="2"
+              ry="2"
+              width="18"
+              x="3"
+              y="11"
+            />
+            <path
+              d="M7 11V7a5 5 0 0 1 10 0v4"
+            />
+          </svg>
+        </span>
+        <span>
+          Checkout
+        </span>
+      </span>
+    </button>
+  </div>
 </div>
 `;
diff --git a/...venia-concept/src/components/Checkout/__tests__/__snapshots__/checkoutButton.spec.js.snap b/...venia-concept/src/components/Checkout/__tests__/__snapshots__/checkoutButton.spec.js.snap
@@ -1,6 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a Checkout Button component 1`] = `
+<button
+  type="button"
+>
+  <span>
+    <span>
+      <svg
+        fill="none"
+        height={16}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={16}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="11"
+          rx="2"
+          ry="2"
+          width="18"
+          x="3"
+          y="11"
+        />
+        <path
+          d="M7 11V7a5 5 0 0 1 10 0v4"
+        />
+      </svg>
+    </span>
+    <span>
+      Checkout
+    </span>
+  </span>
+</button>
+`;
+
+exports[`renders a disabled Checkout Button component 1`] = `
 <button
   disabled={true}
   type="button"