From 52282725640f8a61f88aefe1d0d7e4c432b08f71 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

---
 ...piryThresholds.js => expiryThresholds.jsx} | 37 +++++++++++++++----
 .../BudgetExpiryAlertAndModal/index.jsx       |  6 ++-
 2 files changed, 33 insertions(+), 10 deletions(-)
 rename src/components/BudgetExpiryAlertAndModal/data/{expiryThresholds.js => expiryThresholds.jsx} (70%)

diff --git a/src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.js b/src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.jsx
similarity index 70%
rename from src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.js
rename to src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.jsx
index ab8c384dac..e0db1a1f39 100644
--- a/src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.js
+++ b/src/components/BudgetExpiryAlertAndModal/data/expiryThresholds.jsx
@@ -46,11 +46,21 @@ const expiryThresholds = {
     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.',
+      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: parse(sanitizeHTML(`<p>Your Learner Credit plan expires ${date}. Contact support today to renew your plan and keep people learning.</p>`)),
+      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,
   }),
@@ -58,11 +68,16 @@ const expiryThresholds = {
     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.`)),
+      message: (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>`)),
+      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,
   }),
@@ -70,10 +85,16 @@ const expiryThresholds = {
     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>',
-      )),
+      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,
   }),
diff --git a/src/components/BudgetExpiryAlertAndModal/index.jsx b/src/components/BudgetExpiryAlertAndModal/index.jsx
index 44f232f50f..4aacb12e10 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,7 @@ const BudgetExpiryAlertAndModal = ({ enterpriseUUID, enterpriseFeatures }) => {
             </ActionRow>
           )}
         >
-          {modal.message}
+          <ModalMessage />
         </AlertModal>
       )}
     </>