Edit Date & Cancel (#23)

Author: iisa

demo/index.html

@@ -59,7 +59,7 @@
         max-width: 800px;
       }
     </style>
-    <ia-monthly-giving-circle></ia-monthly-giving-circle>
+    <ia-monthly-giving-circle canEdit></ia-monthly-giving-circle>
   </div>
 
   <script type="module" src="../dist/src/monthly-giving-circle.js"></script>
@@ -68,6 +68,42 @@
 
     let updateNotices = [];
 
+    const nextPaymentIn25Days = new Date();
+    nextPaymentIn25Days.setDate(nextPaymentIn25Days.getDate() + 25);
+    nextPaymentIn25Days.setMinutes(0);
+    nextPaymentIn25Days.setSeconds(0);
+    nextPaymentIn25Days.setMilliseconds(0);
+    console.log('nextPaymentIn25Days', nextPaymentIn25Days.toISOString());
+    
+    const lastPaymentInTheSameMonth = new Date();
+    lastPaymentInTheSameMonth.setMinutes(0);
+    lastPaymentInTheSameMonth.setSeconds(0);
+    lastPaymentInTheSameMonth.setMilliseconds(0);
+    lastPaymentInTheSameMonth.setDate(1);
+    console.log('lastPaymentInTheSameMonth', lastPaymentInTheSameMonth.toISOString());
+
+    const nextMonth = new Date();
+    nextMonth.setMonth(nextMonth.getMonth() + 1);
+
+    const nextPaymentFirstOfMonth = new Date(nextMonth);
+    nextPaymentFirstOfMonth.setMinutes(0);
+    nextPaymentFirstOfMonth.setSeconds(0);
+    nextPaymentFirstOfMonth.setMilliseconds(0);
+    nextPaymentFirstOfMonth.setDate(1);
+    console.log('nextPaymentFirstOfMonth', nextPaymentFirstOfMonth.toISOString());
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const lastMonth = new Date();
+    lastMonth.setHours(0, 0, 0, 0);
+    lastMonth.setDate(0);
+
+    const lastDayOfCurrentMonth = new Date();
+    lastDayOfCurrentMonth.setHours(0, 0, 0, 0);
+    lastDayOfCurrentMonth.setMonth(lastDayOfCurrentMonth.getMonth() + 1);
+    lastDayOfCurrentMonth.setDate(0);
+
     const plans = {
       "41": {
         "token": "Acbdcdcadsfdasf.1234alphanumeric.3foobarXyZ",
@@ -76,8 +112,13 @@
         "is_test": true,
         "btdata": {
           "billingDayOfMonth": 22,
+          "lastBillingDate": {
+            "date": lastMonth.toISOString(),
+            "timezone_type": 3,
+            "timezone": "UTC"
+          },
           "nextBillingDate": {
-            "date": "2024-08-22 00:00:00.000000",
+            "date": lastDayOfCurrentMonth.toISOString(),
             "timezone_type": 3,
             "timezone": "UTC"
           },
@@ -97,8 +138,13 @@
         "is_test": true,
         "btdata": {
           "billingDayOfMonth": 9,
+          "lastBillingDate": {
+            "date": lastPaymentInTheSameMonth.toISOString(),
+            "timezone_type": 3,
+            "timezone": "UTC"
+          },
           "nextBillingDate": {
-            "date": "2024-09-09 00:00:00.000000",
+            "date": nextPaymentFirstOfMonth.toISOString(),
             "timezone_type": 3,
             "timezone": "UTC"
           },
@@ -278,6 +324,39 @@
       }, returnTiming);
     })
 
+    mgcComponent.addEventListener('updateDate', (e) => {
+      const { newDate, plan } = e.detail;
+
+
+      const heads = coinFlip() === 1;
+      const successOrFail = heads ? 'success' : 'fail';
+      const returnTiming = heads ? 3000 : 8000;
+
+      uxMessageInfoArea.innerText = `Updating next billing date for plan: ${newDate}, plan: ${JSON.stringify(plan.id)} -- Update will return ${successOrFail} in ${returnTiming} ms`; 
+      const message = successOrFail === 'success' ? 'Date updated' : 'Date failed to update';
+
+      if (heads) {
+        plan.setNextBillingDate(newDate);
+      }
+
+      const update = {
+        message,
+        status: successOrFail,
+        plan,
+        donationId: plan.id,
+        action: 'dateUpdate'
+      };
+
+      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) {

src/edit-plan-form.ts

@@ -2,16 +2,16 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import type { MonthlyPlan } from './models/plan';
-import './form-sections/cancel';
 import './form-sections/amount';
+import './form-sections/date';
+import './form-sections/cancel';
 import type { MGCEditPlanAmount } from './form-sections/amount';
+import type { MGCEditPlanDate } from './form-sections/date';
 
 @customElement('ia-mgc-edit-plan')
 export class IauxEditPlanForm extends LitElement {
   @property({ type: Object }) plan?: MonthlyPlan;
 
-  @property({ type: Object }) cancelPlanHandler?: (plan: MonthlyPlan) => void;
-
   @property({ type: Object }) updateAmountHandler?: (
     plan: MonthlyPlan,
     amountUpdates: {
@@ -33,6 +33,11 @@ export class IauxEditPlanForm extends LitElement {
     amountForm!.amountUpdated(status);
   }
 
+  dateUpdates(status: 'success' | 'fail') {
+    const dateForm = this.querySelector('ia-mgc-edit-date') as MGCEditPlanDate;
+    dateForm!.dateUpdated(status);
+  }
+
   render() {
     return html`
       <section class="mgc-edit-plan">
@@ -51,6 +56,27 @@ export class IauxEditPlanForm extends LitElement {
           }}
         ></ia-mgc-edit-plan-amount>
         <hr />
+        <ia-mgc-edit-date
+          @updateDate=${(e: CustomEvent) => {
+            const { newDate } = e.detail;
+            if (this.plan) {
+              this.dispatchEvent(
+                new CustomEvent('updateDate', {
+                  detail: { plan: this.plan, newDate },
+                })
+              );
+            }
+          }}
+          .plan=${this.plan}
+        ></ia-mgc-edit-date>
+        <hr />
+        <ia-mgc-cancel-plan
+          .plan=${this.plan}
+          @cancelPlan=${() => {
+            this.dispatchEvent(new Event('cancelPlan'));
+          }}
+        ></ia-mgc-cancel-plan>
+        <hr />
         <p class="email-edit-plan">
           Need to update your plan further? Please email us at
           <a href=${this.mailToText}>[email protected]</a>.

src/form-sections/amount.ts

@@ -223,6 +223,8 @@ export class MGCEditPlanAmount extends LitElement {
           <div>
             $
             <input
+              min="1"
+              max="9999"
               type="number"
               id="amount"
               name="amount"