Payment Method UI - credit card (#34)

Author: iisa

.husky/pre-commit

@@ -45,7 +45,12 @@
       <button id="toggle-receipts">Toggle receipts</button>
       <button id="clear-updates">Clear updates</button>
       <button id="toggle-plans">Toggle plans</button>
-      <button id="toggle-editable-perms">Toggle Editable Permissions</button>
+      <button id="toggle-prefilled-email">Toggle pre-filled email</button>
+      <button id="toggle-edit-payment-method">Toggle edit payment method</button>
+
+      <br>
+      <input type="checkbox" id="force-successful-requests" name="force-successful-requests">
+      <label for="force-successful-requests">Force successful requests</label>
 
       <p id="interaction-status-area" style="min-height: 50px;margin: 10px;"></p>
     </div>
@@ -59,11 +64,16 @@
         max-width: 800px;
       }
     </style>
-    <ia-monthly-giving-circle canEdit></ia-monthly-giving-circle>
+    <ia-monthly-giving-circle
+      canEditPaymentMethod
+      braintreeAuthToken="sandbox_x634jsj7_7zybks4ybp63pbmd"
+      ></ia-monthly-giving-circle>
   </div>
 
   <script type="module" src="../dist/src/monthly-giving-circle.js"></script>
   <script type="module">
+    import { PaymentClients, HostingEnvironment } from '@internetarchive/donation-form';
+    import { LazyLoaderService } from 'https://esm.archive.org/@internetarchive/lazy-loader-service';
     import { MonthlyPlan, Receipt } from '../dist/index.js';
 
     let updateNotices = [];
@@ -256,23 +266,57 @@
         }),
       ];
 
+    const paymentConfig = {
+    referrer: '',
+    origin: '',
+    braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',
+    venmoProfileId: '1953896702662410263',
+    googlePayMerchantId: '',
+    environment: 'dev',
+    paymentClients: new PaymentClients(
+      new LazyLoaderService(),
+      HostingEnvironment.Development,
+    ),
+    endpointManager: {
+      // eslint-disable-next-line arrow-body-style, @typescript-eslint/no-unused-vars
+      submitData: async (_request) => {
+        // eslint-disable-next-line no-debugger
+        debugger;
+      },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      donationSuccessful: (_response) => {
+        // eslint-disable-next-line no-debugger
+        debugger;
+      },
+    },
+  };
+
 
     let showReceipts = true;
 
     const uxMessageInfoArea = document.getElementById('interaction-status-area');
     const coinFlip = () => Math.floor(Math.random() + 0.5);
 
+    const flipCoin = () => {
+      const forceSuccess = document.getElementById('force-successful-requests').checked;
+      if (forceSuccess) {
+        return 1;
+      }
+      return coinFlip();
+    }
+
     const mgcComponent = document.querySelector('ia-monthly-giving-circle');
 
     // load start data
+    mgcComponent.paymentConfig = paymentConfig;
     mgcComponent.receipts = receiptsData;
     mgcComponent.plans = plansArray;
 
     // event handlers
     mgcComponent.addEventListener('EmailReceiptRequest', (e) => {
 
       const { donation } = e.detail;
-      const heads = coinFlip() === 1;
+      const heads = flipCoin() === 1;
       const successOrFail = heads ? 'success' : 'fail';
       const returnTiming = heads ? 1500 : 5000;
 
@@ -314,7 +358,7 @@
       const { plan, amountOptions } = e.detail;
 
       // either error or succeed
-      const heads = coinFlip() === 1;
+      const heads = flipCoin() === 1;
       const successOrFail = heads ? 'success' : 'fail';
       const returnTiming = heads ? 1500 : 5000;
 
@@ -348,7 +392,7 @@
       const { newDate, plan } = e.detail;
 
 
-      const heads = coinFlip() === 1;
+      const heads = flipCoin() === 1;
       const successOrFail = heads ? 'success' : 'fail';
       const returnTiming = heads ? 1500 : 5000;
 
@@ -378,6 +422,39 @@
       }, returnTiming);
     });
 
+    mgcComponent.addEventListener('UpdatePaymentMethod', (e) => {
+      const { plan, newPaymentMethodRequest } = e.detail;
+
+
+      const heads = flipCoin() === 1;
+      const successOrFail = heads ? 'success' : 'fail';
+      const returnTiming = heads ? 1500 : 4000;
+
+      uxMessageInfoArea.innerText = `Updating payment method for plan: ${plan ? plan.id : 'no plan'} -- Update will return ${successOrFail} in ${returnTiming} ms`; 
+      const message = successOrFail === 'success' ? 'Payment method updated' : 'Payment method failed to update';
+
+      if (heads && plan) {
+        console.log('demo - setting new payment method', newPaymentMethodRequest);
+        plan.setNewPaymentMethod(newPaymentMethodRequest);
+      }
+
+      const update = {
+        message,
+        status: successOrFail,
+        plan,
+        donationId: plan ? plan.id : null,
+        action: 'paymentMethodUpdate'
+      };
+
+      updateNotices = [update, ...updateNotices];
+
+      setTimeout(() => {
+        mgcComponent.updateReceived(update);
+        console.log('Amount Update Request --- index.html ----', update);
+        uxMessageInfoArea.innerText = '';
+      }, returnTiming);
+    });
+
     // options hooks
     document.getElementById('toggle-receipts').addEventListener('click', async () => {
       if (showReceipts) {
@@ -396,12 +473,17 @@
       await mgcComponent.updateComplete;
     });
     document.getElementById('toggle-plans').addEventListener('click', async () => {
-      mgcComponent.plans = mgcComponent.plans.length ? [] : plansArray;
+      mgcComponent.plans = mgcComponent.plans .length ? [] : plansArray;
       await mgcComponent.updateComplete;
     });
 
-    document.getElementById('toggle-editable-perms').addEventListener('click', async () => {
-      mgcComponent.canEdit = !mgcComponent.canEdit;
+    document.getElementById('toggle-prefilled-email').addEventListener('click', async () => {
+      mgcComponent.patronEmail = mgcComponent.patronEmail ? '' : 'you@thisemail.com';
+      await mgcComponent.updateComplete;
+    });
+
+    document.getElementById('toggle-edit-payment-method').addEventListener('click', async () => {
+      mgcComponent.canEditPaymentMethod = !mgcComponent.canEditPaymentMethod;
       await mgcComponent.updateComplete;
     });
   </script>

demo/index.html

@@ -4,3 +4,4 @@ export { Receipt } from './src/models/receipt';
 export type { AReceipt } from './src/models/receipt';
 export { MonthlyPlan } from './src/models/plan';
 export type { Plan, BtData } from './src/models/plan';
+export type { PaymentMethodRequest } from './src/models/payment-method-request';

index.ts

@@ -31,7 +31,12 @@
     "@internetarchive/donation-form-data-models": "^0.3.5",
     "@internetarchive/donation-form-section": "^0.3.6",
     "@internetarchive/iaux-notification-toast": "^0.0.0-alpha2",
+    "@internetarchive/icon-calendar": "^1.3.4",
+    "@internetarchive/icon-credit-card": "^1.3.4",
     "@internetarchive/icon-donate": "^1.3.4",
+    "@internetarchive/icon-lock": "^1.3.4",
+    "@internetarchive/lazy-loader-service": "^0.2.0",
+    "@types/braintree": "^3.4.0",
     "lit": "^2.8.0"
   },
   "devDependencies": {

package-lock.json

@@ -1,17 +1,27 @@
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 
+import '@internetarchive/donation-form/dist/src/form-elements/badged-input';
+
+import { HostingEnvironment } from '@internetarchive/donation-form';
+import type { PaymentConfig } from './form-sections/parts/braintree-manager';
 import type { MonthlyPlan } from './models/plan';
 import './form-sections/amount';
 import './form-sections/date';
 import './form-sections/cancel';
+import './form-sections/payment-method';
 import type { MGCEditPlanAmount } from './form-sections/amount';
 import type { MGCEditPlanDate } from './form-sections/date';
+import type { MGCEditPaymentMethod } from './form-sections/payment-method';
 
 @customElement('ia-mgc-edit-plan')
 export class IauxEditPlanForm extends LitElement {
   @property({ type: Object }) plan?: MonthlyPlan;
 
+  @property({ type: String }) patronEmail: string = '';
+
+  @property({ type: Boolean }) canEditPaymentMethod: boolean = false;
+
   @property({ type: Object }) updateAmountHandler?: (
     plan: MonthlyPlan,
     amountUpdates: {
@@ -22,10 +32,36 @@ export class IauxEditPlanForm extends LitElement {
     },
   ) => void;
 
+  @property({ type: Object }) paymentConfig: PaymentConfig = {
+    referrer: '',
+    origin: '',
+    braintreeAuthToken: '',
+    venmoProfileId: '',
+    googlePayMerchantId: '',
+    environment: HostingEnvironment.Development,
+    paymentClients: undefined,
+    endpointManager: undefined,
+  };
+
+  @query('#braintree-creditcard') braintreeNumberInput!: HTMLDivElement;
+
+  @query('#braintree-expiration') braintreeExpirationDateInput!: HTMLDivElement;
+
+  @query('#braintree-cvv') braintreeCVVInput!: HTMLDivElement;
+
+  @query('#braintree-error-message') braintreeErrorMessage!: HTMLDivElement;
+
   createRenderRoot() {
     return this;
   }
 
+  paymentMethodUpdates(status: 'success' | 'fail') {
+    const paymentMethodForm = this.querySelector(
+      'ia-mgc-edit-payment-method',
+    ) as MGCEditPaymentMethod;
+    paymentMethodForm!.paymentMethodUpdated(status);
+  }
+
   amountUpdates(status: 'success' | 'fail') {
     const amountForm = this.querySelector(
       'ia-mgc-edit-plan-amount',
@@ -55,6 +91,27 @@ export class IauxEditPlanForm extends LitElement {
             }
           }}
         ></ia-mgc-edit-plan-amount>
+        ${this.canEditPaymentMethod
+          ? html`
+              <hr />
+              <ia-mgc-edit-payment-method
+                .plan=${this.plan}
+                .patronEmail=${this.patronEmail}
+                .paymentConfig=${this.paymentConfig}
+                @UpdatePaymentMethod=${(e: CustomEvent) => {
+                  const { newPaymentMethodRequest } = e.detail;
+                  if (this.plan) {
+                    this.dispatchEvent(
+                      new CustomEvent('UpdatePaymentMethod', {
+                        detail: { plan: this.plan, newPaymentMethodRequest },
+                      }),
+                    );
+                  }
+                }}
+              >
+              </ia-mgc-edit-payment-method>
+            `
+          : ''}
         <hr />
         <ia-mgc-edit-date
           @updateDate=${(e: CustomEvent) => {

package.json

@@ -81,7 +81,9 @@ export class MGCEditPlanAmount extends LitElement {
 
     this.updateStatus = status;
     this.updateMessage =
-      status === 'success' ? 'Amount updated' : 'Failed. Try again.';
+      status === 'success'
+        ? 'Amount updated'
+        : 'Failed to update date, please try again';
 
     if (status === 'success') {
       this.closeForm();

src/edit-plan-form.ts

@@ -10,7 +10,6 @@ import { customElement, property, query } from 'lit/decorators.js';
 import type { MonthlyPlan } from '../models/plan';
 
 import type { MGCButton } from '../presentational/mgc-button';
-import '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';
 
 import '@internetarchive/donation-form-section';
 

src/form-sections/amount.ts

@@ -212,9 +212,10 @@ export class MGCEditPlanDate extends LitElement {
     }
 
     // Check if there has been a donation in the last month
-    const lastDonationDate = this.plan?.payment.lastBillingDate.date
-      ? new Date(this.plan?.payment.lastBillingDate.date)
-      : null;
+    const lastDonationDate =
+      this.plan?.payment && this.plan.payment.lastBillingDate?.date
+        ? new Date(this.plan.payment.lastBillingDate.date)
+        : null;
 
     if (lastDonationDate) {
       const lastDonationMonth = lastDonationDate.getMonth();