fix: Users unable to cancel when have adblock (#3194)

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
  </Button>
  <Button
+ // This ID is needed to render the baremetrics form. DO NOT CHANGE
  id="barecancel-trigger"
  variant="danger"
  hook="continue-cancellation-button"
  disabled={isDisabled}
- onClick={completeCancelation}
+ onClick={completeCancellation}
  >
  Confirm Cancellation
  </Button>
@@ -104,7 +105,7 @@ function CancelButton({
 CancelButton.propTypes = {
  customerId: PropType.string,
  planCost: PropType.string.isRequired,
- upComingCancelation: PropType.bool,
+ upComingCancellation: PropType.bool,
  currentPeriodEnd: PropType.number,
 }
 

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 () => {

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 })
  )

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()
  })
 }