fix: move promo code input below subtotal (#9)

commercelayer · Jun 15, 2022 · 41f44ad · 41f44ad
1 parent a3d25ca
commit 41f44ad
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 52 deletions.
diff --git a/components/Cart/CouponOrGiftCard/CodeForm.tsx b/components/Cart/CouponOrGiftCard/CodeForm.tsx
@@ -14,7 +14,7 @@ export const CodeForm: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="mb-4">
+    <div>
       <GiftCardOrCouponForm
         onSubmit={({ success }) => {
           setCouponError(!success)
@@ -81,6 +81,7 @@ export const CodeForm: FC = () => {
           },
         ]}
       />
+      <div className={cn({ "pb-4": showInput })} />
     </div>
   )
 }
diff --git a/components/Cart/Totals/index.tsx b/components/Cart/Totals/index.tsx
@@ -20,61 +20,61 @@ export const Totals: FC<Props> = ({ className }) => {
 
   return (
     <div className={className}>
-      <div className="md:bg-gray-50 pb-8 md:py-10 md:px-7 rounded-md w-full">
-        <div className="mb-8">
+      <div className="md:bg-gray-50 pb-5 md:py-10 md:px-7 rounded-md w-full">
+        <div className="text-black mb-6 flex justify-between">
+          <div className="text-gray-500" data-test-id="label-subtotal">
+            {t("general.subtotal")}
+          </div>
+          <SubTotalAmount>
+            {({ priceCents, price }) => (
+              <div
+                data-amount={priceCents}
+                data-test-id="subtotal-amount"
+                className="font-semibold"
+              >
+                {price}
+              </div>
+            )}
+          </SubTotalAmount>
+        </div>
+        <div className="border-t border-t-gray-100 border-b border-b-gray-400 py-6 mb-6">
           <CouponOrGiftCard />
         </div>
-        <div className="border-t border-t-gray-100 border-b border-b-gray-400 py-6">
-          <div className="text-black mb-2 flex justify-between">
-            <div className="text-gray-500" data-test-id="label-subtotal">
-              {t("general.subtotal")}
-            </div>
-            <SubTotalAmount>
-              {({ priceCents, price }) => (
+
+        <DiscountAmount>
+          {({ priceCents, price }) =>
+            priceCents ? (
+              <div className="text-black mb-2 flex justify-between">
+                <div className="text-gray-500">{t("general.discount")}</div>
                 <div
-                  data-amount={priceCents}
-                  data-test-id="subtotal-amount"
                   className="font-semibold"
+                  data-test-id="discount-amount"
+                  data-amount={priceCents}
                 >
                   {price}
                 </div>
-              )}
-            </SubTotalAmount>
-          </div>
-          <DiscountAmount>
-            {({ priceCents, price }) =>
-              priceCents ? (
-                <div className="text-black mb-2 flex justify-between">
-                  <div className="text-gray-500">{t("general.discount")}</div>
-                  <div
-                    className="font-semibold"
-                    data-test-id="discount-amount"
-                    data-amount={priceCents}
-                  >
-                    {price}
-                  </div>
-                </div>
-              ) : null
-            }
-          </DiscountAmount>
-          <GiftCardAmount>
-            {({ priceCents, price }) =>
-              priceCents ? (
-                <div className="text-black mb-2 flex justify-between">
-                  <div className="text-gray-500">{t("general.giftCard")}</div>
-                  <div
-                    className="font-semibold"
-                    data-test-id="gift-card-amount"
-                    data-amount={priceCents}
-                  >
-                    {price}
-                  </div>
+              </div>
+            ) : null
+          }
+        </DiscountAmount>
+        <GiftCardAmount>
+          {({ priceCents, price }) =>
+            priceCents ? (
+              <div className="text-black mb-2 flex justify-between">
+                <div className="text-gray-500">{t("general.giftCard")}</div>
+                <div
+                  className="font-semibold"
+                  data-test-id="gift-card-amount"
+                  data-amount={priceCents}
+                >
+                  {price}
                 </div>
-              ) : null
-            }
-          </GiftCardAmount>
-        </div>
-        <div className="text-black py-8 flex justify-between items-center border-b border-b-gray-100 border-dashed">
+              </div>
+            ) : null
+          }
+        </GiftCardAmount>
+
+        <div className="text-black pt-2 pb-8 flex justify-between items-center border-b border-b-gray-100 border-dashed">
           <div data-test-id="label-total">{t("general.total")}</div>
           <TotalAmount>
             {({ priceCents, price }) => (

diff --git a/components/Skeleton/index.tsx b/components/Skeleton/index.tsx
@@ -24,14 +24,16 @@ export const Skeleton: FC = () => {
           <div className="bg-gray-50 pb-8 md:py-10 md:px-7 rounded-md w-full h-[400px]">
             <div className="animate-pulse">
               <div className="py-1 mb-8">
-                <SkeletonItem className="h-5 w-20" />
-              </div>
-              <div className="border-t border-t-gray-100 border-b border-b-gray-400">
-                <div className="text-black py-8 flex justify-between">
+                <div className="flex justify-between">
                   <SkeletonItem className="w-20 h-6" />
                   <SkeletonItem className="w-20 h-6" />
                 </div>
               </div>
+              <div className="border-t border-t-gray-100 border-b border-b-gray-400">
+                <div className="text-black py-8">
+                  <SkeletonItem className="h-5 w-20" />
+                </div>
+              </div>
 
               <div className="text-black py-8 flex justify-between">
                 <SkeletonItem className="w-20 h-6" />