Build step 1 of distributor shop

static/js/src/advantage/distributor/DistributorShop.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Strip } from "@canonical/react-components";
+import DistributorShopForm from "./components/DistributorShopForm/DistributorShopForm";
+
+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>
+    );
+  }
+
+  return (
+    <Strip className="u-no-padding--top" style={{ overflow: "unset" }}>
+      <DistributorShopForm offer={offer} />
+    </Strip>
+  );
+};
+
+export default DistributorShop;

static/js/src/advantage/distributor/app.tsx

@@ -8,6 +8,7 @@ import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Distributor from "./Distributor";
+import DistributorShop from "./DistributorShop";
 
 const stripePromise = loadStripe(window.stripePublishableKey ?? "");
 
@@ -42,6 +43,7 @@ function App() {
           <Router basename="/pro/distributor">
             <Routes>
               <Route path="/" element={<Distributor />} />
+              <Route path="/shop" element={<DistributorShop />} />
             </Routes>
           </Router>
           <ReactQueryDevtools initialIsOpen={false} />

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

@@ -4,8 +4,9 @@ import {
   Offer as OfferType,
   ExternalId as ExternalIdType,
 } from "../../../offers/types";
-import { MainTable, Button } from "@canonical/react-components";
+import { MainTable } from "@canonical/react-components";
 import useGetChannelOffersList from "../../hooks/useGetChannelOffersList";
+import InitiateButton from "../InitiateButton/InitiateButton";
 
 const ChannelOffersList = () => {
   const {
@@ -84,14 +85,7 @@ const ChannelOffersList = () => {
                 content: offer.distributor_account_name,
               },
               {
-                content: (
-                  <Button
-                    element="a"
-                    href={`/pro/distributor/shop/${offer.id}`}
-                  >
-                    Initiate order
-                  </Button>
-                ),
+                content: <InitiateButton offer={offer} />,
                 className: "u-align--right",
               },
             ],

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { Card, Col, Row } from "@canonical/react-components";
+import {
+  Offer as OfferType,
+  ExternalId as ExternalIdType,
+} from "../../../../offers/types";
+
+type Prop = {
+  offer: OfferType;
+};
+const DealRegistration = ({ offer }: Prop) => {
+  const deal_registration_id = offer?.external_ids?.filter(
+    (external_id: ExternalIdType) => (external_id.origin = "Zift")
+  )[0]["ids"];
+  const distributor_account_name = offer?.distributor_account_name;
+
+  return (
+    <>
+      <Card
+        className="deal-registration-card"
+        title={`Deal registration ID ${deal_registration_id}`}
+      >
+        <hr />
+        <Row>
+          <Col size={3}>
+            <h5>Company</h5>
+            <div>Company Name</div>
+            <div>Street</div>
+            <div>City</div>
+            <div>Country</div>
+          </Col>
+          <Col size={3}>
+            <h5>Contact</h5>
+            <div>{distributor_account_name}</div>
+            <div>Contact email</div>
+          </Col>
+        </Row>
+      </Card>
+    </>
+  );
+};
+
+export default DealRegistration;

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

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

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { Row, Col, Strip } from "@canonical/react-components";
+import DealRegistration from "./DealRegistration/DealRegistration";
+import { Offer as OfferType } from "../../../offers/types";
+
+type Prop = {
+  offer: OfferType;
+};
+
+const DistributorShopForm = ({ offer }: Prop) => {
+  return (
+    <form className="distributor-shop-selector">
+      <Strip includeCol={false}>
+        <Row>
+          <Col size={6}>
+            <h2>Verify deal registration information</h2>
+          </Col>
+          <Col size={6}>
+            <DealRegistration offer={offer} />
+          </Col>
+        </Row>
+      </Strip>
+    </form>
+  );
+};
+
+export default DistributorShopForm;

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

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

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Button } from "@canonical/react-components";
+import { Offer as OfferType } from "../../../offers/types";
+
+type Prop = {
+  offer: OfferType;
+};
+
+export default function InitiateButton({ offer }: Prop) {
+  const channelOfferData = {
+    offer: offer,
+  };
+  return (
+    <>
+      <Button
+        className="u-no-margin--bottom"
+        disabled={!offer.actionable}
+        onClick={(e) => {
+          e.preventDefault();
+          localStorage.setItem(
+            "channel-offer-data",
+            JSON.stringify(channelOfferData)
+          );
+          location.href = "/pro/distributor/shop";
+        }}
+      >
+        Initiate order
+      </Button>
+    </>
+  );
+}

static/js/src/advantage/distributor/components/InitiateButton/index.ts

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

static/sass/_pattern_distributor.scss

@@ -0,0 +1,211 @@
+@mixin ubuntu-p-distributor {
+  .distributor-shop-selector {
+    counter-reset: headings;
+  }
+
+  @media screen and (min-width: $breakpoint-large) {
+    .distributor-shop-selector {
+      padding-top: 2rem;
+
+      h2 {
+        width: $breakpoint-x-small;
+      }
+      > .p-strip {
+        padding-bottom: 3rem;
+        padding-top: 3rem;
+
+        > .row {
+          > .col-6:nth-child(2) {
+            padding-top: 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  .distributor-shop-selector h2 {
+    counter-increment: headings;
+    display: flex;
+    flex-direction: row;
+    gap: 1.2rem;
+    margin-bottom: 2rem;
+
+    &::before {
+      @extend .p-heading--2;
+
+      align-items: center;
+      border: 1px solid #000;
+      border-radius: 50%;
+      content: counter(headings);
+      display: inline-flex;
+      flex-shrink: 0;
+      font-size: 1.5rem;
+      height: 2.5rem;
+      justify-content: center;
+      margin-top: 2px;
+      padding-top: 0;
+      text-align: center;
+      width: 2.5rem;
+    }
+  }
+
+  .distributor-shop-selector.p-card--radio--column.is-selected {
+    box-shadow: 0 4px 4px rgb(0 0 0 / 5%), 0 2px 16px rgb(0 0 0 / 5%),
+      0 0 24px rgb(0 0 0 / 10%), 0 0 0 1px #757575;
+  }
+
+  .included {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+    height: 122px;
+    justify-content: flex-start;
+    margin-left: 1rem;
+  }
+
+  .heading,
+  .main,
+  .universe {
+    height: 7rem;
+    margin-bottom: 10px;
+    padding-right: 3rem;
+    padding-top: 0.5px;
+  }
+
+  .support-row {
+    height: 3rem;
+    margin: 0 1rem;
+    padding-top: 1rem;
+    text-align: left;
+
+    > i {
+      margin-right: 1rem;
+    }
+
+    &.not-supported {
+      margin-left: 3rem;
+    }
+  }
+
+  .p-status-label--positive {
+    @include vf-p-status-label;
+    @extend %small-text;
+
+    background-color: hsl(129deg 90% 39% / 10%);
+    border: 1px solid $color-positive;
+    border-radius: 1rem;
+    color: $color-dark;
+    font-weight: $font-weight-bold;
+    margin: 0 $sph--small $input-margin-bottom 0;
+    padding: calc(#{$spv--x-small} - 1px) $sph--small;
+    position: relative;
+    top: -0.4rem;
+  }
+
+  .versions-features {
+    > li.p-list__item {
+      padding: 0.5rem 0;
+    }
+
+    .p-status-label--positive {
+      border: none;
+      font-style: oblique;
+      margin-left: 0.5rem;
+      top: 0;
+    }
+  }
+
+  .description-column {
+    padding-left: 3.6rem;
+
+    > .heading {
+      height: 125px;
+      padding-right: 1rem;
+      padding-top: 1.5rem;
+    }
+
+    > .support-row {
+      margin: 0;
+    }
+
+    hr {
+      margin-top: -1px;
+    }
+
+    > *:not(:last-child)::before {
+      background: rgba(0, 0, 0, 0.15);
+      content: "";
+      display: block;
+      height: 1px;
+      position: relative;
+      top: 100%;
+      width: calc(3.6rem + 200% + 6rem);
+      z-index: 10;
+    }
+
+    > .support-heading {
+      padding: 1rem 0 12px 0;
+
+      &::before {
+        top: 2.3rem;
+      }
+    }
+
+    > .support-heading,
+    > .support-row {
+      &::before {
+        width: calc(3.6rem + 200%);
+      }
+    }
+  }
+
+  .inner-support-label {
+    font-weight: 500;
+    margin: 0.5rem 0 15px 1rem;
+  }
+
+  .logos-wrapper {
+    display: flex;
+    justify-content: space-between;
+
+    img {
+      height: 1.8rem;
+    }
+  }
+
+  .distributor-shop-selector.p-card--radio i {
+    margin-right: 0.7rem;
+  }
+
+  .distributor-shop-selector.p-card--radio .p-radio__label {
+    font-weight: bold;
+  }
+
+  .version-features-section {
+    background-color: #f7f7f7;
+  }
+
+  .response-time-heading {
+    @media screen and (min-width: $breakpoint-large) {
+      padding-left: 3.6rem;
+    }
+  }
+
+  .response-time-toggle {
+    @media screen and (min-width: $breakpoint-large) {
+      margin-left: -1rem;
+      width: calc(100% + 1.4rem);
+    }
+  }
+
+  .deal-registration-card {
+    @extend .is-paper;
+    @extend .p-card--highlighted;
+
+    margin-left: 0.1rem;
+    margin-right: 0.1rem;
+    .p-card__title {
+      @extend .p-heading--4;
+    }
+  }
+}