From 500589d75374806a4e2e2cd379908ae0a8d73d9f Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Mon, 15 Apr 2024 16:08:18 -0400
Subject: [PATCH] chore: example refactor

---
 .../data/expiryThresholds.js                  |  82 -----------
 .../data/expiryThresholds.jsx                 | 139 ++++++++++++++++++
 .../BudgetExpiryAlertAndModal/index.jsx       |   7 +-
 3 files changed, 144 insertions(+), 84 deletions(-)
 delete mode 100644 src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.js
 create mode 100644 src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.jsx

diff --git a/src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.js b/src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.js
deleted file mode 100644
index ab8c384dac..0000000000
--- a/src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import sanitizeHTML from 'sanitize-html';
-import parse from 'html-react-parser';
-import { PLAN_EXPIRY_VARIANTS } from './constants';
-
-const expiryThresholds = {
-  120: ({ date }) => ({
-    notificationTemplate: {
-      title: 'Your Learner Credit plan expires soon',
-      variant: 'info',
-      message: `Your Learner Credit plan expires ${date}. Contact support today to renew your plan and keep people learning.`,
-      dismissible: true,
-    },
-    modalTemplate: {
-      title: 'Your plan expires soon',
-      message: parse(sanitizeHTML(`Your Learner Credit plan expires ${date}. Contact support today to renew your plan and keep people learning.`)),
-    },
-    variant: PLAN_EXPIRY_VARIANTS.expiring,
-  }),
-  90: ({ date }) => ({
-    notificationTemplate: {
-      title: 'Reminder: Your Learner Credit plan expires soon',
-      variant: 'info',
-      message: `Your Learner Credit plan expires ${date}. Contact support today to renew your plan and keep people learning.`,
-      dismissible: true,
-    },
-    modalTemplate: {
-      title: 'Reminder: Your plan expires soon',
-      message: parse(sanitizeHTML(`Your Learner Credit plan expires ${date}. Contact support today to renew your plan and keep people learning.`)),
-    },
-    variant: PLAN_EXPIRY_VARIANTS.expiring,
-  }),
-  60: ({ date }) => ({
-    notificationTemplate: {
-      title: `Your Learner Credit plan expires ${date}`,
-      variant: 'warning',
-      message: 'When your Learner Credit plan expires, you will no longer have access to administrative functions and the remaining balance of your budget(s) will be unusable. Contact support today to renew your plan.',
-      dismissible: true,
-    },
-    modalTemplate: {
-      title: `Your Learner Credit plan expires ${date}`,
-      message: parse(sanitizeHTML(`Your Learner Credit plan expires ${date}. Contact support today to renew your plan and keep people learning.`)),
-    },
-    variant: PLAN_EXPIRY_VARIANTS.expiring,
-  }),
-  30: ({ date }) => ({
-    notificationTemplate: {
-      title: 'Your Learner Credit plan expires in less than 30 days',
-      variant: 'danger',
-      message: 'When your plan expires you will lose access to administrative functions and the remaining balance of your plan’s budget(s) will be unusable. Contact support today to renew your plan.',
-    },
-    modalTemplate: {
-      title: 'Your Learner Credit plan expires in less than 30 days',
-      message: parse(sanitizeHTML(`<p>Your Learner Credit plan expires ${date}. Contact support today to renew your plan and keep people learning.</p>`)),
-    },
-    variant: PLAN_EXPIRY_VARIANTS.expiring,
-  }),
-  10: ({ date, days, hours }) => ({
-    notificationTemplate: {
-      title: `Reminder: Your Learner Credit plan expires ${date}`,
-      variant: 'danger',
-      message: parse(sanitizeHTML(`Your Learner Credit plan expires in <strong>${days} days and ${hours} hours</strong>. Contact support today to renew your plan.`)),
-    },
-    modalTemplate: {
-      title: `Reminder: Your Learner Credit plan expires ${date}`,
-      message: parse(sanitizeHTML(`<p>Your Learner Credit plan expires ${date}. Contact support today to renew your plan and keep people learning.</p>`)),
-    },
-    variant: PLAN_EXPIRY_VARIANTS.expiring,
-  }),
-  0: ({ date }) => ({
-    notificationTemplate: null,
-    modalTemplate: {
-      title: 'Your Learner Credit plan has expired',
-      message: parse(sanitizeHTML(
-        `<p>Your Learner Credit Plan expired on ${date}. You are no longer have access to administrative functions and the remaining balance of your plan's budget(s) are no longer available to spend</p>`
-        + '<p>Please contact your representative if you have any questions or concerns.</p>',
-      )),
-    },
-    variant: PLAN_EXPIRY_VARIANTS.expired,
-  }),
-};
-
-export default expiryThresholds;
diff --git a/src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.jsx b/src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.jsx
new file mode 100644
index 0000000000..f744d57adf
--- /dev/null
+++ b/src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.jsx
@@ -0,0 +1,139 @@
+import { MailtoLink } from '@edx/paragon';
+import { PLAN_EXPIRY_VARIANTS } from './constants';
+
+const expiryThresholds = {
+  120: ({ date }) => ({
+    notificationTemplate: {
+      title: 'Your Learner Credit plan expires soon',
+      variant: 'info',
+      message: ({ contactEmail }) => (
+        <p>
+          Your Learner Credit plan expires ${date}. Contact
+          {contactEmail ? <MailtoLink to={contactEmail}>support</MailtoLink> : 'support'} today
+          to renew your plan and keep people learning.
+        </p>
+      ),
+      dismissible: true,
+    },
+    modalTemplate: {
+      title: 'Your plan expires soon',
+      message: () => (
+        <p>
+          Your Learner Credit plan expires {date}. Contact support today to
+          renew your plan and keep people learning.
+        </p>
+      ),
+    },
+    variant: PLAN_EXPIRY_VARIANTS.expiring,
+  }),
+  90: ({ date }) => ({
+    notificationTemplate: {
+      title: 'Reminder: Your Learner Credit plan expires soon',
+      variant: 'info',
+      message: () => (
+        <p>
+          Your Learner Credit plan expires {date}. Contact support today
+          to renew your plan and keep people learning.
+        </p>
+      ),
+      dismissible: true,
+    },
+    modalTemplate: {
+      title: 'Reminder: Your plan expires soon',
+      message: () => (
+        <p>
+          Your Learner Credit plan expires {date}. Contact support today to
+          renew your plan and keep people learning.
+        </p>
+      ),
+    },
+    variant: PLAN_EXPIRY_VARIANTS.expiring,
+  }),
+  60: ({ date }) => ({
+    notificationTemplate: {
+      title: `Your Learner Credit plan expires ${date}`,
+      variant: 'warning',
+      message: () => (
+        <p>
+          When your Learner Credit plan expires, you will no longer have access to administrative
+          functions and the remaining balance of your budget(s) will be unusable. Contact support
+          today to renew your plan.
+        </p>
+      ),
+      dismissible: true,
+    },
+    modalTemplate: {
+      title: `Your Learner Credit plan expires ${date}`,
+      message: () => (
+        <p>
+          Your Learner Credit plan expires {date}. Contact support
+          today to renew your plan and keep people learning.
+        </p>
+      ),
+    },
+    variant: PLAN_EXPIRY_VARIANTS.expiring,
+  }),
+  30: ({ date }) => ({
+    notificationTemplate: {
+      title: 'Your Learner Credit plan expires in less than 30 days',
+      variant: 'danger',
+      message: () => (
+        <p>
+          When your plan expires you will lose access to administrative functions and the remaining
+          balance of your plan&apos;s budget(s) will be unusable. Contact support today to renew your plan.
+        </p>
+      ),
+    },
+    modalTemplate: {
+      title: 'Your Learner Credit plan expires in less than 30 days',
+      message: () => (
+        <p>
+          Your Learner Credit plan expires {date}. Contact support today
+          to renew your plan and keep people learning.
+        </p>
+      ),
+    },
+    variant: PLAN_EXPIRY_VARIANTS.expiring,
+  }),
+  10: ({ date, days, hours }) => ({
+    notificationTemplate: {
+      title: `Reminder: Your Learner Credit plan expires ${date}`,
+      variant: 'danger',
+      message: () => (
+        <p>
+          Your Learner Credit plan expires in <strong>{days} days and {hours} hours</strong>. Contact
+          support today to renew your plan.
+        </p>
+      ),
+    },
+    modalTemplate: {
+      title: `Reminder: Your Learner Credit plan expires ${date}`,
+      message: () => (
+        <p>
+          Your Learner Credit plan expires {date}. Contact support today to
+          renew your plan and keep people learning.
+        </p>
+      ),
+    },
+    variant: PLAN_EXPIRY_VARIANTS.expiring,
+  }),
+  0: ({ date }) => ({
+    notificationTemplate: null,
+    modalTemplate: {
+      title: 'Your Learner Credit plan has expired',
+      message: () => (
+        <>
+          <p>
+            Your Learner Credit Plan expired on {date}. You are no longer have
+            access to administrative functions and the remaining balance of your
+            plan&apos;s budget(s) are no longer available to spend
+          </p>
+          <p>Please contact support if you have any questions or concerns.</p>
+        </>
+      ),
+    },
+    variant: PLAN_EXPIRY_VARIANTS.expired,
+  }),
+};
+
+export default expiryThresholds;
diff --git a/src/components/BudgetExpiryAlertAndModal/index.jsx b/src/components/BudgetExpiryAlertAndModal/index.jsx
index 44f232f50f..41aed5e1f8 100644
--- a/src/components/BudgetExpiryAlertAndModal/index.jsx
+++ b/src/components/BudgetExpiryAlertAndModal/index.jsx
@@ -54,6 +54,8 @@ const BudgetExpiryAlertAndModal = ({ enterpriseUUID, enterpriseFeatures }) => {
     alertOpen,
     alertClose,
   );
+  const NotificationMessage = notification?.message;
+  const ModalMessage = modal?.message;
 
   const trackEventMetadata = useMemo(() => {
     if (modal === null && notification === null) { return {}; }
@@ -88,7 +90,7 @@ const BudgetExpiryAlertAndModal = ({ enterpriseUUID, enterpriseFeatures }) => {
           data-testid="expiry-notification-alert"
         >
           <Alert.Heading>{notification.title}</Alert.Heading>
-          <p>{notification.message}</p>
+          <NotificationMessage />
         </Alert>
       )}
 
@@ -116,7 +118,8 @@ const BudgetExpiryAlertAndModal = ({ enterpriseUUID, enterpriseFeatures }) => {
             </ActionRow>
           )}
         >
-          {modal.message}
+          {/* <ModalMessage contactEmail={getContactEmail(enterpriseCustomer)} */}
+          <ModalMessage />
         </AlertModal>
       )}
     </>