Merge branch 'main' into wd-1481

canonical · May 26, 2023 · fd18f01 · fd18f01
2 parents 4db9395 + d8e886e
commit fd18f01
Show file tree

Hide file tree

Showing 50 changed files with 1,662 additions and 1,303 deletions.
diff --git a/static/js/src/advantage/credentials/components/CredManage/CredManage.tsx b/static/js/src/advantage/credentials/components/CredManage/CredManage.tsx
@@ -17,6 +17,15 @@ type ActivationKey = {
   activatedBy?: string;
   productID: string;
 };
+
+enum KeyFilters {
+  All,
+  Unused,
+  Active,
+}
+
+const KeyFiltersLength = Object.keys(KeyFilters).length / 2;
+
 const CredManage = () => {
   const [tab, changeTab] = useState(0);
   const inputRefs = useRef<HTMLButtonElement[]>([]);
@@ -57,12 +66,12 @@ const CredManage = () => {
   ) => {
     event.preventDefault();
     if (event.key == "ArrowLeft") {
-      changeTab((currentIndex - 1) % 4);
-      inputRefs.current[(currentIndex - 1) % 4].focus();
+      changeTab((currentIndex - 1) % KeyFiltersLength);
+      inputRefs.current[(currentIndex - 1) % KeyFiltersLength].focus();
     }
     if (event.key == "ArrowRight") {
-      changeTab((currentIndex + 1) % 4);
-      inputRefs.current[(currentIndex + 1) % 4].focus();
+      changeTab((currentIndex + 1) % KeyFiltersLength);
+      inputRefs.current[(currentIndex + 1) % KeyFiltersLength].focus();
     }
   };
 
@@ -103,23 +112,6 @@ const CredManage = () => {
     navigator.clipboard.writeText(value);
   };
 
-  const keyIsArchivable = (keyItemId: string) => {
-    const tempKey = getKey(keyItemId);
-    if ("activatedBy" in tempKey) {
-      return true;
-    }
-    return false;
-  };
-
-  const isArchiveable = () => {
-    for (let i = 0; i < selectedKeyIds.length; i++) {
-      if (!keyIsArchivable(selectedKeyIds[i])) {
-        return false;
-      }
-    }
-    return true;
-  };
-
   const keyIsUnused = (keyItemId: string) => {
     const tempKey = getKey(keyItemId);
     if ("activatedBy" in tempKey) {
@@ -139,12 +131,6 @@ const CredManage = () => {
 
   useEffect(() => {
     const newList = [];
-    if (isArchiveable()) {
-      newList.push({
-        children: "Archive",
-        onClick: () => {},
-      });
-    }
     if (isUnused()) {
       newList.push({
         children: "Copy List",
@@ -167,24 +153,23 @@ const CredManage = () => {
       });
     }
     updateActionLinks(newList);
-    console.log(isArchiveable());
   }, [selectedKeyIds]);
 
   useEffect(() => {
-    if (tab == 0) {
+    if (tab == KeyFilters.All) {
       changeTableData(filterData);
     }
-    if (tab == 1) {
+    if (tab == KeyFilters.Unused) {
       changeTableData(
         filterData.filter((keyItem: ActivationKey) => {
           return keyIsUnused(keyItem["key"]);
         })
       );
     }
-    if (tab == 2) {
+    if (tab == KeyFilters.Active) {
       changeTableData(
         filterData.filter((keyItem: ActivationKey) => {
-          return !keyIsArchivable(keyItem["key"]);
+          return !keyIsUnused(keyItem["key"]);
         })
       );
     }
@@ -223,7 +208,7 @@ const CredManage = () => {
                 changeTab(0);
               }}
               onKeyUp={(e) => {
-                switchTab(e, 4);
+                switchTab(e, KeyFiltersLength);
               }}
               ref={(ref: HTMLButtonElement) => (inputRefs.current[0] = ref)}
             >
@@ -263,23 +248,6 @@ const CredManage = () => {
             >
               Active Keys
             </button>
-            <button
-              className="p-segmented-control__button"
-              role="tab"
-              aria-selected={tab == 3}
-              aria-controls="archived-keys-tab"
-              id="archived-keys"
-              tabIndex={-1}
-              onClick={() => {
-                changeTab(3);
-              }}
-              onKeyUp={(e) => {
-                switchTab(e, 3);
-              }}
-              ref={(ref: HTMLButtonElement) => (inputRefs.current[3] = ref)}
-            >
-              Archived Keys
-            </button>
           </div>
         </div>
         <div className="col-6 u-align--center">
@@ -375,14 +343,7 @@ const CredManage = () => {
                       content: (
                         <>
                           {keyitem["activatedBy"] ? (
-                            <Tooltip message="Archive Key" position="right">
-                              <p>
-                                {keyitem["activatedBy"]} &emsp;
-                                <a onClick={() => {}}>
-                                  <i className="p-icon--delete"></i>
-                                </a>
-                              </p>
-                            </Tooltip>
+                            <p>{keyitem["activatedBy"]} &emsp;</p>
                           ) : (
                             <Tooltip message="Refresh Key" position="right">
                               <p>

diff --git a/static/js/src/advantage/subscribe/checkout/components/BuyButton/BuyButton.tsx b/static/js/src/advantage/subscribe/checkout/components/BuyButton/BuyButton.tsx
@@ -11,6 +11,7 @@ import useCustomerInfo from "../../hooks/useCustomerInfo";
 import useFinishPurchase from "../../hooks/useFinishPurchase";
 import usePollPurchaseStatus from "../../hooks/usePollPurchaseStatus";
 import { Action, FormValues, Product } from "../../utils/types";
+import { currencyFormatter } from "advantage/react/utils";
 
 type Props = {
   setError: React.Dispatch<React.SetStateAction<React.ReactNode>>;
@@ -101,6 +102,19 @@ const BuyButton = ({ setError, quantity, product, action }: Props) => {
             setPendingPurchaseID(purchaseId);
             window.currentPaymentId = purchaseId;
           }
+
+          window.plausible("pro-purchase", {
+            props: {
+              country: values.country,
+              product: product?.name,
+              quantity: quantity,
+              total:
+                values.totalPrice &&
+                currencyFormatter.format(values?.totalPrice / 100),
+              "buying-for": values.buyingFor,
+              action: buyAction,
+            },
+          });
         },
         onError: (error) => {
           setIsLoading(false);
@@ -250,10 +264,34 @@ const BuyButton = ({ setError, quantity, product, action }: Props) => {
 
       proSelectorStates.forEach((state) => localStorage.removeItem(state));
 
+      const address = userInfo
+        ? `${userInfo?.customerInfo?.address?.line1} ${userInfo?.customerInfo?.address?.line2} ${userInfo?.customerInfo?.address?.city} ${userInfo?.customerInfo?.address?.postal_code} ${userInfo?.customerInfo?.address?.state} ${userInfo?.customerInfo?.address?.country}`
+        : `${values?.address} ${values?.postalCode} ${values?.city} ${values?.usState} ${values?.caProvince} ${values?.country}`;
+
+      const getName = () => {
+        const name = userInfo?.customerInfo?.name || values?.name;
+        if (name && name.split(" ").length === 2) {
+          formData.append("firstName", name.split(" ")[0] ?? "");
+          formData.append("lastName", name.split(" ")[1] ?? "");
+        } else {
+          formData.append("firstName", "");
+          formData.append("lastName", name ?? "");
+        }
+      };
+
       const request = new XMLHttpRequest();
       const formData = new FormData();
       formData.append("formid", "3756");
-      formData.append("email", userInfo?.customerInfo?.email ?? "");
+      getName();
+      formData.append(
+        "email",
+        (userInfo?.customerInfo?.email || values.email) ?? ""
+      );
+      formData.append(
+        "company",
+        (userInfo?.accountInfo?.name || values?.organisationName) ?? ""
+      );
+      formData.append("street", address ?? "");
       formData.append("Consent_to_Processing__c", "yes");
       formData.append("GCLID__c", sessionData?.gclid || "");
       formData.append("utm_campaign", sessionData?.utm_campaign || "");

diff --git a/static/js/src/advantage/subscribe/checkout/hooks/useCalculate.tsx b/static/js/src/advantage/subscribe/checkout/hooks/useCalculate.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from "react-query";
 import { UserSubscriptionMarketplace } from "advantage/api/enum";
-import { TaxInfo } from "../utils/types";
+import { FormValues, TaxInfo } from "../utils/types";
+import { useFormikContext } from "formik";
 
 type useCalculateProps = {
   marketplace: UserSubscriptionMarketplace;
@@ -19,6 +20,7 @@ const useCalculate = ({
   VATNumber,
   isTaxSaved,
 }: useCalculateProps) => {
+  const { setFieldValue } = useFormikContext<FormValues>();
   const { isLoading, isError, isSuccess, data, error, isFetching } = useQuery(
     ["calculate"],
     async () => {
@@ -52,7 +54,7 @@ const useCalculate = ({
       }
 
       const data: TaxInfo = res;
-
+      setFieldValue("totalPrice", data.total);
       return data;
     },
     {

diff --git a/static/js/src/advantage/subscribe/checkout/hooks/usePreview.tsx b/static/js/src/advantage/subscribe/checkout/hooks/usePreview.tsx
@@ -1,6 +1,13 @@
 import { useQuery } from "react-query";
-import { Action, PaymentPayload, Product, TaxInfo } from "../utils/types";
+import {
+  Action,
+  FormValues,
+  PaymentPayload,
+  Product,
+  TaxInfo,
+} from "../utils/types";
 import useCustomerInfo from "./useCustomerInfo";
+import { useFormikContext } from "formik";
 
 type Props = {
   quantity: number;
@@ -10,7 +17,7 @@ type Props = {
 
 const usePreview = ({ quantity, product, action }: Props) => {
   const { isError: isUserInfoError } = useCustomerInfo();
-
+  const { setFieldValue } = useFormikContext<FormValues>();
   const { isLoading, isError, isSuccess, data, error, isFetching } = useQuery(
     ["preview", product],
     async () => {
@@ -70,6 +77,7 @@ const usePreview = ({ quantity, product, action }: Props) => {
         end_of_cycle: res.end_of_cycle,
       };
 
+      setFieldValue("totalPrice", data.total);
       return data;
     },
     {

diff --git a/static/js/src/advantage/subscribe/checkout/utils/helpers.ts b/static/js/src/advantage/subscribe/checkout/utils/helpers.ts
@@ -32,6 +32,7 @@ export function getInitialFormValues(
     isTaxSaved: !!userInfo?.customerInfo?.address?.country,
     isCardValid: !!userInfo?.customerInfo?.defaultPaymentMethod,
     isInfoSaved: !!userInfo?.customerInfo?.defaultPaymentMethod,
+    totalPrice: undefined,
   };
 }
 

diff --git a/static/js/src/advantage/subscribe/checkout/utils/types.ts b/static/js/src/advantage/subscribe/checkout/utils/types.ts
@@ -52,6 +52,7 @@ export interface FormValues {
   isTaxSaved: boolean;
   isCardValid: boolean;
   isInfoSaved: boolean;
+  totalPrice: undefined | number;
 }
 
 export type marketplace = "canonical-ua" | "canonical-cube" | "blender";