Merge pull request #3126 from codecrafters-io/pk-branch-4

pk-branch-4

Author: rohitpaulk

app/components/gift-payment-page/confirm-and-pay-step-container.hbs

@@ -74,15 +74,15 @@
     {{/if}}
 
     <PrimaryButtonWithSpinner
-      @isDisabled={{this.isProcessingPayment}}
-      @shouldShowSpinner={{this.isProcessingPayment}}
+      @isDisabled={{this.isProcessingPayButtonClick}}
+      @shouldShowSpinner={{this.isProcessingPayButtonClick}}
       @size="large"
       {{on "click" this.handlePaymentButtonClick}}
       class="w-full sm:w-auto justify-center"
       data-test-pay-button
     >
-      {{#if this.isProcessingPayment}}
-        Loading...
+      {{#if this.isProcessingPayButtonClick}}
+        Saving...
       {{else}}
         Pay ${{this.totalAmount}}
         →

app/components/gift-payment-page/confirm-and-pay-step-container.ts

@@ -5,6 +5,8 @@ import { PRICING_PLANS } from 'codecrafters-frontend/components/pay-page/choose-
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
+import window from 'ember-window-mock';
+import { waitFor } from '@ember/test-waiters';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -17,7 +19,7 @@ interface Signature {
 
 export default class ConfirmAndPayStepContainer extends Component<Signature> {
   @tracked errorMessage: string | null = null;
-  @tracked isProcessingPayment = false;
+  @tracked isProcessingPayButtonClick = false;
 
   pricingPlans = PRICING_PLANS;
 
@@ -32,27 +34,26 @@ export default class ConfirmAndPayStepContainer extends Component<Signature> {
   }
 
   @action
+  @waitFor
   async handlePaymentButtonClick() {
     this.errorMessage = null;
-    this.isProcessingPayment = true;
+    this.isProcessingPayButtonClick = true;
 
     try {
       await this.processPaymentTask.perform();
     } catch {
       this.errorMessage = 'Payment failed. Please try again.';
-      this.isProcessingPayment = false;
+      this.isProcessingPayButtonClick = false;
     }
   }
 
   processPaymentTask = task({ keepLatest: true }, async (): Promise<void> => {
-    // TODO: Implement actual payment processing
-    // This would typically involve:
-    // 1. Creating a checkout session with Stripe
-    // 2. Redirecting to Stripe Checkout
-    // 3. Handling the success/cancel redirects
-
-    // For now, simulate a delay
-    await new Promise((resolve) => setTimeout(resolve, 2000));
+    const response = await this.args.giftPaymentFlow.generateCheckoutSession({
+      'success-url': `${window.location.origin}/gifts/success`,
+      'cancel-url': `${window.location.origin}/gifts/buy?f=${this.args.giftPaymentFlow.id}`,
+    });
+
+    window.location.href = response.link;
   });
 }
 

app/models/gift-payment-flow.ts

@@ -1,7 +1,18 @@
 import Model, { attr } from '@ember-data/model';
+import { memberAction } from 'ember-api-actions';
 
 export default class GiftPaymentFlowModel extends Model {
   @attr('string') declare giftMessage: string;
   @attr('string') declare pricingPlanId: string;
   @attr('string') declare senderEmailAddress: string;
+
+  declare generateCheckoutSession: (
+    this: GiftPaymentFlowModel,
+    payload: { 'success-url': string; 'cancel-url': string },
+  ) => Promise<{ link: string }>;
 }
+
+GiftPaymentFlowModel.prototype.generateCheckoutSession = memberAction({
+  path: 'generate-checkout-session',
+  type: 'post',
+});

mirage/handlers/gift-payment-flows.js

@@ -2,6 +2,21 @@ export default function (server) {
   server.post('/gift-payment-flows');
   server.patch('/gift-payment-flows/:id');
 
-  // TODO: Add this when we implement fetching an existing payment flow
-  // server.get('/gift-payment-flows/:id');
+  server.get('/gift-payment-flows/:id');
+
+  server.post('/gift-payment-flows/:id/generate-checkout-session', function (schema, request) {
+    const body = JSON.parse(request.requestBody);
+
+    if (!body['success-url']) {
+      throw new Error('success-url is required');
+    }
+
+    if (!body['cancel-url']) {
+      throw new Error('cancel-url is required');
+    }
+
+    return {
+      link: 'https://checkout.stripe.com/test-checkout-session',
+    };
+  });
 }

tests/acceptance/buy-gift-page/purchase-test.js

@@ -4,6 +4,7 @@ import { setupWindowMock } from 'ember-window-mock/test-support';
 import giftPaymentPage from 'codecrafters-frontend/tests/pages/gift-payment-page';
 import testScenario from 'codecrafters-frontend/mirage/scenarios/test';
 import percySnapshot from '@percy/ember';
+import windowMock from 'ember-window-mock';
 
 module('Acceptance | buy-gift-page | purchase', function (hooks) {
   setupApplicationTest(hooks);
@@ -28,5 +29,42 @@ module('Acceptance | buy-gift-page | purchase', function (hooks) {
     await percySnapshot('Gift Payment - Confirm and Pay Step');
 
     await giftPaymentPage.confirmAndPayStepContainer.clickOnPayButton();
+    assert.strictEqual(windowMock.location.href, 'https://checkout.stripe.com/test-checkout-session', 'should redirect to Stripe checkout');
+  });
+
+  test('user can revisit an existing payment flow with pre-populated data', async function (assert) {
+    testScenario(this.server);
+
+    // Create an existing gift payment flow with some data
+    const existingFlow = this.server.create('gift-payment-flow', {
+      senderEmailAddress: 'existing@codecrafters.io',
+      giftMessage: 'This is a pre-existing gift message!',
+      pricingPlanId: 'v1-lifetime',
+    });
+
+    await giftPaymentPage.visit({ giftPaymentFlowId: existingFlow.id });
+    assert.ok(giftPaymentPage.enterDetailsStepContainer.isVisible, 'Enter details step is visible');
+
+    assert.strictEqual(
+      giftPaymentPage.enterDetailsStepContainer.senderEmailAddressInputValue,
+      'existing@codecrafters.io',
+      'Email address is pre-populated',
+    );
+
+    assert.strictEqual(
+      giftPaymentPage.enterDetailsStepContainer.giftMessageInputValue,
+      'This is a pre-existing gift message!',
+      'Gift message is pre-populated',
+    );
+
+    // Continue with the flow to ensure it still works
+    await giftPaymentPage.enterDetailsStepContainer.clickOnContinueButton();
+    assert.ok(giftPaymentPage.choosePlanStepContainer.isVisible, 'Choose plan step is visible');
+
+    await giftPaymentPage.choosePlanStepContainer.clickOnContinueButton();
+    assert.ok(giftPaymentPage.confirmAndPayStepContainer.isVisible, 'Confirm and pay step is visible');
+
+    await giftPaymentPage.confirmAndPayStepContainer.clickOnPayButton();
+    assert.strictEqual(windowMock.location.href, 'https://checkout.stripe.com/test-checkout-session', 'should redirect to Stripe checkout');
   });
 });

tests/pages/gift-payment-page.ts

@@ -1,11 +1,13 @@
-import { clickable, fillable, visitable } from 'ember-cli-page-object';
+import { clickable, fillable, property, visitable } from 'ember-cli-page-object';
 import createPage from 'codecrafters-frontend/tests/support/create-page';
 
 export default createPage({
   enterDetailsStepContainer: {
     clickOnContinueButton: clickable('[data-test-continue-button]'),
     fillInSenderEmailAddress: fillable('#sender_email_address_input'),
     fillInGiftMessage: fillable('#gift_message_input'),
+    senderEmailAddressInputValue: property('value', '#sender_email_address_input'),
+    giftMessageInputValue: property('value', '#gift_message_input'),
     scope: '[data-test-enter-details-step-container]',
   },