chore: example refactor

openedx · Apr 15, 2024 · 5228272 · 5228272
1 parent 99d093d
commit 5228272
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/...iryAlertAndModal/data/expiryThresholds.js → ...ryAlertAndModal/data/expiryThresholds.jsx b/...iryAlertAndModal/data/expiryThresholds.js → ...ryAlertAndModal/data/expiryThresholds.jsx
@@ -46,34 +46,55 @@ 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,
   }),
   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.`)),
+      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,
   }),
   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>',
-      )),
+      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
@@ -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>
       )}
     </>