From f7bc602305df67f1824cda8179355c86df8447c9 Mon Sep 17 00:00:00 2001
From: minkyngkm <min.kim@canonical.com>
Date: Mon, 31 Oct 2022 14:24:51 +0100
Subject: [PATCH] Add description checkbox

---
 static/js/src/PurchaseModal/PurchaseModal.tsx     |  1 +
 .../components/BuyButton/BuyButton.tsx            |  6 +++++-
 .../components/ConfirmAndBuy/ConfirmAndBuy.tsx    | 15 ++++++++++++++-
 static/js/src/PurchaseModal/utils/utils.ts        |  2 ++
 .../advantage/offers/components/Offer/Offer.tsx   |  1 +
 .../Subscriptions/RenewalModal/RenewalModal.tsx   |  1 +
 .../components/PaymentModal/PaymentModal.tsx      |  1 +
 .../components/PaymentModal/PaymentModal.tsx      |  1 +
 static/sass/_pattern_checkout.scss                | 10 +++++-----
 9 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/static/js/src/PurchaseModal/PurchaseModal.tsx b/static/js/src/PurchaseModal/PurchaseModal.tsx
index cffdf82fb48..f6642fb260b 100644
--- a/static/js/src/PurchaseModal/PurchaseModal.tsx
+++ b/static/js/src/PurchaseModal/PurchaseModal.tsx
@@ -200,6 +200,7 @@ const PurchaseModal = ({
                   content: (
                     <ConfirmAndBuy
                       termsLabel={termsLabel}
+                      descriptionLabel={descriptionLabel}
                       marketingLabel={marketingLabel}
                     />
                   ),
diff --git a/static/js/src/PurchaseModal/components/BuyButton/BuyButton.tsx b/static/js/src/PurchaseModal/components/BuyButton/BuyButton.tsx
index b2979b00c7e..79c5e39f3e4 100644
--- a/static/js/src/PurchaseModal/components/BuyButton/BuyButton.tsx
+++ b/static/js/src/PurchaseModal/components/BuyButton/BuyButton.tsx
@@ -28,7 +28,10 @@ const BuyButton = ({ setError, quantity, product, action }: Props) => {
   const genericPurchaseMutation = useMakePurchase();
 
   const isButtonDisabled =
-    !values.captchaValue || !values.TermsAndConditions || isLoading;
+    !values.captchaValue ||
+    !values.TermsAndConditions ||
+    !values.Description ||
+    isLoading;
 
   const buyAction = values.FreeTrial === "useFreeTrial" ? "trial" : action;
 
@@ -148,6 +151,7 @@ const BuyButton = ({ setError, quantity, product, action }: Props) => {
         }
       }
       setFieldValue("MarketingOptIn", false);
+      setFieldValue("Description", false);
       setFieldValue("TermsAndConditions", false);
     }
   }, [purchaseError]);
diff --git a/static/js/src/PurchaseModal/components/ConfirmAndBuy/ConfirmAndBuy.tsx b/static/js/src/PurchaseModal/components/ConfirmAndBuy/ConfirmAndBuy.tsx
index 63d8b740e13..36be187c94a 100644
--- a/static/js/src/PurchaseModal/components/ConfirmAndBuy/ConfirmAndBuy.tsx
+++ b/static/js/src/PurchaseModal/components/ConfirmAndBuy/ConfirmAndBuy.tsx
@@ -4,10 +4,15 @@ import { Row, Col, CheckboxInput } from "@canonical/react-components";
 
 type Props = {
   termsLabel: React.ReactNode;
+  descriptionLabel: React.ReactNode;
   marketingLabel: React.ReactNode;
 };
 
-const ConfirmAndBuy = ({ termsLabel, marketingLabel }: Props) => {
+const ConfirmAndBuy = ({
+  termsLabel,
+  descriptionLabel,
+  marketingLabel,
+}: Props) => {
   return (
     <Row>
       <Col size={12}>
@@ -18,6 +23,14 @@ const ConfirmAndBuy = ({ termsLabel, marketingLabel }: Props) => {
           defaultChecked={false}
         />
       </Col>
+      <Col size={12}>
+        <Field
+          as={CheckboxInput}
+          name="Description"
+          label={descriptionLabel}
+          defaultChecked={false}
+        />
+      </Col>
       <Col size={12}>
         <Field
           as={CheckboxInput}
diff --git a/static/js/src/PurchaseModal/utils/utils.ts b/static/js/src/PurchaseModal/utils/utils.ts
index 752e66479d3..77e685cfff3 100644
--- a/static/js/src/PurchaseModal/utils/utils.ts
+++ b/static/js/src/PurchaseModal/utils/utils.ts
@@ -40,6 +40,7 @@ export interface FormValues {
   captchaValue: string | null;
   TermsAndConditions: boolean;
   MarketingOptIn: boolean;
+  Description: boolean;
   FreeTrial: string;
 }
 
@@ -91,6 +92,7 @@ function getInitialFormValues(
     captchaValue: null,
     TermsAndConditions: false,
     MarketingOptIn: false,
+    Description: false,
     FreeTrial: canBeTrialled ? "useFreeTrial" : "payNow",
   };
 }
diff --git a/static/js/src/advantage/offers/components/Offer/Offer.tsx b/static/js/src/advantage/offers/components/Offer/Offer.tsx
index 578b0bc9dcc..bd1286c612a 100644
--- a/static/js/src/advantage/offers/components/Offer/Offer.tsx
+++ b/static/js/src/advantage/offers/components/Offer/Offer.tsx
@@ -130,6 +130,7 @@ const Offer = ({ offer }: Props) => {
             termsLabel={termsLabel}
             product={product}
             quantity={items.length}
+            descriptionLabel={descriptionLabel}
             marketingLabel={marketingLabel}
             Summary={OfferSummary}
             closeModal={closePortal}
diff --git a/static/js/src/advantage/react/components/Subscriptions/RenewalModal/RenewalModal.tsx b/static/js/src/advantage/react/components/Subscriptions/RenewalModal/RenewalModal.tsx
index f936abb9d24..48ae47ec2dc 100644
--- a/static/js/src/advantage/react/components/Subscriptions/RenewalModal/RenewalModal.tsx
+++ b/static/js/src/advantage/react/components/Subscriptions/RenewalModal/RenewalModal.tsx
@@ -99,6 +99,7 @@ const RenewalModal = ({ subscription, editing }: Props) => {
           <PurchaseModal
             termsLabel={termsLabel}
             marketingLabel={marketingLabel}
+            descriptionLabel={descriptionLabel}
             product={product}
             quantity={subscription.number_of_machines}
             Summary={RenewalSummary}
diff --git a/static/js/src/advantage/subscribe/blender/components/PaymentModal/PaymentModal.tsx b/static/js/src/advantage/subscribe/blender/components/PaymentModal/PaymentModal.tsx
index 89af47f8db9..253823bf19b 100644
--- a/static/js/src/advantage/subscribe/blender/components/PaymentModal/PaymentModal.tsx
+++ b/static/js/src/advantage/subscribe/blender/components/PaymentModal/PaymentModal.tsx
@@ -53,6 +53,7 @@ export default function PaymentModal({ isHidden }: Props) {
         <Portal>
           <PurchaseModal
             termsLabel={termsLabel}
+            descriptionLabel={descriptionLabel}
             marketingLabel={marketingLabel}
             product={product}
             quantity={quantity}
diff --git a/static/js/src/advantage/subscribe/react/components/PaymentModal/PaymentModal.tsx b/static/js/src/advantage/subscribe/react/components/PaymentModal/PaymentModal.tsx
index 5d79bbdb788..e5def85fedd 100644
--- a/static/js/src/advantage/subscribe/react/components/PaymentModal/PaymentModal.tsx
+++ b/static/js/src/advantage/subscribe/react/components/PaymentModal/PaymentModal.tsx
@@ -52,6 +52,7 @@ export default function PaymentModal({ isHidden }: Props) {
         <Portal>
           <PurchaseModal
             termsLabel={termsLabel}
+            descriptionLabel={descriptionLabel}
             marketingLabel={marketingLabel}
             product={product}
             quantity={sanitisedQuantity}
diff --git a/static/sass/_pattern_checkout.scss b/static/sass/_pattern_checkout.scss
index 27c2559fbfe..c790cc13395 100644
--- a/static/sass/_pattern_checkout.scss
+++ b/static/sass/_pattern_checkout.scss
@@ -1,19 +1,19 @@
 @mixin ubuntu-p-checkout {
   .checkout-container {
     background-color: white;
-    position: fixed;
-    top: 0;
-    z-index: 999;
-    width: 100vw;
     height: 100vh;
     overflow-y: scroll;
     padding: $sp-large 0;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    z-index: 999;
 
     .p-stepped-list--detailed {
       margin-left: 0;
     }
 
-    .email-field{
+    .email-field {
       display: flex;
       flex-direction: column;
     }