Cancel form (#18)

Author: iisa

demo/index.html

@@ -224,6 +224,21 @@
       }, returnTiming);
     });
 
+    mgcComponent.addEventListener('cancelPlan', async (e) => {
+      const { plan } = e.detail;
+      const currPlansList = mgcComponent.plans;
+      const newPlansList = currPlansList.map((p) => {
+        if (p.plan.token === plan.plan.token) {
+          console.log('p 2 plan', p, plan);
+          p.cancelPlan();
+        }
+        return p;
+      });
+      mgcComponent.plans = newPlansList;
+      await mgcComponent.updateComplete;
+      console.log("plan cancelled & plan list updated", mgcComponent.plans);
+    })
+
     // options hooks
     document.getElementById('toggle-receipts').addEventListener('click', async () => {
       if (showReceipts) {

index.ts

@@ -1,4 +1,4 @@
 export { MonthlyGivingCircle } from './src/monthly-giving-circle';
-export type { AnUpdate } from './src/monthly-giving-circle';
+export type { APlanUpdate } from './src/monthly-giving-circle';
 export { Receipt } from './src/models/receipt';
 export { MonthlyPlan } from './src/models/plan';

package-lock.json

@@ -27,6 +27,8 @@
     "ghpages:generate": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
   },
   "dependencies": {
+    "@internetarchive/donation-form": "^0.6.3",
+    "@internetarchive/donation-form-section": "^0.3.6",
     "@internetarchive/iaux-notification-toast": "^0.0.0-alpha2",
     "@internetarchive/icon-donate": "^1.3.4",
     "lit": "^2.8.0"

package.json

@@ -0,0 +1,28 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import type { MonthlyPlan } from './models/plan';
+import './form-sections/cancel';
+
+@customElement('ia-mgc-edit-plan')
+export class IauxEditPlanForm extends LitElement {
+  @property({ type: Object }) plan?: MonthlyPlan;
+
+  @property({ type: Object }) cancelPlanHandler?: (plan: MonthlyPlan) => void;
+
+  render() {
+    return html`
+      <section class="mgc-edit-plan">
+        <hr />
+        <ia-mgc-cancel-plan
+          .plan=${this.plan}
+          @cancelPlan=${() => {
+            if (this.plan) {
+              this.cancelPlanHandler?.(this.plan);
+            }
+          }}
+        ></ia-mgc-cancel-plan>
+      </section>
+    `;
+  }
+}