- {getTitle(activeSubscription.period)}
- {activeSubscription.status === 'active' && !isGrantedSubscription
- ? t('user:payment.next_billing_date_on', { date: formatLocalizedDate(new Date(activeSubscription.expiresAt * 1000), i18n.language) })
- : t('user:payment.subscription_expires_on', { date: formatLocalizedDate(new Date(activeSubscription.expiresAt * 1000), i18n.language) })}
- {pendingOffer && (
- {t('user:payment.pending_offer_switch', { title: getTitle(pendingOffer.period) })}
- )}
-
- {formatPrice(activeSubscription.nextPaymentPrice, activeSubscription.nextPaymentCurrency, customer.country)} - /{t(`account:periods.${activeSubscription.period}`)} + {!isChangingOffer && ( +
+ {getTitle(activeSubscription.period)}
+ {activeSubscription.status === 'active' && !isGrantedSubscription && !pendingDowngradeOfferId
+ ? t('user:payment.next_billing_date_on', { date: formatLocalizedDate(new Date(activeSubscription.expiresAt * 1000), i18n.language) })
+ : t('user:payment.subscription_expires_on', { date: formatLocalizedDate(new Date(activeSubscription.expiresAt * 1000), i18n.language) })}
+ {(pendingOffer || pendingDowngradeOfferId) && activeSubscription.status !== 'cancelled' && (
+
+ {t('user:payment.pending_offer_switch', {
+ title: getTitle(pendingOffer?.period || offers.find((offer) => offer.offerId === pendingDowngradeOfferId)?.period || 'month'),
+ })}
+
+ )}
+ {formatPrice(activeSubscription.nextPaymentPrice, activeSubscription.nextPaymentCurrency, customer.country)} + /{t(`account:periods.${activeSubscription.period}`)} +
+ )} +Payments Page 1`] = `
diff --git a/src/services/inplayer.account.service.ts b/src/services/inplayer.account.service.ts index 44bd17fa2..0d4be5d48 100644 --- a/src/services/inplayer.account.service.ts +++ b/src/services/inplayer.account.service.ts @@ -423,12 +423,14 @@ function formatUpdateAccount(customer: UpdateCustomerArgs) { const firstName = customer.firstName?.trim() || ''; const lastName = customer.lastName?.trim() || ''; const fullName = `${firstName} ${lastName}`.trim() || (customer.email as string); + const metadata: { [key: string]: string } = { + first_name: firstName, + surname: lastName, + ...customer.metadata, + }; const data: UpdateAccountData = { fullName, - metadata: { - first_name: firstName, - surname: lastName, - }, + metadata, }; return data; diff --git a/src/services/inplayer.checkout.service.ts b/src/services/inplayer.checkout.service.ts index 9d509e390..84c00da9c 100644 --- a/src/services/inplayer.checkout.service.ts +++ b/src/services/inplayer.checkout.service.ts @@ -208,6 +208,7 @@ const formatOffer = (offer: AccessFee): Offer => { active: true, period: offer.access_type.period === 'month' && offer.access_type.quantity === 12 ? 'year' : offer.access_type.period, freePeriods: offer.trial_period ? 1 : 0, + planSwitchEnabled: offer.item.plan_switch_enabled ?? false, } as Offer; }; diff --git a/src/services/inplayer.subscription.service.ts b/src/services/inplayer.subscription.service.ts index a90f207ab..4dc9e3e6c 100644 --- a/src/services/inplayer.subscription.service.ts +++ b/src/services/inplayer.subscription.service.ts @@ -1,7 +1,7 @@ import i18next from 'i18next'; import InPlayer, { PurchaseDetails, Card, GetItemAccessV1, SubscriptionDetails as InplayerSubscription } from '@inplayer-org/inplayer.js'; -import type { PaymentDetail, Subscription, Transaction, UpdateCardDetails, UpdateSubscription } from '#types/subscription'; +import type { ChangeSubscription, PaymentDetail, Subscription, Transaction, UpdateCardDetails, UpdateSubscription } from '#types/subscription'; import type { Config } from '#types/Config'; import type { InPlayerError } from '#types/inplayer'; @@ -17,6 +17,7 @@ interface SubscriptionDetails extends InplayerSubscription { access_type?: { period: string; }; + access_fee_id?: number; } export async function getActiveSubscription({ config }: { config: Config }) { @@ -94,6 +95,18 @@ export const updateSubscription: UpdateSubscription = async ({ offerId, unsubscr } }; +export const changeSubscription: ChangeSubscription = async ({ accessFeeId, subscriptionId }) => { + try { + const response = await InPlayer.Subscription.changeSubscriptionPlan({ access_fee_id: parseInt(accessFeeId), inplayer_token: subscriptionId }); + return { + errors: [], + responseData: { message: response.data.message }, + }; + } catch { + throw new Error('Failed to change subscription'); + } +}; + export const updateCardDetails: UpdateCardDetails = async ({ cardName, cardNumber, cvc, expMonth, expYear, currency }) => { try { const response = await InPlayer.Payment.setDefaultCreditCard({ cardName, cardNumber, cvc, expMonth, expYear, currency }); @@ -103,6 +116,7 @@ export const updateCardDetails: UpdateCardDetails = async ({ cardName, cardNumbe throw new Error('Failed to update card details'); } }; + const formatCardDetails = (card: Card & { card_type: string; account_id: number; currency: string }): PaymentDetail => { const { number, exp_month, exp_year, card_name, card_type, account_id, currency } = card; const zeroFillExpMonth = `0${exp_month}`.slice(-2); @@ -150,6 +164,8 @@ const formatActiveSubscription = (subscription: SubscriptionDetails, expiresAt: let status = ''; switch (subscription.action_type) { case 'free-trial': + status = 'active_trial'; + break; case 'recurrent': status = 'active'; break; @@ -166,6 +182,7 @@ const formatActiveSubscription = (subscription: SubscriptionDetails, expiresAt: return { subscriptionId: subscription.subscription_id, offerId: subscription.item_id?.toString(), + accessFeeId: `S${subscription.access_fee_id}`, status, expiresAt, nextPaymentAt: subscription.next_rebill_date, diff --git a/src/stores/AccountController.ts b/src/stores/AccountController.ts index 4f9b17dc8..d5df15082 100644 --- a/src/stores/AccountController.ts +++ b/src/stores/AccountController.ts @@ -442,26 +442,28 @@ export async function reloadActiveSubscription({ delay }: { delay: number } = { }); } -export async function exportAccountData() { +export const exportAccountData = async () => { return await useAccount(async () => { return await useService(async ({ accountService }) => { return await accountService.exportAccountData(undefined, true); }); }); -} +}; -export async function getSocialLoginUrls() { +export const getSocialLoginUrls = async () => { return await useService(async ({ accountService, config }) => { return await accountService.getSocialUrls(config); }); -} -export async function deleteAccountData(password: string) { +}; + +export const deleteAccountData = async (password: string) => { return await useAccount(async () => { return await useService(async ({ accountService }) => { return await accountService.deleteAccount({ password }, true); }); }); -} +}; + export const getReceipt = async (transactionId: string) => { return await useAccount(async () => { return await useService(async ({ subscriptionService, sandbox = true }) => { diff --git a/src/stores/CheckoutController.ts b/src/stores/CheckoutController.ts index 1cc918eb6..019fbb935 100644 --- a/src/stores/CheckoutController.ts +++ b/src/stores/CheckoutController.ts @@ -295,6 +295,16 @@ export const switchSubscription = async (toOfferId: string, switchDirection: 'up }); }; +export const changeSubscription = async ({ accessFeeId, subscriptionId }: { accessFeeId: string; subscriptionId: string }) => { + return await useService(async ({ subscriptionService, sandbox = true }) => { + if (!subscriptionService || !('changeSubscription' in subscriptionService)) throw new Error('subscription service is not configured'); + + const { responseData } = await subscriptionService.changeSubscription({ accessFeeId, subscriptionId }, sandbox); + + return responseData; + }); +}; + export const updatePayPalPaymentMethod = async ( successUrl: string, cancelUrl: string, diff --git a/src/stores/NotificationsController.ts b/src/stores/NotificationsController.ts index 7f2146821..23c23e476 100644 --- a/src/stores/NotificationsController.ts +++ b/src/stores/NotificationsController.ts @@ -26,7 +26,6 @@ export const subscribeToNotifications = async (uuid: string = '') => { break; case NotificationsTypes.ACCESS_GRANTED: await reloadActiveSubscription(); - window.location.href = addQueryParams(window.location.href, { u: 'welcome' }); break; case NotificationsTypes.ACCESS_REVOKED: await reloadActiveSubscription(); diff --git a/src/utils/formatting.ts b/src/utils/formatting.ts index f37511145..97b873e2d 100644 --- a/src/utils/formatting.ts +++ b/src/utils/formatting.ts @@ -110,8 +110,8 @@ export const buildLegacySeriesUrlFromMediaItem = (media: PlaylistItem, play: boo }); }; -export const formatPrice = (price: number, currency: string, country: string) => { - return new Intl.NumberFormat(country || undefined, { +export const formatPrice = (price: number, currency: string, country?: string) => { + return new Intl.NumberFormat(country || 'en-US', { style: 'currency', currency: currency, }).format(price); diff --git a/test-e2e/tests/payments/coupons_test.ts b/test-e2e/tests/payments/coupons_test.ts index babc4f67d..c05cbfbe6 100644 --- a/test-e2e/tests/payments/coupons_test.ts +++ b/test-e2e/tests/payments/coupons_test.ts @@ -14,6 +14,7 @@ const jwProps: ProviderProps = { locale: undefined, shouldMakePayment: true, canRenewSubscription: false, + hasInlineOfferSwitch: true, }; const cleengProps: ProviderProps = { @@ -26,6 +27,7 @@ const cleengProps: ProviderProps = { locale: 'NL', shouldMakePayment: false, canRenewSubscription: true, + hasInlineOfferSwitch: false, }; runTestSuite(jwProps, 'JW Player'); @@ -86,12 +88,12 @@ function runTestSuite(props: ProviderProps, providerName: string) { ); } - await finishAndCheckSubscription(I, addYear(today), today, props.yearlyOffer.price); + await finishAndCheckSubscription(I, addYear(today), today, props.yearlyOffer.price, props.hasInlineOfferSwitch); }); Scenario(`I can cancel a free subscription - ${providerName}`, async ({ I }) => { couponLoginContext = await I.registerOrLogin(couponLoginContext); - cancelPlan(I, addYear(today), props.canRenewSubscription); + cancelPlan(I, addYear(today), props.canRenewSubscription, providerName); }); Scenario(`I can renew a free subscription - ${providerName}`, async ({ I }) => { diff --git a/test-e2e/tests/payments/subscription_test.ts b/test-e2e/tests/payments/subscription_test.ts index 36f0a7c4d..3b3291ea8 100644 --- a/test-e2e/tests/payments/subscription_test.ts +++ b/test-e2e/tests/payments/subscription_test.ts @@ -13,6 +13,7 @@ const jwProps: ProviderProps = { applicableTax: 0, canRenewSubscription: false, fieldWrapper: '', + hasInlineOfferSwitch: true, }; const cleengProps: ProviderProps = { @@ -24,6 +25,7 @@ const cleengProps: ProviderProps = { applicableTax: 21, canRenewSubscription: true, fieldWrapper: 'iframe', + hasInlineOfferSwitch: false, }; runTestSuite(jwProps, 'JW Player'); @@ -170,7 +172,7 @@ function runTestSuite(props: ProviderProps, providerName: string) { props.fieldWrapper, ); - await finishAndCheckSubscription(I, addYear(today), today, props.yearlyOffer.price); + await finishAndCheckSubscription(I, addYear(today), today, props.yearlyOffer.price, props.hasInlineOfferSwitch); I.seeAll(cardInfo); }); @@ -178,7 +180,7 @@ function runTestSuite(props: ProviderProps, providerName: string) { Scenario(`I can cancel my subscription - ${providerName}`, async ({ I }) => { paidLoginContext = await I.registerOrLogin(paidLoginContext); - cancelPlan(I, addYear(today), props.canRenewSubscription); + cancelPlan(I, addYear(today), props.canRenewSubscription, providerName); // Still see payment info I.seeAll(cardInfo); diff --git a/test-e2e/utils/payments.ts b/test-e2e/utils/payments.ts index 13b14978f..8732da225 100644 --- a/test-e2e/utils/payments.ts +++ b/test-e2e/utils/payments.ts @@ -35,7 +35,7 @@ export function formatDate(date: Date) { return new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', year: 'numeric' }).format(date); } -export async function finishAndCheckSubscription(I: CodeceptJS.I, billingDate: Date, today: Date, yearlyPrice: string) { +export async function finishAndCheckSubscription(I: CodeceptJS.I, billingDate: Date, today: Date, yearlyPrice: string, hasInlineOfferSwitch: boolean) { I.click('Continue'); I.waitForLoaderDone(longTimeout); I.wait(2); @@ -63,18 +63,30 @@ export async function finishAndCheckSubscription(I: CodeceptJS.I, billingDate: D I.see(yearlyPrice); I.see('/year'); I.see('Next billing date is on ' + formatDate(billingDate)); - I.see('Cancel subscription'); - I.waitForElement('[class*="transactionItem"]'); + if (hasInlineOfferSwitch) { + I.waitForElement('[data-testid="change-subscription-button"]', 10); + I.click('[data-testid="change-subscription-button"]'); + } + + I.waitForElement('[data-testid="cancel-subscription-button"]', 10); + + I.waitForElement('[class*="transactionItem"]', 10); I.see(formatDate(today)); } -export function cancelPlan(I: CodeceptJS.I, expirationDate: Date, canRenewSubscription: boolean) { +export function cancelPlan(I: CodeceptJS.I, expirationDate: Date, canRenewSubscription: boolean, providerName?: string) { I.amOnPage(constants.paymentsUrl); I.waitForLoaderDone(); - I.click('Cancel subscription'); + if (providerName?.includes('JW')) { + I.waitForElement('[data-testid="change-subscription-button"]', 10); + I.click('[data-testid="change-subscription-button"]'); + } + + I.waitForElement('[data-testid="cancel-subscription-button"]', 10); + I.click('[data-testid="cancel-subscription-button"]'); I.see('We are sorry to see you go.'); I.see('You will be unsubscribed from your current plan by clicking the unsubscribe button below.'); I.see('Unsubscribe'); @@ -83,7 +95,8 @@ export function cancelPlan(I: CodeceptJS.I, expirationDate: Date, canRenewSubscr I.dontSee('This plan will expire'); - I.click('Cancel subscription'); + I.waitForElement('[data-testid="cancel-subscription-button"]', 10); + I.click('[data-testid="cancel-subscription-button"]'); I.click('Unsubscribe'); I.waitForLoaderDone(); I.see('Miss you already.'); @@ -122,7 +135,7 @@ export function renewPlan(I: CodeceptJS.I, billingDate: Date, yearlyPrice: strin I.see('Annual subscription'); I.see('Next billing date is on'); - I.see('Cancel subscription'); + I.waitForElement('[data-testid="cancel-subscription-button"]', 10); } export function overrideIP(I: CodeceptJS.I) { diff --git a/test/types.ts b/test/types.ts index 544188650..14532ef98 100644 --- a/test/types.ts +++ b/test/types.ts @@ -27,4 +27,5 @@ export type ProviderProps = { shouldMakePayment?: boolean; locale?: string | undefined; fieldWrapper?: string; + hasInlineOfferSwitch: boolean; }; diff --git a/types/account.d.ts b/types/account.d.ts index e03e5c119..f462205ff 100644 --- a/types/account.d.ts +++ b/types/account.d.ts @@ -312,6 +312,7 @@ export type UpdatePersonalShelvesArgs = { export type FirstLastNameInput = { firstName: string; lastName: string; + metadata?: Record