feat: add translations for subscription state badges (#305)

openedx · Jun 16, 2023 · 23fcf91 · 23fcf91
1 parent 0825ca6
commit 23fcf91
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 31 deletions.
diff --git a/src/orders-and-subscriptions/__snapshots__/OrdersAndSubscriptionsPage.test.jsx.snap b/src/orders-and-subscriptions/__snapshots__/OrdersAndSubscriptionsPage.test.jsx.snap
@@ -270,7 +270,7 @@ exports[`<OrdersAndSubscriptions /> Renders correctly in various states renders
             <span
               className="text-capitalize badge badge-warning"
             >
-              trial
+              Trial
             </span>
           </div>
           <p
@@ -301,7 +301,7 @@ exports[`<OrdersAndSubscriptions /> Renders correctly in various states renders
             <span
               className="text-capitalize badge badge-success"
             >
-              active
+              Active
             </span>
           </div>
           <p
@@ -332,7 +332,7 @@ exports[`<OrdersAndSubscriptions /> Renders correctly in various states renders
             <span
               className="text-capitalize badge badge-light"
             >
-              inactive
+              Inactive
             </span>
           </div>
           <p
@@ -363,7 +363,7 @@ exports[`<OrdersAndSubscriptions /> Renders correctly in various states renders
             <span
               className="text-capitalize badge badge-light"
             >
-              inactive
+              Inactive
             </span>
           </div>
           <p

diff --git a/src/subscriptions/SubscriptionCardsView.jsx b/src/subscriptions/SubscriptionCardsView.jsx
@@ -1,43 +1,60 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Badge, Card, Hyperlink } from '@edx/paragon';
 
+import messages from './SubscriptionCardsView.messages';
+
 const STATUS_VARIANT_MAP = {
   active: 'success',
   trial: 'warning',
   inactive: 'light',
 };
 
-const SubscriptionCardsView = ({ subscriptions }) => (
-  <div className="section section-gap-lg">
-    {subscriptions.map(({
-      uuid,
-      title,
-      organizations,
-      status,
-    }) => (
-      <Hyperlink
-        key={uuid + status}
-        destination={`${getConfig().LMS_BASE_URL}/dashboard/programs/${uuid}`}
-      >
+const STATUS_MESSAGE_ID_MAP = {
+  active: 'ecommerce.order.history.subscriptions.badge.active',
+  trial: 'ecommerce.order.history.subscriptions.badge.trial',
+  inactive: 'ecommerce.order.history.subscriptions.badge.inactive',
+};
+
+const SubscriptionCardsView = ({ subscriptions }) => {
+  const { formatMessage } = useIntl();
+
+  const renderItem = ({
+    uuid,
+    title,
+    organizations,
+    status,
+  }) => {
+    const url = getConfig().LMS_BASE_URL;
+
+    const key = uuid + status;
+    const destination = `${url}/dashboard/programs/${uuid}`;
+    const variant = STATUS_VARIANT_MAP[status];
+    const message = STATUS_MESSAGE_ID_MAP[status];
+
+    return (
+      <Hyperlink key={key} destination={destination}>
         <Card className="bg-light-200 p-3">
           <div className="section flex-column-reverse flex-sm-row align-items-start align-items-sm-center">
             <h3 className="text-info-500 m-0">{title}</h3>
-            <Badge
-              className="text-capitalize"
-              variant={STATUS_VARIANT_MAP[status]}
-            >
-              {status}
+            <Badge className="text-capitalize" variant={variant}>
+              {message ? formatMessage(messages[message]) : status}
             </Badge>
           </div>
           <p className="small text-gray-500 m-0">{organizations.join(', ')}</p>
         </Card>
       </Hyperlink>
-    ))}
-  </div>
-);
+    );
+  };
+
+  return (
+    <div className="section section-gap-lg">
+      {subscriptions.map(renderItem)}
+    </div>
+  );
+};
 
 SubscriptionCardsView.propTypes = {
   subscriptions: PropTypes.arrayOf(

diff --git a/src/subscriptions/SubscriptionCardsView.messages.js b/src/subscriptions/SubscriptionCardsView.messages.js
@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'ecommerce.order.history.subscriptions.badge.active': {
+    id: 'ecommerce.order.history.subscriptions.badge.active',
+    defaultMessage: 'Active',
+    description: 'Badge for active subscriptions',
+  },
+  'ecommerce.order.history.subscriptions.badge.trial': {
+    id: 'ecommerce.order.history.subscriptions.badge.trial',
+    defaultMessage: 'Trial',
+    description: 'Badge for trial subscriptions',
+  },
+  'ecommerce.order.history.subscriptions.badge.inactive': {
+    id: 'ecommerce.order.history.subscriptions.badge.inactive',
+    defaultMessage: 'Inactive',
+    description: 'Badge for inactive subscriptions',
+  },
+});
+
+export default messages;
diff --git a/src/subscriptions/__snapshots__/Subscriptions.test.jsx.snap b/src/subscriptions/__snapshots__/Subscriptions.test.jsx.snap
@@ -77,7 +77,7 @@ exports[`<Subscriptions /> Renders correctly in various states renders with no a
           <span
             className="text-capitalize badge badge-light"
           >
-            inactive
+            Inactive
           </span>
         </div>
         <p
@@ -108,7 +108,7 @@ exports[`<Subscriptions /> Renders correctly in various states renders with no a
           <span
             className="text-capitalize badge badge-light"
           >
-            inactive
+            Inactive
           </span>
         </div>
         <p
@@ -254,7 +254,7 @@ exports[`<Subscriptions /> Renders correctly in various states renders with subs
           <span
             className="text-capitalize badge badge-warning"
           >
-            trial
+            Trial
           </span>
         </div>
         <p
@@ -285,7 +285,7 @@ exports[`<Subscriptions /> Renders correctly in various states renders with subs
           <span
             className="text-capitalize badge badge-success"
           >
-            active
+            Active
           </span>
         </div>
         <p
@@ -316,7 +316,7 @@ exports[`<Subscriptions /> Renders correctly in various states renders with subs
           <span
             className="text-capitalize badge badge-light"
           >
-            inactive
+            Inactive
           </span>
         </div>
         <p
@@ -347,7 +347,7 @@ exports[`<Subscriptions /> Renders correctly in various states renders with subs
           <span
             className="text-capitalize badge badge-light"
           >
-            inactive
+            Inactive
           </span>
         </div>
         <p