WD-10613 add summary section

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} />
+    </>
   );
 };
 

static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopForm.tsx

@@ -76,9 +76,6 @@ const DistributorShopForm = ({ offer }: Prop) => {
           </Col>
         </Row>
       </Strip>
-      <Row>
-        <hr />
-      </Row>
     </form>
   );
 };

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;

static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopSummary/index.ts

@@ -0,0 +1 @@
+export { default } from "./DistributorShopSummary";

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>
+  );
+}

static/js/src/advantage/distributor/components/DistributorShopForm/PaymentButton/index.ts

@@ -0,0 +1 @@
+export { default } from "./PaymentButton";

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={{