Clean up FormContext.tsx

static/js/src/advantage/distributor/utils/FormContext.tsx

@@ -2,8 +2,6 @@ import React, { createContext, useEffect, useMemo, useState } from "react";
 import {
   ChannelProduct,
   DistributorProductTypes as ProductTypes,
-  Support,
-  SLA,
   Durations,
   SubscriptionItem,
   Currencies,
@@ -15,9 +13,9 @@ import {
   TechnicalUserContact,
   ProductListings,
   DISTRIBUTOR_SELECTOR_KEYS,
+  getLocalStorageItem,
 } from "./utils";
-import { Offer, OfferItem } from "advantage/offers/types";
-import { UserSubscriptionMarketplace } from "advantage/api/enum";
+import { Offer } from "advantage/offers/types";
 
 interface FormContext {
   productType: ProductTypes;
@@ -82,106 +80,72 @@ export const FormProvider = ({
   initialChannelProductList = defaultValues.channelProductList,
   children,
 }: FormProviderProps) => {
-  const localSubscriptionList = localStorage.getItem(
-    DISTRIBUTOR_SELECTOR_KEYS.SUBSCRIPTION_LIST,
-  );
-  const localProductType = localStorage.getItem(
-    DISTRIBUTOR_SELECTOR_KEYS.PRODUCT_TYPE,
-  );
-  const localDuration = localStorage.getItem(
-    DISTRIBUTOR_SELECTOR_KEYS.DURATION,
-  );
-  const localCurrency = localStorage.getItem(
-    DISTRIBUTOR_SELECTOR_KEYS.CURRENCY,
-  );
-  const localTechnicalUserContact = localStorage.getItem(
-    DISTRIBUTOR_SELECTOR_KEYS.TECHNICAL_USER_CONTACT,
-  );
-  const localOffer = localStorage.getItem(DISTRIBUTOR_SELECTOR_KEYS.OFFER_DATA);
-
   const [subscriptionList, setSubscriptionList] = useState<SubscriptionItem[]>(
-    localSubscriptionList
-      ? JSON.parse(localSubscriptionList)
-      : initialSubscriptionList,
+    getLocalStorageItem(
+      DISTRIBUTOR_SELECTOR_KEYS.SUBSCRIPTION_LIST,
+      initialSubscriptionList,
+    ),
   );
   const [productType, setProductType] = useState<ProductTypes>(
-    localProductType ? JSON.parse(localProductType) : initialType,
+    getLocalStorageItem(DISTRIBUTOR_SELECTOR_KEYS.PRODUCT_TYPE, initialType),
   );
   const [duration, setDuration] = useState<Durations>(
-    localDuration ? JSON.parse(localDuration) : initialDuration,
+    getLocalStorageItem(DISTRIBUTOR_SELECTOR_KEYS.DURATION, initialDuration),
+  );
+  const [currency, setCurrency] = useState<Currencies>(
+    getLocalStorageItem(DISTRIBUTOR_SELECTOR_KEYS.CURRENCY, initialCurrency),
   );
   const [technicalUserContact, setTechnicalUserContact] =
     useState<TechnicalUserContact>(
-      localTechnicalUserContact
-        ? JSON.parse(localTechnicalUserContact)
-        : initialTechnicalUserContact,
+      getLocalStorageItem(
+        DISTRIBUTOR_SELECTOR_KEYS.TECHNICAL_USER_CONTACT,
+        initialTechnicalUserContact,
+      ),
     );
-  const [currency, setCurrency] = useState<Currencies>(
-    localCurrency ? JSON.parse(localCurrency) : initialCurrency,
-  );
   const [products, setProducts] = useState<ChannelProduct[] | null>(null);
   const [offer, setOffer] = useState<Offer | null>(
-    localOffer ? JSON.parse(localOffer) : null,
+    getLocalStorageItem(DISTRIBUTOR_SELECTOR_KEYS.OFFER_DATA, null),
   );
   const [channelProductList, setChannelProductList] = useState<ProductListings>(
     initialChannelProductList,
   );
 
   const updatedChannelProductList = useMemo(() => {
-    const rawChannelProductListings = window.channelProductList;
+    const rawChannelProductListings = window.channelProductList || {};
     const offerExclusiveGroup = offer?.exclusion_group || "";
-    const updatedChannelProductList: ProductListings = {};
-
-    const getDuration = (effectiveDays: number | undefined): number | null => {
-      if (effectiveDays === 365) return 1;
-      if (effectiveDays === 730) return 2;
-      if (effectiveDays === 1095) return 3;
-      return null;
-    };
-
-    const updateProductListing = (listing: any) => {
-      const {
-        id,
-        price,
-        currency,
-        product,
-        marketplace,
-        exclusion_group,
-        effective_days,
-      } = listing;
-
-      const duration = getDuration(effective_days);
-      const newName =
-        `${product?.id}-${duration}y-channel-${currency}`.toLowerCase();
-
-      updatedChannelProductList[newName] = {
-        id: newName,
-        longId: id,
-        name: newName,
-        price: {
-          value: price,
-          currency: currency,
-        },
-        productID: product?.id as ValidProductID,
-        productName: product?.name,
-        marketplace: marketplace as UserSubscriptionMarketplace,
-        exclusion_group: exclusion_group || "",
-        effective_days,
-      };
-    };
-
-    if (rawChannelProductListings) {
-      Object.values(rawChannelProductListings).forEach((listing: any) => {
-        const { exclusion_group = "" } = listing;
-
-        // Add listings whose exclusion_group matches offerExclusiveGroup
-        if (offerExclusiveGroup === exclusion_group) {
-          updateProductListing(listing);
-        }
-      });
-    }
+    const updatedListings: ProductListings = {};
+
+    const getDuration = (effectiveDays?: number): number | null =>
+      effectiveDays === 365
+        ? 1
+        : effectiveDays === 730
+          ? 2
+          : effectiveDays === 1095
+            ? 3
+            : null;
+
+    Object.values(rawChannelProductListings).forEach((listing: any) => {
+      if (listing.exclusion_group === offerExclusiveGroup) {
+        const { id, price, currency, product, effective_days } = listing;
+        const duration = getDuration(effective_days);
+        const newName =
+          `${product?.id}-${duration}y-channel-${currency}`.toLowerCase();
+
+        updatedListings[newName] = {
+          id: newName,
+          longId: id,
+          name: newName,
+          price: { value: price, currency },
+          productID: product?.id as ValidProductID,
+          productName: product?.name,
+          marketplace: listing.marketplace,
+          exclusion_group: listing.exclusion_group || "",
+          effective_days,
+        };
+      }
+    });
 
-    return updatedChannelProductList;
+    return updatedListings;
   }, [offer, window.channelProductList]);
 
   useEffect(() => {
@@ -193,20 +157,17 @@ export const FormProvider = ({
   }, [updatedChannelProductList]);
 
   const filteredProducts = useMemo(() => {
-    const productIds: ValidProductID[] = subscriptionList.map((subscription) =>
-      getProductId(
-        subscription.type as ProductTypes,
-        subscription.support as Support,
-        subscription.sla as SLA,
-      ),
+    const productIds = subscriptionList.map((subscription) =>
+      getProductId(subscription.type, subscription.support, subscription.sla),
     );
-    const validproducts: string[] = productIds.map(
-      (productId: ValidProductID) =>
-        `${productId}-${duration}y-channel-${currency}`,
-    );
-    return validproducts.map(
-      (validproduct) => channelProductList[validproduct],
+
+    const validProducts = productIds.map(
+      (productId) => `${productId}-${duration}y-channel-${currency}`,
     );
+
+    return validProducts
+      .map((id) => channelProductList[id])
+      .filter((product) => !!product);
   }, [duration, currency, subscriptionList, channelProductList]);
 
   useEffect(() => {
@@ -216,56 +177,33 @@ export const FormProvider = ({
   useEffect(() => {
     if (!offer) return;
 
-    setSubscriptionItems(
-      offer.items,
-      subscriptionList,
-      setSubscriptionList,
-      setCurrency,
-      setDuration,
-    );
-  }, [offer]);
-
-  const setSubscriptionItems = (
-    items: OfferItem[],
-    subscriptionList: SubscriptionItem[] | null,
-    setSubscriptionList: (list: SubscriptionItem[]) => void,
-    setCurrency: (currency: Currencies) => void,
-    setDuration: (duration: Durations) => void,
-  ) => {
     const preSetItems: SubscriptionItem[] = [];
     let preSetCurrency: Currencies | null = null;
     let preSetDuration: Durations | null = null;
 
-    if (subscriptionList?.length === 0 && items.length > 0) {
-      items.forEach((item) => {
+    if (subscriptionList.length === 0 && offer.items.length > 0) {
+      offer.items.forEach((item) => {
         const preSetItem = getPreSelectedItem(item);
-        if (preSetItem) {
-          preSetItems.push(preSetItem);
-        }
+        if (preSetItem) preSetItems.push(preSetItem);
 
         preSetCurrency = preSetCurrency || getPreCurrency(item);
         preSetDuration = preSetDuration || getPreDuration(item);
       });
 
-      // Update subscription list
       if (preSetItems.length > 0) {
         setSubscriptionList(preSetItems);
         localStorage.setItem(
           DISTRIBUTOR_SELECTOR_KEYS.SUBSCRIPTION_LIST,
           JSON.stringify(preSetItems),
         );
       }
-
-      // Update currency
       if (preSetCurrency) {
         setCurrency(preSetCurrency);
         localStorage.setItem(
           DISTRIBUTOR_SELECTOR_KEYS.CURRENCY,
           JSON.stringify(preSetCurrency),
         );
       }
-
-      // Update duration
       if (preSetDuration) {
         setDuration(preSetDuration);
         localStorage.setItem(
@@ -274,14 +212,14 @@ export const FormProvider = ({
         );
       }
     }
-  };
+  }, [offer]);
 
   useEffect(() => {
-    if (!localTechnicalUserContact) {
+    if ((!technicalUserContact.name || !technicalUserContact.email) && offer) {
       setTechnicalUserContact({
-        name: offer?.technical_contact_name,
-        email: offer?.technical_contact_email,
-      } as TechnicalUserContact);
+        name: offer.technical_contact_name || "",
+        email: offer.technical_contact_email || "",
+      });
     }
   }, [offer]);
 

static/js/src/advantage/distributor/utils/utils.ts

@@ -301,3 +301,8 @@ export const DISTRIBUTOR_SELECTOR_KEYS = {
   PRODUCT_TYPE: "distributor-selector-productType",
   PRODUCT_LISTING: "distributor-product-listing",
 } as const;
+
+export const getLocalStorageItem = <T>(key: string, defaultValue: T): T => {
+  const item = localStorage.getItem(key);
+  return item ? JSON.parse(item) : defaultValue;
+};