feat: add tagId field to callout and remove the applyTag & onRemove h…

…andlers (#291) * add tagId to external callout fields and remove applyTag and onRemove callout handlers * fix import lint error
guardian · Feb 7, 2023 · 5e322c2 · 5e322c2
1 parent a390a34
commit 5e322c2
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 68 deletions.
diff --git a/demo/index.ts b/demo/index.ts
@@ -181,8 +181,6 @@ const {
     callout: createCalloutElement({
       fetchCampaignList: () => Promise.resolve(sampleCampaignList),
       targetingUrl: "https://targeting.code.dev-gutools.co.uk/",
-      applyTag: (tag: string) => console.log(`Apply ${tag} tag`),
-      onRemove: (fields) => console.log("Remove callout", fields),
     }),
     interactive: createInteractiveElement({
       checkThirdPartyTracking: mockThirdPartyTracking,

diff --git a/src/elements/callout/Callout.tsx b/src/elements/callout/Callout.tsx
@@ -6,8 +6,8 @@ import {
   createCustomDropdownField,
   createCustomField,
 } from "../../plugin/fieldViews/CustomFieldView";
+import { createTextField } from "../../plugin/fieldViews/TextFieldView";
 import { undefinedDropdownValue } from "../../plugin/helpers/constants";
-import type { FieldNameToValueMap } from "../../plugin/helpers/fieldView";
 import { dropDownRequired } from "../../plugin/helpers/validation";
 import { createReactElementSpec } from "../../renderers/react/createReactElementSpec";
 import { CustomDropdownView } from "../../renderers/react/customFieldViewComponents/CustomDropdownView";
@@ -39,6 +39,7 @@ export const calloutFields = {
     ]
   ),
   isNonCollapsible: createCustomField(false, true),
+  tagId: createTextField(),
 };
 
 const calloutStyles = css`
@@ -83,77 +84,60 @@ const calloutStyles = css`
 type Props = {
   fetchCampaignList: () => Promise<Campaign[]>;
   targetingUrl: string;
-  applyTag: (tagId: string) => void;
-  onRemove: (fields: FieldNameToValueMap<typeof calloutFields>) => void;
 };
 
 export const createCalloutElement = ({
   fetchCampaignList,
   targetingUrl,
-  applyTag,
-  onRemove,
 }: Props) =>
-  createReactElementSpec(
-    calloutFields,
-    ({ fields }) => {
-      const campaignId = fields.campaignId.value;
-      const [campaignList, setCampaignList] = useState<Campaign[]>([]);
+  createReactElementSpec(calloutFields, ({ fields }) => {
+    const campaignId = fields.campaignId.value;
+    const [campaignList, setCampaignList] = useState<Campaign[]>([]);
 
-      useEffect(() => {
-        void fetchCampaignList().then((campaignList) => {
-          setCampaignList(campaignList);
-        });
-      }, []);
+    useEffect(() => {
+      void fetchCampaignList().then((campaignList) => {
+        setCampaignList(campaignList);
+      });
+    }, []);
 
-      useEffect(() => {
-        if (
-          campaignId === undefinedDropdownValue ||
-          campaignList.length === 0
-        ) {
-          return;
-        }
-        applyTag(getTag(campaignId));
-      }, [campaignId]);
+    const getTag = (id: string) => {
+      const campaign = campaignList.find((campaign) => campaign.id === id);
+      return campaign?.fields.tagName ?? "";
+    };
+    const dropdownOptions = getDropdownOptionsFromCampaignList(campaignList);
+    const callout = campaignList.find((campaign) => campaign.id === campaignId);
+    const isActiveCallout =
+      !callout?.activeUntil || callout.activeUntil >= Date.now();
+    const trimmedTargetingUrl = targetingUrl.replace(/\/$/, "");
 
-      const getTag = (id: string) => {
-        const campaign = campaignList.find((campaign) => campaign.id === id);
-        return campaign?.fields.tagName ?? "";
-      };
-      const dropdownOptions = getDropdownOptionsFromCampaignList(campaignList);
-      const callout = campaignList.find(
-        (campaign) => campaign.id === campaignId
-      );
-      const isActiveCallout =
-        !callout?.activeUntil || callout.activeUntil >= Date.now();
-      const trimmedTargetingUrl = targetingUrl.replace(/\/$/, "");
-
-      return campaignId && campaignId != "none-selected" ? (
-        <div css={calloutStyles}>
-          {callout && isActiveCallout ? (
-            <CalloutTable
-              calloutData={callout}
-              targetingUrl={trimmedTargetingUrl}
-              isNonCollapsible={fields.isNonCollapsible}
-            />
-          ) : (
-            <CalloutError
-              isExpired={!isActiveCallout}
-              targetingUrl={trimmedTargetingUrl}
-              callout={callout}
-              calloutId={campaignId}
-            />
-          )}
-        </div>
-      ) : (
-        <div>
-          <CustomDropdownView
-            label="Callout"
-            field={fields.campaignId}
-            options={dropdownOptions}
+    return campaignId && campaignId != "none-selected" ? (
+      <div css={calloutStyles}>
+        {callout && isActiveCallout ? (
+          <CalloutTable
+            calloutData={callout}
+            targetingUrl={trimmedTargetingUrl}
+            isNonCollapsible={fields.isNonCollapsible}
+          />
+        ) : (
+          <CalloutError
+            isExpired={!isActiveCallout}
+            targetingUrl={trimmedTargetingUrl}
+            callout={callout}
+            calloutId={campaignId}
           />
-        </div>
-      );
-    },
-    undefined,
-    (fields) => onRemove(fields)
-  );
+        )}
+      </div>
+    ) : (
+      <div>
+        <CustomDropdownView
+          label="Callout"
+          field={fields.campaignId}
+          options={dropdownOptions}
+          onChange={(value) => {
+            const tagId = getTag(value);
+            fields.tagId.update(tagId);
+          }}
+        />
+      </div>
+    );
+  });
diff --git a/src/elements/callout/calloutDataTransformer.ts b/src/elements/callout/calloutDataTransformer.ts
@@ -6,6 +6,7 @@ import type { calloutFields } from "./Callout";
 export type ExternalCalloutFields = {
   campaignId: string | undefined;
   isNonCollapsible: string;
+  tagId: string | undefined;
 };
 
 export type ExternalCalloutData = {
@@ -21,11 +22,12 @@ export const transformElementIn: TransformIn<
   PartialEmbedData,
   typeof calloutFields
 > = ({ fields }) => {
-  const { campaignId, isNonCollapsible } = fields;
+  const { campaignId, isNonCollapsible, tagId } = fields;
 
   return {
     isNonCollapsible: isNonCollapsible === "true",
     campaignId: campaignId ?? undefinedDropdownValue,
+    tagId,
   };
 };
 
@@ -35,13 +37,15 @@ export const transformElementOut: TransformOut<
 > = ({
   isNonCollapsible,
   campaignId,
+  tagId,
 }: FieldNameToValueMap<typeof calloutFields>): ExternalCalloutData => {
   return {
     assets: [],
     fields: {
       isNonCollapsible: isNonCollapsible.toString(),
       campaignId:
         campaignId === undefinedDropdownValue ? undefined : campaignId,
+      tagId,
     },
   };
 };

diff --git a/src/renderers/react/customFieldViewComponents/CustomDropdownView.tsx b/src/renderers/react/customFieldViewComponents/CustomDropdownView.tsx
@@ -9,13 +9,15 @@ type CustomDropdownViewProps = {
   options?: Options;
   label: string;
   display?: "inline" | "block";
+  onChange?: (event: string) => void;
 };
 
 export const CustomDropdownView = ({
   field,
   options,
   label,
   display = "block",
+  onChange,
 }: CustomDropdownViewProps) => {
   const [selectedElement, setSelectedElement] = useCustomFieldState(field);
   return (
@@ -25,6 +27,7 @@ export const CustomDropdownView = ({
       selected={selectedElement}
       label={label}
       onChange={(event) => {
+        if (onChange) onChange(event.target.value);
         setSelectedElement(event.target.value);
       }}
       error={field.errors.map((e) => e.error).join(", ")}