From 1f8f9153c19c8c5802f17a9abb43c2f29dffa5c8 Mon Sep 17 00:00:00 2001 From: ajay-sentry <159853603+ajay-sentry@users.noreply.github.com> Date: Fri, 13 Sep 2024 11:57:50 -0700 Subject: [PATCH] fix: Users unable to cancel when have adblock (#3194) --- .../CancelButton/CancelButton.jsx | 11 ++--- .../CancelButton/useBarecancel.js | 42 ++++++++++--------- .../CancelButton/useBarecancel.spec.js | 31 +++++++++++++- .../DowngradePlan/CancelButton/utils.js | 17 +++++--- 4 files changed, 69 insertions(+), 32 deletions(-) diff --git a/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/CancelButton.jsx b/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/CancelButton.jsx index 3fbba30c90..17effdfc3a 100644 --- a/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/CancelButton.jsx +++ b/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/CancelButton.jsx @@ -13,7 +13,7 @@ const FALLBACK_PERIOD_TEXT = 'the end of the period' function CancelButton({ customerId, planCost, - upComingCancelation, + upComingCancellation, currentPeriodEnd, }) { const [isModalOpen, setIsModalOpen] = useState(false) @@ -27,11 +27,11 @@ function CancelButton({ // disable button if queryIsLoading, // request in fly isAlreadyFreeUser, // user is a free user - upComingCancelation, // the subscription is already getting cancelled + upComingCancellation, // the subscription is already getting cancelled ].some(Boolean) const periodEnd = getEndPeriod(currentPeriodEnd) - function completeCancelation() { + function completeCancellation() { if (baremetricsBlocked) { cancelPlan() } @@ -86,11 +86,12 @@ function CancelButton({ Cancel @@ -104,7 +105,7 @@ function CancelButton({ CancelButton.propTypes = { customerId: PropType.string, planCost: PropType.string.isRequired, - upComingCancelation: PropType.bool, + upComingCancellation: PropType.bool, currentPeriodEnd: PropType.number, } diff --git a/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/useBarecancel.js b/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/useBarecancel.js index 44418f3575..b122d06f9c 100644 --- a/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/useBarecancel.js +++ b/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/useBarecancel.js @@ -11,25 +11,29 @@ export function useBarecancel({ customerId, callbackSend, isModalOpen }) { useEffect(() => { let unMounted = false if (isModalOpen) { - loadBaremetrics().then(() => { - window.barecancel.params = { - /* eslint-disable camelcase */ - access_token_id: config.BAREMETRICS_TOKEN, - customer_oid: customerId, - comment_required: true, - callback_send: () => { - memoizedSuccess() - }, - callback_error: (error) => { - // You can also catch any errors that happen when sending the cancellation event to Baremetrics. - // For example, if Baremetrics returns that the customer does not have an active subscription. - console.error(error) - }, - /* eslint-enable camelcase */ - } - if (unMounted) return - setWasBlocked(false) - }) + loadBaremetrics() + .then(() => { + window.barecancel.params = { + /* eslint-disable camelcase */ + access_token_id: config.BAREMETRICS_TOKEN, + customer_oid: customerId, + comment_required: true, + callback_send: () => { + memoizedSuccess() + }, + callback_error: (error) => { + // You can also catch any errors that happen when sending the cancellation event to Baremetrics. + // For example, if Baremetrics returns that the customer does not have an active subscription. + console.error(error) + }, + /* eslint-enable camelcase */ + } + if (unMounted) return + setWasBlocked(false) + }) + .catch(() => { + setWasBlocked(true) + }) } return () => { diff --git a/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/useBarecancel.spec.js b/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/useBarecancel.spec.js index 58923fcbd0..e27df646aa 100644 --- a/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/useBarecancel.spec.js +++ b/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/useBarecancel.spec.js @@ -3,6 +3,7 @@ import { renderHook, waitFor } from '@testing-library/react' import config from 'config' import { useBarecancel } from './useBarecancel' +import { loadBaremetrics } from './utils' jest.mock('services/toastNotification') jest.mock('react-router-dom', () => ({ @@ -11,14 +12,26 @@ jest.mock('react-router-dom', () => ({ })) jest.mock('services/account') +jest.mock('./utils', () => ({ + loadBaremetrics: jest.fn(), +})) + describe('useBarecancel', () => { describe('Initializes', () => { + beforeEach(() => { + window.barecancel = { params: null } + }) + it('window params are set', async () => { + loadBaremetrics.mockResolvedValue() // Mock successful load const callbackSend = () => {} - renderHook(() => + const { result } = renderHook(() => useBarecancel({ customerId: 1234, callbackSend, isModalOpen: true }) ) + // start as blocked + expect(result.current.baremetricsBlocked).toBe(true) + const expectedParams = { access_token_id: config.BAREMETRICS_TOKEN, customer_oid: 1234, @@ -36,12 +49,26 @@ describe('useBarecancel', () => { JSON.stringify(expectedParams) ) ) + + // Check that it was not blocked + expect(result.current.baremetricsBlocked).toBe(false) + }) + + it('returns blocked if load fails', async () => { + loadBaremetrics.mockRejectedValueOnce() + const callbackSend = jest.fn() + const { result } = renderHook(() => + useBarecancel({ customerId: 1234, callbackSend, isModalOpen: true }) + ) + + expect(result.current.baremetricsBlocked).toBe(true) }) }) describe('Cleans up', () => { it('Removes script and styles tag', () => { - const callbackSend = () => {} + loadBaremetrics.mockResolvedValueOnce() // Mock successful load + const callbackSend = jest.fn() renderHook(() => useBarecancel({ customerId: 1234, callbackSend, isModalOpen: true }) ) diff --git a/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/utils.js b/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/utils.js index 48d8134596..b3416c7626 100644 --- a/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/utils.js +++ b/src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/CancelButton/utils.js @@ -8,17 +8,22 @@ export function getEndPeriod(unixPeriodEnd) { } export function loadBaremetrics() { - return new Promise((resolve) => { - if (window.barecancel && window.barecancel.created) { - return resolve() - } - window.barecancel = { created: true } + return new Promise((resolve, reject) => { const script = document.createElement('script') script.src = 'https://baremetrics-barecancel.baremetrics.com/js/application.js' script.dataset.testid = 'baremetrics-script' + + // These functions control the logic in useBareCancel to make sure if the script isn't loaded to cancel without Baremetrics + script.onload = function () { + return resolve() + } + + script.onerror = function () { + return reject() + } + document.body.appendChild(script) - return resolve() }) }