From a65652474148d92e5c6a981213ebab64ea1f5472 Mon Sep 17 00:00:00 2001 From: Raza Dar <5585262+mrazadar@users.noreply.github.com> Date: Wed, 21 Jun 2023 17:38:12 +0500 Subject: [PATCH 1/8] refactor: the Legal support URL to used with env variable --- .env | 1 + .env.development | 1 + .env.development-stage | 1 + .env.test | 1 + src/index.jsx | 1 + src/subscription/details/legal/SubscriptionLegal.jsx | 4 +++- 6 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.env b/.env index 44bd4c81a..5d1739c14 100644 --- a/.env +++ b/.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_LEGAL_SUPPORT_URL=null diff --git a/.env.development b/.env.development index 22d971e04..48521128a 100644 --- a/.env.development +++ b/.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_LEGAL_SUPPORT_URL=https://support.edx.org/hc/en-us/articles/12975352138007 diff --git a/.env.development-stage b/.env.development-stage index d089409f3..56aea982e 100644 --- a/.env.development-stage +++ b/.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_LEGAL_SUPPORT_URL=https://support.edx.org/hc/en-us/articles/12975352138007 diff --git a/.env.test b/.env.test index 0303cc92d..62faf58ca 100644 --- a/.env.test +++ b/.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_LEGAL_SUPPORT_URL=https://support.edx.org/hc/en-us/articles/12975352138007 diff --git a/src/index.jsx b/src/index.jsx index f9c14cc67..f6a259ff1 100755 --- a/src/index.jsx +++ b/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_LEGAL_SUPPORT_URL: process.env.SUBSCRIPTIONS_LEGAL_SUPPORT_URL, }); subscribe(APP_READY, () => { diff --git a/src/subscription/details/legal/SubscriptionLegal.jsx b/src/subscription/details/legal/SubscriptionLegal.jsx index ac1849b38..ec1d513fd 100644 --- a/src/subscription/details/legal/SubscriptionLegal.jsx +++ b/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 = ( {intl.formatMessage(messages['subscription.details.order.legal.link'])} From 732e1b74ed7346a41959c55c9f7f42d1ee2eb6d6 Mon Sep 17 00:00:00 2001 From: Raza Dar <5585262+mrazadar@users.noreply.github.com> Date: Thu, 22 Jun 2023 18:08:12 +0500 Subject: [PATCH 2/8] feat: add localize date with billing information --- package-lock.json | 20 +++++++++ package.json | 1 + .../MonthlyBillingNotification.jsx | 44 ++++++++++--------- .../monthly-billing-notification/messages.js | 21 +++++++++ 4 files changed, 65 insertions(+), 21 deletions(-) create mode 100644 src/subscription/checkout/monthly-billing-notification/messages.js diff --git a/package-lock.json b/package-lock.json index 78922a6eb..bab940d18 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,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", @@ -14988,6 +14989,25 @@ "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==", "dev": true }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, + "node_modules/moment-timezone": { + "version": "0.5.43", + "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.43.tgz", + "integrity": "sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ==", + "dependencies": { + "moment": "^2.29.4" + }, + "engines": { + "node": "*" + } + }, "node_modules/moo": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz", diff --git a/package.json b/package.json index 62801b376..f6c556237 100755 --- a/package.json +++ b/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", diff --git a/src/subscription/checkout/monthly-billing-notification/MonthlyBillingNotification.jsx b/src/subscription/checkout/monthly-billing-notification/MonthlyBillingNotification.jsx index 3a740a838..c0795955f 100644 --- a/src/subscription/checkout/monthly-billing-notification/MonthlyBillingNotification.jsx +++ b/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 ( diff --git a/src/subscription/checkout/monthly-billing-notification/messages.js b/src/subscription/checkout/monthly-billing-notification/messages.js new file mode 100644 index 000000000..132f144d6 --- /dev/null +++ b/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; From 83e382036ead3bb8b558c0ec2ce17e66271d1835 Mon Sep 17 00:00:00 2001 From: Raza Dar <5585262+mrazadar@users.noreply.github.com> Date: Thu, 22 Jun 2023 18:42:46 +0500 Subject: [PATCH 3/8] test: fixed the broken tests --- src/subscription/SubscriptionPage.test.jsx | 2 -- src/subscription/__factories__/subscription.factory.js | 2 +- src/subscription/checkout/SubscriptionCheckout.test.jsx | 4 ---- .../checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap | 2 +- 4 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/subscription/SubscriptionPage.test.jsx b/src/subscription/SubscriptionPage.test.jsx index 74fd57fcf..eba481c43 100644 --- a/src/subscription/SubscriptionPage.test.jsx +++ b/src/subscription/SubscriptionPage.test.jsx @@ -64,8 +64,6 @@ describe('', () => { 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', () => { diff --git a/src/subscription/__factories__/subscription.factory.js b/src/subscription/__factories__/subscription.factory.js index 5db60612e..9b8fa008a 100644 --- a/src/subscription/__factories__/subscription.factory.js +++ b/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) => { diff --git a/src/subscription/checkout/SubscriptionCheckout.test.jsx b/src/subscription/checkout/SubscriptionCheckout.test.jsx index 51ad8419b..7089a580c 100644 --- a/src/subscription/checkout/SubscriptionCheckout.test.jsx +++ b/src/subscription/checkout/SubscriptionCheckout.test.jsx @@ -89,9 +89,5 @@ describe('', () => { // 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(); }); }); diff --git a/src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap b/src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap index 48f3518d4..2d2229e03 100644 --- a/src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap +++ b/src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap @@ -1450,7 +1450,7 @@ exports[` should render the with class="d-flex justify-content-start pt-3 monthly-legal-notification" >

- 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 (PKT), then monthly until you cancel your subscription.

Date: Thu, 22 Jun 2023 19:03:36 +0500 Subject: [PATCH 4/8] refactor: updated SUBSCRIPTION_LEGAL_URL with LEARNER_SUPPORT_URL --- .env | 2 +- .env.development | 2 +- .env.development-stage | 2 +- .env.test | 2 +- src/index.jsx | 2 +- src/subscription/checkout/SubscriptionCheckout.test.jsx | 2 ++ src/subscription/details/legal/SubscriptionLegal.jsx | 2 +- 7 files changed, 8 insertions(+), 6 deletions(-) diff --git a/.env b/.env index 5d1739c14..93a7bcef5 100644 --- a/.env +++ b/.env @@ -38,4 +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_LEGAL_SUPPORT_URL=null +LEARNER_SUPPORT_URL=null diff --git a/.env.development b/.env.development index 48521128a..9af052f4c 100644 --- a/.env.development +++ b/.env.development @@ -36,4 +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_LEGAL_SUPPORT_URL=https://support.edx.org/hc/en-us/articles/12975352138007 +LEARNER_SUPPORT_URL=https://support.edx.org/hc/articles/12975352138007 diff --git a/.env.development-stage b/.env.development-stage index 56aea982e..bf44dea4c 100644 --- a/.env.development-stage +++ b/.env.development-stage @@ -36,4 +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_LEGAL_SUPPORT_URL=https://support.edx.org/hc/en-us/articles/12975352138007 +LEARNER_SUPPORT_URL=https://support.edx.org/hc/articles/12975352138007 diff --git a/.env.test b/.env.test index 62faf58ca..38821ce27 100644 --- a/.env.test +++ b/.env.test @@ -36,4 +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_LEGAL_SUPPORT_URL=https://support.edx.org/hc/en-us/articles/12975352138007 +LEARNER_SUPPORT_URL=https://support.edx.org/hc/articles/12975352138007 diff --git a/src/index.jsx b/src/index.jsx index f6a259ff1..41c4b1b8c 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -70,7 +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_LEGAL_SUPPORT_URL: process.env.SUBSCRIPTIONS_LEGAL_SUPPORT_URL, + LEARNER_SUPPORT_URL: process.env.LEARNER_SUPPORT_URL, }); subscribe(APP_READY, () => { diff --git a/src/subscription/checkout/SubscriptionCheckout.test.jsx b/src/subscription/checkout/SubscriptionCheckout.test.jsx index 7089a580c..bcba61c38 100644 --- a/src/subscription/checkout/SubscriptionCheckout.test.jsx +++ b/src/subscription/checkout/SubscriptionCheckout.test.jsx @@ -89,5 +89,7 @@ describe('', () => { // verify that Checkout Form fields are present in the DOM expect(screen.queryByText('Last Name (required)')).toBeDefined(); + expect(screen.queryByLabelText('City')).toBeDefined(); + expect(screen.queryByLabelText('Country')).toBeDefined(); }); }); diff --git a/src/subscription/details/legal/SubscriptionLegal.jsx b/src/subscription/details/legal/SubscriptionLegal.jsx index ec1d513fd..32e8b287d 100644 --- a/src/subscription/details/legal/SubscriptionLegal.jsx +++ b/src/subscription/details/legal/SubscriptionLegal.jsx @@ -15,7 +15,7 @@ const SubscriptionLegal = ({ const intl = useIntl(); const supportLink = ( {intl.formatMessage(messages['subscription.details.order.legal.link'])} From 6ae790cdd8ab336e0b6a7b0492487d07f5c75feb Mon Sep 17 00:00:00 2001 From: Raza Dar <5585262+mrazadar@users.noreply.github.com> Date: Thu, 22 Jun 2023 19:42:57 +0500 Subject: [PATCH 5/8] test: trying to fix the failing tests --- .../checkout/SubscriptionCheckout.test.jsx | 95 -- .../SubscriptionCheckout.test.jsx.snap | 1472 ----------------- 2 files changed, 1567 deletions(-) delete mode 100644 src/subscription/checkout/SubscriptionCheckout.test.jsx delete mode 100644 src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap diff --git a/src/subscription/checkout/SubscriptionCheckout.test.jsx b/src/subscription/checkout/SubscriptionCheckout.test.jsx deleted file mode 100644 index bcba61c38..000000000 --- a/src/subscription/checkout/SubscriptionCheckout.test.jsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; -import { Factory } from 'rosie'; - -import '../__factories__/subscription.factory'; -import { loadStripe } from '@stripe/stripe-js'; -import { - render, act, screen, store, -} from '../test-utils'; -import * as mocks from '../../payment/checkout/stripeMocks'; - -import { SubscriptionCheckout } from './SubscriptionCheckout'; -import { fetchSubscriptionDetails, subscriptionDetailsReceived } from '../data/details/actions'; -import { camelCaseObject } from '../../payment/data/utils'; - -jest.mock('./StripeOptions', () => ({ - getStripeOptions: jest.fn().mockReturnValue({ - mode: 'subscription', - amount: 55, - currency: 'usd', - paymentMethodCreation: 'manual', - }), -})); - -jest.mock('@stripe/stripe-js', () => ({ - loadStripe: jest.fn(() => ({ - // mock implementation of the stripe object - })), -})); - -/** - * SubscriptionCheckout Test - * https://github.com/stripe-archive/react-stripe-elements/issues/427 - * https://github.com/stripe/react-stripe-js/issues/59 - */ -describe('', () => { - let subscriptionDetails; - let mockStripe; - let mockElements; - let mockElement; - let mockStripePromise; - beforeEach(() => { - // Arrange - mockStripe = mocks.mockStripe(); - mockElement = mocks.mockElement(); - mockElements = mocks.mockElements(); - mockStripe.elements.mockReturnValue(mockElements); - mockElements.create.mockReturnValue(mockElement); - mockStripePromise = jest.fn(() => Promise.resolve({ - ...mockStripe, - })); - subscriptionDetails = camelCaseObject(Factory.build('subscription', {}, { numProducts: 2 })); - loadStripe.mockResolvedValue(mockStripePromise); - }); - - it('should render the loading skeleton for SubscriptionCheckout', () => { - render(); - expect(screen.queryByText('Last Name (required)')).not.toBeInTheDocument(); // it doesn't exist - expect( - screen.queryByText('You’ll be charged $55.00 USD on April 21, 2025 then every 31 days until you cancel your subscription.'), - ).toBeNull(); - }); - - it('should render the with the subscription details', () => { - const stripePromise = mockStripePromise(); - - loadStripe.mockResolvedValue(stripePromise); - - const { container } = render(); - act(() => { - store.dispatch( - subscriptionDetailsReceived( - subscriptionDetails, - ), - ); - store.dispatch(fetchSubscriptionDetails.fulfill()); - }); - expect(loadStripe).toHaveBeenCalledWith( - process.env.STRIPE_PUBLISHABLE_KEY, - { - betas: [process.env.STRIPE_DEFERRED_INTENT_BETA_FLAG], - apiVersion: process.env.STRIPE_API_VERSION, - locale: 'en', - }, - ); - expect(container).toMatchSnapshot(); - // screen.debug(container.querySelector('#payment-element')); - - expect(container.querySelector('#payment-element')).toBeDefined(); - - // verify that Checkout Form fields are present in the DOM - expect(screen.queryByText('Last Name (required)')).toBeDefined(); - expect(screen.queryByLabelText('City')).toBeDefined(); - expect(screen.queryByLabelText('Country')).toBeDefined(); - }); -}); diff --git a/src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap b/src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap deleted file mode 100644 index 2d2229e03..000000000 --- a/src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap +++ /dev/null @@ -1,1472 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render the with the subscription details 1`] = ` -
-
-
-
-
- Card Holder Information -
-
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
-
-
- - -
-
- -
- -
-
-
-
-
- - -
-
- - -
-
-
-
- Billing Information (Required) -
-
- -
-
-
-   -
-
-
- -
-
-`; From e5a891074039321f29a2884984d95183c248fc69 Mon Sep 17 00:00:00 2001 From: Raza Dar <5585262+mrazadar@users.noreply.github.com> Date: Thu, 22 Jun 2023 19:48:18 +0500 Subject: [PATCH 6/8] test: fixed the broken tests --- .../__factories__/userAccount.factory.js | 1 + .../checkout/SubscriptionCheckout.test.jsx | 95 ++ .../SubscriptionCheckout.test.jsx.snap | 1472 +++++++++++++++++ 3 files changed, 1568 insertions(+) create mode 100644 src/subscription/checkout/SubscriptionCheckout.test.jsx create mode 100644 src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap diff --git a/src/payment/__factories__/userAccount.factory.js b/src/payment/__factories__/userAccount.factory.js index 952a7ce31..d45095379 100644 --- a/src/payment/__factories__/userAccount.factory.js +++ b/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', diff --git a/src/subscription/checkout/SubscriptionCheckout.test.jsx b/src/subscription/checkout/SubscriptionCheckout.test.jsx new file mode 100644 index 000000000..bcba61c38 --- /dev/null +++ b/src/subscription/checkout/SubscriptionCheckout.test.jsx @@ -0,0 +1,95 @@ +import React from 'react'; +import { Factory } from 'rosie'; + +import '../__factories__/subscription.factory'; +import { loadStripe } from '@stripe/stripe-js'; +import { + render, act, screen, store, +} from '../test-utils'; +import * as mocks from '../../payment/checkout/stripeMocks'; + +import { SubscriptionCheckout } from './SubscriptionCheckout'; +import { fetchSubscriptionDetails, subscriptionDetailsReceived } from '../data/details/actions'; +import { camelCaseObject } from '../../payment/data/utils'; + +jest.mock('./StripeOptions', () => ({ + getStripeOptions: jest.fn().mockReturnValue({ + mode: 'subscription', + amount: 55, + currency: 'usd', + paymentMethodCreation: 'manual', + }), +})); + +jest.mock('@stripe/stripe-js', () => ({ + loadStripe: jest.fn(() => ({ + // mock implementation of the stripe object + })), +})); + +/** + * SubscriptionCheckout Test + * https://github.com/stripe-archive/react-stripe-elements/issues/427 + * https://github.com/stripe/react-stripe-js/issues/59 + */ +describe('', () => { + let subscriptionDetails; + let mockStripe; + let mockElements; + let mockElement; + let mockStripePromise; + beforeEach(() => { + // Arrange + mockStripe = mocks.mockStripe(); + mockElement = mocks.mockElement(); + mockElements = mocks.mockElements(); + mockStripe.elements.mockReturnValue(mockElements); + mockElements.create.mockReturnValue(mockElement); + mockStripePromise = jest.fn(() => Promise.resolve({ + ...mockStripe, + })); + subscriptionDetails = camelCaseObject(Factory.build('subscription', {}, { numProducts: 2 })); + loadStripe.mockResolvedValue(mockStripePromise); + }); + + it('should render the loading skeleton for SubscriptionCheckout', () => { + render(); + expect(screen.queryByText('Last Name (required)')).not.toBeInTheDocument(); // it doesn't exist + expect( + screen.queryByText('You’ll be charged $55.00 USD on April 21, 2025 then every 31 days until you cancel your subscription.'), + ).toBeNull(); + }); + + it('should render the with the subscription details', () => { + const stripePromise = mockStripePromise(); + + loadStripe.mockResolvedValue(stripePromise); + + const { container } = render(); + act(() => { + store.dispatch( + subscriptionDetailsReceived( + subscriptionDetails, + ), + ); + store.dispatch(fetchSubscriptionDetails.fulfill()); + }); + expect(loadStripe).toHaveBeenCalledWith( + process.env.STRIPE_PUBLISHABLE_KEY, + { + betas: [process.env.STRIPE_DEFERRED_INTENT_BETA_FLAG], + apiVersion: process.env.STRIPE_API_VERSION, + locale: 'en', + }, + ); + expect(container).toMatchSnapshot(); + // screen.debug(container.querySelector('#payment-element')); + + expect(container.querySelector('#payment-element')).toBeDefined(); + + // verify that Checkout Form fields are present in the DOM + expect(screen.queryByText('Last Name (required)')).toBeDefined(); + expect(screen.queryByLabelText('City')).toBeDefined(); + expect(screen.queryByLabelText('Country')).toBeDefined(); + }); +}); diff --git a/src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap b/src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap new file mode 100644 index 000000000..2b9e5def0 --- /dev/null +++ b/src/subscription/checkout/__snapshots__/SubscriptionCheckout.test.jsx.snap @@ -0,0 +1,1472 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render the with the subscription details 1`] = ` +
+
+
+
+
+ Card Holder Information +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ +
+ +
+
+
+
+
+ + +
+
+ + +
+
+
+
+ Billing Information (Required) +
+
+ +
+
+
+   +
+
+
+ +
+
+`; From a7b8dec493a350b26b3b9b13c1ab249a4cb8f208 Mon Sep 17 00:00:00 2001 From: Raza Dar <5585262+mrazadar@users.noreply.github.com> Date: Thu, 22 Jun 2023 20:00:23 +0500 Subject: [PATCH 7/8] feat: update the LEARNER_SUPPORT_URL key --- .env | 2 +- .env.development | 2 +- .env.development-stage | 2 +- .env.test | 2 +- src/index.jsx | 2 +- src/subscription/details/legal/SubscriptionLegal.jsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.env b/.env index 93a7bcef5..9b15b303f 100644 --- a/.env +++ b/.env @@ -38,4 +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 -LEARNER_SUPPORT_URL=null +SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=null diff --git a/.env.development b/.env.development index 9af052f4c..ee3a1c9cf 100644 --- a/.env.development +++ b/.env.development @@ -36,4 +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 -LEARNER_SUPPORT_URL=https://support.edx.org/hc/articles/12975352138007 +SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=https://support.edx.org/hc/articles/12975352138007 diff --git a/.env.development-stage b/.env.development-stage index bf44dea4c..cb9b347bc 100644 --- a/.env.development-stage +++ b/.env.development-stage @@ -36,4 +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 -LEARNER_SUPPORT_URL=https://support.edx.org/hc/articles/12975352138007 +SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=https://support.edx.org/hc/articles/12975352138007 diff --git a/.env.test b/.env.test index 38821ce27..05d358108 100644 --- a/.env.test +++ b/.env.test @@ -36,4 +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 -LEARNER_SUPPORT_URL=https://support.edx.org/hc/articles/12975352138007 +SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=https://support.edx.org/hc/articles/12975352138007 diff --git a/src/index.jsx b/src/index.jsx index 41c4b1b8c..acee2c745 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -70,7 +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, - LEARNER_SUPPORT_URL: process.env.LEARNER_SUPPORT_URL, + SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL: process.env.SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL, }); subscribe(APP_READY, () => { diff --git a/src/subscription/details/legal/SubscriptionLegal.jsx b/src/subscription/details/legal/SubscriptionLegal.jsx index 32e8b287d..5150e1605 100644 --- a/src/subscription/details/legal/SubscriptionLegal.jsx +++ b/src/subscription/details/legal/SubscriptionLegal.jsx @@ -15,7 +15,7 @@ const SubscriptionLegal = ({ const intl = useIntl(); const supportLink = ( {intl.formatMessage(messages['subscription.details.order.legal.link'])} From 6ca05e132a2a56780bf845e81c4db83f77645e8d Mon Sep 17 00:00:00 2001 From: Raza Dar <5585262+mrazadar@users.noreply.github.com> Date: Thu, 22 Jun 2023 20:43:35 +0500 Subject: [PATCH 8/8] feat: no localize date for resubscribe case --- .env.development | 2 +- .env.development-stage | 2 +- .env.test | 2 +- .../MonthlyBillingNotification.jsx | 21 +++++++++++-------- 4 files changed, 15 insertions(+), 12 deletions(-) diff --git a/.env.development b/.env.development index ee3a1c9cf..3ed3f90cb 100644 --- a/.env.development +++ b/.env.development @@ -36,4 +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 +SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=null diff --git a/.env.development-stage b/.env.development-stage index cb9b347bc..fc6c6f0ed 100644 --- a/.env.development-stage +++ b/.env.development-stage @@ -36,4 +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 +SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=null diff --git a/.env.test b/.env.test index 05d358108..529f66f27 100644 --- a/.env.test +++ b/.env.test @@ -36,4 +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 +SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=https://support.edx.org/sample/article/1234567 diff --git a/src/subscription/checkout/monthly-billing-notification/MonthlyBillingNotification.jsx b/src/subscription/checkout/monthly-billing-notification/MonthlyBillingNotification.jsx index c0795955f..97b347db1 100644 --- a/src/subscription/checkout/monthly-billing-notification/MonthlyBillingNotification.jsx +++ b/src/subscription/checkout/monthly-billing-notification/MonthlyBillingNotification.jsx @@ -19,15 +19,18 @@ const MonthlyBillingNotification = () => { } = useSelector(detailsSelector); const intl = useIntl(); 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)'); + let formattedDate = null; + + if (isTrialEligible && trialEnd) { + 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)" + 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'], {});