WD-10607 add step 2. 3. 5 on the distributor shop page

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

@@ -9,6 +9,7 @@ import { loadStripe } from "@stripe/stripe-js";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Distributor from "./Distributor";
 import DistributorShop from "./DistributorShop";
+import { FormProvider } from "./utils/FormContext";
 
 const stripePromise = loadStripe(window.stripePublishableKey ?? "");
 
@@ -40,13 +41,15 @@ function App() {
     <Sentry.ErrorBoundary>
       <Elements stripe={stripePromise}>
         <QueryClientProvider client={queryClient}>
-          <Router basename="/pro/distributor">
-            <Routes>
-              <Route path="/" element={<Distributor />} />
-              <Route path="/shop" element={<DistributorShop />} />
-            </Routes>
-          </Router>
-          <ReactQueryDevtools initialIsOpen={false} />
+          <FormProvider>
+            <Router basename="/pro/distributor">
+              <Routes>
+                <Route path="/" element={<Distributor />} />
+                <Route path="/shop" element={<DistributorShop />} />
+              </Routes>
+            </Router>
+            <ReactQueryDevtools initialIsOpen={false} />
+          </FormProvider>
         </QueryClientProvider>
       </Elements>
     </Sentry.ErrorBoundary>

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

@@ -0,0 +1,54 @@
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { Row, Col, Select } from "@canonical/react-components";
+import { FormContext } from "advantage/distributor/utils/FormContext";
+import { Currencies } from "advantage/distributor/utils/utils";
+
+const Currency = () => {
+  const { currency, setCurrency } = useContext(FormContext);
+
+  const handleCurrencyChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    setCurrency(event.target.value as Currencies);
+    localStorage.setItem(
+      "distributor-selector-currency",
+      JSON.stringify(event.target.value as Currencies)
+    );
+  };
+
+  return (
+    <div
+      className={classNames({
+        row: true,
+      })}
+      data-testid="wrapper"
+    >
+      <Row>
+        <Col size={1}>
+          <Select
+            defaultValue={currency}
+            name="distributor-currency"
+            options={[
+              {
+                label: "USD",
+                value: Currencies.usd,
+              },
+              {
+                label: "GBP",
+                value: Currencies.gbp,
+              },
+              {
+                label: "EUR",
+                value: Currencies.eur,
+              },
+            ]}
+            onChange={handleCurrencyChange}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default Currency;

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

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

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

@@ -1,7 +1,10 @@
 import React from "react";
 import { Row, Col, Strip } from "@canonical/react-components";
 import DealRegistration from "./DealRegistration/DealRegistration";
+import Currency from "./Currency/Currency";
+import Duration from "./Duration";
 import { Offer as OfferType } from "../../../offers/types";
+import TechnicalUserContact from "./TechnicalUserContact/TechnicalUserContact";
 
 type Prop = {
   offer: OfferType;
@@ -20,6 +23,45 @@ const DistributorShopForm = ({ offer }: Prop) => {
           </Col>
         </Row>
       </Strip>
+      <Row>
+        <hr />
+      </Row>
+      <Strip includeCol={false}>
+        <Row>
+          <Col size={6}>
+            <h2>Fill in technical user&lsquo;s contact</h2>
+          </Col>
+          <Col size={6}>
+            <TechnicalUserContact offer={offer} />
+          </Col>
+        </Row>
+      </Strip>
+      <Row>
+        <hr />
+      </Row>
+      <Strip includeCol={false}>
+        <Row>
+          <Col size={6}>
+            <h2>Select your currency</h2>
+          </Col>
+          <Col size={6}>
+            <Currency />
+          </Col>
+        </Row>
+      </Strip>
+      <Row>
+        <hr />
+      </Row>
+      <Strip includeCol={false}>
+        <Row>
+          <Col size={6}>
+            <h2>Select the subscription duration</h2>
+          </Col>
+          <Col size={6}>
+            <Duration />
+          </Col>
+        </Row>
+      </Strip>
     </form>
   );
 };

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

@@ -0,0 +1,54 @@
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { Col, Select, Row } from "@canonical/react-components";
+import { FormContext } from "advantage/distributor/utils/FormContext";
+import { Durations } from "advantage/distributor/utils/utils";
+
+const Duration = () => {
+  const { duration, setDuration } = useContext(FormContext);
+
+  const handleDurationChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    setDuration(event.target.value as Durations);
+    localStorage.setItem(
+      "distributor-selector-duration",
+      JSON.stringify(event.target.value as Durations)
+    );
+  };
+
+  return (
+    <div
+      className={classNames({
+        row: true,
+      })}
+      data-testid="wrapper"
+    >
+      <Row>
+        <Col size={1}>
+          <Select
+            name="distributor-duration"
+            defaultValue={duration}
+            options={[
+              {
+                label: "1 year",
+                value: Durations.one,
+              },
+              {
+                label: "2 years",
+                value: Durations.two,
+              },
+              {
+                label: "3 years",
+                value: Durations.three,
+              },
+            ]}
+            onChange={handleDurationChange}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default Duration;

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

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

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

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from "react";
+import { Input, Notification } from "@canonical/react-components";
+import { Offer as OfferType } from "../../../../offers/types";
+
+type Prop = {
+  offer: OfferType;
+};
+const TechnicalUserContact = ({ offer }: Prop) => {
+  const [technicalContact, setTechnicalContact] = useState({
+    name: "",
+    email: "",
+  });
+  useState;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTechnicalContact({
+      ...technicalContact,
+      [event.target.name]: event.target.value,
+    });
+    localStorage.setItem(
+      `distributor-selector-technicalContact`,
+      JSON.stringify({
+        ...technicalContact,
+        [event.target.name]: event.target.value,
+      })
+    );
+  };
+
+  useEffect(() => {
+    const localTechnicalContact = localStorage.getItem(
+      "distributor-selector-technicalContact"
+    );
+    const defaultValue =
+      localTechnicalContact && JSON.parse(localTechnicalContact);
+    if (defaultValue?.name) {
+      setTechnicalContact({
+        ...technicalContact,
+        name: defaultValue.name,
+        email: defaultValue.email,
+      });
+    } else {
+      setTechnicalContact({
+        ...technicalContact,
+        name: offer?.end_user_account_name ?? "",
+        email: offer?.technical_contact ?? "",
+      });
+    }
+  }, [offer]);
+
+  return (
+    <div data-testid="wrapper">
+      <div>
+        <Input
+          id="technical-user-name"
+          aria-label="Technical user name"
+          label="Technical user name"
+          name="name"
+          type="text"
+          placeholder="Min Kim"
+          required
+          onChange={handleChange}
+          value={technicalContact.name}
+        />
+      </div>
+      <div>
+        <Input
+          id="technical-user-email"
+          aria-label="Technical user email"
+          label="Technical user email"
+          name="email"
+          type="email"
+          placeholder="user@test.com"
+          required
+          onChange={handleChange}
+          value={technicalContact.email}
+        ></Input>
+      </div>
+      <Notification severity="caution" title="Warning">
+        Make sure the information here is correct. This cannot be changed after
+        the checkout is completed.
+      </Notification>
+    </div>
+  );
+};
+
+export default TechnicalUserContact;

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

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