@internetarchive/donation-monthly-portal 3.0.0 → 4.0.0

package/dist/index.d.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/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { MonthlyGivingCircle } from './src/monthly-giving-circle';\nexport type { AnUpdate } from './src/monthly-giving-circle';\nexport { Receipt } from './src/models/receipt';\nexport { MonthlyPlan } from './src/models/plan';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { MonthlyGivingCircle } from './src/monthly-giving-circle';\nexport type { APlanUpdate } from './src/monthly-giving-circle';\nexport { Receipt } from './src/models/receipt';\nexport { MonthlyPlan } from './src/models/plan';\n"]}

package/dist/src/edit-plan-form.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+import type { MonthlyPlan } from './models/plan';
+import './form-sections/cancel';
+export declare class IauxEditPlanForm extends LitElement {
+    plan?: MonthlyPlan;
+    cancelPlanHandler?: (plan: MonthlyPlan) => void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/edit-plan-form.js

@@ -0,0 +1,33 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import './form-sections/cancel';
+let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
+    render() {
+        return html `
+      <section class="mgc-edit-plan">
+        <hr />
+        <ia-mgc-cancel-plan
+          .plan=${this.plan}
+          @cancelPlan=${() => {
+            var _a;
+            if (this.plan) {
+                (_a = this.cancelPlanHandler) === null || _a === void 0 ? void 0 : _a.call(this, this.plan);
+            }
+        }}
+        ></ia-mgc-cancel-plan>
+      </section>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], IauxEditPlanForm.prototype, "plan", void 0);
+__decorate([
+    property({ type: Object })
+], IauxEditPlanForm.prototype, "cancelPlanHandler", void 0);
+IauxEditPlanForm = __decorate([
+    customElement('ia-mgc-edit-plan')
+], IauxEditPlanForm);
+export { IauxEditPlanForm };
+//# sourceMappingURL=edit-plan-form.js.map

package/dist/src/edit-plan-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-plan-form.js","sourceRoot":"","sources":["../../src/edit-plan-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,wBAAwB,CAAC;AAGhC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAK9C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;kBAIG,IAAI,CAAC,IAAI;wBACH,GAAG,EAAE;;YACjB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,MAAA,IAAI,CAAC,iBAAiB,qDAAG,IAAI,CAAC,IAAI,CAAC,CAAC;aACrC;QACH,CAAC;;;KAGN,CAAC;IACJ,CAAC;CACF,CAAA;AAnB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAiD;AAHjE,gBAAgB;IAD5B,aAAa,CAAC,kBAAkB,CAAC;GACrB,gBAAgB,CAoB5B;SApBY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\nimport './form-sections/cancel';\n\n@customElement('ia-mgc-edit-plan')\nexport class IauxEditPlanForm extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Object }) cancelPlanHandler?: (plan: MonthlyPlan) => void;\n\n  render() {\n    return html`\n      <section class=\"mgc-edit-plan\">\n        <hr />\n        <ia-mgc-cancel-plan\n          .plan=${this.plan}\n          @cancelPlan=${() => {\n            if (this.plan) {\n              this.cancelPlanHandler?.(this.plan);\n            }\n          }}\n        ></ia-mgc-cancel-plan>\n      </section>\n    `;\n  }\n}\n"]}

package/dist/src/form-sections/cancel.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, TemplateResult, PropertyValues, nothing } from 'lit';
+import type { MonthlyPlan } from '../models/plan';
+import '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';
+import '@internetarchive/donation-form-section';
+export declare class IauxMgcCancelPlan extends LitElement {
+    plan?: MonthlyPlan;
+    patronWantsToKeepPlan: boolean;
+    initialCancelRequest: boolean;
+    form: HTMLFormElement;
+    updated(changed: PropertyValues): void;
+    cancelThisPlan(e: Event): Promise<void>;
+    get formId(): string;
+    protected render(): typeof nothing | TemplateResult<2 | 1>;
+    get confirmCancelation(): TemplateResult | typeof nothing;
+    static styles: import("lit").CSSResult;
+}

package/dist/src/form-sections/cancel.js

@@ -0,0 +1,163 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing, css, } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';
+import '@internetarchive/donation-form-section';
+let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.patronWantsToKeepPlan = true;
+        this.initialCancelRequest = false;
+    }
+    updated(changed) {
+        if (changed.has('plan')) {
+            console.log('plan updated', this.plan);
+        }
+    }
+    async cancelThisPlan(e) {
+        e.preventDefault();
+        this.patronWantsToKeepPlan = false;
+        this.dispatchEvent(new Event('cancelPlan'));
+    }
+    get formId() {
+        var _a;
+        return `cancel-donation-form-${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.id}`;
+    }
+    render() {
+        if (this.initialCancelRequest) {
+            return this.confirmCancelation;
+        }
+        return html `
+      <ia-button
+        class="clear-container"
+        .clickHandler=${(e, iaButton) => {
+            // eslint-disable-next-line no-param-reassign
+            iaButton.isDisabled = true;
+            if (this.initialCancelRequest) {
+                this.initialCancelRequest = false;
+                this.patronWantsToKeepPlan = true;
+                return;
+            }
+            this.initialCancelRequest = true;
+        }}
+      >
+        <donation-form-section
+          badgemode="hidebadge"
+          headline="Cancel recurring donation (requires confirmation)"
+        >
+          <div class="warning">
+            <p>
+              You can also pause your recurring donation by setting the next
+              donation date up to 12 months in the future.
+            </p>
+            <p>Let's cancel my donation</p>
+          </div>
+        </donation-form-section>
+      </ia-button>
+
+      ${this.initialCancelRequest ? this.confirmCancelation : nothing}
+    `;
+    }
+    get confirmCancelation() {
+        return html `
+    <section class="cancel-donation">
+    <donation-form-section badgemode="hidebadge" headline="Cancel recurring donation">
+
+      <ia-button class='text exit-cancel'  @click=${() => {
+            this.initialCancelRequest = false;
+            this.patronWantsToKeepPlan = true;
+        }}>X</ia-button>
+
+      <p>Canceling ends your monthly recurring donation to the Internet Archive, effective immediately. You will not be charged moving forward.</p>
+      <p>Canceling does not affect your account or access to the Internet Archive, although you will no longer have access to any of the Monthly Giving Circle perks.</p>
+      <p>If you have any questions regarding donations, contact us at <a href="mailto:donations@archive.org">donations@archive.org</a></p>
+
+      <form id=${this.formId} @submit=${(e) => this.cancelThisPlan(e)}>
+        <div class="checkbox-option-container">
+          <input
+            id=${`confirm-${this.formId}`}
+            type="checkbox"
+            required
+            @change=${async (e) => {
+            e.preventDefault();
+            this.patronWantsToKeepPlan = !e.target
+                .checked;
+            await this.updateComplete;
+        }}>
+          <label for=${`confirm-${this.formId}`}><b>I'm sure I want to cancel my subscription</b></label>
+        </div>
+
+        <ia-button
+          class="cancel"
+          .isDisabled=${this.patronWantsToKeepPlan}
+          id=${`submit-${this.formId}`}
+          type="submit"
+          .clickHandler=${(e, iaButton) => {
+            // eslint-disable-next-line no-param-reassign
+            iaButton.isDisabled = true;
+            this.cancelThisPlan(e);
+        }}
+        >I'm sure I want to cancel my recurring donation.</ia-button>
+      </form>
+    </section>
+    `;
+    }
+};
+IauxMgcCancelPlan.styles = css `
+    .warning > * {
+      margin: 5px 0;
+    }
+
+    .cancel-donation {
+      display: block;
+      border: 2px solid #d9534f;
+      background-color: #ffeeee;
+    }
+
+    .cancel-donation > * {
+      padding: 5px;
+      position: relative;
+    }
+
+    ia-button.exit-cancel {
+      --button-border: 1px solid;
+      --button-border-radius: 50%;
+      position: absolute;
+      top: -5px;
+      right: -10px;
+    }
+
+    ia-button {
+      --button-height: auto;
+    }
+
+    ia-button > * {
+      text-align: left;
+      text-wrap: wrap;
+    }
+
+    h3 {
+      position: relative;
+    }
+
+    .checkbox-option-container {
+      margin-bottom: 5px;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], IauxMgcCancelPlan.prototype, "plan", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IauxMgcCancelPlan.prototype, "patronWantsToKeepPlan", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IauxMgcCancelPlan.prototype, "initialCancelRequest", void 0);
+__decorate([
+    query('form')
+], IauxMgcCancelPlan.prototype, "form", void 0);
+IauxMgcCancelPlan = __decorate([
+    customElement('ia-mgc-cancel-plan')
+], IauxMgcCancelPlan);
+export { IauxMgcCancelPlan };
+//# sourceMappingURL=cancel.js.map

package/dist/src/form-sections/cancel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cancel.js","sourceRoot":"","sources":["../../../src/form-sections/cancel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  TemplateResult,\n  PropertyValues,\n  nothing,\n  css,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { MonthlyPlan } from '../models/plan';\n\nimport type { IauxButton } from '../presentational/ia-button';\nimport '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\n\nimport '@internetarchive/donation-form-section';\n\n@customElement('ia-mgc-cancel-plan')\nexport class IauxMgcCancelPlan extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Boolean, reflect: true }) patronWantsToKeepPlan = true;\n\n  @property({ type: Boolean, reflect: true }) initialCancelRequest = false;\n\n  @query('form') form!: HTMLFormElement;\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plan')) {\n      console.log('plan updated', this.plan);\n    }\n  }\n\n  async cancelThisPlan(e: Event) {\n    e.preventDefault();\n    this.patronWantsToKeepPlan = false;\n    this.dispatchEvent(new Event('cancelPlan'));\n  }\n\n  get formId(): string {\n    return `cancel-donation-form-${this.plan?.id}`;\n  }\n\n  protected render() {\n    if (this.initialCancelRequest) {\n      return this.confirmCancelation;\n    }\n\n    return html`\n      <ia-button\n        class=\"clear-container\"\n        .clickHandler=${(e: CustomEvent, iaButton: IauxButton) => {\n          // eslint-disable-next-line no-param-reassign\n          iaButton.isDisabled = true;\n          if (this.initialCancelRequest) {\n            this.initialCancelRequest = false;\n            this.patronWantsToKeepPlan = true;\n            return;\n          }\n          this.initialCancelRequest = true;\n        }}\n      >\n        <donation-form-section\n          badgemode=\"hidebadge\"\n          headline=\"Cancel recurring donation (requires confirmation)\"\n        >\n          <div class=\"warning\">\n            <p>\n              You can also pause your recurring donation by setting the next\n              donation date up to 12 months in the future.\n            </p>\n            <p>Let's cancel my donation</p>\n          </div>\n        </donation-form-section>\n      </ia-button>\n\n      ${this.initialCancelRequest ? this.confirmCancelation : nothing}\n    `;\n  }\n\n  get confirmCancelation(): TemplateResult | typeof nothing {\n    return html`\n    <section class=\"cancel-donation\">\n    <donation-form-section badgemode=\"hidebadge\" headline=\"Cancel recurring donation\">\n\n      <ia-button class='text exit-cancel'  @click=${() => {\n        this.initialCancelRequest = false;\n        this.patronWantsToKeepPlan = true;\n      }}>X</ia-button>\n\n      <p>Canceling ends your monthly recurring donation to the Internet Archive, effective immediately. You will not be charged moving forward.</p>\n      <p>Canceling does not affect your account or access to the Internet Archive, although you will no longer have access to any of the Monthly Giving Circle perks.</p>\n      <p>If you have any questions regarding donations, contact us at <a href=\"mailto:donations@archive.org\">donations@archive.org</a></p>\n\n      <form id=${this.formId} @submit=${(e: Event) => this.cancelThisPlan(e)}>\n        <div class=\"checkbox-option-container\">\n          <input\n            id=${`confirm-${this.formId}`}\n            type=\"checkbox\"\n            required\n            @change=${async (e: Event) => {\n              e.preventDefault();\n              this.patronWantsToKeepPlan = !(e.target as HTMLInputElement)\n                .checked;\n              await this.updateComplete;\n            }}>\n          <label for=${`confirm-${this.formId}`}><b>I'm sure I want to cancel my subscription</b></label>\n        </div>\n\n        <ia-button\n          class=\"cancel\"\n          .isDisabled=${this.patronWantsToKeepPlan}\n          id=${`submit-${this.formId}`}\n          type=\"submit\"\n          .clickHandler=${(e: Event, iaButton: IauxButton) => {\n            // eslint-disable-next-line no-param-reassign\n            iaButton.isDisabled = true;\n            this.cancelThisPlan(e);\n          }}\n        >I'm sure I want to cancel my recurring donation.</ia-button>\n      </form>\n    </section>\n    `;\n  }\n\n  static styles = css`\n    .warning > * {\n      margin: 5px 0;\n    }\n\n    .cancel-donation {\n      display: block;\n      border: 2px solid #d9534f;\n      background-color: #ffeeee;\n    }\n\n    .cancel-donation > * {\n      padding: 5px;\n      position: relative;\n    }\n\n    ia-button.exit-cancel {\n      --button-border: 1px solid;\n      --button-border-radius: 50%;\n      position: absolute;\n      top: -5px;\n      right: -10px;\n    }\n\n    ia-button {\n      --button-height: auto;\n    }\n\n    ia-button > * {\n      text-align: left;\n      text-wrap: wrap;\n    }\n\n    h3 {\n      position: relative;\n    }\n\n    .checkbox-option-container {\n      margin-bottom: 5px;\n    }\n  `;\n}\n"]}

package/dist/src/models/plan.d.ts

@@ -36,6 +36,8 @@ export declare class MonthlyPlan {
     get amount(): number;
     get startDate(): string;
     get nextBillingDate(): string;
+    get hasBeenCancelled(): boolean;
     get isTest(): boolean;
+    cancelPlan(): void;
 }
 export {};

package/dist/src/models/plan.js

@@ -27,9 +27,15 @@ export class MonthlyPlan {
         });
         return nextBillingDate !== null && nextBillingDate !== void 0 ? nextBillingDate : 'not found';
     }
+    get hasBeenCancelled() {
+        return this.plan.isCancelled === true;
+    }
     get isTest() {
         return this.plan.is_test;
     }
+    cancelPlan() {
+        this.plan.isCancelled = true;
+    }
 }
 /*
 

package/dist/src/models/plan.js.map

@@ -1 +1 @@
-{"version":3,"file":"plan.js","sourceRoot":"","sources":["../../../src/models/plan.ts"],"names":[],"mappings":"AA8BA,MAAM,OAAO,WAAW;IAOtB,YAAY,IAAU;;QACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,MAAA,IAAI,CAAC,QAAQ,mCAAI,KAAK,CAAC,CAAC,cAAc;IACxD,CAAC;IAED,IAAI,EAAE;QACJ,yBAAyB;QACzB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;IACzB,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAC1B,CAAC;IAED,IAAI,SAAS;QACX,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;IACnC,CAAC;IAED,IAAI,eAAe;QACjB,MAAM,eAAe,GAAG,IAAI,IAAI,CAC9B,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAClC,CAAC,kBAAkB,CAAC,SAAS,EAAE;YAC9B,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,SAAS;SACf,CAAC,CAAC;QAEH,OAAO,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,WAAW,CAAC;IACxC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3B,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;IAwBI","sourcesContent":["type BtData = {\n  billingDayOfMonth: number;\n  nextBillingDate: {\n    date: string;\n    timezone_type: number;\n    timezone: string;\n  };\n  status: string; // active, inactive\n  paymentMethodType: string; // cc, paypal, venmo, etc\n  last4: string | null;\n  cardType: string | null;\n  expirationMonth: string | null;\n  expirationYear: string | null;\n  paypalEmail?: string;\n  venmoUsername?: string;\n};\n\ntype Plan = {\n  token: string;\n  amount: number;\n  currency: string;\n  start_date: string; // UTC\n  is_test: boolean;\n  btdata: BtData;\n  oldAmount?: number;\n  oldDate?: string;\n  oldPaymentMethod?: string;\n  isCancelled?: boolean;\n};\n\nexport class MonthlyPlan {\n  plan: Plan;\n\n  currency: string;\n\n  payment: BtData;\n\n  constructor(plan: Plan) {\n    this.plan = plan;\n    this.payment = plan.btdata;\n    this.currency = plan.currency ?? 'USD'; // not in data\n  }\n\n  get id(): string {\n    // use token as unique id\n    return this.plan.token;\n  }\n\n  get currencySymbol(): string {\n    return this.currency === 'USD' ? '$' : '';\n  }\n\n  get amount(): number {\n    return this.plan.amount;\n  }\n\n  get startDate(): string {\n    const date = new Date(this.plan.start_date);\n    return date.toLocaleDateString();\n  }\n\n  get nextBillingDate(): string {\n    const nextBillingDate = new Date(\n      this.payment.nextBillingDate.date\n    ).toLocaleDateString(undefined, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n\n    return nextBillingDate ?? 'not found';\n  }\n\n  get isTest(): boolean {\n    return this.plan.is_test;\n  }\n}\n\n/*\n\n{\n  \"token\": \"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTczODYxNTY3NS41ODA4MTcsIm5iZiI6MTczODYxNTYxNS41ODA4MTcsImV4cCI6MTczODYxNjI3NS41ODA4MTcsImtleSI6eyJwaWQiOiJkd2NrN20iLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiJxMXllYndoaiIsImN1c3RvbWVySWQiOiI4NTQ2MTk4MzUifSwidXNlciI6IkBpc2EtYXQtdGhlLWFyY2hpdmUifQ.TYlkU1ZZLHmj2ahrkTV7JGLmpCPN4BcOeDFPiXVj0pM\",\n  \"amount\": 5,\n  \"currency\": \"USD\",\n  \"start_date\": \"2022-12-09 00:00:00\",\n  \"contribution_status_id\": 5,\n  \"is_test\": true,\n  \"btdata\": {\n    \"billingDayOfMonth\": 9,\n    \"nextBillingDate\": {\n      \"date\": \"2025-02-09 00:00:00.000000\",\n      \"timezone_type\": 3,\n      \"timezone\": \"UTC\"\n    },\n    \"status\": \"Active\",\n    \"paymentMethodType\": \"creditCard\",\n    \"last4\": \"1111\",\n    \"cardType\": \"Visa\",\n    \"expirationMonth\": \"12\",\n    \"expirationYear\": \"2023\"\n  }\n}\n  */\n"]}
+{"version":3,"file":"plan.js","sourceRoot":"","sources":["../../../src/models/plan.ts"],"names":[],"mappings":"AA8BA,MAAM,OAAO,WAAW;IAOtB,YAAY,IAAU;;QACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,MAAA,IAAI,CAAC,QAAQ,mCAAI,KAAK,CAAC,CAAC,cAAc;IACxD,CAAC;IAED,IAAI,EAAE;QACJ,yBAAyB;QACzB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;IACzB,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAC1B,CAAC;IAED,IAAI,SAAS;QACX,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;IACnC,CAAC;IAED,IAAI,eAAe;QACjB,MAAM,eAAe,GAAG,IAAI,IAAI,CAC9B,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAClC,CAAC,kBAAkB,CAAC,SAAS,EAAE;YAC9B,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,SAAS;SACf,CAAC,CAAC;QAEH,OAAO,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,WAAW,CAAC;IACxC,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC;IACxC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC/B,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;IAwBI","sourcesContent":["type BtData = {\n  billingDayOfMonth: number;\n  nextBillingDate: {\n    date: string;\n    timezone_type: number;\n    timezone: string;\n  };\n  status: string; // active, inactive\n  paymentMethodType: string; // cc, paypal, venmo, etc\n  last4: string | null;\n  cardType: string | null;\n  expirationMonth: string | null;\n  expirationYear: string | null;\n  paypalEmail?: string;\n  venmoUsername?: string;\n};\n\ntype Plan = {\n  token: string;\n  amount: number;\n  currency: string;\n  start_date: string; // UTC\n  is_test: boolean;\n  btdata: BtData;\n  oldAmount?: number;\n  oldDate?: string;\n  oldPaymentMethod?: string;\n  isCancelled?: boolean;\n};\n\nexport class MonthlyPlan {\n  plan: Plan;\n\n  currency: string;\n\n  payment: BtData;\n\n  constructor(plan: Plan) {\n    this.plan = plan;\n    this.payment = plan.btdata;\n    this.currency = plan.currency ?? 'USD'; // not in data\n  }\n\n  get id(): string {\n    // use token as unique id\n    return this.plan.token;\n  }\n\n  get currencySymbol(): string {\n    return this.currency === 'USD' ? '$' : '';\n  }\n\n  get amount(): number {\n    return this.plan.amount;\n  }\n\n  get startDate(): string {\n    const date = new Date(this.plan.start_date);\n    return date.toLocaleDateString();\n  }\n\n  get nextBillingDate(): string {\n    const nextBillingDate = new Date(\n      this.payment.nextBillingDate.date\n    ).toLocaleDateString(undefined, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n\n    return nextBillingDate ?? 'not found';\n  }\n\n  get hasBeenCancelled(): boolean {\n    return this.plan.isCancelled === true;\n  }\n\n  get isTest(): boolean {\n    return this.plan.is_test;\n  }\n\n  cancelPlan(): void {\n    this.plan.isCancelled = true;\n  }\n}\n\n/*\n\n{\n  \"token\": \"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTczODYxNTY3NS41ODA4MTcsIm5iZiI6MTczODYxNTYxNS41ODA4MTcsImV4cCI6MTczODYxNjI3NS41ODA4MTcsImtleSI6eyJwaWQiOiJkd2NrN20iLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiJxMXllYndoaiIsImN1c3RvbWVySWQiOiI4NTQ2MTk4MzUifSwidXNlciI6IkBpc2EtYXQtdGhlLWFyY2hpdmUifQ.TYlkU1ZZLHmj2ahrkTV7JGLmpCPN4BcOeDFPiXVj0pM\",\n  \"amount\": 5,\n  \"currency\": \"USD\",\n  \"start_date\": \"2022-12-09 00:00:00\",\n  \"contribution_status_id\": 5,\n  \"is_test\": true,\n  \"btdata\": {\n    \"billingDayOfMonth\": 9,\n    \"nextBillingDate\": {\n      \"date\": \"2025-02-09 00:00:00.000000\",\n      \"timezone_type\": 3,\n      \"timezone\": \"UTC\"\n    },\n    \"status\": \"Active\",\n    \"paymentMethodType\": \"creditCard\",\n    \"last4\": \"1111\",\n    \"cardType\": \"Visa\",\n    \"expirationMonth\": \"12\",\n    \"expirationYear\": \"2023\"\n  }\n}\n  */\n"]}

package/dist/src/models/receipt.d.ts

@@ -2,6 +2,7 @@ declare type AReceipt = {
     currency: string;
     net_amount: number;
     total_amount: number;
+    fee_amount: number;
     receive_date?: Date;
     date: string;
     isTest: boolean;

package/dist/src/models/receipt.js.map

@@ -1 +1 @@
-{"version":3,"file":"receipt.js","sourceRoot":"","sources":["../../../src/models/receipt.ts"],"names":[],"mappings":"AASA,MAAM,OAAO,OAAO;IAGlB,YAAY,OAAiB;QAC3B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,IAAI,eAAe;;QACjB,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;QACnE,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,mCAAI,gBAAgB,CAAC;QAC/D,IAAI,KAAK,EAAE;YACT,OAAO,GAAG,YAAY,IAAI,IAAI,CAAC,cAAc,GAAG,KAAK,EAAE,CAAC;SACzD;QACD,OAAO,wDAAwD,CAAC;IAClE,CAAC;IAED,IAAI,MAAM;;QACR,OAAO,CACL,MAAA,MAAA,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,mCAC9B,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,mCAC5B,wDAAwD,CACzD,CAAC;IACJ,CAAC;IAED,IAAI,MAAM;;QACR,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,MAAM,mCAAI,KAAK,CAAC;IACtC,CAAC;IAED,IAAI,EAAE;;QACJ,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,KAAK,mCAAI,gBAAgB,CAAC;IAChD,CAAC;IAED,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,mCAAI,eAAe,CAAC;IAC9C,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,KAAK,EAAE;YACnC,OAAO,GAAG,CAAC;SACZ;QAED,OAAO,EAAE,CAAC;IACZ,CAAC;CACF","sourcesContent":["type AReceipt = {\n  currency: string;\n  net_amount: number;\n  total_amount: number;\n  receive_date?: Date;\n  date: string;\n  isTest: boolean;\n  token: string;\n};\nexport class Receipt {\n  receipt: AReceipt;\n\n  constructor(receipt: AReceipt) {\n    this.receipt = receipt;\n  }\n\n  get amountFormatted(): string {\n    const value = this.receipt.total_amount ?? this.receipt.net_amount;\n    const currencyType = this.receipt.currency ?? 'CURR not found';\n    if (value) {\n      return `${currencyType} ${this.currencySymbol}${value}`;\n    }\n    return \"no amount found, can't find total_amount or net_amount\";\n  }\n\n  get amount(): string {\n    return (\n      `${this.receipt.total_amount}` ??\n      `${this.receipt.net_amount}` ??\n      \"no amount found, can't find total_amount or net_amount\"\n    );\n  }\n\n  get isTest(): boolean {\n    return this.receipt.isTest ?? false;\n  }\n\n  get id(): string {\n    return this.receipt.token ?? 'no token found';\n  }\n\n  get date(): string {\n    return this.receipt.date ?? 'no date found';\n  }\n\n  get currencySymbol(): string {\n    if (this.receipt.currency === 'USD') {\n      return '$';\n    }\n\n    return '';\n  }\n}\n"]}
+{"version":3,"file":"receipt.js","sourceRoot":"","sources":["../../../src/models/receipt.ts"],"names":[],"mappings":"AAUA,MAAM,OAAO,OAAO;IAGlB,YAAY,OAAiB;QAC3B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,IAAI,eAAe;;QACjB,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;QACnE,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,mCAAI,gBAAgB,CAAC;QAC/D,IAAI,KAAK,EAAE;YACT,OAAO,GAAG,YAAY,IAAI,IAAI,CAAC,cAAc,GAAG,KAAK,EAAE,CAAC;SACzD;QACD,OAAO,wDAAwD,CAAC;IAClE,CAAC;IAED,IAAI,MAAM;;QACR,OAAO,CACL,MAAA,MAAA,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,mCAC9B,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,mCAC5B,wDAAwD,CACzD,CAAC;IACJ,CAAC;IAED,IAAI,MAAM;;QACR,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,MAAM,mCAAI,KAAK,CAAC;IACtC,CAAC;IAED,IAAI,EAAE;;QACJ,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,KAAK,mCAAI,gBAAgB,CAAC;IAChD,CAAC;IAED,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,mCAAI,eAAe,CAAC;IAC9C,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,KAAK,EAAE;YACnC,OAAO,GAAG,CAAC;SACZ;QAED,OAAO,EAAE,CAAC;IACZ,CAAC;CACF","sourcesContent":["type AReceipt = {\n  currency: string;\n  net_amount: number;\n  total_amount: number;\n  fee_amount: number;\n  receive_date?: Date;\n  date: string;\n  isTest: boolean;\n  token: string;\n};\nexport class Receipt {\n  receipt: AReceipt;\n\n  constructor(receipt: AReceipt) {\n    this.receipt = receipt;\n  }\n\n  get amountFormatted(): string {\n    const value = this.receipt.total_amount ?? this.receipt.net_amount;\n    const currencyType = this.receipt.currency ?? 'CURR not found';\n    if (value) {\n      return `${currencyType} ${this.currencySymbol}${value}`;\n    }\n    return \"no amount found, can't find total_amount or net_amount\";\n  }\n\n  get amount(): string {\n    return (\n      `${this.receipt.total_amount}` ??\n      `${this.receipt.net_amount}` ??\n      \"no amount found, can't find total_amount or net_amount\"\n    );\n  }\n\n  get isTest(): boolean {\n    return this.receipt.isTest ?? false;\n  }\n\n  get id(): string {\n    return this.receipt.token ?? 'no token found';\n  }\n\n  get date(): string {\n    return this.receipt.date ?? 'no date found';\n  }\n\n  get currencySymbol(): string {\n    if (this.receipt.currency === 'USD') {\n      return '$';\n    }\n\n    return '';\n  }\n}\n"]}

package/dist/src/monthly-giving-circle.d.ts

@@ -5,22 +5,27 @@ import './presentational/mgc-title';
 import './receipts';
 import type { IauxMgcReceipts } from './receipts';
 import './presentational/ia-button';
-export declare type AnUpdate = {
-    message: string;
+import type { MonthlyPlan } from './models/plan';
+import './edit-plan-form';
+export declare type APlanUpdate = {
+    plan?: MonthlyPlan;
+    donationId?: string;
     status: 'success' | 'fail';
-    donationId: string;
+    action: 'receiptSent' | 'cancel';
+    message: string;
 };
 export declare class MonthlyGivingCircle extends LitElement {
     patronName: string;
     receipts: never[];
-    updates: AnUpdate[];
+    updates: APlanUpdate[];
     plans: never[];
-    viewToDisplay: 'welcome' | 'receipts' | 'plans';
+    editingThisPlan?: MonthlyPlan;
+    viewToDisplay: 'welcome' | 'receipts' | 'plans' | 'editPlan';
     protected createRenderRoot(): this;
     updated(changed: PropertyValues): void;
     get receiptListElement(): IauxMgcReceipts;
-    updateReceived(update: AnUpdate): void;
-    get showReceiptsCTA(): TemplateResult;
-    get headerSection(): TemplateResult;
+    updateReceived(update: APlanUpdate): void;
     protected render(): TemplateResult<1>;
+    get sectionTitle(): TemplateResult;
+    get nonEditView(): TemplateResult;
 }

package/dist/src/monthly-giving-circle.js

@@ -1,12 +1,13 @@
 /* eslint-disable no-debugger */
 import { __decorate } from "tslib";
-import { LitElement, html, nothing } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import './welcome-message';
 import './plans';
 import './presentational/mgc-title';
 import './receipts';
 import './presentational/ia-button';
+import './edit-plan-form';
 let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
     constructor() {
         super(...arguments);
@@ -27,91 +28,145 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
     get receiptListElement() {
         return this.querySelector('ia-mgc-receipts');
     }
+    /* Update Callback */
     updateReceived(update) {
+        var _a, _b;
+        // log update
+        this.updates.unshift(update);
+        const { plan, donationId = '' } = update;
+        const idToUse = (_a = plan === null || plan === void 0 ? void 0 : plan.id) !== null && _a !== void 0 ? _a : donationId;
+        const editingPlanIsUpdating = ((_b = this.editingThisPlan) === null || _b === void 0 ? void 0 : _b.id) === idToUse;
+        if (editingPlanIsUpdating) {
+            console.log('edit received, mismatch plans', {
+                planCurrentlyEditing: this.editingThisPlan,
+                planReceived: update.plan,
+            });
+            return;
+        }
+        if (plan === null || plan === void 0 ? void 0 : plan.hasBeenCancelled) {
+            this.editingThisPlan = undefined;
+            this.viewToDisplay = 'plans';
+            return;
+        }
         this.receiptListElement.emailSent({
-            id: update.donationId,
+            id: idToUse,
             emailStatus: update.status,
         });
-        this.updates.unshift(update);
     }
-    get showReceiptsCTA() {
+    /* VIEWS */
+    render() {
+        const isEditingPlan = this.viewToDisplay === 'editPlan' && this.editingThisPlan;
         return html `
+      ${this.sectionTitle}
+      ${isEditingPlan
+            ? html `<ia-mgc-edit-plan
+            .plan=${this.editingThisPlan}
+            .cancelPlanHandler=${(plan) => {
+                console.log('cancelPlan', plan);
+                this.dispatchEvent(new CustomEvent('cancelPlan', {
+                    detail: { plan },
+                }));
+            }}
+          ></ia-mgc-edit-plan>`
+            : this.nonEditView}
+    `;
+    }
+    get sectionTitle() {
+        let title = '';
+        let titleStyle = '';
+        let cta = html ``;
+        const receiptsCTA = html `
       <ia-button
         class="link slim"
-        .clickHandler=${() => {
+        .clickHandler=${async () => {
             this.viewToDisplay = 'receipts';
+            await this.updateComplete;
             this.dispatchEvent(new CustomEvent('ShowReceipts'));
         }}
       >
         View recent donation history
       </ia-button>
     `;
-    }
-    get headerSection() {
-        if (this.viewToDisplay === 'receipts') {
-            return html `
-        <ia-mgc-title titleStyle="default">
-          <span slot="title">Recent donations</span>
-          <span slot="action">
-            <ia-button
-              class="link slim"
-              id="close-receipts"
-              .clickHandler=${async () => {
-                this.viewToDisplay = 'welcome';
-                this.dispatchEvent(new CustomEvent('ShowWelcome'));
-                this.updates = [];
-                await this.updateComplete;
-            }}
-            >
-              Back to account settings
-            </ia-button>
-          </span>
-        </ia-mgc-title>
-      `;
-        }
-        if (this.plans.length) {
-            return html `
-        <ia-mgc-title titleStyle="heart">
-          <span slot="title">Monthly Giving Circle</span>
-          <span slot="action"
-            >${this.receipts.length ? this.showReceiptsCTA : nothing}</span
-          >
-        </ia-mgc-title>
-      `;
+        const displayReceiptsLink = this.receipts.length &&
+            (this.viewToDisplay === 'plans' || this.viewToDisplay === 'welcome');
+        switch (this.viewToDisplay) {
+            case 'receipts':
+                title = 'Recent donations';
+                titleStyle = 'default';
+                cta = html `<ia-button
+          class="link slim"
+          id="close-receipts"
+          .clickHandler=${async () => {
+                    this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';
+                    this.dispatchEvent(new CustomEvent('ShowWelcome'));
+                    this.updates = [];
+                    await this.updateComplete;
+                }}
+        >
+          Back to account settings
+        </ia-button>`;
+                break;
+            case 'editPlan':
+                title = 'Edit plan';
+                titleStyle = 'default';
+                cta = html `<ia-button
+          class="primary"
+          id="close-edit-plan"
+          .clickHandler=${async () => {
+                    this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';
+                    this.dispatchEvent(new CustomEvent('ShowWelcome'));
+                    this.updates = [];
+                    await this.updateComplete;
+                }}
+        >
+          Back to account settings
+        </ia-button>`;
+                break;
+            default:
+                title = 'Monthly Giving Circle';
+                titleStyle = 'heart';
+                if (displayReceiptsLink) {
+                    cta = receiptsCTA;
+                }
+                break;
         }
         return html `
-      <ia-mgc-title titleStyle="heart">
-        <span slot="title">Monthly Giving Circle</span>
-        <span slot="action"
-          >${this.receipts.length ? this.showReceiptsCTA : nothing}</span
-        >
+      <ia-mgc-title titleStyle=${titleStyle}>
+        <span slot="title">${title}</span>
+        <span slot="action">${cta}</span>
       </ia-mgc-title>
     `;
     }
-    render() {
-        return html `
-      ${this.headerSection}
-      ${this.viewToDisplay === 'receipts'
-            ? html `
-            <ia-mgc-receipts
-              .receipts=${this.receipts}
-              @EmailReceiptRequest=${(event) => {
+    get nonEditView() {
+        if (this.viewToDisplay === 'receipts') {
+            return html `
+        <ia-mgc-receipts
+          .receipts=${this.receipts}
+          @EmailReceiptRequest=${(event) => {
                 console.log('EmailReceiptRequest', event.detail);
                 this.dispatchEvent(new CustomEvent('EmailReceiptRequest', {
                     detail: { ...event.detail },
                 }));
             }}
-            ></ia-mgc-receipts>
-          `
-            : nothing}
-      ${this.viewToDisplay === 'plans'
-            ? html ` <ia-mgc-plans .plans=${this.plans}></ia-mgc-plans> `
-            : nothing}
-      ${this.viewToDisplay === 'welcome'
+        ></ia-mgc-receipts>
+      `;
+        }
+        return html `
+      ${this.viewToDisplay === 'plans' && this.plans.length
             ? html `
-            <ia-mgc-welcome .patronName=${this.patronName}></ia-mgc-welcome>
+            <ia-mgc-plans
+              @editThisPlan=${async (event) => {
+                this.editingThisPlan = event.detail.plan;
+                this.viewToDisplay = 'editPlan';
+                this.dispatchEvent(new Event('ShowEditForm'));
+                await this.updateComplete;
+            }}
+              .plans=${this.plans}
+            ></ia-mgc-plans>
           `
-            : nothing}
+            : html `<ia-mgc-welcome
+            .patronName=${this.patronName}
+          ></ia-mgc-welcome>`}
     `;
     }
 };
@@ -127,6 +182,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], MonthlyGivingCircle.prototype, "plans", void 0);
+__decorate([
+    property({ type: Object })
+], MonthlyGivingCircle.prototype, "editingThisPlan", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], MonthlyGivingCircle.prototype, "viewToDisplay", void 0);

package/dist/src/monthly-giving-circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-debugger */\n\nimport { LitElement, html, TemplateResult, nothing, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './welcome-message';\nimport './plans';\nimport './presentational/mgc-title';\nimport './receipts';\nimport type { IauxMgcReceipts } from './receipts';\nimport './presentational/ia-button';\n\nexport type AnUpdate = {\n  message: string;\n  status: 'success' | 'fail';\n  donationId: string;\n};\n\n@customElement('ia-monthly-giving-circle')\nexport class MonthlyGivingCircle extends LitElement {\n  @property({ type: String }) patronName: string = '';\n\n  @property({ type: Array }) receipts = [];\n\n  @property({ type: Array }) updates: AnUpdate[] = [];\n\n  @property({ type: Array }) plans = [];\n\n  @property({ type: String, reflect: true }) viewToDisplay:\n    | 'welcome'\n    | 'receipts'\n    | 'plans' = 'welcome';\n\n  protected createRenderRoot() {\n    return this;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plans')) {\n      this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n    }\n  }\n\n  get receiptListElement(): IauxMgcReceipts {\n    return this.querySelector('ia-mgc-receipts') as IauxMgcReceipts;\n  }\n\n  updateReceived(update: AnUpdate) {\n    this.receiptListElement.emailSent({\n      id: update.donationId,\n      emailStatus: update.status,\n    });\n    this.updates.unshift(update);\n  }\n\n  get showReceiptsCTA(): TemplateResult {\n    return html`\n      <ia-button\n        class=\"link slim\"\n        .clickHandler=${() => {\n          this.viewToDisplay = 'receipts';\n          this.dispatchEvent(new CustomEvent('ShowReceipts'));\n        }}\n      >\n        View recent donation history\n      </ia-button>\n    `;\n  }\n\n  get headerSection(): TemplateResult {\n    if (this.viewToDisplay === 'receipts') {\n      return html`\n        <ia-mgc-title titleStyle=\"default\">\n          <span slot=\"title\">Recent donations</span>\n          <span slot=\"action\">\n            <ia-button\n              class=\"link slim\"\n              id=\"close-receipts\"\n              .clickHandler=${async () => {\n                this.viewToDisplay = 'welcome';\n                this.dispatchEvent(new CustomEvent('ShowWelcome'));\n                this.updates = [];\n                await this.updateComplete;\n              }}\n            >\n              Back to account settings\n            </ia-button>\n          </span>\n        </ia-mgc-title>\n      `;\n    }\n\n    if (this.plans.length) {\n      return html`\n        <ia-mgc-title titleStyle=\"heart\">\n          <span slot=\"title\">Monthly Giving Circle</span>\n          <span slot=\"action\"\n            >${this.receipts.length ? this.showReceiptsCTA : nothing}</span\n          >\n        </ia-mgc-title>\n      `;\n    }\n\n    return html`\n      <ia-mgc-title titleStyle=\"heart\">\n        <span slot=\"title\">Monthly Giving Circle</span>\n        <span slot=\"action\"\n          >${this.receipts.length ? this.showReceiptsCTA : nothing}</span\n        >\n      </ia-mgc-title>\n    `;\n  }\n\n  protected render() {\n    return html`\n      ${this.headerSection}\n      ${this.viewToDisplay === 'receipts'\n        ? html`\n            <ia-mgc-receipts\n              .receipts=${this.receipts}\n              @EmailReceiptRequest=${(event: CustomEvent) => {\n                console.log('EmailReceiptRequest', event.detail);\n                this.dispatchEvent(\n                  new CustomEvent('EmailReceiptRequest', {\n                    detail: { ...event.detail },\n                  })\n                );\n              }}\n            ></ia-mgc-receipts>\n          `\n        : nothing}\n      ${this.viewToDisplay === 'plans'\n        ? html` <ia-mgc-plans .plans=${this.plans}></ia-mgc-plans> `\n        : nothing}\n      ${this.viewToDisplay === 'welcome'\n        ? html`\n            <ia-mgc-welcome .patronName=${this.patronName}></ia-mgc-welcome>\n          `\n        : nothing}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-debugger */\n\nimport { LitElement, html, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './welcome-message';\nimport './plans';\nimport './presentational/mgc-title';\nimport './receipts';\nimport type { IauxMgcReceipts } from './receipts';\nimport './presentational/ia-button';\nimport type { MonthlyPlan } from './models/plan';\nimport './edit-plan-form';\n\nexport type APlanUpdate = {\n  plan?: MonthlyPlan;\n  donationId?: string;\n  status: 'success' | 'fail';\n  action: 'receiptSent' | 'cancel';\n  message: string;\n};\n\n@customElement('ia-monthly-giving-circle')\nexport class MonthlyGivingCircle extends LitElement {\n  @property({ type: String }) patronName: string = '';\n\n  @property({ type: Array }) receipts = [];\n\n  @property({ type: Array }) updates: APlanUpdate[] = [];\n\n  @property({ type: Array }) plans = [];\n\n  @property({ type: Object }) editingThisPlan?: MonthlyPlan;\n\n  @property({ type: String, reflect: true }) viewToDisplay:\n    | 'welcome'\n    | 'receipts'\n    | 'plans'\n    | 'editPlan' = 'welcome';\n\n  protected createRenderRoot() {\n    return this;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plans')) {\n      this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n    }\n  }\n\n  get receiptListElement(): IauxMgcReceipts {\n    return this.querySelector('ia-mgc-receipts') as IauxMgcReceipts;\n  }\n\n  /* Update Callback */\n  updateReceived(update: APlanUpdate) {\n    // log update\n    this.updates.unshift(update);\n\n    const { plan, donationId = '' } = update;\n    const idToUse = plan?.id ?? donationId;\n    const editingPlanIsUpdating = this.editingThisPlan?.id === idToUse;\n\n    if (editingPlanIsUpdating) {\n      console.log('edit received, mismatch plans', {\n        planCurrentlyEditing: this.editingThisPlan,\n        planReceived: update.plan,\n      });\n      return;\n    }\n\n    if (plan?.hasBeenCancelled) {\n      this.editingThisPlan = undefined;\n      this.viewToDisplay = 'plans';\n      return;\n    }\n\n    this.receiptListElement.emailSent({\n      id: idToUse,\n      emailStatus: update.status,\n    });\n  }\n\n  /* VIEWS */\n  protected render() {\n    const isEditingPlan =\n      this.viewToDisplay === 'editPlan' && this.editingThisPlan;\n    return html`\n      ${this.sectionTitle}\n      ${isEditingPlan\n        ? html`<ia-mgc-edit-plan\n            .plan=${this.editingThisPlan}\n            .cancelPlanHandler=${(plan: MonthlyPlan) => {\n              console.log('cancelPlan', plan);\n              this.dispatchEvent(\n                new CustomEvent('cancelPlan', {\n                  detail: { plan },\n                })\n              );\n            }}\n          ></ia-mgc-edit-plan>`\n        : this.nonEditView}\n    `;\n  }\n\n  get sectionTitle(): TemplateResult {\n    let title = '';\n    let titleStyle = '';\n    let cta = html``;\n\n    const receiptsCTA = html`\n      <ia-button\n        class=\"link slim\"\n        .clickHandler=${async () => {\n          this.viewToDisplay = 'receipts';\n          await this.updateComplete;\n          this.dispatchEvent(new CustomEvent('ShowReceipts'));\n        }}\n      >\n        View recent donation history\n      </ia-button>\n    `;\n\n    const displayReceiptsLink =\n      this.receipts.length &&\n      (this.viewToDisplay === 'plans' || this.viewToDisplay === 'welcome');\n\n    switch (this.viewToDisplay) {\n      case 'receipts':\n        title = 'Recent donations';\n        titleStyle = 'default';\n        cta = html`<ia-button\n          class=\"link slim\"\n          id=\"close-receipts\"\n          .clickHandler=${async () => {\n            this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n            this.dispatchEvent(new CustomEvent('ShowWelcome'));\n            this.updates = [];\n            await this.updateComplete;\n          }}\n        >\n          Back to account settings\n        </ia-button>`;\n        break;\n\n      case 'editPlan':\n        title = 'Edit plan';\n        titleStyle = 'default';\n        cta = html`<ia-button\n          class=\"primary\"\n          id=\"close-edit-plan\"\n          .clickHandler=${async () => {\n            this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n            this.dispatchEvent(new CustomEvent('ShowWelcome'));\n            this.updates = [];\n            await this.updateComplete;\n          }}\n        >\n          Back to account settings\n        </ia-button>`;\n        break;\n\n      default:\n        title = 'Monthly Giving Circle';\n        titleStyle = 'heart';\n        if (displayReceiptsLink) {\n          cta = receiptsCTA;\n        }\n        break;\n    }\n\n    return html`\n      <ia-mgc-title titleStyle=${titleStyle}>\n        <span slot=\"title\">${title}</span>\n        <span slot=\"action\">${cta}</span>\n      </ia-mgc-title>\n    `;\n  }\n\n  get nonEditView(): TemplateResult {\n    if (this.viewToDisplay === 'receipts') {\n      return html`\n        <ia-mgc-receipts\n          .receipts=${this.receipts}\n          @EmailReceiptRequest=${(event: CustomEvent) => {\n            console.log('EmailReceiptRequest', event.detail);\n            this.dispatchEvent(\n              new CustomEvent('EmailReceiptRequest', {\n                detail: { ...event.detail },\n              })\n            );\n          }}\n        ></ia-mgc-receipts>\n      `;\n    }\n\n    return html`\n      ${this.viewToDisplay === 'plans' && this.plans.length\n        ? html`\n            <ia-mgc-plans\n              @editThisPlan=${async (event: CustomEvent) => {\n                this.editingThisPlan = event.detail.plan;\n                this.viewToDisplay = 'editPlan';\n                this.dispatchEvent(new Event('ShowEditForm'));\n                await this.updateComplete;\n              }}\n              .plans=${this.plans}\n            ></ia-mgc-plans>\n          `\n        : html`<ia-mgc-welcome\n            .patronName=${this.patronName}\n          ></ia-mgc-welcome>`}\n    `;\n  }\n}\n"]}