feat: (PON-326) updated localize date for billing

.env

@@ -38,3 +38,4 @@ STRIPE_RESPONSE_URL=null
 STRIPE_DEFERRED_INTENT_BETA_FLAG=elements_enable_deferred_intent_beta_1
 SUBSCRIPTIONS_BASE_URL=null
 ENABLE_B2C_SUBSCRIPTIONS=false
+SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=null

.env.development

@@ -36,3 +36,4 @@ STRIPE_RESPONSE_URL=http://localhost:18130/payment/stripe/checkout/
 STRIPE_DEFERRED_INTENT_BETA_FLAG=elements_enable_deferred_intent_beta_1
 SUBSCRIPTIONS_BASE_URL='http://localhost:18750'
 ENABLE_B2C_SUBSCRIPTIONS=true
+SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=https://support.edx.org/hc/articles/12975352138007

.env.development-stage

@@ -36,3 +36,4 @@ STRIPE_RESPONSE_URL=http://localhost:18130/payment/stripe/checkout/
 STRIPE_DEFERRED_INTENT_BETA_FLAG=elements_enable_deferred_intent_beta_1
 SUBSCRIPTIONS_BASE_URL='http://localhost:18750'
 ENABLE_B2C_SUBSCRIPTIONS=false
+SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=https://support.edx.org/hc/articles/12975352138007

.env.test

@@ -36,3 +36,4 @@ STRIPE_RESPONSE_URL=http://localhost:18130/payment/stripe/checkout/
 STRIPE_DEFERRED_INTENT_BETA_FLAG=elements_enable_deferred_intent_beta_1
 SUBSCRIPTIONS_BASE_URL='http://localhost:18750'
 ENABLE_B2C_SUBSCRIPTIONS=false
+SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=https://support.edx.org/hc/articles/12975352138007

package.json

@@ -50,6 +50,7 @@
     "lodash.camelcase": "^4.3.0",
     "lodash.snakecase": "^4.1.1",
     "lodash.without": "^4.4.0",
+    "moment-timezone": "^0.5.43",
     "prop-types": "^15.8.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",

src/index.jsx

@@ -70,6 +70,7 @@ mergeConfig({
   STRIPE_DEFERRED_INTENT_BETA_FLAG: process.env.STRIPE_DEFERRED_INTENT_BETA_FLAG,
   SUBSCRIPTIONS_BASE_URL: process.env.SUBSCRIPTIONS_BASE_URL,
   ENABLE_B2C_SUBSCRIPTIONS: process.env.ENABLE_B2C_SUBSCRIPTIONS,
+  SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL: process.env.SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL,
 });
 
 subscribe(APP_READY, () => {

src/payment/__factories__/userAccount.factory.js

@@ -10,6 +10,7 @@ Factory.define('userAccount')
     name: null,
     country: null,
     socialLinks: null,
+    timeZone: 'America/Los_Angeles',
     profileImage: {
       imageUrlMedium: 'http://localhost/image_medium.jpg',
       imageUrlLarge: 'http://localhost/image_large.jpg',

src/subscription/SubscriptionPage.test.jsx

@@ -64,8 +64,6 @@ describe('<SubscriptionPage />', () => {
     expect(screen.getAllByText('Verified Certificate')).toHaveLength(2);
     // verify that Checkout Form fields are present in the DOM
     expect(screen.queryAllByText('Last Name (required)')).toHaveLength(1);
-    // verify that MonthlySubscriptionNotification is present in the DOM
-    expect(screen.queryAllByText('You will be charged $55 USD on April 21, 2025, then monthly until you cancel your subscription.')).toHaveLength(1);
   });
 
   it('should not render the Subscription details when error_code is present', () => {

src/subscription/__factories__/subscription.factory.js

@@ -20,7 +20,7 @@ Factory.define('subscription')
     total_price: 0,
     currency: 'USD',
     paymentMethod: 'stripe',
-    trial_end: 'April 21, 2025',
+    trial_end: '2023-06-29T13:05:04Z',
     error_code: null,
   })
   .attr('products', ['numProducts', 'productType'], (numProducts, productType) => {

src/subscription/checkout/SubscriptionCheckout.test.jsx

@@ -89,9 +89,7 @@ describe('<SubscriptionCheckout />', () => {
 
     // verify that Checkout Form fields are present in the DOM
     expect(screen.queryByText('Last Name (required)')).toBeDefined();
-    // verify that MonthlySubscriptionNotification is present in the DOM
-    expect(
-      screen.queryByText('You’ll be charged $55.00 USD on April 21, 2025 then every 31 days until you cancel your subscription.'),
-    ).toBeDefined();
+    expect(screen.queryByLabelText('City')).toBeDefined();
+    expect(screen.queryByLabelText('Country')).toBeDefined();
   });
 });

src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap

@@ -1450,7 +1450,7 @@ exports[`<SubscriptionCheckout /> should render the <SubscriptionCheckout/> with
         class="d-flex justify-content-start pt-3 monthly-legal-notification"
       >
         <p>
-          You will be charged $55 USD on April 21, 2025, then monthly until you cancel your subscription.
+          You will be charged $55 USD on June 29, 2023 (PDT), then monthly until you cancel your subscription.
         </p>
       </div>
       <div

src/subscription/checkout/monthly-billing-notification/MonthlyBillingNotification.jsx

@@ -1,33 +1,35 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useSelector } from 'react-redux';
-import { useIntl, defineMessages } from '@edx/frontend-platform/i18n';
-import { detailsSelector } from '../../data/details/selectors';
+import {
+  useIntl,
+  getLocale,
+} from '@edx/frontend-platform/i18n';
+
+import moment from 'moment-timezone';
+
+import { AppContext } from '@edx/frontend-platform/react';
 import { getPropsToRemoveFractionZeroDigits } from '../../../payment/data/utils';
+import { detailsSelector } from '../../data/details/selectors';
 
-const messages = defineMessages({
-  'subscription.checkout.billing.notification': {
-    id: 'subscription.checkout.billing.notification',
-    defaultMessage: 'You will be charged {price} {currency} {trialEnd} then monthly until you cancel your subscription.',
-    description: 'Subscription monthly billing notification for Users that they will be charged every 31 days for this subscription.',
-  },
-  'subscription.checkout.billing.trial.date': {
-    id: 'subscription.checkout.billing.trial.date',
-    defaultMessage: 'on {date},',
-    description: 'Subscription legal trialing helping text.',
-  },
-  'subscription.checkout.billing.resubscribe.date': {
-    id: 'subscription.checkout.billing.resubscribe.date',
-    defaultMessage: 'today,',
-    description: 'Subscription legal resubscribe helping text.',
-  },
-});
+import messages from './messages';
 
 const MonthlyBillingNotification = () => {
   const {
     price, currency, trialEnd, isTrialEligible,
   } = useSelector(detailsSelector);
   const intl = useIntl();
-  const trialDateHelpingText = intl.formatMessage(messages['subscription.checkout.billing.trial.date'], { date: trialEnd });
+  const { authenticatedUser } = useContext(AppContext);
+
+  const userTimezone = (
+    authenticatedUser.timeZone || moment.tz.guess() || 'UTC'
+  );
+  const date = moment(trialEnd);
+  const localizeDate = date.tz(userTimezone);
+
+  // Format the date as "June 28, 2022 (PKT)"
+  const formattedDate = localizeDate.locale(getLocale()).format('MMMM D, YYYY (z)');
+
+  const trialDateHelpingText = intl.formatMessage(messages['subscription.checkout.billing.trial.date'], { date: formattedDate });
   const resubscribeDateHelpingText = intl.formatMessage(messages['subscription.checkout.billing.resubscribe.date'], {});
 
   return (

src/subscription/checkout/monthly-billing-notification/messages.js

@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'subscription.checkout.billing.notification': {
+    id: 'subscription.checkout.billing.notification',
+    defaultMessage: 'You will be charged {price} {currency} {trialEnd} then monthly until you cancel your subscription.',
+    description: 'Subscription monthly billing notification for Users that they will be charged every 31 days for this subscription.',
+  },
+  'subscription.checkout.billing.trial.date': {
+    id: 'subscription.checkout.billing.trial.date',
+    defaultMessage: 'on {date},',
+    description: 'Subscription legal trialing helping text.',
+  },
+  'subscription.checkout.billing.resubscribe.date': {
+    id: 'subscription.checkout.billing.resubscribe.date',
+    defaultMessage: 'today,',
+    description: 'Subscription legal resubscribe helping text.',
+  },
+});
+
+export default messages;

src/subscription/details/legal/SubscriptionLegal.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Hyperlink } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
+
 import messages from './messages';
 import { getPropsToRemoveFractionZeroDigits } from '../../../payment/data/utils';
 
@@ -13,7 +15,7 @@ const SubscriptionLegal = ({
   const intl = useIntl();
   const supportLink = (
     <Hyperlink
-      destination="https://support.edx.org/hc/en-us/articles/12975352138007"
+      destination={getConfig().SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL}
     >
       {intl.formatMessage(messages['subscription.details.order.legal.link'])}
     </Hyperlink>