+ We couldn't confirm your payment. If you were charged, please contact + support. +
+ } + @case ('missing') { +We couldn't find that purchase.
+ } + } +
+ @if (waiting) {
+
diff --git a/src/app/core/components/payment-intent-form/payment-intent-form.component.scss b/src/app/core/components/payment-intent-form/payment-intent-form.component.scss
new file mode 100644
index 000000000..5f3599332
--- /dev/null
+++ b/src/app/core/components/payment-intent-form/payment-intent-form.component.scss
@@ -0,0 +1,90 @@
+@import 'variables';
+
+:host {
+ display: block;
+}
+
+button {
+ margin-bottom: 0;
+}
+
+.input-group-vertical {
+ margin: 0px;
+ border-radius: 0.25rem;
+ background-color: white;
+ overflow: hidden;
+}
+
+.input-vertical.checkbox {
+ font-size: 85%;
+ overflow: hidden;
+
+ img {
+ height: 20px;
+ float: right;
+ }
+}
+
+.input-vertical-error {
+ color: $danger;
+ padding-top: $grid-unit * 0.5;
+}
+
+.success-message {
+ margin-top: $grid-unit;
+}
+
+.pledge-buttons {
+ display: flex;
+ overflow: hidden;
+ border-radius: 0.25rem;
+
+ .pledge-button {
+ padding: 0.85rem 0;
+ line-height: 1.5;
+ flex: 1 1 auto;
+ flex-wrap: wrap;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: $PR-orange;
+ color: white;
+ font-weight: 500;
+ cursor: pointer;
+ user-select: none;
+ transition: $btn-transition;
+
+ span {
+ font-weight: 300;
+ font-size: 80%;
+ flex: 0 0 100%;
+ text-align: center;
+ line-height: 1.2;
+ }
+
+ &:hover {
+ transition: $btn-transition;
+ background: darken($PR-orange, 10%);
+ }
+
+ &.active {
+ transition: 0s all;
+ background: darken($PR-orange, 7%);
+ box-shadow: $btn-active-box-shadow;
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 $btn-focus-width rgba($PR-orange, 0.5);
+ }
+
+ input {
+ display: inline-block;
+ width: 4em;
+ padding: 0.25rem;
+ &::-webkit-inner-spin-button,
+ &::-webkit-outer-spin-button {
+ appearance: none;
+ }
+ }
+ }
+}
diff --git a/src/app/core/components/payment-intent-form/payment-intent-form.component.spec.ts b/src/app/core/components/payment-intent-form/payment-intent-form.component.spec.ts
new file mode 100644
index 000000000..6fc6d0672
--- /dev/null
+++ b/src/app/core/components/payment-intent-form/payment-intent-form.component.spec.ts
@@ -0,0 +1,170 @@
+import { MockBuilder, MockRender } from 'ng-mocks';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule } from '@angular/forms';
+import { AccountService } from '@shared/services/account/account.service';
+import { MessageService } from '@shared/services/message/message.service';
+import { EventService } from '@shared/services/event/event.service';
+import { ApiService } from '@shared/services/api/api.service';
+import { StoragePurchaseIntentResponse } from '@shared/services/api/billing.repo';
+import { PaymentIntentFormComponent } from './payment-intent-form.component';
+
+describe('PaymentIntentFormComponent', () => {
+ let mockAccountService: any;
+ let mockMessageService: any;
+ let mockEventService: any;
+ let mockApiService: any;
+ let mockPaymentElement: any;
+ let mockElements: any;
+ let mockStripe: any;
+
+ beforeEach(async () => {
+ mockAccountService = {
+ addStorageBytes: jasmine.createSpy('addStorageBytes'),
+ };
+
+ mockMessageService = {
+ showError: jasmine.createSpy('showError'),
+ };
+
+ mockEventService = {
+ dispatch: jasmine.createSpy('dispatch'),
+ };
+
+ mockApiService = {
+ billing: {
+ createStoragePurchaseIntent: jasmine
+ .createSpy('createStoragePurchaseIntent')
+ .and.returnValue(
+ Promise.resolve(
+ new StoragePurchaseIntentResponse({
+ clientSecret: 'pi_test_secret_abc',
+ }),
+ ),
+ ),
+ },
+ };
+
+ mockPaymentElement = {
+ mount: jasmine.createSpy('mount'),
+ unmount: jasmine.createSpy('unmount'),
+ };
+
+ mockElements = {
+ create: jasmine.createSpy('create').and.returnValue(mockPaymentElement),
+ };
+
+ mockStripe = {
+ elements: jasmine.createSpy('elements').and.returnValue(mockElements),
+ confirmPayment: jasmine.createSpy('confirmPayment'),
+ };
+
+ await MockBuilder(PaymentIntentFormComponent)
+ .keep(HttpClientTestingModule, { export: true })
+ .keep(FormsModule)
+ .provide({ provide: AccountService, useValue: mockAccountService })
+ .provide({ provide: MessageService, useValue: mockMessageService })
+ .provide({ provide: EventService, useValue: mockEventService })
+ .provide({ provide: ApiService, useValue: mockApiService });
+ });
+
+ it('should create', () => {
+ const fixture = MockRender(PaymentIntentFormComponent);
+
+ expect(fixture.point.componentInstance).toBeTruthy();
+ });
+
+ it('creates a storage purchase intent and moves to the payment stage', async () => {
+ const fixture = MockRender(PaymentIntentFormComponent);
+ const instance = fixture.point.componentInstance;
+ spyOn(instance, 'loadStripeClient' as any).and.returnValue(
+ Promise.resolve(mockStripe),
+ );
+
+ instance.amountSelection = 10;
+ await instance.continueToPayment();
+
+ expect(
+ mockApiService.billing.createStoragePurchaseIntent,
+ ).toHaveBeenCalledWith(10);
+
+ expect(instance.stage).toBe('payment');
+ });
+
+ it('shows a toast error when creating the purchase intent fails', async () => {
+ mockApiService.billing.createStoragePurchaseIntent.and.returnValue(
+ Promise.reject({ error: { errors: [{ message: 'Card declined.' }] } }),
+ );
+
+ const fixture = MockRender(PaymentIntentFormComponent);
+ const instance = fixture.point.componentInstance;
+
+ instance.amountSelection = 10;
+ await instance.continueToPayment();
+
+ expect(mockMessageService.showError).toHaveBeenCalledWith({
+ message: 'Card declined.',
+ });
+
+ expect(instance.stage).toBe('amount');
+ });
+
+ it('adds storage on a successful payment confirmation', async () => {
+ mockStripe.confirmPayment.and.returnValue(
+ Promise.resolve({ paymentIntent: { status: 'succeeded' } }),
+ );
+
+ const fixture = MockRender(PaymentIntentFormComponent);
+ const instance = fixture.point.componentInstance;
+ spyOn(instance, 'loadStripeClient' as any).and.returnValue(
+ Promise.resolve(mockStripe),
+ );
+
+ instance.amountSelection = 10;
+ await instance.continueToPayment();
+ await instance.submitPayment();
+
+ expect(mockAccountService.addStorageBytes).toHaveBeenCalledWith(1073741824);
+
+ expect(mockEventService.dispatch).toHaveBeenCalledWith({
+ entity: 'account',
+ action: 'purchase_storage',
+ });
+
+ expect(instance.stage).toBe('success');
+ });
+
+ it('sets an inline error when Stripe returns an error', async () => {
+ mockStripe.confirmPayment.and.returnValue(
+ Promise.resolve({ error: { message: 'Your card was declined.' } }),
+ );
+
+ const fixture = MockRender(PaymentIntentFormComponent);
+ const instance = fixture.point.componentInstance;
+ spyOn(instance, 'loadStripeClient' as any).and.returnValue(
+ Promise.resolve(mockStripe),
+ );
+
+ instance.amountSelection = 10;
+ await instance.continueToPayment();
+ await instance.submitPayment();
+
+ expect(instance.errorMessage).toBe('Your card was declined.');
+ expect(instance.stage).toBe('payment');
+ expect(mockAccountService.addStorageBytes).not.toHaveBeenCalled();
+ });
+
+ it('unmounts the payment element on destroy', async () => {
+ const fixture = MockRender(PaymentIntentFormComponent);
+ const instance = fixture.point.componentInstance;
+ spyOn(instance, 'loadStripeClient' as any).and.returnValue(
+ Promise.resolve(mockStripe),
+ );
+
+ instance.amountSelection = 10;
+ await instance.continueToPayment();
+
+ instance.ngOnDestroy();
+
+ expect(mockPaymentElement.unmount).toHaveBeenCalled();
+ });
+});
diff --git a/src/app/core/components/payment-intent-form/payment-intent-form.component.ts b/src/app/core/components/payment-intent-form/payment-intent-form.component.ts
new file mode 100644
index 000000000..93df2b7ae
--- /dev/null
+++ b/src/app/core/components/payment-intent-form/payment-intent-form.component.ts
@@ -0,0 +1,158 @@
+import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import {
+ loadStripe,
+ Stripe,
+ StripeElements,
+ StripePaymentElement,
+} from '@stripe/stripe-js';
+import { ApiService } from '@shared/services/api/api.service';
+import { AccountService } from '@shared/services/account/account.service';
+import { MessageService } from '@shared/services/message/message.service';
+import { EventService } from '@shared/services/event/event.service';
+import { SecretsService } from '@shared/services/secrets/secrets.service';
+
+const PRICE_PER_GB = 10;
+const BYTES_PER_GIB = 1073741824;
+
+type PurchaseStage = 'amount' | 'payment' | 'success';
+
+@Component({
+ selector: 'pr-payment-intent-form',
+ templateUrl: './payment-intent-form.component.html',
+ styleUrls: ['./payment-intent-form.component.scss'],
+ standalone: false,
+})
+export class PaymentIntentFormComponent implements OnDestroy {
+ @ViewChild('customAmountInput') customAmountInput: ElementRef;
+
+ public stage: PurchaseStage = 'amount';
+ public amountLevels = [10, 20, 50];
+ public amountSelection: number | 'custom' = 10;
+ public customAmount = 10;
+ public waiting = false;
+ public errorMessage: string | null = null;
+ public amountInGb = 0;
+
+ private stripe: Stripe | null = null;
+ private elements: StripeElements | null = null;
+ private paymentElement: StripePaymentElement | null = null;
+ private sizeInBytes = 0;
+ private paymentElementContainerRef: ElementRef | undefined;
+
+ constructor(
+ private api: ApiService,
+ private accountService: AccountService,
+ private message: MessageService,
+ private event: EventService,
+ ) {}
+
+ @ViewChild('paymentElementContainer')
+ get paymentElementContainer(): ElementRef | undefined {
+ return this.paymentElementContainerRef;
+ }
+
+ set paymentElementContainer(ref: ElementRef | undefined) {
+ this.paymentElementContainerRef = ref;
+ if (ref && this.paymentElement) {
+ this.paymentElement.mount(ref.nativeElement);
+ }
+ }
+
+ public ngOnDestroy(): void {
+ this.paymentElement?.unmount();
+ }
+
+ public chooseAmount(amount: number | 'custom'): void {
+ this.amountSelection = amount;
+ if (amount === 'custom') {
+ this.customAmountInput?.nativeElement.focus();
+ }
+ }
+
+ public getStorageAmount(amountInUSD: number): number {
+ return Math.floor(amountInUSD / PRICE_PER_GB);
+ }
+
+ public getSelectedAmount(): number {
+ return this.amountSelection === 'custom'
+ ? Number(this.customAmount)
+ : this.amountSelection;
+ }
+
+ public async continueToPayment(): Promise
+
+
+
+ }
+
+ @if (stage === 'payment') {
+
+
+
+ @if (errorMessage) {
+
+
+
+
+ 
+
+
+
+
+ {{ errorMessage }}
+ } + + } + + @if (stage === 'success') { + + } +