From 2f2e1752335e731b7507588886862d503e15dcf4 Mon Sep 17 00:00:00 2001
From: minkyngkm <min.kim@canonical.com>
Date: Mon, 20 May 2024 09:01:13 +0100
Subject: [PATCH] Add distributor shop summary

---
 .../advantage/distributor/DistributorShop.tsx | 64 ++++++++++++-----
 .../DistributorShopForm.tsx                   |  3 -
 .../DistributorShopSummary.tsx                | 68 +++++++++++++++++++
 .../DistributorShopSummary/index.ts           |  1 +
 .../PaymentButton/PaymentButton.tsx           | 17 +++++
 .../PaymentButton/index.ts                    |  1 +
 .../distributor/utils/FormContext.tsx         |  1 -
 7 files changed, 134 insertions(+), 21 deletions(-)
 create mode 100644 static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopSummary/DistributorShopSummary.tsx
 create mode 100644 static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopSummary/index.ts
 create mode 100644 static/js/src/advantage/distributor/components/DistributorShopForm/PaymentButton/PaymentButton.tsx
 create mode 100644 static/js/src/advantage/distributor/components/DistributorShopForm/PaymentButton/index.ts

diff --git a/static/js/src/advantage/distributor/DistributorShop.tsx b/static/js/src/advantage/distributor/DistributorShop.tsx
index 3ed3942506a..aa0eb2d1cce 100644
--- a/static/js/src/advantage/distributor/DistributorShop.tsx
+++ b/static/js/src/advantage/distributor/DistributorShop.tsx
@@ -1,28 +1,58 @@
 import React from "react";
-import { Strip } from "@canonical/react-components";
 import DistributorShopForm from "./components/DistributorShopForm/DistributorShopForm";
 import { Offer as OfferType } from "../offers/types";
+import DistributorShopSummary from "./components/DistributorShopForm/DistributorShopSummary/DistributorShopSummary";
 
 const DistributorShop = () => {
-  const channelOfferData = localStorage.getItem("channel-offer-data") || "";
-  const parsedChannelOfferData = JSON.parse(channelOfferData);
-  const offer = parsedChannelOfferData?.offer;
-
-  if (!parsedChannelOfferData || !offer) {
-    return (
-      <Strip className="u-no-padding--top">
-        <h1>Somethinig is wrong.</h1>
-        <p className="p-heading--4">
-          Initiate order again at <a href="/pro/distributor">this page</a>.
-        </p>
-      </Strip>
-    );
-  }
+  // const channelOfferData = localStorage.getItem("channel-offer-data") || "";
+  // const parsedChannelOfferData = JSON.parse(channelOfferData);
+  // const offer = parsedChannelOfferData?.offer;
+  // if (!parsedChannelOfferData || !offer) {
+  //   return (
+  //     <Strip className="u-no-padding--top">
+  //       <h1>Somethinig is wrong.</h1>
+  //       <p className="p-heading--4">
+  //         Initiate order again at <a href="/pro/distributor">this page</a>.
+  //       </p>
+  //     </Strip>
+  //   );
+  // }
+  const offer = {
+    account_id: "aAIL8S9pbKfjiMl1_COENPU6ihwqQZzOxvyYdgnxHWYI",
+    actionable: true,
+    activation_account_id: "aACel74nW_2C8T6Db2wdRACFlUN-PZiYxcgx9hJ0EnKo",
+    can_change_items: true,
+    created_at: "2024-04-22T17:44:36Z",
+    discount: 10,
+    distributor_account_name: "Distributor, Ltd.",
+    end_user_account_name: "End Users, Ltd.",
+    external_ids: [
+      {
+        ids: ["zift-id-invalid"],
+        origin: "Zift",
+      },
+    ],
+    id: "oAPEY-cDXT1pr8r2_FBi1MX9bvJkPgfbyH9DeezYYGAw",
+    is_channel_offer: true,
+    items: [
+      {
+        allowance: 2,
+        id: "lAIeXbXxG9D_nA5v5C5DQeisJ4E2DkLrmxtjXzvCU2nE",
+        name: "uai-advanced-desktop-channel-two-year-usd",
+        price: 60000,
+      },
+    ],
+    marketplace: "canonical-pro-channel",
+    reseller_account_name: "Resellers, Inc.",
+    technical_contact: "contact@example.com",
+    total: 60000,
+  };
 
   return (
-    <Strip className="u-no-padding--top" style={{ overflow: "unset" }}>
+    <>
       <DistributorShopForm offer={offer as OfferType} />
-    </Strip>
+      <DistributorShopSummary offer={offer as OfferType} />
+    </>
   );
 };
 
diff --git a/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopForm.tsx b/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopForm.tsx
index 9cc5c79acdc..f88c5b7f1c2 100644
--- a/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopForm.tsx
+++ b/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopForm.tsx
@@ -76,9 +76,6 @@ const DistributorShopForm = ({ offer }: Prop) => {
           </Col>
         </Row>
       </Strip>
-      <Row>
-        <hr />
-      </Row>
     </form>
   );
 };
diff --git a/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopSummary/DistributorShopSummary.tsx b/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopSummary/DistributorShopSummary.tsx
new file mode 100644
index 00000000000..c295bdc05b7
--- /dev/null
+++ b/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopSummary/DistributorShopSummary.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { Chip, Col, Row } from "@canonical/react-components";
+import { Offer as OfferType } from "../../../../offers/types";
+import { currencyFormatter } from "advantage/react/utils";
+import PaymentButton from "../PaymentButton";
+type Prop = {
+  offer: OfferType;
+};
+
+const DistributorShopSummary = ({ offer }: Prop) => {
+  const { total, discount } = offer;
+
+  return (
+    <>
+      <section
+        className="p-strip--light is-shallow p-shop-cart u-hide--small u-hide--medium"
+        id="summary-section"
+        data-testid="summary-section"
+      >
+        <Row className="u-sv3">
+          <Col size={4}>
+            <h5>Total before discount</h5>
+          </Col>
+          <Col size={6}>
+            <h5>Discounts</h5>
+          </Col>
+          <Col size={2} className="u-align--right">
+            <h5>Total per year</h5>
+          </Col>
+          <hr />
+          <Col size={4}>
+            <p className="p-heading--2" data-testid="summary-product-name">
+              {currencyFormatter.format((total ?? 0) / 100)}
+            </p>
+          </Col>
+          <Col size={6}>
+            <Chip
+              value={`${discount}% discount applied`}
+              appearance="information"
+              style={{ marginTop: "0.5rem" }}
+            />
+          </Col>
+          <Col size={2} className="u-align--right">
+            <p className="p-heading--2">
+              {discount &&
+                currencyFormatter.format(
+                  (total - total * (discount / 100)) / 100
+                )}
+            </p>{" "}
+            <p className="p-text--small">
+              Any applicable taxes are <br /> calculated at checkout
+            </p>
+          </Col>
+          <Col
+            className="u-align--right"
+            size={4}
+            emptyLarge={9}
+            style={{ display: "flex", alignItems: "center" }}
+          >
+            <PaymentButton />
+          </Col>
+        </Row>
+      </section>
+    </>
+  );
+};
+
+export default DistributorShopSummary;
diff --git a/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopSummary/index.ts b/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopSummary/index.ts
new file mode 100644
index 00000000000..4cf9ca1c53a
--- /dev/null
+++ b/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopSummary/index.ts
@@ -0,0 +1 @@
+export { default } from "./DistributorShopSummary";
diff --git a/static/js/src/advantage/distributor/components/DistributorShopForm/PaymentButton/PaymentButton.tsx b/static/js/src/advantage/distributor/components/DistributorShopForm/PaymentButton/PaymentButton.tsx
new file mode 100644
index 00000000000..6b9b99fcf60
--- /dev/null
+++ b/static/js/src/advantage/distributor/components/DistributorShopForm/PaymentButton/PaymentButton.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Button } from "@canonical/react-components";
+
+export default function PaymentButton() {
+  return (
+    <Button
+      appearance="positive"
+      className="u-no-margin--bottom"
+      onClick={(e) => {
+        e.preventDefault();
+        location.href = "/pro/distributor/order";
+      }}
+    >
+      Proceed to checkout
+    </Button>
+  );
+}
diff --git a/static/js/src/advantage/distributor/components/DistributorShopForm/PaymentButton/index.ts b/static/js/src/advantage/distributor/components/DistributorShopForm/PaymentButton/index.ts
new file mode 100644
index 00000000000..e7902629ca5
--- /dev/null
+++ b/static/js/src/advantage/distributor/components/DistributorShopForm/PaymentButton/index.ts
@@ -0,0 +1 @@
+export { default } from "./PaymentButton";
diff --git a/static/js/src/advantage/distributor/utils/FormContext.tsx b/static/js/src/advantage/distributor/utils/FormContext.tsx
index bbd9c0b4aee..6fea8d825a6 100644
--- a/static/js/src/advantage/distributor/utils/FormContext.tsx
+++ b/static/js/src/advantage/distributor/utils/FormContext.tsx
@@ -87,7 +87,6 @@ export const FormProvider = ({
     setProduct(product);
   }, [productType, duration, currency, subscriptionList]);
 
-  console.log("product", product);
   return (
     <FormContext.Provider
       value={{