From 7754d7af36a640ac5771f31ce5b06b9ab1035ecd Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Mon, 25 Nov 2024 23:58:12 +0700 Subject: [PATCH 01/16] Add subscription data section in account settings --- .../operator-mode/profile-info-popover.gts | 158 +++++------------ .../profile/profile-settings-modal.gts | 2 + .../profile/profile-subscription.gts | 167 ++++++++++++++++++ .../app/components/with-subscription-data.gts | 163 +++++++++++++++++ packages/host/app/config/environment.d.ts | 2 + packages/host/app/services/billing-service.ts | 35 ++++ packages/host/config/environment.js | 6 + packages/host/package.json | 1 + .../operator-mode-acceptance-test.gts | 72 +++++--- pnpm-lock.yaml | 3 + 10 files changed, 473 insertions(+), 136 deletions(-) create mode 100644 packages/host/app/components/operator-mode/profile/profile-subscription.gts create mode 100644 packages/host/app/components/with-subscription-data.gts diff --git a/packages/host/app/components/operator-mode/profile-info-popover.gts b/packages/host/app/components/operator-mode/profile-info-popover.gts index 7af1d2004c..a5802f3f61 100644 --- a/packages/host/app/components/operator-mode/profile-info-popover.gts +++ b/packages/host/app/components/operator-mode/profile-info-popover.gts @@ -4,16 +4,10 @@ import { action } from '@ember/object'; import { inject as service } from '@ember/service'; import Component from '@glimmer/component'; -import { task } from 'ember-concurrency'; - -import { - Avatar, - BoxelButton, - LoadingIndicator, -} from '@cardstack/boxel-ui/components'; +import { Avatar, BoxelButton } from '@cardstack/boxel-ui/components'; import { cn } from '@cardstack/boxel-ui/helpers'; -import { IconHexagon } from '@cardstack/boxel-ui/icons'; +import WithSubscriptionData from '@cardstack/host/components/with-subscription-data'; import config from '@cardstack/host/config/environment'; import BillingService from '@cardstack/host/services/billing-service'; import MatrixService from '@cardstack/host/services/matrix-service'; @@ -140,125 +134,57 @@ export default class ProfileInfoPopover extends Component {{! TODO: Remove config.APP.stripeBillingEnabled once the API integration for credit info is completed. }} {{#if config.APP.stripeBillingEnabled}} -
-
- Membership Tier - - {{#if this.isLoading}} - - {{else}} - {{this.plan}} - {{/if}} - -
- Upgrade Plan -
- Monthly Credit - - {{#if this.isLoading}} - - {{else}} - - {{this.monthlyCreditText}} - {{/if}} - -
-
- Additional Credit - {{#if this.isLoading}} - - {{else}} - - {{this.extraCreditsAvailableInBalance}} - {{/if}} -
-
+ +
+
+ Membership Tier + {{subscriptionData.plan}} +
Buy more credits + @kind='secondary-light' + @size='small' + @disabled={{subscriptionData.isLoading}} + data-test-upgrade-plan-button + {{on 'click' this.billingService.managePlan}} + >Upgrade Plan +
+ Monthly Credit + {{subscriptionData.monthlyCredit}} +
+
+ Additional Credit + {{subscriptionData.additionalCredit}} +
+
+ Buy more credits +
-
+ {{/if}}
- constructor(...args: [any, any]) { - super(...args); - this.fetchCreditInfo.perform(); - } - - @service private declare billingService: BillingService; @service declare matrixService: MatrixService; - - private fetchCreditInfo = task(async () => { - await this.billingService.fetchSubscriptionData(); - }); + @service declare billingService: BillingService; @action private logout() { this.matrixService.logout(); } - - private get isLoading() { - return this.billingService.fetchingSubscriptionData; - } - - private get plan() { - return this.billingService.subscriptionData?.plan; - } - - private get creditsIncludedInPlanAllowance() { - return this.billingService.subscriptionData?.creditsIncludedInPlanAllowance; - } - - private get creditsAvailableInPlanAllowance() { - return this.billingService.subscriptionData - ?.creditsAvailableInPlanAllowance; - } - - private get extraCreditsAvailableInBalance() { - return this.billingService.subscriptionData?.extraCreditsAvailableInBalance; - } - - private get monthlyCreditText() { - return this.creditsAvailableInPlanAllowance != null && - this.creditsIncludedInPlanAllowance != null - ? `${this.creditsAvailableInPlanAllowance} of ${this.creditsIncludedInPlanAllowance} left` - : null; - } - - private get isOutOfCredit() { - return ( - this.isOutOfPlanCreditAllowance && - (this.extraCreditsAvailableInBalance == null || - this.extraCreditsAvailableInBalance == 0) - ); - } - - private get isOutOfPlanCreditAllowance() { - return ( - this.creditsAvailableInPlanAllowance == null || - this.creditsIncludedInPlanAllowance == null || - this.creditsAvailableInPlanAllowance <= 0 - ); - } } export class ProfileInfo extends Component { diff --git a/packages/host/app/components/operator-mode/profile/profile-settings-modal.gts b/packages/host/app/components/operator-mode/profile/profile-settings-modal.gts index 4a5251d3a5..56c07a37a4 100644 --- a/packages/host/app/components/operator-mode/profile/profile-settings-modal.gts +++ b/packages/host/app/components/operator-mode/profile/profile-settings-modal.gts @@ -28,6 +28,7 @@ import { isValidPassword } from '@cardstack/host/lib/matrix-utils'; import MatrixService from '@cardstack/host/services/matrix-service'; import ProfileEmail from './profile-email'; +import ProfileSubscription from './profile-subscription'; interface Signature { Args: { @@ -126,6 +127,7 @@ export default class ProfileSettingsModal extends Component { @changeEmailComplete={{this.completeEmail}} /> {{/if}} + {{#if (or (bool this.displayNameError) (bool this.error))}}
diff --git a/packages/host/app/components/operator-mode/profile/profile-subscription.gts b/packages/host/app/components/operator-mode/profile/profile-subscription.gts new file mode 100644 index 0000000000..95cc66df9a --- /dev/null +++ b/packages/host/app/components/operator-mode/profile/profile-subscription.gts @@ -0,0 +1,167 @@ +import { fn } from '@ember/helper'; + +import { on } from '@ember/modifier'; +import { service } from '@ember/service'; +import Component from '@glimmer/component'; + +import { trackedFunction } from 'ember-resources/util/function'; + +import { + BoxelButton, + FieldContainer, + LoadingIndicator, +} from '@cardstack/boxel-ui/components'; +import { IconHexagon } from '@cardstack/boxel-ui/icons'; + +import WithSubscriptionData from '@cardstack/host/components/with-subscription-data'; +import BillingService from '@cardstack/host/services/billing-service'; + +interface Signature { + Args: {}; + Element: HTMLElement; +} + +export default class ProfileSubscription extends Component { + + + @service private declare billingService: BillingService; + + private get paymentLinks() { + return this.fetchPaymentLinks.value ?? []; + } + + private fetchPaymentLinks = trackedFunction(this, async () => { + return await this.billingService.fetchPaymentLinks(); + }); + + private pay(paymentLinkURL: string) { + window.open(paymentLinkURL); + } +} diff --git a/packages/host/app/components/with-subscription-data.gts b/packages/host/app/components/with-subscription-data.gts new file mode 100644 index 0000000000..02e5096dca --- /dev/null +++ b/packages/host/app/components/with-subscription-data.gts @@ -0,0 +1,163 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { hash } from '@ember/helper'; +import { service } from '@ember/service'; +import Component from '@glimmer/component'; + +import { task } from 'ember-concurrency'; + +import { LoadingIndicator } from '@cardstack/boxel-ui/components'; +import { cn } from '@cardstack/boxel-ui/helpers'; +import { IconHexagon } from '@cardstack/boxel-ui/icons'; + +import BillingService from '../services/billing-service'; + +import type { ComponentLike } from '@glint/template'; + +interface ValueSignature { + Args: { + tag: string; + value: string | number | null; + isOutOfCredit: boolean; + isLoading: boolean; + displayCreditIcon: boolean; + }; + Element: HTMLElement; +} + +const Value: TemplateOnlyComponent = ; + +interface WithSubscriptionDataSignature { + Args: {}; + Blocks: { + default: [ + { + plan: ComponentLike; + monthlyCredit: ComponentLike; + additionalCredit: ComponentLike; + isOutOfCredit: boolean; + isLoading: boolean; + }, + ]; + }; +} + +export default class WithSubscriptionData extends Component { + @service declare billingService: BillingService; + + constructor(...args: [any, any]) { + super(...args); + this.fetchCreditInfo.perform(); + } + + private fetchCreditInfo = task(async () => { + await this.billingService.fetchSubscriptionData(); + }); + + private get isLoading() { + return ( + this.fetchCreditInfo.isRunning || + this.billingService.fetchingSubscriptionData + ); + } + + private get plan() { + return this.billingService.subscriptionData?.plan; + } + + private get creditsIncludedInPlanAllowance() { + return this.billingService.subscriptionData?.creditsIncludedInPlanAllowance; + } + + private get creditsAvailableInPlanAllowance() { + return this.billingService.subscriptionData + ?.creditsAvailableInPlanAllowance; + } + + private get extraCreditsAvailableInBalance() { + return this.billingService.subscriptionData?.extraCreditsAvailableInBalance; + } + + private get monthlyCreditText() { + return this.creditsAvailableInPlanAllowance != null && + this.creditsIncludedInPlanAllowance != null + ? `${this.creditsAvailableInPlanAllowance} of ${this.creditsIncludedInPlanAllowance} left` + : null; + } + + private get isOutOfCredit() { + return ( + this.isOutOfPlanCreditAllowance && + (this.extraCreditsAvailableInBalance == null || + this.extraCreditsAvailableInBalance == 0) + ); + } + + private get isOutOfPlanCreditAllowance() { + return ( + this.creditsAvailableInPlanAllowance == null || + this.creditsIncludedInPlanAllowance == null || + this.creditsAvailableInPlanAllowance <= 0 + ); + } + + +} diff --git a/packages/host/app/config/environment.d.ts b/packages/host/app/config/environment.d.ts index f7ba4b08a8..ebbffb39c8 100644 --- a/packages/host/app/config/environment.d.ts +++ b/packages/host/app/config/environment.d.ts @@ -28,4 +28,6 @@ declare const config: { sqlSchema: string; assetsURL: string; featureFlags?: {}; + stripeCustomerPortalLink: string; + stripeApiKey: string; }; diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index a5741abe41..247d515051 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -5,12 +5,18 @@ import { tracked } from '@glimmer/tracking'; import { dropTask } from 'ember-concurrency'; +import Stripe from 'stripe'; + import { SupportedMimeType } from '@cardstack/runtime-common'; +import environment from '../config/environment'; + import NetworkService from './network'; import RealmServerService from './realm-server'; import ResetService from './reset'; +const stripe = new Stripe(environment.stripeApiKey); + interface SubscriptionData { plan: string | null; creditsAvailableInPlanAllowance: number | null; @@ -18,8 +24,14 @@ interface SubscriptionData { extraCreditsAvailableInBalance: number | null; } +interface PaymentLink { + url: string; + creditReloadAmount: number; +} + export default class BillingService extends Service { @tracked private _subscriptionData: SubscriptionData | null = null; + private _paymentLinks: PaymentLink[] | null = null; @service private declare realmServer: RealmServerService; @service private declare network: NetworkService; @@ -36,6 +48,29 @@ export default class BillingService extends Service { resetState() { this._subscriptionData = null; + this._paymentLinks = null; + } + + managePlan() { + window.open(environment.stripeCustomerPortalLink); + } + + async fetchPaymentLinks() { + if (!this._paymentLinks) { + let response = await stripe.paymentLinks.list(); + this._paymentLinks = response.data + .filter((data) => data.metadata.credit_reload_amount) + .map((data) => ({ + url: data.url, + creditReloadAmount: Number(data.metadata.credit_reload_amount), + })) + .sort( + (paymentLinkA, paymentLinkB) => + paymentLinkA.creditReloadAmount - paymentLinkB.creditReloadAmount, + ); + } + + return this._paymentLinks; } get subscriptionData() { diff --git a/packages/host/config/environment.js b/packages/host/config/environment.js index 44f2dfb8cf..df713b58df 100644 --- a/packages/host/config/environment.js +++ b/packages/host/config/environment.js @@ -46,6 +46,12 @@ module.exports = function (environment) { resolvedBaseRealmURL: process.env.RESOLVED_BASE_REALM_URL || 'http://localhost:4201/base/', featureFlags: {}, + stripeCustomerPortalLink: + process.env.STRIPE_CUSTOMER_PORTAL_LINK || + 'https://billing.stripe.com/p/login/test_cN216h3BlbML3FS144', + stripeApiKey: + process.env.STRIPE_API_KEY || + 'sk_test_51Q8hkbPUHhctoJxanM9uVZban3mK5he2g1s7r1gKvBXTpejGxUdJHSjWLlmB8LzIaffiQj9Bj96ag0OxTwNl5BGk00Ov4gjcBC', }; if (environment === 'development') { diff --git a/packages/host/package.json b/packages/host/package.json index d9f60793da..b14c9e920b 100644 --- a/packages/host/package.json +++ b/packages/host/package.json @@ -165,6 +165,7 @@ "safe-stable-stringify": "^2.4.3", "start-server-and-test": "^1.14.0", "stream-browserify": "^3.0.0", + "stripe": "^17.2.1", "super-fast-md5": "^1.0.1", "testem": "3.10.1", "testem-multi-reporter": "^1.2.0", diff --git a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts index 7de1a43647..1444c04098 100644 --- a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts +++ b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts @@ -883,11 +883,19 @@ module('Acceptance | operator mode tests', function (hooks) { await click('[data-test-profile-icon-button]'); assert.dom('[data-test-profile-popover]').exists(); - assert.dom('[data-test-membership-tier]').hasText('Free'); - assert.dom('[data-test-monthly-credit]').hasText('1000 of 1000 left'); - assert.dom('[data-test-monthly-credit]').hasNoClass('out-of-credit'); - assert.dom('[data-test-additional-credit]').hasText('100'); - assert.dom('[data-test-additional-credit]').hasNoClass('out-of-credit'); + assert.dom('[data-test-subscription-data="plan"]').hasText('Free'); + assert + .dom('[data-test-subscription-data="monthly-credit"]') + .hasText('1000 of 1000 left'); + assert + .dom('[data-test-subscription-data="monthly-credit"]') + .hasNoClass('out-of-credit'); + assert + .dom('[data-test-subscription-data="additional-credit"]') + .hasText('100'); + assert + .dom('[data-test-subscription-data="additional-credit"]') + .hasNoClass('out-of-credit'); assert.dom('[data-test-upgrade-plan-button]').exists(); assert.dom('[data-test-buy-more-credits]').exists(); assert.dom('[data-test-buy-more-credits]').hasNoClass('out-of-credit'); @@ -918,11 +926,19 @@ module('Acceptance | operator mode tests', function (hooks) { }); await click('[data-test-profile-icon-button]'); - assert.dom('[data-test-membership-tier]').hasText('Free'); - assert.dom('[data-test-monthly-credit]').hasText('0 of 1000 left'); - assert.dom('[data-test-monthly-credit]').hasClass('out-of-credit'); - assert.dom('[data-test-additional-credit]').hasText('100'); - assert.dom('[data-test-additional-credit]').hasNoClass('out-of-credit'); + assert.dom('[data-test-subscription-data="plan"]').hasText('Free'); + assert + .dom('[data-test-subscription-data="monthly-credit"]') + .hasText('0 of 1000 left'); + assert + .dom('[data-test-subscription-data="monthly-credit"]') + .hasClass('out-of-credit'); + assert + .dom('[data-test-subscription-data="additional-credit"]') + .hasText('100'); + assert + .dom('[data-test-subscription-data="additional-credit"]') + .hasNoClass('out-of-credit'); assert.dom('[data-test-buy-more-credits]').hasNoClass('out-of-credit'); await click('[data-test-profile-icon-button]'); @@ -933,11 +949,19 @@ module('Acceptance | operator mode tests', function (hooks) { body: JSON.stringify({ eventType: 'billing-notification' }), }); await click('[data-test-profile-icon-button]'); - assert.dom('[data-test-membership-tier]').hasText('Free'); - assert.dom('[data-test-monthly-credit]').hasText('0 of 1000 left'); - assert.dom('[data-test-monthly-credit]').hasClass('out-of-credit'); - assert.dom('[data-test-additional-credit]').hasText('0'); - assert.dom('[data-test-additional-credit]').hasClass('out-of-credit'); + assert.dom('[data-test-subscription-data="plan"]').hasText('Free'); + assert + .dom('[data-test-subscription-data="monthly-credit"]') + .hasText('0 of 1000 left'); + assert + .dom('[data-test-subscription-data="monthly-credit"]') + .hasClass('out-of-credit'); + assert + .dom('[data-test-subscription-data="additional-credit"]') + .hasText('0'); + assert + .dom('[data-test-subscription-data="additional-credit"]') + .hasClass('out-of-credit'); assert.dom('[data-test-buy-more-credits]').hasClass('out-of-credit'); await click('[data-test-profile-icon-button]'); @@ -948,11 +972,19 @@ module('Acceptance | operator mode tests', function (hooks) { body: JSON.stringify({ eventType: 'billing-notification' }), }); await click('[data-test-profile-icon-button]'); - assert.dom('[data-test-membership-tier]').hasText('Free'); - assert.dom('[data-test-monthly-credit]').hasText('1000 of 1000 left'); - assert.dom('[data-test-monthly-credit]').hasNoClass('out-of-credit'); - assert.dom('[data-test-additional-credit]').hasText('0'); - assert.dom('[data-test-additional-credit]').hasNoClass('out-of-credit'); + assert.dom('[data-test-subscription-data="plan"]').hasText('Free'); + assert + .dom('[data-test-subscription-data="monthly-credit"]') + .hasText('1000 of 1000 left'); + assert + .dom('[data-test-subscription-data="monthly-credit"]') + .hasNoClass('out-of-credit'); + assert + .dom('[data-test-subscription-data="additional-credit"]') + .hasText('0'); + assert + .dom('[data-test-subscription-data="additional-credit"]') + .hasNoClass('out-of-credit'); assert.dom('[data-test-buy-more-credits]').hasNoClass('out-of-credit'); }); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee7c1bb03c..1ef7b84464 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1635,6 +1635,9 @@ importers: stream-browserify: specifier: ^3.0.0 version: 3.0.0 + stripe: + specifier: ^17.2.1 + version: 17.2.1 super-fast-md5: specifier: ^1.0.1 version: 1.0.1 From 8ae86cdab1b34fc9a134f46d35ba5714a47e6f6e Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Tue, 26 Nov 2024 11:38:02 +0700 Subject: [PATCH 02/16] Add assertions --- .../profile/profile-subscription.gts | 36 +++++++++----- packages/host/app/services/billing-service.ts | 33 ++++++++----- .../operator-mode-acceptance-test.gts | 48 ++++++++++++++++--- 3 files changed, 87 insertions(+), 30 deletions(-) diff --git a/packages/host/app/components/operator-mode/profile/profile-subscription.gts b/packages/host/app/components/operator-mode/profile/profile-subscription.gts index 95cc66df9a..8d31b0be1b 100644 --- a/packages/host/app/components/operator-mode/profile/profile-subscription.gts +++ b/packages/host/app/components/operator-mode/profile/profile-subscription.gts @@ -1,10 +1,13 @@ import { fn } from '@ember/helper'; import { on } from '@ember/modifier'; +import Owner from '@ember/owner'; import { service } from '@ember/service'; import Component from '@glimmer/component'; -import { trackedFunction } from 'ember-resources/util/function'; +import { task } from 'ember-concurrency'; + +import window from 'ember-window-mock'; import { BoxelButton, @@ -60,22 +63,25 @@ export default class ProfileSubscription extends Component {
Buy more credits
- {{#each this.paymentLinks as |paymentLink|}} - {{#if this.fetchPaymentLinks.isPending}} - - {{else}} -
+ {{#if this.fetchPaymentLinks.isRunning}} + + {{else}} + {{#each + this.billingService.paymentLinks + as |paymentLink index| + }} +
{{paymentLink.creditReloadAmount}} Pay
- {{/if}} - {{/each}} + {{/each}} + {{/if}}
@@ -103,6 +109,7 @@ export default class ProfileSubscription extends Component { gap: var(--boxel-sp-xs); padding-left: var(--boxel-sp-sm); border-left: 5px solid #c6c6c6; + min-height: 40px; } .credit-info__label { font: var(--boxel-font-xs); @@ -148,16 +155,21 @@ export default class ProfileSubscription extends Component { --icon-color: var(--boxel-teal); --boxel-loading-indicator-size: var(--boxel-icon-xs); } + :deep(.boxel-loading-indicator) { + width: 100%; + text-align: center; + } @service private declare billingService: BillingService; - private get paymentLinks() { - return this.fetchPaymentLinks.value ?? []; + constructor(owner: Owner, args: any) { + super(owner, args); + this.fetchPaymentLinks.perform(); } - private fetchPaymentLinks = trackedFunction(this, async () => { + private fetchPaymentLinks = task(async () => { return await this.billingService.fetchPaymentLinks(); }); diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index 247d515051..e22eedf77c 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -5,6 +5,7 @@ import { tracked } from '@glimmer/tracking'; import { dropTask } from 'ember-concurrency'; +import window from 'ember-window-mock'; import Stripe from 'stripe'; import { SupportedMimeType } from '@cardstack/runtime-common'; @@ -31,7 +32,7 @@ interface PaymentLink { export default class BillingService extends Service { @tracked private _subscriptionData: SubscriptionData | null = null; - private _paymentLinks: PaymentLink[] | null = null; + @tracked private _paymentLinks: PaymentLink[] | null = null; @service private declare realmServer: RealmServerService; @service private declare network: NetworkService; @@ -57,22 +58,30 @@ export default class BillingService extends Service { async fetchPaymentLinks() { if (!this._paymentLinks) { - let response = await stripe.paymentLinks.list(); - this._paymentLinks = response.data - .filter((data) => data.metadata.credit_reload_amount) - .map((data) => ({ - url: data.url, - creditReloadAmount: Number(data.metadata.credit_reload_amount), - })) - .sort( - (paymentLinkA, paymentLinkB) => - paymentLinkA.creditReloadAmount - paymentLinkB.creditReloadAmount, - ); + await this.fetchPaymentLinksTask.perform(); } return this._paymentLinks; } + get paymentLinks() { + return this._paymentLinks; + } + + private fetchPaymentLinksTask = dropTask(async () => { + let response = await stripe.paymentLinks.list(); + this._paymentLinks = response.data + .filter((data) => data.metadata.credit_reload_amount) + .map((data) => ({ + url: data.url, + creditReloadAmount: Number(data.metadata.credit_reload_amount), + })) + .sort( + (paymentLinkA, paymentLinkB) => + paymentLinkA.creditReloadAmount - paymentLinkB.creditReloadAmount, + ); + }); + get subscriptionData() { return this._subscriptionData; } diff --git a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts index 1444c04098..2722199f7f 100644 --- a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts +++ b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts @@ -867,6 +867,25 @@ module('Acceptance | operator mode tests', function (hooks) { }); test(`displays credit info in account popover`, async function (assert) { + let countWindowOpenCalled = 0; + let mockWindow = { + closeCalled: false, + close() { + this.closeCalled = true; + }, + }; + + const originalWindowOpen = window.open; + window.open = (url, _target, _feature) => { + assert.true( + typeof url === 'string' + ? url.includes('stripe') + : url?.href.includes('stripe'), + ); + countWindowOpenCalled++; + return mockWindow as unknown as Window; + }; + await visitOperatorMode({ submode: 'interact', codePath: `${testRealmURL}employee.gts`, @@ -901,19 +920,35 @@ module('Acceptance | operator mode tests', function (hooks) { assert.dom('[data-test-buy-more-credits]').hasNoClass('out-of-credit'); await click('[data-test-upgrade-plan-button]'); - assert.dom('[data-test-profile-popover]').doesNotExist(); - assert - .dom('[data-test-boxel-card-container]') - .hasClass('profile-settings'); - await click('[aria-label="close modal"]'); - await click('[data-test-profile-icon-button]'); assert.dom('[data-test-profile-popover]').exists(); await click('[data-test-buy-more-credits] button'); assert.dom('[data-test-profile-popover]').doesNotExist(); assert .dom('[data-test-boxel-card-container]') .hasClass('profile-settings'); + assert.dom('[data-test-subscription-data="plan"]').hasText('Free'); + assert + .dom('[data-test-subscription-data="monthly-credit"]') + .hasText('1000 of 1000 left'); + assert + .dom('[data-test-subscription-data="monthly-credit"]') + .hasNoClass('out-of-credit'); + assert + .dom('[data-test-subscription-data="additional-credit"]') + .hasText('100'); + assert + .dom('[data-test-subscription-data="additional-credit"]') + .hasNoClass('out-of-credit'); + await waitFor('[data-test-payment-link]'); + assert.dom('[data-test-payment-link]').exists({ count: 3 }); + await click('[data-test-manage-plan-button]'); + await click('[data-test-pay-button]'); + assert.strictEqual( + countWindowOpenCalled, + 3, + 'Correct number of times window.open was called', + ); // out of credit await click('[aria-label="close modal"]'); @@ -986,6 +1021,7 @@ module('Acceptance | operator mode tests', function (hooks) { .dom('[data-test-subscription-data="additional-credit"]') .hasNoClass('out-of-credit'); assert.dom('[data-test-buy-more-credits]').hasNoClass('out-of-credit'); + window.open = originalWindowOpen; }); }); }); From fdeeb5a415b538574426fc777ee1804256256507 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Tue, 26 Nov 2024 11:42:56 +0700 Subject: [PATCH 03/16] Fix css --- .../components/operator-mode/profile/profile-subscription.gts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/host/app/components/operator-mode/profile/profile-subscription.gts b/packages/host/app/components/operator-mode/profile/profile-subscription.gts index 8d31b0be1b..0c1a700332 100644 --- a/packages/host/app/components/operator-mode/profile/profile-subscription.gts +++ b/packages/host/app/components/operator-mode/profile/profile-subscription.gts @@ -155,7 +155,7 @@ export default class ProfileSubscription extends Component { --icon-color: var(--boxel-teal); --boxel-loading-indicator-size: var(--boxel-icon-xs); } - :deep(.boxel-loading-indicator) { + :deep(.buy-more-credits .boxel-loading-indicator) { width: 100%; text-align: center; } From b8ece73b06fda8b366a896c8ed4a38c025767644 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Wed, 27 Nov 2024 13:03:06 +0700 Subject: [PATCH 04/16] Consume stripe links from realm server endpoint --- .../operator-mode/profile-info-popover.gts | 17 ++++- .../profile/profile-subscription.gts | 34 +++++++-- packages/host/app/config/environment.d.ts | 2 - packages/host/app/services/billing-service.ts | 75 ++++++++++++------- packages/host/config/environment.js | 6 -- packages/host/package.json | 1 - .../operator-mode-acceptance-test.gts | 3 +- packages/host/tests/helpers/index.gts | 45 +++++++++++ pnpm-lock.yaml | 3 - 9 files changed, 133 insertions(+), 53 deletions(-) diff --git a/packages/host/app/components/operator-mode/profile-info-popover.gts b/packages/host/app/components/operator-mode/profile-info-popover.gts index a5802f3f61..70341a88b6 100644 --- a/packages/host/app/components/operator-mode/profile-info-popover.gts +++ b/packages/host/app/components/operator-mode/profile-info-popover.gts @@ -4,8 +4,12 @@ import { action } from '@ember/object'; import { inject as service } from '@ember/service'; import Component from '@glimmer/component'; +import { restartableTask } from 'ember-concurrency'; + +import perform from 'ember-concurrency/helpers/perform'; + import { Avatar, BoxelButton } from '@cardstack/boxel-ui/components'; -import { cn } from '@cardstack/boxel-ui/helpers'; +import { cn, or } from '@cardstack/boxel-ui/helpers'; import WithSubscriptionData from '@cardstack/host/components/with-subscription-data'; import config from '@cardstack/host/config/environment'; @@ -143,9 +147,12 @@ export default class ProfileInfoPopover extends ComponentUpgrade Plan
Monthly Credit @@ -185,6 +192,10 @@ export default class ProfileInfoPopover extends Component { + await this.billingService.managePlan(); + }); } export class ProfileInfo extends Component { diff --git a/packages/host/app/components/operator-mode/profile/profile-subscription.gts b/packages/host/app/components/operator-mode/profile/profile-subscription.gts index 0c1a700332..bbf0c69772 100644 --- a/packages/host/app/components/operator-mode/profile/profile-subscription.gts +++ b/packages/host/app/components/operator-mode/profile/profile-subscription.gts @@ -5,8 +5,9 @@ import Owner from '@ember/owner'; import { service } from '@ember/service'; import Component from '@glimmer/component'; -import { task } from 'ember-concurrency'; +import { restartableTask, task } from 'ember-concurrency'; +import perform from 'ember-concurrency/helpers/perform'; import window from 'ember-window-mock'; import { @@ -14,6 +15,7 @@ import { FieldContainer, LoadingIndicator, } from '@cardstack/boxel-ui/components'; +import { or } from '@cardstack/boxel-ui/helpers'; import { IconHexagon } from '@cardstack/boxel-ui/icons'; import WithSubscriptionData from '@cardstack/host/components/with-subscription-data'; @@ -43,8 +45,12 @@ export default class ProfileSubscription extends Component { Manage Plan
@@ -63,11 +69,11 @@ export default class ProfileSubscription extends Component {
Buy more credits
- {{#if this.fetchPaymentLinks.isRunning}} + {{#if this.fetchStripeLinks.isRunning}} {{else}} {{#each - this.billingService.paymentLinks + this.additionalCreditsPaymentLinks as |paymentLink index| }}
@@ -166,14 +172,26 @@ export default class ProfileSubscription extends Component { constructor(owner: Owner, args: any) { super(owner, args); - this.fetchPaymentLinks.perform(); + this.fetchStripeLinks.perform(); } - private fetchPaymentLinks = task(async () => { - return await this.billingService.fetchPaymentLinks(); + private fetchStripeLinks = task(async () => { + await this.billingService.fetchStripeLinks(); }); + private get additionalCreditsPaymentLinks() { + return this.billingService.stripeLinks + ?.filter((link) => link.creditReloadAmount) + .sort( + (linkA, linkB) => linkA.creditReloadAmount! - linkB.creditReloadAmount!, + ); + } + private pay(paymentLinkURL: string) { window.open(paymentLinkURL); } + + private managePlan = restartableTask(async () => { + await this.billingService.managePlan(); + }); } diff --git a/packages/host/app/config/environment.d.ts b/packages/host/app/config/environment.d.ts index ebbffb39c8..f7ba4b08a8 100644 --- a/packages/host/app/config/environment.d.ts +++ b/packages/host/app/config/environment.d.ts @@ -28,6 +28,4 @@ declare const config: { sqlSchema: string; assetsURL: string; featureFlags?: {}; - stripeCustomerPortalLink: string; - stripeApiKey: string; }; diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index e22eedf77c..3ea64a8214 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -6,18 +6,13 @@ import { tracked } from '@glimmer/tracking'; import { dropTask } from 'ember-concurrency'; import window from 'ember-window-mock'; -import Stripe from 'stripe'; import { SupportedMimeType } from '@cardstack/runtime-common'; -import environment from '../config/environment'; - import NetworkService from './network'; import RealmServerService from './realm-server'; import ResetService from './reset'; -const stripe = new Stripe(environment.stripeApiKey); - interface SubscriptionData { plan: string | null; creditsAvailableInPlanAllowance: number | null; @@ -25,14 +20,15 @@ interface SubscriptionData { extraCreditsAvailableInBalance: number | null; } -interface PaymentLink { +interface StripeLink { + type: string; url: string; - creditReloadAmount: number; + creditReloadAmount?: number; } export default class BillingService extends Service { @tracked private _subscriptionData: SubscriptionData | null = null; - @tracked private _paymentLinks: PaymentLink[] | null = null; + @tracked private _stripeLinks: StripeLink[] | null = null; @service private declare realmServer: RealmServerService; @service private declare network: NetworkService; @@ -49,37 +45,60 @@ export default class BillingService extends Service { resetState() { this._subscriptionData = null; - this._paymentLinks = null; + this._stripeLinks = null; } - managePlan() { - window.open(environment.stripeCustomerPortalLink); + async managePlan() { + await this.fetchStripeLinks(); + let customerPortalLink = this.stripeLinks?.find( + (link) => link.type === 'customer-portal-link', + ); + if (!customerPortalLink) { + throw new Error('customer portal link is not found'); + } + window.open(customerPortalLink.url); } - async fetchPaymentLinks() { - if (!this._paymentLinks) { - await this.fetchPaymentLinksTask.perform(); + async fetchStripeLinks() { + if (this._stripeLinks) { + return; } - return this._paymentLinks; + await this.fetchStripeLinksTask.perform(); } - get paymentLinks() { - return this._paymentLinks; + get stripeLinks() { + return this._stripeLinks; } - private fetchPaymentLinksTask = dropTask(async () => { - let response = await stripe.paymentLinks.list(); - this._paymentLinks = response.data - .filter((data) => data.metadata.credit_reload_amount) - .map((data) => ({ - url: data.url, - creditReloadAmount: Number(data.metadata.credit_reload_amount), - })) - .sort( - (paymentLinkA, paymentLinkB) => - paymentLinkA.creditReloadAmount - paymentLinkB.creditReloadAmount, + private fetchStripeLinksTask = dropTask(async () => { + let response = await this.network.fetch( + `${this.url.origin}/_stripe-links`, + { + headers: { + Accept: SupportedMimeType.JSONAPI, + 'Content-Type': 'application/json', + Authorization: `Bearer ${await this.getToken()}`, + }, + }, + ); + if (response.status !== 200) { + throw new Error( + `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, ); + } + + let json = (await response.json()) as { + data: { + type: string; + attributes: { url: string; metadata?: { creditReloadAmount: number } }; + }[]; + }; + this._stripeLinks = json.data.map((data) => ({ + type: data.type, + url: data.attributes.url, + creditReloadAmount: data.attributes.metadata?.creditReloadAmount, + })); }); get subscriptionData() { diff --git a/packages/host/config/environment.js b/packages/host/config/environment.js index df713b58df..44f2dfb8cf 100644 --- a/packages/host/config/environment.js +++ b/packages/host/config/environment.js @@ -46,12 +46,6 @@ module.exports = function (environment) { resolvedBaseRealmURL: process.env.RESOLVED_BASE_REALM_URL || 'http://localhost:4201/base/', featureFlags: {}, - stripeCustomerPortalLink: - process.env.STRIPE_CUSTOMER_PORTAL_LINK || - 'https://billing.stripe.com/p/login/test_cN216h3BlbML3FS144', - stripeApiKey: - process.env.STRIPE_API_KEY || - 'sk_test_51Q8hkbPUHhctoJxanM9uVZban3mK5he2g1s7r1gKvBXTpejGxUdJHSjWLlmB8LzIaffiQj9Bj96ag0OxTwNl5BGk00Ov4gjcBC', }; if (environment === 'development') { diff --git a/packages/host/package.json b/packages/host/package.json index b14c9e920b..d9f60793da 100644 --- a/packages/host/package.json +++ b/packages/host/package.json @@ -165,7 +165,6 @@ "safe-stable-stringify": "^2.4.3", "start-server-and-test": "^1.14.0", "stream-browserify": "^3.0.0", - "stripe": "^17.2.1", "super-fast-md5": "^1.0.1", "testem": "3.10.1", "testem-multi-reporter": "^1.2.0", diff --git a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts index 2722199f7f..16de3caabf 100644 --- a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts +++ b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts @@ -940,8 +940,7 @@ module('Acceptance | operator mode tests', function (hooks) { assert .dom('[data-test-subscription-data="additional-credit"]') .hasNoClass('out-of-credit'); - await waitFor('[data-test-payment-link]'); - assert.dom('[data-test-payment-link]').exists({ count: 3 }); + assert.dom('[data-test-payment-link]').exists({ count: 2 }); await click('[data-test-manage-plan-button]'); await click('[data-test-pay-button]'); assert.strictEqual( diff --git a/packages/host/tests/helpers/index.gts b/packages/host/tests/helpers/index.gts index 789586e72d..743dd46da9 100644 --- a/packages/host/tests/helpers/index.gts +++ b/packages/host/tests/helpers/index.gts @@ -704,6 +704,51 @@ export function setupRealmServerEndpoints( ); }, }, + { + route: '_stripe-links', + getResponse: async function (_req: Request) { + return new Response( + JSON.stringify({ + data: [ + { + type: 'customer-portal-link', + id: '1', + attributes: { + url: 'https://buy.stripe.com/test_bIY01W11heYNeFqbIH', + }, + }, + { + type: 'free-plan-payment-link', + id: 'plink_1QP4pEPUHhctoJxaEp1D3myQ', + attributes: { + url: 'https://billing.stripe.com/p/login/test_cN216h3BlbML3Fasdf', + }, + }, + { + type: 'extra-credits-payment-link', + id: 'plink_1QP4pEPUHhctoJxaEp1D3myP', + attributes: { + url: 'https://buy.stripe.com/test_bIY01W11heYNeFqbIO', + metadata: { + creditReloadAmount: 15000, + }, + }, + }, + { + type: 'extra-credits-payment-link', + id: 'plink_1QP4pEPUHhctoJxaEp1D3my!', + attributes: { + url: 'https://buy.stripe.com/test_bIY01W11hesdfaeEaAs', + metadata: { + creditReloadAmount: 80000, + }, + }, + }, + ], + }), + ); + }, + }, ]; let handleRealmServerRequest = async (req: Request) => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1ef7b84464..ee7c1bb03c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1635,9 +1635,6 @@ importers: stream-browserify: specifier: ^3.0.0 version: 3.0.0 - stripe: - specifier: ^17.2.1 - version: 17.2.1 super-fast-md5: specifier: ^1.0.1 version: 1.0.1 From 471f02cad21c94fbd6d65b8fe5041631bb48ff1c Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Thu, 28 Nov 2024 10:36:51 +0700 Subject: [PATCH 05/16] Cache the promise instead --- packages/host/app/services/billing-service.ts | 136 +++++++++--------- 1 file changed, 72 insertions(+), 64 deletions(-) diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index 3ea64a8214..bf7fa54fa4 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -29,6 +29,8 @@ interface StripeLink { export default class BillingService extends Service { @tracked private _subscriptionData: SubscriptionData | null = null; @tracked private _stripeLinks: StripeLink[] | null = null; + private _fetchingSubscriptionData: Promise | null = null; + private _fetchingStripeLinks: Promise | null = null; @service private declare realmServer: RealmServerService; @service private declare network: NetworkService; @@ -38,7 +40,7 @@ export default class BillingService extends Service { super(owner); this.realmServer.subscribeEvent( 'billing-notification', - this.subscriptionDataRefresher.bind(this), + this.fetchSubscriptionData.bind(this), ); this.reset.register(this); } @@ -60,11 +62,10 @@ export default class BillingService extends Service { } async fetchStripeLinks() { - if (this._stripeLinks) { - return; + if (!this._fetchingStripeLinks) { + this._fetchingStripeLinks = this.fetchStripeLinksTask.perform(); } - - await this.fetchStripeLinksTask.perform(); + await this._fetchingStripeLinks; } get stripeLinks() { @@ -72,33 +73,40 @@ export default class BillingService extends Service { } private fetchStripeLinksTask = dropTask(async () => { - let response = await this.network.fetch( - `${this.url.origin}/_stripe-links`, - { - headers: { - Accept: SupportedMimeType.JSONAPI, - 'Content-Type': 'application/json', - Authorization: `Bearer ${await this.getToken()}`, + try { + let response = await this.network.fetch( + `${this.url.origin}/_stripe-links`, + { + headers: { + Accept: SupportedMimeType.JSONAPI, + 'Content-Type': 'application/json', + Authorization: `Bearer ${await this.getToken()}`, + }, }, - }, - ); - if (response.status !== 200) { - throw new Error( - `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, ); + if (response.status !== 200) { + throw new Error( + `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, + ); + } + + let json = (await response.json()) as { + data: { + type: string; + attributes: { + url: string; + metadata?: { creditReloadAmount: number }; + }; + }[]; + }; + this._stripeLinks = json.data.map((data) => ({ + type: data.type, + url: data.attributes.url, + creditReloadAmount: data.attributes.metadata?.creditReloadAmount, + })); + } finally { + this._fetchingStripeLinks = null; } - - let json = (await response.json()) as { - data: { - type: string; - attributes: { url: string; metadata?: { creditReloadAmount: number } }; - }[]; - }; - this._stripeLinks = json.data.map((data) => ({ - type: data.type, - url: data.attributes.url, - creditReloadAmount: data.attributes.metadata?.creditReloadAmount, - })); }); get subscriptionData() { @@ -106,49 +114,49 @@ export default class BillingService extends Service { } get fetchingSubscriptionData() { - return this.fetchSubscriptionDataTask.isRunning; + return !!this._fetchingSubscriptionData; } async fetchSubscriptionData() { - if (this.subscriptionData) { - return; + if (!this._fetchingSubscriptionData) { + this._fetchingSubscriptionData = this.fetchSubscriptionDataTask.perform(); } - await this.fetchSubscriptionDataTask.perform(); - } - - private async subscriptionDataRefresher() { - await this.fetchSubscriptionDataTask.perform(); + await this._fetchingSubscriptionData; } private fetchSubscriptionDataTask = dropTask(async () => { - let response = await this.network.fetch(`${this.url.origin}/_user`, { - headers: { - Accept: SupportedMimeType.JSONAPI, - 'Content-Type': 'application/json', - Authorization: `Bearer ${await this.getToken()}`, - }, - }); - if (response.status !== 200) { - throw new Error( - `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, - ); + try { + let response = await this.network.fetch(`${this.url.origin}/_user`, { + headers: { + Accept: SupportedMimeType.JSONAPI, + 'Content-Type': 'application/json', + Authorization: `Bearer ${await this.getToken()}`, + }, + }); + if (response.status !== 200) { + throw new Error( + `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, + ); + } + let json = await response.json(); + let plan = + json.included?.find((i: { type: string }) => i.type === 'plan') + ?.attributes?.name ?? null; + let creditsAvailableInPlanAllowance = + json.data?.attributes?.creditsAvailableInPlanAllowance ?? null; + let creditsIncludedInPlanAllowance = + json.data?.attributes?.creditsIncludedInPlanAllowance ?? null; + let extraCreditsAvailableInBalance = + json.data?.attributes?.extraCreditsAvailableInBalance ?? null; + this._subscriptionData = { + plan, + creditsAvailableInPlanAllowance, + creditsIncludedInPlanAllowance, + extraCreditsAvailableInBalance, + }; + } finally { + this._fetchingSubscriptionData = null; } - let json = await response.json(); - let plan = - json.included?.find((i: { type: string }) => i.type === 'plan') - ?.attributes?.name ?? null; - let creditsAvailableInPlanAllowance = - json.data?.attributes?.creditsAvailableInPlanAllowance ?? null; - let creditsIncludedInPlanAllowance = - json.data?.attributes?.creditsIncludedInPlanAllowance ?? null; - let extraCreditsAvailableInBalance = - json.data?.attributes?.extraCreditsAvailableInBalance ?? null; - this._subscriptionData = { - plan, - creditsAvailableInPlanAllowance, - creditsIncludedInPlanAllowance, - extraCreditsAvailableInBalance, - }; }); private async getToken() { From 8eaeebaa705dd5eb20d04c1d32d5ce562bd043a6 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Thu, 28 Nov 2024 12:58:37 +0700 Subject: [PATCH 06/16] Fix matrix tests --- packages/host/app/components/matrix/payment-setup.gts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/host/app/components/matrix/payment-setup.gts b/packages/host/app/components/matrix/payment-setup.gts index bbd86ddaba..1b9c7afddb 100644 --- a/packages/host/app/components/matrix/payment-setup.gts +++ b/packages/host/app/components/matrix/payment-setup.gts @@ -29,8 +29,11 @@ import { Lock, } from '@cardstack/boxel-ui/icons'; +const { environment } = ENV; + import ProfileSettingsModal from '@cardstack/host/components/operator-mode/profile/profile-settings-modal'; import ProfileInfoPopover from '@cardstack/host/components/operator-mode/profile-info-popover'; +import ENV from '@cardstack/host/config/environment'; import type BillingService from '@cardstack/host/services/billing-service'; import type MatrixService from '@cardstack/host/services/matrix-service'; @@ -52,7 +55,10 @@ export default class PaymentSetup extends Component { let paymentLink = await this.billingService.getStripePaymentLink( this.args.matrixUserId, ); - window.open(paymentLink); + window.open( + paymentLink, + environment === 'development' ? '_blank' : '_self', + ); }); @action private toggleProfileSettings() { From 9e8f526f7a49b0c4ee54a5c20ba43a4d0f0066e8 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Thu, 28 Nov 2024 19:39:43 +0700 Subject: [PATCH 07/16] Use trackedFunction instead of dropTask --- .../app/components/matrix/payment-setup.gts | 22 +--- .../operator-mode/profile-info-popover.gts | 14 +-- .../profile/profile-subscription.gts | 35 ++---- packages/host/app/services/billing-service.ts | 118 +++++++++--------- 4 files changed, 77 insertions(+), 112 deletions(-) diff --git a/packages/host/app/components/matrix/payment-setup.gts b/packages/host/app/components/matrix/payment-setup.gts index 1b9c7afddb..ea5803e812 100644 --- a/packages/host/app/components/matrix/payment-setup.gts +++ b/packages/host/app/components/matrix/payment-setup.gts @@ -8,11 +8,6 @@ import { tracked } from '@glimmer/tracking'; import InfoCircleIcon from '@cardstack/boxel-icons/info-circle'; import onClickOutside from 'ember-click-outside/modifiers/on-click-outside'; -import { task } from 'ember-concurrency'; - -import perform from 'ember-concurrency/helpers/perform'; -import window from 'ember-window-mock'; - import { BoxelButton, BoxelHeader, @@ -51,15 +46,9 @@ export default class PaymentSetup extends Component { @tracked private profileSettingsOpened = false; @tracked private profileSummaryOpened = false; - setupPaymentMethod = task(async () => { - let paymentLink = await this.billingService.getStripePaymentLink( - this.args.matrixUserId, - ); - window.open( - paymentLink, - environment === 'development' ? '_blank' : '_self', - ); - }); + get stripePaymentLink() { + return this.billingService.getStripePaymentLink(this.args.matrixUserId); + } @action private toggleProfileSettings() { this.profileSettingsOpened = !this.profileSettingsOpened; @@ -135,10 +124,11 @@ export default class PaymentSetup extends Component { Set up Secure Payment Method diff --git a/packages/host/app/components/operator-mode/profile-info-popover.gts b/packages/host/app/components/operator-mode/profile-info-popover.gts index 8fef49c114..d25a46e5d5 100644 --- a/packages/host/app/components/operator-mode/profile-info-popover.gts +++ b/packages/host/app/components/operator-mode/profile-info-popover.gts @@ -4,9 +4,7 @@ import { action } from '@ember/object'; import { inject as service } from '@ember/service'; import Component from '@glimmer/component'; -import { restartableTask } from 'ember-concurrency'; - -import perform from 'ember-concurrency/helpers/perform'; +import window from 'ember-window-mock'; import { Avatar, BoxelButton } from '@cardstack/boxel-ui/components'; import { cn, or } from '@cardstack/boxel-ui/helpers'; @@ -149,10 +147,10 @@ export default class ProfileInfoPopover extends ComponentUpgrade Plan
Monthly Credit @@ -194,9 +192,9 @@ export default class ProfileInfoPopover extends Component { - await this.billingService.managePlan(); - }); + @action private managePlan() { + window.open(this.billingService.customerPortalLink?.url); + } } export class ProfileInfo extends Component { diff --git a/packages/host/app/components/operator-mode/profile/profile-subscription.gts b/packages/host/app/components/operator-mode/profile/profile-subscription.gts index bbf0c69772..824f101a90 100644 --- a/packages/host/app/components/operator-mode/profile/profile-subscription.gts +++ b/packages/host/app/components/operator-mode/profile/profile-subscription.gts @@ -1,13 +1,10 @@ import { fn } from '@ember/helper'; import { on } from '@ember/modifier'; -import Owner from '@ember/owner'; +import { action } from '@ember/object'; import { service } from '@ember/service'; import Component from '@glimmer/component'; -import { restartableTask, task } from 'ember-concurrency'; - -import perform from 'ember-concurrency/helpers/perform'; import window from 'ember-window-mock'; import { @@ -47,11 +44,10 @@ export default class ProfileSubscription extends Component { @size='extra-small' @disabled={{or subscriptionData.isLoading - this.fetchStripeLinks.isRunning - this.managePlan.isRunning + this.billingService.fetchingStripePaymentLinks }} - {{on 'click' (perform this.managePlan)}} data-test-manage-plan-button + {{on 'click' this.managePlan}} >Manage Plan
@@ -69,11 +65,11 @@ export default class ProfileSubscription extends Component {
Buy more credits
- {{#if this.fetchStripeLinks.isRunning}} + {{#if this.billingService.fetchingStripePaymentLinks}} {{else}} {{#each - this.additionalCreditsPaymentLinks + this.billingService.extraCreditsPaymentLinks as |paymentLink index| }}
@@ -170,28 +166,11 @@ export default class ProfileSubscription extends Component { @service private declare billingService: BillingService; - constructor(owner: Owner, args: any) { - super(owner, args); - this.fetchStripeLinks.perform(); - } - - private fetchStripeLinks = task(async () => { - await this.billingService.fetchStripeLinks(); - }); - - private get additionalCreditsPaymentLinks() { - return this.billingService.stripeLinks - ?.filter((link) => link.creditReloadAmount) - .sort( - (linkA, linkB) => linkA.creditReloadAmount! - linkB.creditReloadAmount!, - ); + @action private managePlan() { + window.open(this.billingService.customerPortalLink?.url); } private pay(paymentLinkURL: string) { window.open(paymentLinkURL); } - - private managePlan = restartableTask(async () => { - await this.billingService.managePlan(); - }); } diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index dfce1d5650..ceb90495f1 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -1,11 +1,11 @@ import Owner from '@ember/owner'; import Service from '@ember/service'; import { service } from '@ember/service'; -import { tracked } from '@glimmer/tracking'; +import { cached, tracked } from '@glimmer/tracking'; import { dropTask } from 'ember-concurrency'; -import window from 'ember-window-mock'; +import { trackedFunction } from 'ember-resources/util/function'; import { SupportedMimeType } from '@cardstack/runtime-common'; @@ -29,9 +29,7 @@ interface StripeLink { export default class BillingService extends Service { @tracked private _subscriptionData: SubscriptionData | null = null; - @tracked private _stripeLinks: StripeLink[] | null = null; private _fetchingSubscriptionData: Promise | null = null; - private _fetchingStripeLinks: Promise | null = null; @service private declare realmServer: RealmServerService; @service private declare network: NetworkService; @@ -48,66 +46,70 @@ export default class BillingService extends Service { resetState() { this._subscriptionData = null; - this._stripeLinks = null; } - async managePlan() { - await this.fetchStripeLinks(); - let customerPortalLink = this.stripeLinks?.find( - (link) => link.type === 'customer-portal-link', - ); - if (!customerPortalLink) { - throw new Error('customer portal link is not found'); - } - window.open(customerPortalLink.url); + @cached + get customerPortalLink() { + return this.stripePaymentLinks.value?.customerPortalLink; } - async fetchStripeLinks() { - if (!this._fetchingStripeLinks) { - this._fetchingStripeLinks = this.fetchStripeLinksTask.perform(); - } - await this._fetchingStripeLinks; + @cached + get freePlanPaymentLink() { + return this.stripePaymentLinks.value?.freePlanPaymentLink; } - get stripeLinks() { - return this._stripeLinks; + @cached + get extraCreditsPaymentLinks() { + return this.stripePaymentLinks.value?.extraCreditsPaymentLinks; } - private fetchStripeLinksTask = dropTask(async () => { - try { - let response = await this.network.fetch( - `${this.url.origin}/_stripe-links`, - { - headers: { - Accept: SupportedMimeType.JSONAPI, - 'Content-Type': 'application/json', - Authorization: `Bearer ${await this.getToken()}`, - }, + @cached + get fetchingStripePaymentLinks() { + return this.stripePaymentLinks.isLoading; + } + + private stripePaymentLinks = trackedFunction(this, async () => { + let response = await this.network.fetch( + `${this.url.origin}/_stripe-links`, + { + headers: { + Accept: SupportedMimeType.JSONAPI, + 'Content-Type': 'application/json', + Authorization: `Bearer ${await this.getToken()}`, }, + }, + ); + if (response.status !== 200) { + throw new Error( + `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, ); - if (response.status !== 200) { - throw new Error( - `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, - ); - } - - let json = (await response.json()) as { - data: { - type: string; - attributes: { - url: string; - metadata?: { creditReloadAmount: number }; - }; - }[]; - }; - this._stripeLinks = json.data.map((data) => ({ - type: data.type, - url: data.attributes.url, - creditReloadAmount: data.attributes.metadata?.creditReloadAmount, - })); - } finally { - this._fetchingStripeLinks = null; } + + let json = (await response.json()) as { + data: { + type: string; + attributes: { + url: string; + metadata?: { creditReloadAmount: number }; + }; + }[]; + }; + let links = json.data.map((data) => ({ + type: data.type, + url: data.attributes.url, + creditReloadAmount: data.attributes.metadata?.creditReloadAmount, + })) as StripeLink[]; + return { + customerPortalLink: links.find( + (link) => link.type === 'customer-portal-link', + ), + freePlanPaymentLink: links.find( + (link) => link.type === 'free-plan-payment-link', + ), + extraCreditsPaymentLinks: links.filter( + (link) => link.type === 'extra-credits-payment-link', + ), + }; }); encodeToAlphanumeric(matrixUserId: string) { @@ -118,20 +120,16 @@ export default class BillingService extends Service { .replace(/=+$/, ''); } - async getStripePaymentLink(matrixUserId: string): Promise { + getStripePaymentLink(matrixUserId: string): string { // We use the matrix user id (@username:example.com) as the client reference id for stripe // so we can identify the user payment in our system when we get the webhook // the client reference id must be alphanumeric, so we encode the matrix user id // https://docs.stripe.com/payment-links/url-parameters#streamline-reconciliation-with-a-url-parameter - await this.fetchStripeLinks(); - let freePaymentLink = this._stripeLinks?.find( - (link) => link.type === 'free-plan-payment-link', - ); - if (!freePaymentLink) { + if (!this.freePlanPaymentLink) { throw new Error('free payment link is not found'); } const clientReferenceId = this.encodeToAlphanumeric(matrixUserId); - return `${freePaymentLink}?client_reference_id=${clientReferenceId}`; + return `${this.freePlanPaymentLink}?client_reference_id=${clientReferenceId}`; } get subscriptionData() { From 6292d2a6f458c774e5b14abf1089c3a18c85fad0 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Thu, 28 Nov 2024 20:43:54 +0700 Subject: [PATCH 08/16] Use href --- .../operator-mode/profile-info-popover.gts | 9 +--- .../profile/profile-subscription.gts | 20 ++------ packages/host/app/services/billing-service.ts | 2 +- .../operator-mode-acceptance-test.gts | 46 +++++++------------ packages/host/tests/helpers/index.gts | 18 ++++++-- 5 files changed, 37 insertions(+), 58 deletions(-) diff --git a/packages/host/app/components/operator-mode/profile-info-popover.gts b/packages/host/app/components/operator-mode/profile-info-popover.gts index d25a46e5d5..d160fd5860 100644 --- a/packages/host/app/components/operator-mode/profile-info-popover.gts +++ b/packages/host/app/components/operator-mode/profile-info-popover.gts @@ -4,8 +4,6 @@ import { action } from '@ember/object'; import { inject as service } from '@ember/service'; import Component from '@glimmer/component'; -import window from 'ember-window-mock'; - import { Avatar, BoxelButton } from '@cardstack/boxel-ui/components'; import { cn, or } from '@cardstack/boxel-ui/helpers'; @@ -143,14 +141,15 @@ export default class ProfileInfoPopover extends Component Upgrade Plan
Monthly Credit @@ -191,10 +190,6 @@ export default class ProfileInfoPopover extends Component { diff --git a/packages/host/app/components/operator-mode/profile/profile-subscription.gts b/packages/host/app/components/operator-mode/profile/profile-subscription.gts index 824f101a90..9cae0b9023 100644 --- a/packages/host/app/components/operator-mode/profile/profile-subscription.gts +++ b/packages/host/app/components/operator-mode/profile/profile-subscription.gts @@ -1,12 +1,6 @@ -import { fn } from '@ember/helper'; - -import { on } from '@ember/modifier'; -import { action } from '@ember/object'; import { service } from '@ember/service'; import Component from '@glimmer/component'; -import window from 'ember-window-mock'; - import { BoxelButton, FieldContainer, @@ -40,14 +34,15 @@ export default class ProfileSubscription extends Component {
Manage Plan
@@ -76,9 +71,10 @@ export default class ProfileSubscription extends Component { {{paymentLink.creditReloadAmount}} Pay
@@ -165,12 +161,4 @@ export default class ProfileSubscription extends Component { @service private declare billingService: BillingService; - - @action private managePlan() { - window.open(this.billingService.customerPortalLink?.url); - } - - private pay(paymentLinkURL: string) { - window.open(paymentLinkURL); - } } diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index ceb90495f1..ec38c3396c 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -129,7 +129,7 @@ export default class BillingService extends Service { throw new Error('free payment link is not found'); } const clientReferenceId = this.encodeToAlphanumeric(matrixUserId); - return `${this.freePlanPaymentLink}?client_reference_id=${clientReferenceId}`; + return `${this.freePlanPaymentLink.url}?client_reference_id=${clientReferenceId}`; } get subscriptionData() { diff --git a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts index 0e072a8376..545b242b91 100644 --- a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts +++ b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts @@ -870,25 +870,6 @@ module('Acceptance | operator mode tests', function (hooks) { }); test(`displays credit info in account popover`, async function (assert) { - let countWindowOpenCalled = 0; - let mockWindow = { - closeCalled: false, - close() { - this.closeCalled = true; - }, - }; - - const originalWindowOpen = window.open; - window.open = (url, _target, _feature) => { - assert.true( - typeof url === 'string' - ? url.includes('stripe') - : url?.href.includes('stripe'), - ); - countWindowOpenCalled++; - return mockWindow as unknown as Window; - }; - await visitOperatorMode({ submode: 'interact', codePath: `${testRealmURL}employee.gts`, @@ -921,8 +902,9 @@ module('Acceptance | operator mode tests', function (hooks) { assert.dom('[data-test-upgrade-plan-button]').exists(); assert.dom('[data-test-buy-more-credits]').exists(); assert.dom('[data-test-buy-more-credits]').hasNoClass('out-of-credit'); - - await click('[data-test-upgrade-plan-button]'); + assert + .dom('[data-test-upgrade-plan-button]') + .hasAttribute('href', 'https://customer-portal-link'); assert.dom('[data-test-profile-popover]').exists(); await click('[data-test-buy-more-credits] button'); @@ -943,14 +925,19 @@ module('Acceptance | operator mode tests', function (hooks) { assert .dom('[data-test-subscription-data="additional-credit"]') .hasNoClass('out-of-credit'); - assert.dom('[data-test-payment-link]').exists({ count: 2 }); - await click('[data-test-manage-plan-button]'); - await click('[data-test-pay-button]'); - assert.strictEqual( - countWindowOpenCalled, - 3, - 'Correct number of times window.open was called', - ); + assert + .dom('[data-test-manage-plan-button]') + .hasAttribute('href', 'https://customer-portal-link'); + assert.dom('[data-test-payment-link]').exists({ count: 3 }); + assert + .dom('[data-test-pay-button="0"]') + .hasAttribute('href', 'https://extra-credits-payment-link-1250'); + assert + .dom('[data-test-pay-button="1"]') + .hasAttribute('href', 'https://extra-credits-payment-link-15000'); + assert + .dom('[data-test-pay-button="2"]') + .hasAttribute('href', 'https://extra-credits-payment-link-80000'); // out of credit await click('[aria-label="close modal"]'); @@ -1023,7 +1010,6 @@ module('Acceptance | operator mode tests', function (hooks) { .dom('[data-test-subscription-data="additional-credit"]') .hasNoClass('out-of-credit'); assert.dom('[data-test-buy-more-credits]').hasNoClass('out-of-credit'); - window.open = originalWindowOpen; }); }); }); diff --git a/packages/host/tests/helpers/index.gts b/packages/host/tests/helpers/index.gts index 7fe420784e..3ef7de4e01 100644 --- a/packages/host/tests/helpers/index.gts +++ b/packages/host/tests/helpers/index.gts @@ -804,21 +804,31 @@ export function setupRealmServerEndpoints( type: 'customer-portal-link', id: '1', attributes: { - url: 'https://buy.stripe.com/test_bIY01W11heYNeFqbIH', + url: 'https://customer-portal-link', }, }, { type: 'free-plan-payment-link', id: 'plink_1QP4pEPUHhctoJxaEp1D3myQ', attributes: { - url: 'https://billing.stripe.com/p/login/test_cN216h3BlbML3Fasdf', + url: 'https://free-plan-payment-link', + }, + }, + { + type: 'extra-credits-payment-link', + id: 'plink_1QP4pEPUHhctoJxaEp1D3my!', + attributes: { + url: 'https://extra-credits-payment-link-1250', + metadata: { + creditReloadAmount: 1250, + }, }, }, { type: 'extra-credits-payment-link', id: 'plink_1QP4pEPUHhctoJxaEp1D3myP', attributes: { - url: 'https://buy.stripe.com/test_bIY01W11heYNeFqbIO', + url: 'https://extra-credits-payment-link-15000', metadata: { creditReloadAmount: 15000, }, @@ -828,7 +838,7 @@ export function setupRealmServerEndpoints( type: 'extra-credits-payment-link', id: 'plink_1QP4pEPUHhctoJxaEp1D3my!', attributes: { - url: 'https://buy.stripe.com/test_bIY01W11hesdfaeEaAs', + url: 'https://extra-credits-payment-link-80000', metadata: { creditReloadAmount: 80000, }, From 5370ebd1ce50977095fded181151dfbbf7b16d4b Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Thu, 28 Nov 2024 20:57:31 +0700 Subject: [PATCH 09/16] lint fix --- packages/host/app/services/billing-service.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index 89cfebc628..1834fcd1f0 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -6,6 +6,7 @@ import { cached, tracked } from '@glimmer/tracking'; import { dropTask } from 'ember-concurrency'; import { trackedFunction } from 'ember-resources/util/function'; + import { SupportedMimeType, encodeToAlphanumeric, From 2d6616d52f04d642e685405813ee0ce15736b267 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Thu, 28 Nov 2024 23:13:58 +0700 Subject: [PATCH 10/16] Don't break app --- packages/host/app/services/billing-service.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index 1834fcd1f0..321ec827cd 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -53,25 +53,25 @@ export default class BillingService extends Service { @cached get customerPortalLink() { - return this.stripePaymentLinks.value?.customerPortalLink; + return this.stripeLinks.value?.customerPortalLink; } @cached get freePlanPaymentLink() { - return this.stripePaymentLinks.value?.freePlanPaymentLink; + return this.stripeLinks.value?.freePlanPaymentLink; } @cached get extraCreditsPaymentLinks() { - return this.stripePaymentLinks.value?.extraCreditsPaymentLinks; + return this.stripeLinks.value?.extraCreditsPaymentLinks; } @cached get fetchingStripePaymentLinks() { - return this.stripePaymentLinks.isLoading; + return this.stripeLinks.isLoading; } - private stripePaymentLinks = trackedFunction(this, async () => { + private stripeLinks = trackedFunction(this, async () => { let response = await this.network.fetch( `${this.url.origin}/_stripe-links`, { @@ -83,9 +83,10 @@ export default class BillingService extends Service { }, ); if (response.status !== 200) { - throw new Error( - `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, + console.error( + `Failed to fetch stripe payment links for realm server ${this.url.origin}: ${response.status}`, ); + return; } let json = (await response.json()) as { From 4d7ed9b0c850d15c6ce1ccc54183e5aa71fdaed6 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Fri, 29 Nov 2024 13:51:23 +0700 Subject: [PATCH 11/16] Fix matrix tests --- .../app/components/with-subscription-data.gts | 13 +-- packages/host/app/services/billing-service.ts | 81 +++++++++---------- 2 files changed, 42 insertions(+), 52 deletions(-) diff --git a/packages/host/app/components/with-subscription-data.gts b/packages/host/app/components/with-subscription-data.gts index fe3237d09a..c217426472 100644 --- a/packages/host/app/components/with-subscription-data.gts +++ b/packages/host/app/components/with-subscription-data.gts @@ -3,8 +3,6 @@ import { hash } from '@ember/helper'; import { service } from '@ember/service'; import Component from '@glimmer/component'; -import { task } from 'ember-concurrency'; - import { LoadingIndicator } from '@cardstack/boxel-ui/components'; import { cn } from '@cardstack/boxel-ui/helpers'; import { IconHexagon } from '@cardstack/boxel-ui/icons'; @@ -75,18 +73,11 @@ export default class WithSubscriptionData extends Component { - await this.billingService.fetchSubscriptionData(); - }); - private get isLoading() { - return ( - this.fetchCreditInfo.isRunning || - this.billingService.fetchingSubscriptionData - ); + return this.billingService.fetchingSubscriptionData; } private get plan() { diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index 321ec827cd..cebbc56f96 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -32,7 +32,6 @@ interface StripeLink { export default class BillingService extends Service { @tracked private _subscriptionData: SubscriptionData | null = null; - private _fetchingSubscriptionData: Promise | null = null; @service private declare realmServer: RealmServerService; @service private declare network: NetworkService; @@ -42,7 +41,7 @@ export default class BillingService extends Service { super(owner); this.realmServer.subscribeEvent( 'billing-notification', - this.fetchSubscriptionData.bind(this), + this.subscriptionDataRefresher.bind(this), ); this.reset.register(this); } @@ -133,52 +132,52 @@ export default class BillingService extends Service { } get fetchingSubscriptionData() { - return !!this._fetchingSubscriptionData; + return this.fetchSubscriptionDataTask.isRunning; } - async fetchSubscriptionData() { - if (!this._fetchingSubscriptionData) { - this._fetchingSubscriptionData = this.fetchSubscriptionDataTask.perform(); + fetchSubscriptionData() { + if (this.subscriptionData) { + return; } - await this._fetchingSubscriptionData; + this.fetchSubscriptionDataTask.perform(); + } + + private async subscriptionDataRefresher() { + await this.fetchSubscriptionDataTask.perform(); } private fetchSubscriptionDataTask = dropTask(async () => { - try { - let response = await this.network.fetch(`${this.url.origin}/_user`, { - headers: { - Accept: SupportedMimeType.JSONAPI, - 'Content-Type': 'application/json', - Authorization: `Bearer ${await this.getToken()}`, - }, - }); - if (response.status !== 200) { - console.error( - `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, - ); - return; - } - let json = await response.json(); - let plan = - json.included?.find((i: { type: string }) => i.type === 'plan') - ?.attributes?.name ?? null; - let creditsAvailableInPlanAllowance = - json.data?.attributes?.creditsAvailableInPlanAllowance ?? null; - let creditsIncludedInPlanAllowance = - json.data?.attributes?.creditsIncludedInPlanAllowance ?? null; - let extraCreditsAvailableInBalance = - json.data?.attributes?.extraCreditsAvailableInBalance ?? null; - let stripeCustomerId = json.data?.attributes?.stripeCustomerId ?? null; - this._subscriptionData = { - plan, - creditsAvailableInPlanAllowance, - creditsIncludedInPlanAllowance, - extraCreditsAvailableInBalance, - stripeCustomerId, - }; - } finally { - this._fetchingSubscriptionData = null; + let response = await this.network.fetch(`${this.url.origin}/_user`, { + headers: { + Accept: SupportedMimeType.JSONAPI, + 'Content-Type': 'application/json', + Authorization: `Bearer ${await this.getToken()}`, + }, + }); + if (response.status !== 200) { + console.error( + `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, + ); + return; } + let json = await response.json(); + let plan = + json.included?.find((i: { type: string }) => i.type === 'plan') + ?.attributes?.name ?? null; + let creditsAvailableInPlanAllowance = + json.data?.attributes?.creditsAvailableInPlanAllowance ?? null; + let creditsIncludedInPlanAllowance = + json.data?.attributes?.creditsIncludedInPlanAllowance ?? null; + let extraCreditsAvailableInBalance = + json.data?.attributes?.extraCreditsAvailableInBalance ?? null; + let stripeCustomerId = json.data?.attributes?.stripeCustomerId ?? null; + this._subscriptionData = { + plan, + creditsAvailableInPlanAllowance, + creditsIncludedInPlanAllowance, + extraCreditsAvailableInBalance, + stripeCustomerId, + }; }); private async getToken() { From 8247d3c2726376015c4a1172a109ec511d140652 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Fri, 29 Nov 2024 15:35:32 +0700 Subject: [PATCH 12/16] remove payment link assertion --- packages/host/app/services/billing-service.ts | 5 +---- packages/matrix/helpers/index.ts | 9 --------- packages/matrix/tests/registration-with-token.spec.ts | 4 ---- packages/matrix/tests/registration-without-token.spec.ts | 2 -- 4 files changed, 1 insertion(+), 19 deletions(-) diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index cebbc56f96..407a5c8564 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -120,11 +120,8 @@ export default class BillingService extends Service { // so we can identify the user payment in our system when we get the webhook // the client reference id must be alphanumeric, so we encode the matrix user id // https://docs.stripe.com/payment-links/url-parameters#streamline-reconciliation-with-a-url-parameter - if (!this.freePlanPaymentLink) { - throw new Error('free payment link is not found'); - } const clientReferenceId = encodeToAlphanumeric(matrixUserId); - return `${this.freePlanPaymentLink.url}?client_reference_id=${clientReferenceId}`; + return `${this.freePlanPaymentLink?.url}?client_reference_id=${clientReferenceId}`; } get subscriptionData() { diff --git a/packages/matrix/helpers/index.ts b/packages/matrix/helpers/index.ts index c288cc10d0..e685337a71 100644 --- a/packages/matrix/helpers/index.ts +++ b/packages/matrix/helpers/index.ts @@ -576,15 +576,6 @@ export async function assertLoggedIn(page: Page, opts?: ProfileAssertions) { } } -export async function assertPaymentSetup(page: Page, username: string) { - const stripePaymentLink = 'https://buy.stripe.com/test_4gw01WfWb2c1dBm7sv'; - const expectedLink = `${stripePaymentLink}?client_reference_id=${username}`; - await expect(page.locator('[data-test-setup-payment]')).toHaveAttribute( - 'href', - expectedLink, - ); -} - export async function setupUser( username: string, realmServer: IsolatedRealmServer, diff --git a/packages/matrix/tests/registration-with-token.spec.ts b/packages/matrix/tests/registration-with-token.spec.ts index dc25a665ed..c958c6e06f 100644 --- a/packages/matrix/tests/registration-with-token.spec.ts +++ b/packages/matrix/tests/registration-with-token.spec.ts @@ -17,7 +17,6 @@ import { validateEmail, gotoRegistration, assertLoggedIn, - assertPaymentSetup, assertLoggedOut, logout, login, @@ -111,8 +110,6 @@ test.describe('User Registration w/ Token - isolated realm server', () => { // base 64 encode the matrix user id const matrixUserId = encodeToAlphanumeric('@user1:localhost'); - - await assertPaymentSetup(page, matrixUserId); await setupPayment(matrixUserId, realmServer, page); await assertLoggedIn(page, { email: 'user1@example.com', @@ -204,7 +201,6 @@ test.describe('User Registration w/ Token - isolated realm server', () => { const user2MatrixUserId = encodeToAlphanumeric('@user2:localhost'); - await assertPaymentSetup(page, user2MatrixUserId); await setupPayment(user2MatrixUserId, realmServer, page); await assertLoggedIn(page, { diff --git a/packages/matrix/tests/registration-without-token.spec.ts b/packages/matrix/tests/registration-without-token.spec.ts index 9abf91daec..d6cb118cab 100644 --- a/packages/matrix/tests/registration-without-token.spec.ts +++ b/packages/matrix/tests/registration-without-token.spec.ts @@ -15,7 +15,6 @@ import { validateEmail, gotoRegistration, assertLoggedIn, - assertPaymentSetup, setupPayment, registerRealmUsers, encodeToAlphanumeric, @@ -72,7 +71,6 @@ test.describe('User Registration w/o Token', () => { // base 64 encode the matrix user id const matrixUserId = encodeToAlphanumeric('@user1:localhost'); - await assertPaymentSetup(page, matrixUserId); await setupPayment(matrixUserId, realmServer, page); await assertLoggedIn(page); }); From 01c46d1c9beb74e36f43ef46813a2bb376d50bf8 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Fri, 29 Nov 2024 15:58:08 +0700 Subject: [PATCH 13/16] Fix matrix test --- packages/matrix/tests/registration-with-token.spec.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/matrix/tests/registration-with-token.spec.ts b/packages/matrix/tests/registration-with-token.spec.ts index c958c6e06f..20a5d9fc9e 100644 --- a/packages/matrix/tests/registration-with-token.spec.ts +++ b/packages/matrix/tests/registration-with-token.spec.ts @@ -26,6 +26,7 @@ import { showAllCards, setupUser, encodeToAlphanumeric, + decodeFromAlphanumeric, } from '../helpers'; import { registerUser, createRegistrationToken } from '../docker/synapse'; @@ -108,6 +109,12 @@ test.describe('User Registration w/ Token - isolated realm server', () => { }, }); + await page.bringToFront(); + + await expect(page.locator('[data-test-email-validated]')).toContainText( + 'Success! Your email has been validated', + ); + // base 64 encode the matrix user id const matrixUserId = encodeToAlphanumeric('@user1:localhost'); await setupPayment(matrixUserId, realmServer, page); From 05dace757bae4ae03c88141489062f5e2b018b70 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Fri, 29 Nov 2024 16:40:14 +0700 Subject: [PATCH 14/16] lint fix --- packages/matrix/tests/registration-with-token.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/matrix/tests/registration-with-token.spec.ts b/packages/matrix/tests/registration-with-token.spec.ts index 20a5d9fc9e..d28f0ba2f5 100644 --- a/packages/matrix/tests/registration-with-token.spec.ts +++ b/packages/matrix/tests/registration-with-token.spec.ts @@ -26,7 +26,6 @@ import { showAllCards, setupUser, encodeToAlphanumeric, - decodeFromAlphanumeric, } from '../helpers'; import { registerUser, createRegistrationToken } from '../docker/synapse'; From 1f4c073525c9dd2c819a9d2da6e14178c83a5a0b Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Fri, 29 Nov 2024 21:41:29 +0700 Subject: [PATCH 15/16] Address feedbacks --- .../operator-mode/profile/profile-subscription.gts | 6 +----- packages/host/app/services/billing-service.ts | 10 +++------- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/host/app/components/operator-mode/profile/profile-subscription.gts b/packages/host/app/components/operator-mode/profile/profile-subscription.gts index 9cae0b9023..0095de15af 100644 --- a/packages/host/app/components/operator-mode/profile/profile-subscription.gts +++ b/packages/host/app/components/operator-mode/profile/profile-subscription.gts @@ -6,7 +6,6 @@ import { FieldContainer, LoadingIndicator, } from '@cardstack/boxel-ui/components'; -import { or } from '@cardstack/boxel-ui/helpers'; import { IconHexagon } from '@cardstack/boxel-ui/icons'; import WithSubscriptionData from '@cardstack/host/components/with-subscription-data'; @@ -37,10 +36,7 @@ export default class ProfileSubscription extends Component { @as='anchor' @kind='secondary-light' @size='extra-small' - @disabled={{or - subscriptionData.isLoading - this.billingService.fetchingStripePaymentLinks - }} + @disabled={{this.billingService.fetchingStripePaymentLinks}} @href={{this.billingService.customerPortalLink.url}} data-test-manage-plan-button >Manage Plan diff --git a/packages/host/app/services/billing-service.ts b/packages/host/app/services/billing-service.ts index 407a5c8564..5ee9652f18 100644 --- a/packages/host/app/services/billing-service.ts +++ b/packages/host/app/services/billing-service.ts @@ -1,7 +1,7 @@ import Owner from '@ember/owner'; import Service from '@ember/service'; import { service } from '@ember/service'; -import { cached, tracked } from '@glimmer/tracking'; +import { tracked } from '@glimmer/tracking'; import { dropTask } from 'ember-concurrency'; @@ -50,22 +50,18 @@ export default class BillingService extends Service { this._subscriptionData = null; } - @cached get customerPortalLink() { return this.stripeLinks.value?.customerPortalLink; } - @cached get freePlanPaymentLink() { return this.stripeLinks.value?.freePlanPaymentLink; } - @cached get extraCreditsPaymentLinks() { return this.stripeLinks.value?.extraCreditsPaymentLinks; } - @cached get fetchingStripePaymentLinks() { return this.stripeLinks.isLoading; } @@ -81,7 +77,7 @@ export default class BillingService extends Service { }, }, ); - if (response.status !== 200) { + if (!response.ok) { console.error( `Failed to fetch stripe payment links for realm server ${this.url.origin}: ${response.status}`, ); @@ -151,7 +147,7 @@ export default class BillingService extends Service { Authorization: `Bearer ${await this.getToken()}`, }, }); - if (response.status !== 200) { + if (!response.ok) { console.error( `Failed to fetch user for realm server ${this.url.origin}: ${response.status}`, ); From 62dd1648a590619a0c8a16ad17b14296f4c798e5 Mon Sep 17 00:00:00 2001 From: Fadhlan Ridhwanallah Date: Mon, 2 Dec 2024 09:35:58 +0700 Subject: [PATCH 16/16] open new tab --- .../components/operator-mode/profile-info-popover.gts | 1 + .../operator-mode/profile/profile-subscription.gts | 2 ++ .../tests/acceptance/operator-mode-acceptance-test.gts | 9 +++++++++ 3 files changed, 12 insertions(+) diff --git a/packages/host/app/components/operator-mode/profile-info-popover.gts b/packages/host/app/components/operator-mode/profile-info-popover.gts index d160fd5860..39b4272a88 100644 --- a/packages/host/app/components/operator-mode/profile-info-popover.gts +++ b/packages/host/app/components/operator-mode/profile-info-popover.gts @@ -149,6 +149,7 @@ export default class ProfileInfoPopover extends ComponentUpgrade Plan
diff --git a/packages/host/app/components/operator-mode/profile/profile-subscription.gts b/packages/host/app/components/operator-mode/profile/profile-subscription.gts index 0095de15af..0e165d3ee6 100644 --- a/packages/host/app/components/operator-mode/profile/profile-subscription.gts +++ b/packages/host/app/components/operator-mode/profile/profile-subscription.gts @@ -38,6 +38,7 @@ export default class ProfileSubscription extends Component { @size='extra-small' @disabled={{this.billingService.fetchingStripePaymentLinks}} @href={{this.billingService.customerPortalLink.url}} + target='_blank' data-test-manage-plan-button >Manage Plan
@@ -71,6 +72,7 @@ export default class ProfileSubscription extends Component { @kind='secondary-light' @size='extra-small' @href={{paymentLink.url}} + target='_blank' data-test-pay-button={{index}} >Pay
diff --git a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts index 545b242b91..45bfec247a 100644 --- a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts +++ b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts @@ -905,6 +905,9 @@ module('Acceptance | operator mode tests', function (hooks) { assert .dom('[data-test-upgrade-plan-button]') .hasAttribute('href', 'https://customer-portal-link'); + assert + .dom('[data-test-upgrade-plan-button]') + .hasAttribute('target', '_blank'); assert.dom('[data-test-profile-popover]').exists(); await click('[data-test-buy-more-credits] button'); @@ -928,16 +931,22 @@ module('Acceptance | operator mode tests', function (hooks) { assert .dom('[data-test-manage-plan-button]') .hasAttribute('href', 'https://customer-portal-link'); + assert + .dom('[data-test-manage-plan-button]') + .hasAttribute('target', '_blank'); assert.dom('[data-test-payment-link]').exists({ count: 3 }); assert .dom('[data-test-pay-button="0"]') .hasAttribute('href', 'https://extra-credits-payment-link-1250'); + assert.dom('[data-test-pay-button="0"]').hasAttribute('target', '_blank'); assert .dom('[data-test-pay-button="1"]') .hasAttribute('href', 'https://extra-credits-payment-link-15000'); + assert.dom('[data-test-pay-button="1"]').hasAttribute('target', '_blank'); assert .dom('[data-test-pay-button="2"]') .hasAttribute('href', 'https://extra-credits-payment-link-80000'); + assert.dom('[data-test-pay-button="2"]').hasAttribute('target', '_blank'); // out of credit await click('[aria-label="close modal"]');