@internetarchive/donation-monthly-portal 7.1.1-payment-method-2 → 7.1.1-payment-method-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,6 +9,7 @@ import './form-sections/payment-method';
9
9
  export declare class IauxEditPlanForm extends LitElement {
10
10
  plan?: MonthlyPlan;
11
11
  patronEmail: string;
12
+ canEditPaymentMethod: boolean;
12
13
  updateAmountHandler?: (plan: MonthlyPlan, amountUpdates: {
13
14
  amount: number;
14
15
  baseAmount: number;
@@ -13,6 +13,7 @@ let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
13
13
  constructor() {
14
14
  super(...arguments);
15
15
  this.patronEmail = '';
16
+ this.canEditPaymentMethod = false;
16
17
  this.paymentConfig = {
17
18
  referrer: '',
18
19
  origin: '',
@@ -68,21 +69,25 @@ let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
68
69
  }
69
70
  }}
70
71
  ></ia-mgc-edit-plan-amount>
71
- <hr />
72
- <ia-mgc-edit-payment-method
73
- .plan=${this.plan}
74
- .patronEmail=${this.patronEmail}
75
- .paymentConfig=${this.paymentConfig}
76
- @UpdatePaymentMethod=${(e) => {
77
- const { newPaymentMethodRequest } = e.detail;
78
- if (this.plan) {
79
- this.dispatchEvent(new CustomEvent('UpdatePaymentMethod', {
80
- detail: { plan: this.plan, newPaymentMethodRequest },
81
- }));
82
- }
83
- }}
84
- >
85
- </ia-mgc-edit-payment-method>
72
+ ${this.canEditPaymentMethod
73
+ ? html `
74
+ <hr />
75
+ <ia-mgc-edit-payment-method
76
+ .plan=${this.plan}
77
+ .patronEmail=${this.patronEmail}
78
+ .paymentConfig=${this.paymentConfig}
79
+ @UpdatePaymentMethod=${(e) => {
80
+ const { newPaymentMethodRequest } = e.detail;
81
+ if (this.plan) {
82
+ this.dispatchEvent(new CustomEvent('UpdatePaymentMethod', {
83
+ detail: { plan: this.plan, newPaymentMethodRequest },
84
+ }));
85
+ }
86
+ }}
87
+ >
88
+ </ia-mgc-edit-payment-method>
89
+ `
90
+ : ''}
86
91
  <hr />
87
92
  <ia-mgc-edit-date
88
93
  @updateDate=${(e) => {
@@ -120,6 +125,9 @@ __decorate([
120
125
  __decorate([
121
126
  property({ type: String })
122
127
  ], IauxEditPlanForm.prototype, "patronEmail", void 0);
128
+ __decorate([
129
+ property({ type: Boolean })
130
+ ], IauxEditPlanForm.prototype, "canEditPaymentMethod", void 0);
123
131
  __decorate([
124
132
  property({ type: Object })
125
133
  ], IauxEditPlanForm.prototype, "updateAmountHandler", void 0);
@@ -1 +1 @@
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,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,oEAAoE,CAAC;AAE5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAEL,kBAAkB,GACnB,MAAM,mFAAmF,CAAC;AAC3F,OAAO,EACL,cAAc,GAEf,MAAM,8EAA8E,CAAC;AAItF,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,gCAAgC,CAAC;AAMjC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAGuB,gBAAW,GAAW,EAAE,CAAC;QAYzB,kBAAa,GASrC;YACF,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE,EAAE;YACV,kBAAkB,EAAE,mCAAmC;YACvD,cAAc,EAAE,qBAAqB;YACrC,mBAAmB,EAAE,EAAE;YACvB,WAAW,EAAE,KAAK;YAClB,cAAc,EAAE,IAAI,cAAc,CAChC,IAAI,iBAAiB,EAAE,EACvB,kBAAkB,CAAC,WAAW,CAC/B;YACD,eAAe,EAAE;gBACf,+EAA+E;gBAC/E,UAAU,EAAE,KAAK,EAAE,QAAyB,EAAE,EAAE;oBAC9C,uCAAuC;oBACvC,QAAQ,CAAC;gBACX,CAAC;gBACD,6DAA6D;gBAC7D,kBAAkB,EAAE,CAAC,SAAc,EAAE,EAAE;oBACrC,uCAAuC;oBACvC,QAAQ,CAAC;gBACX,CAAC;aAC8C;SAClD,CAAC;IAoGJ,CAAC;IA1FC,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,oBAAoB,CAAC,MAA0B;QAC7C,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAC1C,4BAA4B,CACL,CAAC;QAC1B,iBAAkB,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAClD,CAAC;IAED,aAAa,CAAC,MAA0B;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CACnC,yBAAyB,CACL,CAAC;QACvB,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;IAED,WAAW,CAAC,MAA0B;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAoB,CAAC;QAC3E,QAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,IAAI;0BACD,CAAC,CAAc,EAAE,EAAE;;YACjC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;YAC/D,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,MAAA,IAAI,CAAC,mBAAmB,qDAAG,IAAI,CAAC,IAAI,EAAE;oBACpC,MAAM;oBACN,UAAU;oBACV,SAAS;oBACT,UAAU;iBACX,CAAC,CAAC;YACL,CAAC;QACH,CAAC;;;;kBAIO,IAAI,CAAC,IAAI;yBACF,IAAI,CAAC,WAAW;2BACd,IAAI,CAAC,aAAa;iCACZ,CAAC,CAAc,EAAE,EAAE;YACxC,MAAM,EAAE,uBAAuB,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;YAC7C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;oBACrC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,uBAAuB,EAAE;iBACrD,CAAC,CACH,CAAC;YACJ,CAAC;QACH,CAAC;;;;;wBAKa,CAAC,CAAc,EAAE,EAAE;YAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;YAC7B,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;oBAC5B,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE;iBACrC,CAAC,CACH,CAAC;YACJ,CAAC;QACH,CAAC;kBACO,IAAI,CAAC,IAAI;;;;kBAIT,IAAI,CAAC,IAAI;wBACH,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;QAC9C,CAAC;;;;;oBAKS,IAAI,CAAC,UAAU,EAAE;;;KAGhC,CAAC;IACJ,CAAC;IAED,UAAU;QACR,OAAO,6EAA6E,CAAC;IACvF,CAAC;CACF,CAAA;AAlJ6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA0B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAQjB;AAEkB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAgCzB;AAE8B;IAA/B,KAAK,CAAC,uBAAuB,CAAC;8DAAuC;AAEtC;IAA/B,KAAK,CAAC,uBAAuB,CAAC;sEAA+C;AAErD;IAAxB,KAAK,CAAC,gBAAgB,CAAC;2DAAoC;AAEzB;IAAlC,KAAK,CAAC,0BAA0B,CAAC;+DAAwC;AAvD/D,gBAAgB;IAD5B,aAAa,CAAC,kBAAkB,CAAC;GACrB,gBAAgB,CAmJ5B","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '@internetarchive/donation-form/dist/src/form-elements/badged-input';\n\nimport { LazyLoaderService } from '@internetarchive/lazy-loader-service';\nimport {\n BraintreeEndpointManagerInterface,\n HostingEnvironment,\n} from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';\nimport {\n PaymentClients,\n PaymentClientsInterface,\n} from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';\nimport type { DonationRequest } from '@internetarchive/donation-form-data-models';\n\nimport type { MonthlyPlan } from './models/plan';\nimport './form-sections/amount';\nimport './form-sections/date';\nimport './form-sections/cancel';\nimport './form-sections/payment-method';\nimport type { MGCEditPlanAmount } from './form-sections/amount';\nimport type { MGCEditPlanDate } from './form-sections/date';\nimport type { MGCEditPaymentMethod } from './form-sections/payment-method';\n\n@customElement('ia-mgc-edit-plan')\nexport class IauxEditPlanForm extends LitElement {\n @property({ type: Object }) plan?: MonthlyPlan;\n\n @property({ type: String }) patronEmail: string = '';\n\n @property({ type: Object }) updateAmountHandler?: (\n plan: MonthlyPlan,\n amountUpdates: {\n amount: number;\n baseAmount: number;\n coverFees: boolean;\n feeCovered: number;\n },\n ) => void;\n\n @property({ type: Object }) paymentConfig: {\n referrer: string;\n origin: string;\n braintreeAuthToken: string;\n venmoProfileId: string;\n googlePayMerchantId: string;\n environment: string;\n paymentClients: PaymentClientsInterface | undefined;\n endpointManager: object;\n } = {\n referrer: '',\n origin: '',\n braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',\n venmoProfileId: '1953896702662410263',\n googlePayMerchantId: '',\n environment: 'dev',\n paymentClients: new PaymentClients(\n new LazyLoaderService(),\n HostingEnvironment.Development,\n ),\n endpointManager: {\n // eslint-disable-next-line arrow-body-style, @typescript-eslint/no-unused-vars\n submitData: async (_request: DonationRequest) => {\n // eslint-disable-next-line no-debugger\n debugger;\n },\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n donationSuccessful: (_response: any) => {\n // eslint-disable-next-line no-debugger\n debugger;\n },\n } as unknown as BraintreeEndpointManagerInterface,\n };\n\n @query('#braintree-creditcard') braintreeNumberInput!: HTMLDivElement;\n\n @query('#braintree-expiration') braintreeExpirationDateInput!: HTMLDivElement;\n\n @query('#braintree-cvv') braintreeCVVInput!: HTMLDivElement;\n\n @query('#braintree-error-message') braintreeErrorMessage!: HTMLDivElement;\n\n createRenderRoot() {\n return this;\n }\n\n paymentMethodUpdates(status: 'success' | 'fail') {\n const paymentMethodForm = this.querySelector(\n 'ia-mgc-edit-payment-method',\n ) as MGCEditPaymentMethod;\n paymentMethodForm!.paymentMethodUpdated(status);\n }\n\n amountUpdates(status: 'success' | 'fail') {\n const amountForm = this.querySelector(\n 'ia-mgc-edit-plan-amount',\n ) as MGCEditPlanAmount;\n amountForm!.amountUpdated(status);\n }\n\n dateUpdates(status: 'success' | 'fail') {\n const dateForm = this.querySelector('ia-mgc-edit-date') as MGCEditPlanDate;\n dateForm!.dateUpdated(status);\n }\n\n render() {\n return html`\n <section class=\"mgc-edit-plan\">\n <ia-mgc-edit-plan-amount\n .plan=${this.plan}\n @updateAmount=${(e: CustomEvent) => {\n const { amount, baseAmount, coverFees, feeCovered } = e.detail;\n if (this.plan) {\n this.updateAmountHandler?.(this.plan, {\n amount,\n baseAmount,\n coverFees,\n feeCovered,\n });\n }\n }}\n ></ia-mgc-edit-plan-amount>\n <hr />\n <ia-mgc-edit-payment-method\n .plan=${this.plan}\n .patronEmail=${this.patronEmail}\n .paymentConfig=${this.paymentConfig}\n @UpdatePaymentMethod=${(e: CustomEvent) => {\n const { newPaymentMethodRequest } = e.detail;\n if (this.plan) {\n this.dispatchEvent(\n new CustomEvent('UpdatePaymentMethod', {\n detail: { plan: this.plan, newPaymentMethodRequest },\n }),\n );\n }\n }}\n >\n </ia-mgc-edit-payment-method>\n <hr />\n <ia-mgc-edit-date\n @updateDate=${(e: CustomEvent) => {\n const { newDate } = e.detail;\n if (this.plan) {\n this.dispatchEvent(\n new CustomEvent('updateDate', {\n detail: { plan: this.plan, newDate },\n }),\n );\n }\n }}\n .plan=${this.plan}\n ></ia-mgc-edit-date>\n <hr />\n <ia-mgc-cancel-plan\n .plan=${this.plan}\n @cancelPlan=${() => {\n this.dispatchEvent(new Event('cancelPlan'));\n }}\n ></ia-mgc-cancel-plan>\n <hr />\n <p class=\"email-edit-plan\">\n Need to update your plan further? Please email us at\n <a href=${this.mailToText()}>donations@archive.org</a>.\n </p>\n </section>\n `;\n }\n\n mailToText(): string {\n return `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;\n }\n}\n"]}
1
+ {"version":3,"file":"edit-plan-form.js","sourceRoot":"","sources":["../../src/edit-plan-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '@internetarchive/donation-form/dist/src/form-elements/badged-input';\n\nimport { LazyLoaderService } from '@internetarchive/lazy-loader-service';\nimport {\n BraintreeEndpointManagerInterface,\n HostingEnvironment,\n} from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';\nimport {\n PaymentClients,\n PaymentClientsInterface,\n} from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';\nimport type { DonationRequest } from '@internetarchive/donation-form-data-models';\n\nimport type { MonthlyPlan } from './models/plan';\nimport './form-sections/amount';\nimport './form-sections/date';\nimport './form-sections/cancel';\nimport './form-sections/payment-method';\nimport type { MGCEditPlanAmount } from './form-sections/amount';\nimport type { MGCEditPlanDate } from './form-sections/date';\nimport type { MGCEditPaymentMethod } from './form-sections/payment-method';\n\n@customElement('ia-mgc-edit-plan')\nexport class IauxEditPlanForm extends LitElement {\n @property({ type: Object }) plan?: MonthlyPlan;\n\n @property({ type: String }) patronEmail: string = '';\n\n @property({ type: Boolean }) canEditPaymentMethod: boolean = false;\n\n @property({ type: Object }) updateAmountHandler?: (\n plan: MonthlyPlan,\n amountUpdates: {\n amount: number;\n baseAmount: number;\n coverFees: boolean;\n feeCovered: number;\n },\n ) => void;\n\n @property({ type: Object }) paymentConfig: {\n referrer: string;\n origin: string;\n braintreeAuthToken: string;\n venmoProfileId: string;\n googlePayMerchantId: string;\n environment: string;\n paymentClients: PaymentClientsInterface | undefined;\n endpointManager: object;\n } = {\n referrer: '',\n origin: '',\n braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',\n venmoProfileId: '1953896702662410263',\n googlePayMerchantId: '',\n environment: 'dev',\n paymentClients: new PaymentClients(\n new LazyLoaderService(),\n HostingEnvironment.Development,\n ),\n endpointManager: {\n // eslint-disable-next-line arrow-body-style, @typescript-eslint/no-unused-vars\n submitData: async (_request: DonationRequest) => {\n // eslint-disable-next-line no-debugger\n debugger;\n },\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n donationSuccessful: (_response: any) => {\n // eslint-disable-next-line no-debugger\n debugger;\n },\n } as unknown as BraintreeEndpointManagerInterface,\n };\n\n @query('#braintree-creditcard') braintreeNumberInput!: HTMLDivElement;\n\n @query('#braintree-expiration') braintreeExpirationDateInput!: HTMLDivElement;\n\n @query('#braintree-cvv') braintreeCVVInput!: HTMLDivElement;\n\n @query('#braintree-error-message') braintreeErrorMessage!: HTMLDivElement;\n\n createRenderRoot() {\n return this;\n }\n\n paymentMethodUpdates(status: 'success' | 'fail') {\n const paymentMethodForm = this.querySelector(\n 'ia-mgc-edit-payment-method',\n ) as MGCEditPaymentMethod;\n paymentMethodForm!.paymentMethodUpdated(status);\n }\n\n amountUpdates(status: 'success' | 'fail') {\n const amountForm = this.querySelector(\n 'ia-mgc-edit-plan-amount',\n ) as MGCEditPlanAmount;\n amountForm!.amountUpdated(status);\n }\n\n dateUpdates(status: 'success' | 'fail') {\n const dateForm = this.querySelector('ia-mgc-edit-date') as MGCEditPlanDate;\n dateForm!.dateUpdated(status);\n }\n\n render() {\n return html`\n <section class=\"mgc-edit-plan\">\n <ia-mgc-edit-plan-amount\n .plan=${this.plan}\n @updateAmount=${(e: CustomEvent) => {\n const { amount, baseAmount, coverFees, feeCovered } = e.detail;\n if (this.plan) {\n this.updateAmountHandler?.(this.plan, {\n amount,\n baseAmount,\n coverFees,\n feeCovered,\n });\n }\n }}\n ></ia-mgc-edit-plan-amount>\n ${this.canEditPaymentMethod\n ? html`\n <hr />\n <ia-mgc-edit-payment-method\n .plan=${this.plan}\n .patronEmail=${this.patronEmail}\n .paymentConfig=${this.paymentConfig}\n @UpdatePaymentMethod=${(e: CustomEvent) => {\n const { newPaymentMethodRequest } = e.detail;\n if (this.plan) {\n this.dispatchEvent(\n new CustomEvent('UpdatePaymentMethod', {\n detail: { plan: this.plan, newPaymentMethodRequest },\n }),\n );\n }\n }}\n >\n </ia-mgc-edit-payment-method>\n `\n : ''}\n <hr />\n <ia-mgc-edit-date\n @updateDate=${(e: CustomEvent) => {\n const { newDate } = e.detail;\n if (this.plan) {\n this.dispatchEvent(\n new CustomEvent('updateDate', {\n detail: { plan: this.plan, newDate },\n }),\n );\n }\n }}\n .plan=${this.plan}\n ></ia-mgc-edit-date>\n <hr />\n <ia-mgc-cancel-plan\n .plan=${this.plan}\n @cancelPlan=${() => {\n this.dispatchEvent(new Event('cancelPlan'));\n }}\n ></ia-mgc-cancel-plan>\n <hr />\n <p class=\"email-edit-plan\">\n Need to update your plan further? Please email us at\n <a href=${this.mailToText()}>donations@archive.org</a>.\n </p>\n </section>\n `;\n }\n\n mailToText(): string {\n return `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;\n }\n}\n"]}
@@ -43,20 +43,6 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
43
43
  this.updateMessage = '';
44
44
  this.updateStatus = '';
45
45
  }
46
- // @property({ type: Boolean }) creditCardSelected: boolean = false;
47
- // @property({ type: Boolean }) venmoSelected: boolean = false;
48
- // @property({ type: Boolean }) applePaySelected: boolean = false;
49
- // @property({ type: Boolean }) googlePaySelected: boolean = false;
50
- // @property({ type: Boolean }) paypalBlockerSelected: boolean = false;
51
- /*
52
- .paymentProviders=${this.braintreeManager?.paymentProviders}
53
- @firstUpdated=${this.paymentSelectorFirstUpdated}
54
- @creditCardSelected=${this.creditCardSelected}
55
- @venmoSelected=${this.venmoSelected}
56
- @applePaySelected=${this.applePaySelected}
57
- @googlePaySelected=${this.googlePaySelected}
58
- @paypalBlockerSelected=${this.paypalBlockerSelected}
59
- */
60
46
  createRenderRoot() {
61
47
  return this;
62
48
  }
@@ -1 +1 @@
1
- {"version":3,"file":"payment-method.js","sourceRoot":"","sources":["../../../src/form-sections/payment-method.ts"],"names":[],"mappings":";AAAA,qCAAqC;AACrC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,wCAAwC,CAAC;AAChD,OAAO,oFAAoF,CAAC;AAE5F,OAAO,OAAO,MAAM,qCAAqC,CAAC;AAE1D,OAAO,2EAA2E,CAAC;AAEnF,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAQ7E,OAAO,yCAAyC,CAAC;AACjD,OAAO,8BAA8B,CAAC;AAGtC,OAAO,qCAAqC,CAAC;AAE7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE;;;;;;;;;GASG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAGuB,kBAAa,GASrC;YACF,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE,EAAE;YACV,kBAAkB,EAAE,mCAAmC;YACvD,cAAc,EAAE,qBAAqB;YACrC,mBAAmB,EAAE,EAAE;YACvB,WAAW,EAAE,KAAK;YAClB,cAAc,EAAE,SAAS;YACzB,eAAe,EAAE,EAAE;SACpB,CAAC;QAE0B,gBAAW,GAAW,EAAE,CAAC;QAET,qBAAgB,GAC1D,KAAK,CAAC;QAEmC,qBAAgB,GAAW,EAAE,CAAC;QAI9B,4BAAuB,GAChE,EAAE,CAAC;QAEwB,gCAA2B,GAAY,KAAK,CAAC;QAE9C,kBAAa,GAAW,EAAE,CAAC;QAE3B,iBAAY,GAA4B,EAAE,CAAC;IAoRzE,CAAC;IAlRC,oEAAoE;IAEpE,+DAA+D;IAE/D,kEAAkE;IAElE,mEAAmE;IAEnE,uEAAuE;IAEvE;;;;;;;;MAQE;IAEF,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,yBAAyB,CAAC,CAAQ;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;IACrB,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;IACzB,CAAC;IAED,KAAK,CAAC,oBAAoB,CAAC,MAA0B;QACnD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,aAAa;YAChB,MAAM,KAAK,SAAS;gBAClB,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,yCAAyC,CAAC;QAEhD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAC9B,IAAI,CAAC,uBAAuB,GAAG,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,mBAAmB,CAAC,UAAU,GAAG,KAAK,CAAC;IAC9C,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAC,aAAa,CACvB,+CAA+C,CACnC,CAAC;IACjB,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,kBAAkB;QACpB,MAAM,QAAQ,GACZ,IAAI,CAAC,uBAAuB,KAAK,eAAe,CAAC,KAAK;YACpD,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,2BAA2B,CAAC;QAElC,MAAM,kBAAkB,GACtB,IAAI,CAAC,uBAAuB,KAAK,eAAe,CAAC,UAAU;YAC3D,IAAI,CAAC,uBAAuB,KAAK,eAAe,CAAC,KAAK,CAAC;QAEzD,OAAO,CAAC,GAAG,CAAC,sCAAsC,EAAE,EAAE,kBAAkB,EAAE,CAAC,CAAC;QAC5E,OAAO,IAAI,CAAA;;;mBAGI,QAAQ;;;;;;;;;;;;;;KActB,CAAC;IACJ,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,uBAAuB;QACzB,OAAO,IAAI,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACxD,CAAC;IAED,MAAM;;QACJ,MAAM,kBAAkB,GACtB,IAAI,CAAC,uBAAuB,KAAK,eAAe,CAAC,UAAU;YAC3D,IAAI,CAAC,uBAAuB,KAAK,eAAe,CAAC,KAAK,CAAC;QAEzD,MAAM,eAAe,GACnB,IAAI,CAAC,uBAAuB,KAAK,eAAe,CAAC,UAAU,CAAC;QAE9D,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE;YACrC,uBAAuB,EAAE,IAAI,CAAC,uBAAuB;SACtD,CAAC,CAAC;QACH,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,MAAM;;;UAGX,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,CAAC,IAAI,CAAA;kCACkB,GAAG,EAAE;gBACvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC;;kBAEG,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,0CAAE,iBAAiB,MAAK,YAAY;gBACtD,CAAC,CAAC,aAAa;gBACf,CAAC,CAAC,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,0CAAE,iBAAiB;kBACvC,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,0CAAE,QAAQ,MAAM,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,0CAAE,KAAK;;cAE/D;YACJ,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,gBAAgB;YACrB,CAAC,CAAC,IAAI,CAAA;0DAC0C,IAAI,CAAC,yBAAyB;;oCAEpD,MAAA,IAAI,CAAC,gBAAgB,0CAAE,gBAAgB;gCAC3C,GAAG,EAAE;gBACnB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;YAC1C,CAAC;sCACqB,GAAG,EAAE;gBACzB,IAAI,CAAC,uBAAuB,GAAG,eAAe,CAAC,UAAU,CAAC;YAC5D,CAAC;iCACgB,GAAG,EAAE;gBACpB,IAAI,CAAC,uBAAuB,GAAG,eAAe,CAAC,KAAK,CAAC;YACvD,CAAC;oCACmB,GAAG,EAAE;gBACvB,IAAI,CAAC,uBAAuB,GAAG,eAAe,CAAC,QAAQ,CAAC;YAC1D,CAAC;qCACoB,GAAG,EAAE;gBACxB,IAAI,CAAC,uBAAuB,GAAG,eAAe,CAAC,SAAS,CAAC;YAC3D,CAAC;yCACwB,GAAG,EAAE;gBAC5B,IAAI,CAAC,uBAAuB,GAAG,eAAe,CAAC;YACjD,CAAC;sCACqB,KAAK,IAAI,EAAE;gBAC/B,IAAI,CAAC,uBAAuB,GAAG,EAAE,CAAC;YACpC,CAAC;;;;;;4BAMW,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;4CAClB,IAAI,CAAC,WAAW;;;;;yBAKnC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;qCACnB,IAAI,CAAC,uBAAuB,KAAK,eAAe,CAAC,UAAU;wBACxE,IAAI,CAAC,IAAI;iCACA,IAAI,CAAC,aAAa;iDACF,GAAG,EAAE;gBACpC,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;YAC/C,CAAC;;;;;;gCAMe,GAAG,EAAE;gBACnB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;gBAC9B,IAAI,CAAC,uBAAuB,GAAG,EAAE,CAAC;gBAClC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC;;;;;;;8BAOa,CAAC,IAAI,CAAC,uBAAuB;gCAC3B,KAAK,EAAE,KAAY,EAAE,QAAmB,EAAE,EAAE;;gBAC1D,OAAO,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;gBAEjC,MAAM,MAAM,GAAG,QAAQ,CAAC;gBACxB,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC;gBACzB,uBAAuB;gBACvB,sCAAsC;gBACtC,MAAM,kBAAkB,GACtB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,cAAc,EAAE,CAAC;gBAE3C,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBACxB,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;oBAC1B,OAAO;gBACT,CAAC;gBAED,MAAM,iBAAiB,GACrB,CAAC,MAAM,CAAA,MAAA,IAAI,CAAC,uBAAuB,0CAAE,wBAAwB,EAAE,CAAA,CAAmB,CAAC;gBAErF,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBACvB,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;oBAC1B,OAAO;gBACT,CAAC;gBAED,MAAM,uBAAuB,GAAG,IAAI,oBAAoB,CAAC;oBACvD,iBAAiB;oBACjB,gBAAgB,EAAE,MAAA,IAAI,CAAC,kBAAkB,0CAAE,gBAAgB;oBAC3D,eAAe,EAAE,IAAI;yBAClB,uBAA0C;iBAC9C,CAAC,CAAC;gBAEH,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;oBACrC,MAAM,EAAE,EAAE,uBAAuB,EAAE;iBACpC,CAAC,CACH,CAAC;YACJ,CAAC;;;8CAG6B,IAAI,CAAC,YAAY;mBAC5C,IAAI,CAAC,aAAa;;;kBAGnB,OAAO;;;WAGd;YACD,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;IAED,IAAI,MAAM;QACR,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4BT,CAAC;IACJ,CAAC;CACF,CAAA;AA1T6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAkBzB;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA0B;AAET;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DACnC;AAEmC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DAA+B;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAA8C;AAE9B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qEACrC;AAEwB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yEAA8C;AAE9C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAA4C;AAvC5D,oBAAoB;IADhC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,oBAAoB,CA2ThC","sourcesContent":["/* eslint-disable arrow-body-style */\nimport { LitElement, html, nothing, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\nimport '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\n\nimport lockImg from '@internetarchive/icon-lock/index.js';\n\nimport '@internetarchive/donation-form/dist/src/form-elements/payment-selector.js';\n\nimport '../form-sections/parts/braintree-manager';\n\nimport { PaymentProvider } from '@internetarchive/donation-form-data-models';\n\nimport type {\n BraintreeManagerInterface,\n PaymentClientsInterface,\n} from '@internetarchive/donation-form';\nimport type { ContactForm } from '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/donation-section-info';\nimport '../presentational/mgc-button';\n\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '../presentational/mgc-update-status';\nimport type { MGCBraintreeManager } from '../form-sections/parts/braintree-manager';\nimport { PaymentMethodRequest } from '../models/payment-method-request';\n\n/**\n * <ia-mgc-edit-payment-method>\n * - collecting the data to send to the service\n * - contact form\n * - braintree manager\n *\n * - handles submission\n * - handles toggling the view between display and edit modes\n *\n */\n@customElement('ia-mgc-edit-payment-method')\nexport class MGCEditPaymentMethod extends LitElement {\n @property({ type: Object }) plan?: MonthlyPlan;\n\n @property({ type: Object }) paymentConfig: {\n referrer: string;\n origin: string;\n braintreeAuthToken: string;\n venmoProfileId: string;\n googlePayMerchantId: string;\n environment: string;\n paymentClients: PaymentClientsInterface | undefined;\n endpointManager: object;\n } = {\n referrer: '',\n origin: '',\n braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',\n venmoProfileId: '1953896702662410263',\n googlePayMerchantId: '',\n environment: 'dev',\n paymentClients: undefined,\n endpointManager: {},\n };\n\n @property({ type: String }) patronEmail: string = '';\n\n @property({ type: Boolean, reflect: true }) currentlyEditing?: boolean =\n false;\n\n @property({ type: String, reflect: true }) newPaymentMethod: string = '';\n\n @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n @property({ type: String, reflect: true }) selectedPaymentProvider: string =\n '';\n\n @property({ type: Boolean }) paymentSelectorFirstUpdated: boolean = false;\n\n @property({ type: String }) updateMessage: string = '';\n\n @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n // @property({ type: Boolean }) creditCardSelected: boolean = false;\n\n // @property({ type: Boolean }) venmoSelected: boolean = false;\n\n // @property({ type: Boolean }) applePaySelected: boolean = false;\n\n // @property({ type: Boolean }) googlePaySelected: boolean = false;\n\n // @property({ type: Boolean }) paypalBlockerSelected: boolean = false;\n\n /*\n .paymentProviders=${this.braintreeManager?.paymentProviders}\n @firstUpdated=${this.paymentSelectorFirstUpdated}\n @creditCardSelected=${this.creditCardSelected}\n @venmoSelected=${this.venmoSelected}\n @applePaySelected=${this.applePaySelected}\n @googlePaySelected=${this.googlePaySelected}\n @paypalBlockerSelected=${this.paypalBlockerSelected}\n */\n\n createRenderRoot() {\n return this;\n }\n\n submitPaymentMethodChange(e: Event) {\n e.preventDefault();\n }\n\n clearStatusMessaging() {\n this.updateMessage = '';\n this.updateStatus = '';\n }\n\n async paymentMethodUpdated(status: 'success' | 'fail') {\n this.updateStatus = status;\n this.updateMessage =\n status === 'success'\n ? 'Payment method updated'\n : 'Failed to update date, please try again';\n\n if (status === 'success') {\n this.currentlyEditing = false;\n this.selectedPaymentProvider = '';\n return;\n }\n this.updateRequestButton.isDisabled = false;\n }\n\n get updateRequestButton(): MGCButton {\n return this.querySelector(\n 'ia-mgc-button#edit-plan-payment-method-submit',\n ) as MGCButton;\n }\n\n get contactFormElement(): ContactForm | null {\n return this.querySelector('contact-form');\n }\n\n get contactFormSection(): TemplateResult {\n const headline =\n this.selectedPaymentProvider === PaymentProvider.Venmo\n ? 'Help us stay in touch'\n : 'Enter payment information';\n\n const displayContactForm =\n this.selectedPaymentProvider === PaymentProvider.CreditCard ||\n this.selectedPaymentProvider === PaymentProvider.Venmo;\n\n console.log('contactFormSectioncontactFormSection', { displayContactForm });\n return html`\n <donation-form-section\n badgemode=\"hidebadge\"\n headline=${headline}\n id=\"contactFormSection\"\n >\n <div class=\"credit-card-fields\">\n <slot\n style=\"\n display: block;\n width: 100%;\n border: 1px solid blue;\n height: inherit;\n \"\n ></slot>\n </div>\n </donation-form-section>\n `;\n }\n\n get paymentFormSection(): TemplateResult | typeof nothing {\n return html``;\n }\n\n get creditCardElement(): ContactForm | null {\n return this.querySelector('contact-form');\n }\n\n get braintreeManagerElement(): MGCBraintreeManager | null {\n return this.querySelector('ia-mgc-braintree-manager');\n }\n\n render() {\n const displayContactForm =\n this.selectedPaymentProvider === PaymentProvider.CreditCard ||\n this.selectedPaymentProvider === PaymentProvider.Venmo;\n\n const displayCCFields =\n this.selectedPaymentProvider === PaymentProvider.CreditCard;\n\n console.log('selectedPaymentProvider', {\n selectedPaymentProvider: this.selectedPaymentProvider,\n });\n return html`\n <style>\n ${this.styles}\n </style>\n <donation-form-section badgemode=\"hidebadge\" headline=\"Payment method\">\n ${!this.currentlyEditing\n ? html`<ia-mgc-form-section-info\n @editingRequested=${() => {\n this.currentlyEditing = true;\n this.clearStatusMessaging();\n }}\n ><span>\n ${this.plan?.payment?.paymentMethodType === 'creditCard'\n ? 'Credit Card'\n : this.plan?.payment?.paymentMethodType}:\n ${this.plan?.payment?.cardType} - ${this.plan?.payment?.last4}\n </span></ia-mgc-form-section-info\n >`\n : nothing}\n ${this.currentlyEditing\n ? html`\n <form id=\"edit-plan-payment-method\" @submit=${this.submitPaymentMethodChange}>\n <payment-selector\n .paymentProviders=${this.braintreeManager?.paymentProviders}\n @firstUpdated=${() => {\n this.paymentSelectorFirstUpdated = true;\n }}\n @creditCardSelected=${() => {\n this.selectedPaymentProvider = PaymentProvider.CreditCard;\n }}\n @venmoSelected=${() => {\n this.selectedPaymentProvider = PaymentProvider.Venmo;\n }}\n @applePaySelected=${() => {\n this.selectedPaymentProvider = PaymentProvider.ApplePay;\n }}\n @googlePaySelected=${() => {\n this.selectedPaymentProvider = PaymentProvider.GooglePay;\n }}\n @paypalBlockerSelected=${() => {\n this.selectedPaymentProvider = 'paypalBlocker';\n }}\n @resetPaymentMethod=${async () => {\n this.selectedPaymentProvider = '';\n }}\n tabindex=\"0\"\n >\n <slot name=\"paypal-button\" slot=\"paypal-button\"></slot>\n </payment-selector>\n\n <div class=\"${displayContactForm ? '' : 'hidden'}\">\n <contact-form .donorEmail=${this.patronEmail}></contact-form>\n </div>\n \n\n <ia-mgc-braintree-manager\n class=\"${displayCCFields ? '' : 'hidden'}\"\n .displayCreditCard=${this.selectedPaymentProvider === PaymentProvider.CreditCard}\n .plan=${this.plan}\n .paymentConfig=${this.paymentConfig}\n @BraintreeManagerSetupComplete=${() => {\n console.log('BraintreeManagerSetupComplete');\n }}\n ></ia-mgc-braintree-manager>\n\n <ia-mgc-button\n id=\"edit-plan-payment-method-cancel\"\n class=\"secondary\"\n .clickHandler=${() => {\n this.currentlyEditing = false;\n this.selectedPaymentProvider = '';\n this.clearStatusMessaging();\n }}\n >Cancel</ia-mgc-button\n >\n <ia-mgc-button\n id=\"edit-plan-payment-method-submit\"\n class=\"primary\"\n type=\"submit\"\n .isDisabled=${!this.selectedPaymentProvider}\n .clickHandler=${async (event: Event, iaButton: MGCButton) => {\n console.log({ iaButton, event });\n\n const button = iaButton;\n button.isDisabled = true;\n // validate credit card\n // if not valid, show error and return\n const isContactFormValid =\n this.creditCardElement?.reportValidity();\n\n if (!isContactFormValid) {\n button.isDisabled = false;\n return;\n }\n\n const paymentMethodInfo =\n (await this.braintreeManagerElement?.validateCreditCardFields()) as unknown as any;\n\n if (!paymentMethodInfo) {\n button.isDisabled = false;\n return;\n }\n\n const newPaymentMethodRequest = new PaymentMethodRequest({\n paymentMethodInfo,\n donorContactInfo: this.contactFormElement?.donorContactInfo,\n paymentProvider: this\n .selectedPaymentProvider as PaymentProvider,\n });\n\n this.dispatchEvent(\n new CustomEvent('UpdatePaymentMethod', {\n detail: { newPaymentMethodRequest },\n }),\n );\n }}\n >Update payment method</ia-mgc-button\n >\n <ia-mgc-update-status .status=${this.updateStatus}\n >${this.updateMessage}</ia-mgc-update-status\n ></ia-mgc-form-section-info>\n <div class=\"secure-process-note\">\n ${lockImg} Your payment will be securely processed\n </div>\n </form>\n `\n : nothing}\n </donation-form-section>\n `;\n }\n\n get styles() {\n return css`\n payment-selector {\n display: block;\n margin-bottom: 5px;\n padding-bottom: 10px;\n }\n\n ia-mgc-braintree-manager {\n display: block;\n margin: 10px 0;\n }\n\n .secure-process-note {\n margin-top: 0.5em;\n font-size: 0.75em;\n }\n\n .secure-process-note svg {\n width: 1.2rem;\n height: 1.5rem;\n vertical-align: bottom;\n }\n\n .hidden {\n visibility: hidden;\n height: 1px;\n width: 1px;\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"payment-method.js","sourceRoot":"","sources":["../../../src/form-sections/payment-method.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable arrow-body-style */\nimport { LitElement, html, nothing, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\nimport '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\n\nimport lockImg from '@internetarchive/icon-lock/index.js';\n\nimport '@internetarchive/donation-form/dist/src/form-elements/payment-selector.js';\n\nimport '../form-sections/parts/braintree-manager';\n\nimport { PaymentProvider } from '@internetarchive/donation-form-data-models';\n\nimport type {\n BraintreeManagerInterface,\n PaymentClientsInterface,\n} from '@internetarchive/donation-form';\nimport type { ContactForm } from '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/donation-section-info';\nimport '../presentational/mgc-button';\n\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '../presentational/mgc-update-status';\nimport type { MGCBraintreeManager } from '../form-sections/parts/braintree-manager';\nimport { PaymentMethodRequest } from '../models/payment-method-request';\n\n/**\n * <ia-mgc-edit-payment-method>\n * - collecting the data to send to the service\n * - contact form\n * - braintree manager\n *\n * - handles submission\n * - handles toggling the view between display and edit modes\n *\n */\n@customElement('ia-mgc-edit-payment-method')\nexport class MGCEditPaymentMethod extends LitElement {\n @property({ type: Object }) plan?: MonthlyPlan;\n\n @property({ type: Object }) paymentConfig: {\n referrer: string;\n origin: string;\n braintreeAuthToken: string;\n venmoProfileId: string;\n googlePayMerchantId: string;\n environment: string;\n paymentClients: PaymentClientsInterface | undefined;\n endpointManager: object;\n } = {\n referrer: '',\n origin: '',\n braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',\n venmoProfileId: '1953896702662410263',\n googlePayMerchantId: '',\n environment: 'dev',\n paymentClients: undefined,\n endpointManager: {},\n };\n\n @property({ type: String }) patronEmail: string = '';\n\n @property({ type: Boolean, reflect: true }) currentlyEditing?: boolean =\n false;\n\n @property({ type: String, reflect: true }) newPaymentMethod: string = '';\n\n @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n @property({ type: String, reflect: true }) selectedPaymentProvider: string =\n '';\n\n @property({ type: Boolean }) paymentSelectorFirstUpdated: boolean = false;\n\n @property({ type: String }) updateMessage: string = '';\n\n @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n createRenderRoot() {\n return this;\n }\n\n submitPaymentMethodChange(e: Event) {\n e.preventDefault();\n }\n\n clearStatusMessaging() {\n this.updateMessage = '';\n this.updateStatus = '';\n }\n\n async paymentMethodUpdated(status: 'success' | 'fail') {\n this.updateStatus = status;\n this.updateMessage =\n status === 'success'\n ? 'Payment method updated'\n : 'Failed to update date, please try again';\n\n if (status === 'success') {\n this.currentlyEditing = false;\n this.selectedPaymentProvider = '';\n return;\n }\n this.updateRequestButton.isDisabled = false;\n }\n\n get updateRequestButton(): MGCButton {\n return this.querySelector(\n 'ia-mgc-button#edit-plan-payment-method-submit',\n ) as MGCButton;\n }\n\n get contactFormElement(): ContactForm | null {\n return this.querySelector('contact-form');\n }\n\n get contactFormSection(): TemplateResult {\n const headline =\n this.selectedPaymentProvider === PaymentProvider.Venmo\n ? 'Help us stay in touch'\n : 'Enter payment information';\n\n const displayContactForm =\n this.selectedPaymentProvider === PaymentProvider.CreditCard ||\n this.selectedPaymentProvider === PaymentProvider.Venmo;\n\n console.log('contactFormSectioncontactFormSection', { displayContactForm });\n return html`\n <donation-form-section\n badgemode=\"hidebadge\"\n headline=${headline}\n id=\"contactFormSection\"\n >\n <div class=\"credit-card-fields\">\n <slot\n style=\"\n display: block;\n width: 100%;\n border: 1px solid blue;\n height: inherit;\n \"\n ></slot>\n </div>\n </donation-form-section>\n `;\n }\n\n get paymentFormSection(): TemplateResult | typeof nothing {\n return html``;\n }\n\n get creditCardElement(): ContactForm | null {\n return this.querySelector('contact-form');\n }\n\n get braintreeManagerElement(): MGCBraintreeManager | null {\n return this.querySelector('ia-mgc-braintree-manager');\n }\n\n render() {\n const displayContactForm =\n this.selectedPaymentProvider === PaymentProvider.CreditCard ||\n this.selectedPaymentProvider === PaymentProvider.Venmo;\n\n const displayCCFields =\n this.selectedPaymentProvider === PaymentProvider.CreditCard;\n\n console.log('selectedPaymentProvider', {\n selectedPaymentProvider: this.selectedPaymentProvider,\n });\n return html`\n <style>\n ${this.styles}\n </style>\n <donation-form-section badgemode=\"hidebadge\" headline=\"Payment method\">\n ${!this.currentlyEditing\n ? html`<ia-mgc-form-section-info\n @editingRequested=${() => {\n this.currentlyEditing = true;\n this.clearStatusMessaging();\n }}\n ><span>\n ${this.plan?.payment?.paymentMethodType === 'creditCard'\n ? 'Credit Card'\n : this.plan?.payment?.paymentMethodType}:\n ${this.plan?.payment?.cardType} - ${this.plan?.payment?.last4}\n </span></ia-mgc-form-section-info\n >`\n : nothing}\n ${this.currentlyEditing\n ? html`\n <form id=\"edit-plan-payment-method\" @submit=${this.submitPaymentMethodChange}>\n <payment-selector\n .paymentProviders=${this.braintreeManager?.paymentProviders}\n @firstUpdated=${() => {\n this.paymentSelectorFirstUpdated = true;\n }}\n @creditCardSelected=${() => {\n this.selectedPaymentProvider = PaymentProvider.CreditCard;\n }}\n @venmoSelected=${() => {\n this.selectedPaymentProvider = PaymentProvider.Venmo;\n }}\n @applePaySelected=${() => {\n this.selectedPaymentProvider = PaymentProvider.ApplePay;\n }}\n @googlePaySelected=${() => {\n this.selectedPaymentProvider = PaymentProvider.GooglePay;\n }}\n @paypalBlockerSelected=${() => {\n this.selectedPaymentProvider = 'paypalBlocker';\n }}\n @resetPaymentMethod=${async () => {\n this.selectedPaymentProvider = '';\n }}\n tabindex=\"0\"\n >\n <slot name=\"paypal-button\" slot=\"paypal-button\"></slot>\n </payment-selector>\n\n <div class=\"${displayContactForm ? '' : 'hidden'}\">\n <contact-form .donorEmail=${this.patronEmail}></contact-form>\n </div>\n \n\n <ia-mgc-braintree-manager\n class=\"${displayCCFields ? '' : 'hidden'}\"\n .displayCreditCard=${this.selectedPaymentProvider === PaymentProvider.CreditCard}\n .plan=${this.plan}\n .paymentConfig=${this.paymentConfig}\n @BraintreeManagerSetupComplete=${() => {\n console.log('BraintreeManagerSetupComplete');\n }}\n ></ia-mgc-braintree-manager>\n\n <ia-mgc-button\n id=\"edit-plan-payment-method-cancel\"\n class=\"secondary\"\n .clickHandler=${() => {\n this.currentlyEditing = false;\n this.selectedPaymentProvider = '';\n this.clearStatusMessaging();\n }}\n >Cancel</ia-mgc-button\n >\n <ia-mgc-button\n id=\"edit-plan-payment-method-submit\"\n class=\"primary\"\n type=\"submit\"\n .isDisabled=${!this.selectedPaymentProvider}\n .clickHandler=${async (event: Event, iaButton: MGCButton) => {\n console.log({ iaButton, event });\n\n const button = iaButton;\n button.isDisabled = true;\n // validate credit card\n // if not valid, show error and return\n const isContactFormValid =\n this.creditCardElement?.reportValidity();\n\n if (!isContactFormValid) {\n button.isDisabled = false;\n return;\n }\n\n const paymentMethodInfo =\n (await this.braintreeManagerElement?.validateCreditCardFields()) as unknown as any;\n\n if (!paymentMethodInfo) {\n button.isDisabled = false;\n return;\n }\n\n const newPaymentMethodRequest = new PaymentMethodRequest({\n paymentMethodInfo,\n donorContactInfo: this.contactFormElement?.donorContactInfo,\n paymentProvider: this\n .selectedPaymentProvider as PaymentProvider,\n });\n\n this.dispatchEvent(\n new CustomEvent('UpdatePaymentMethod', {\n detail: { newPaymentMethodRequest },\n }),\n );\n }}\n >Update payment method</ia-mgc-button\n >\n <ia-mgc-update-status .status=${this.updateStatus}\n >${this.updateMessage}</ia-mgc-update-status\n ></ia-mgc-form-section-info>\n <div class=\"secure-process-note\">\n ${lockImg} Your payment will be securely processed\n </div>\n </form>\n `\n : nothing}\n </donation-form-section>\n `;\n }\n\n get styles() {\n return css`\n payment-selector {\n display: block;\n margin-bottom: 5px;\n padding-bottom: 10px;\n }\n\n ia-mgc-braintree-manager {\n display: block;\n margin: 10px 0;\n }\n\n .secure-process-note {\n margin-top: 0.5em;\n font-size: 0.75em;\n }\n\n .secure-process-note svg {\n width: 1.2rem;\n height: 1.5rem;\n vertical-align: bottom;\n }\n\n .hidden {\n visibility: hidden;\n height: 1px;\n width: 1px;\n }\n `;\n }\n}\n"]}
@@ -18,6 +18,7 @@ export type APlanUpdate = {
18
18
  export declare class MonthlyGivingCircle extends LitElement {
19
19
  patronName: string;
20
20
  patronEmail: string;
21
+ canEditPaymentMethod: boolean;
21
22
  receipts: never[];
22
23
  updates: APlanUpdate[];
23
24
  plans: never[];
@@ -19,6 +19,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
19
19
  super(...arguments);
20
20
  this.patronName = '';
21
21
  this.patronEmail = '';
22
+ this.canEditPaymentMethod = false;
22
23
  this.receipts = [];
23
24
  this.updates = [];
24
25
  this.plans = [];
@@ -79,6 +80,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
79
80
  ${this.sectionTitle}
80
81
  ${isEditingPlan
81
82
  ? html `<ia-mgc-edit-plan
83
+ .canEditPaymentMethod=${this.canEditPaymentMethod}
82
84
  .patronEmail=${this.patronEmail}
83
85
  .plan=${this.editingThisPlan}
84
86
  @cancelPlan=${() => {
@@ -230,6 +232,9 @@ __decorate([
230
232
  __decorate([
231
233
  property({ type: String })
232
234
  ], MonthlyGivingCircle.prototype, "patronEmail", void 0);
235
+ __decorate([
236
+ property({ type: Boolean })
237
+ ], MonthlyGivingCircle.prototype, "canEditPaymentMethod", void 0);
233
238
  __decorate([
234
239
  property({ type: Array })
235
240
  ], MonthlyGivingCircle.prototype, "receipts", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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/mgc-button';\nimport type { MonthlyPlan } from './models/plan';\nimport './edit-plan-form';\nimport type { IauxEditPlanForm } from './edit-plan-form';\n\nexport type APlanUpdate = {\n plan?: MonthlyPlan;\n donationId?: string;\n status: 'success' | 'fail';\n action:\n | 'receiptSent'\n | 'cancel'\n | 'amountUpdate'\n | 'dateUpdate'\n | 'paymentMethodUpdate';\n message: string;\n};\n\nenum DisplayChangeEvents {\n welcome = 'ShowWelcome',\n receipts = 'ShowReceipts',\n plans = 'ShowPlans',\n editPlan = 'ShowEditForm',\n}\n\n@customElement('ia-monthly-giving-circle')\nexport class MonthlyGivingCircle extends LitElement {\n @property({ type: String }) patronName: string = '';\n\n @property({ type: String }) patronEmail: 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 @property({ type: Boolean, reflect: true }) canEdit = false;\n\n @property({ type: String, reflect: true }) braintreeAuthToken: string = '';\n\n @property({ type: String }) venmoProfileId: string = '';\n\n @property({ type: String }) googleMerchantId: string = '';\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 get editFormElement(): IauxEditPlanForm {\n return this.querySelector('ia-mgc-edit-plan') as IauxEditPlanForm;\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\n if (update.action === 'paymentMethodUpdate') {\n this.editFormElement.paymentMethodUpdates(update.status);\n return;\n }\n\n if (update.action === 'amountUpdate') {\n this.editFormElement.amountUpdates(update.status);\n return;\n }\n\n if (update.action === 'dateUpdate') {\n this.editingThisPlan = plan;\n this.editFormElement.dateUpdates(update.status);\n return;\n }\n\n if (update.action === 'cancel' || 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 .patronEmail=${this.patronEmail}\n .plan=${this.editingThisPlan}\n @cancelPlan=${() => {\n this.dispatchEvent(\n new CustomEvent('cancelPlan', {\n detail: { plan: this.editingThisPlan },\n }),\n );\n }}\n .updateAmountHandler=${(\n plan: MonthlyPlan,\n options: {\n amount: number;\n baseAmount: number;\n coverFees: boolean;\n feeCovered: number;\n },\n ) => {\n console.log('updateAmount', plan, { ...options });\n this.dispatchEvent(\n new CustomEvent('updateAmount', {\n detail: { plan, amountOptions: options },\n }),\n );\n }}\n @updateDate=${(event: CustomEvent) => {\n const { newDate } = event.detail;\n console.log('updateDate', newDate);\n this.dispatchEvent(\n new CustomEvent('updateDate', {\n detail: { plan: this.editingThisPlan, newDate },\n }),\n );\n }}\n @UpdatePaymentMethod=${(event: CustomEvent) => {\n const { newPaymentMethodRequest } = event.detail;\n console.log('UpdatePaymentMethod', newPaymentMethodRequest);\n console.warn('UPDATE PAYMENT METHOD', {\n plan: this.editingThisPlan,\n newPaymentMethodRequest,\n });\n this.dispatchEvent(\n new CustomEvent('UpdatePaymentMethod', {\n detail: {\n plan: this.editingThisPlan,\n newPaymentMethodRequest,\n },\n }),\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-mgc-button\n class=\"link slim\"\n .clickHandler=${async () => {\n this.viewToDisplay = 'receipts';\n await this.updateComplete;\n this.dispatchEvent(new Event(DisplayChangeEvents.receipts));\n }}\n >\n View recent donation history\n </ia-mgc-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-mgc-button\n class=\"primary\"\n id=\"close-receipts\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n const eventType = this.plans.length\n ? DisplayChangeEvents.plans\n : DisplayChangeEvents.welcome;\n this.dispatchEvent(new Event(eventType));\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-mgc-button>`;\n break;\n\n case 'editPlan':\n title = 'Monthly Giving Circle';\n titleStyle = 'default';\n cta = html`<ia-mgc-button\n class=\"primary\"\n id=\"close-edit-plan\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n const eventType = this.plans.length\n ? DisplayChangeEvents.plans\n : DisplayChangeEvents.welcome;\n this.dispatchEvent(new Event(eventType));\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-mgc-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(DisplayChangeEvents.editPlan));\n await this.updateComplete;\n }}\n .plans=${this.plans}\n .canEdit=${this.canEdit}\n ></ia-mgc-plans>\n `\n : html`<ia-mgc-welcome\n .patronName=${this.patronName}\n ></ia-mgc-welcome>`}\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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/mgc-button';\nimport type { MonthlyPlan } from './models/plan';\nimport './edit-plan-form';\nimport type { IauxEditPlanForm } from './edit-plan-form';\n\nexport type APlanUpdate = {\n plan?: MonthlyPlan;\n donationId?: string;\n status: 'success' | 'fail';\n action:\n | 'receiptSent'\n | 'cancel'\n | 'amountUpdate'\n | 'dateUpdate'\n | 'paymentMethodUpdate';\n message: string;\n};\n\nenum DisplayChangeEvents {\n welcome = 'ShowWelcome',\n receipts = 'ShowReceipts',\n plans = 'ShowPlans',\n editPlan = 'ShowEditForm',\n}\n\n@customElement('ia-monthly-giving-circle')\nexport class MonthlyGivingCircle extends LitElement {\n @property({ type: String }) patronName: string = '';\n\n @property({ type: String }) patronEmail: string = '';\n\n @property({ type: Boolean }) canEditPaymentMethod: boolean = false;\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 @property({ type: Boolean, reflect: true }) canEdit = false;\n\n @property({ type: String, reflect: true }) braintreeAuthToken: string = '';\n\n @property({ type: String }) venmoProfileId: string = '';\n\n @property({ type: String }) googleMerchantId: string = '';\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 get editFormElement(): IauxEditPlanForm {\n return this.querySelector('ia-mgc-edit-plan') as IauxEditPlanForm;\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\n if (update.action === 'paymentMethodUpdate') {\n this.editFormElement.paymentMethodUpdates(update.status);\n return;\n }\n\n if (update.action === 'amountUpdate') {\n this.editFormElement.amountUpdates(update.status);\n return;\n }\n\n if (update.action === 'dateUpdate') {\n this.editingThisPlan = plan;\n this.editFormElement.dateUpdates(update.status);\n return;\n }\n\n if (update.action === 'cancel' || 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 .canEditPaymentMethod=${this.canEditPaymentMethod}\n .patronEmail=${this.patronEmail}\n .plan=${this.editingThisPlan}\n @cancelPlan=${() => {\n this.dispatchEvent(\n new CustomEvent('cancelPlan', {\n detail: { plan: this.editingThisPlan },\n }),\n );\n }}\n .updateAmountHandler=${(\n plan: MonthlyPlan,\n options: {\n amount: number;\n baseAmount: number;\n coverFees: boolean;\n feeCovered: number;\n },\n ) => {\n console.log('updateAmount', plan, { ...options });\n this.dispatchEvent(\n new CustomEvent('updateAmount', {\n detail: { plan, amountOptions: options },\n }),\n );\n }}\n @updateDate=${(event: CustomEvent) => {\n const { newDate } = event.detail;\n console.log('updateDate', newDate);\n this.dispatchEvent(\n new CustomEvent('updateDate', {\n detail: { plan: this.editingThisPlan, newDate },\n }),\n );\n }}\n @UpdatePaymentMethod=${(event: CustomEvent) => {\n const { newPaymentMethodRequest } = event.detail;\n console.log('UpdatePaymentMethod', newPaymentMethodRequest);\n console.warn('UPDATE PAYMENT METHOD', {\n plan: this.editingThisPlan,\n newPaymentMethodRequest,\n });\n this.dispatchEvent(\n new CustomEvent('UpdatePaymentMethod', {\n detail: {\n plan: this.editingThisPlan,\n newPaymentMethodRequest,\n },\n }),\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-mgc-button\n class=\"link slim\"\n .clickHandler=${async () => {\n this.viewToDisplay = 'receipts';\n await this.updateComplete;\n this.dispatchEvent(new Event(DisplayChangeEvents.receipts));\n }}\n >\n View recent donation history\n </ia-mgc-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-mgc-button\n class=\"primary\"\n id=\"close-receipts\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n const eventType = this.plans.length\n ? DisplayChangeEvents.plans\n : DisplayChangeEvents.welcome;\n this.dispatchEvent(new Event(eventType));\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-mgc-button>`;\n break;\n\n case 'editPlan':\n title = 'Monthly Giving Circle';\n titleStyle = 'default';\n cta = html`<ia-mgc-button\n class=\"primary\"\n id=\"close-edit-plan\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n const eventType = this.plans.length\n ? DisplayChangeEvents.plans\n : DisplayChangeEvents.welcome;\n this.dispatchEvent(new Event(eventType));\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-mgc-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(DisplayChangeEvents.editPlan));\n await this.updateComplete;\n }}\n .plans=${this.plans}\n .canEdit=${this.canEdit}\n ></ia-mgc-plans>\n `\n : html`<ia-mgc-welcome\n .patronName=${this.patronName}\n ></ia-mgc-welcome>`}\n `;\n }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/donation-monthly-portal",
3
- "version": "7.1.1-payment-method-2",
3
+ "version": "7.1.1-payment-method-3",
4
4
  "description": "The Internet Archive Monthly Portal",
5
5
  "license": "AGPL-3.0-only",
6
6
  "main": "dist/index.js",
@@ -29,6 +29,8 @@ export class IauxEditPlanForm extends LitElement {
29
29
 
30
30
  @property({ type: String }) patronEmail: string = '';
31
31
 
32
+ @property({ type: Boolean }) canEditPaymentMethod: boolean = false;
33
+
32
34
  @property({ type: Object }) updateAmountHandler?: (
33
35
  plan: MonthlyPlan,
34
36
  amountUpdates: {
@@ -121,23 +123,27 @@ export class IauxEditPlanForm extends LitElement {
121
123
  }
122
124
  }}
123
125
  ></ia-mgc-edit-plan-amount>
124
- <hr />
125
- <ia-mgc-edit-payment-method
126
- .plan=${this.plan}
127
- .patronEmail=${this.patronEmail}
128
- .paymentConfig=${this.paymentConfig}
129
- @UpdatePaymentMethod=${(e: CustomEvent) => {
130
- const { newPaymentMethodRequest } = e.detail;
131
- if (this.plan) {
132
- this.dispatchEvent(
133
- new CustomEvent('UpdatePaymentMethod', {
134
- detail: { plan: this.plan, newPaymentMethodRequest },
135
- }),
136
- );
137
- }
138
- }}
139
- >
140
- </ia-mgc-edit-payment-method>
126
+ ${this.canEditPaymentMethod
127
+ ? html`
128
+ <hr />
129
+ <ia-mgc-edit-payment-method
130
+ .plan=${this.plan}
131
+ .patronEmail=${this.patronEmail}
132
+ .paymentConfig=${this.paymentConfig}
133
+ @UpdatePaymentMethod=${(e: CustomEvent) => {
134
+ const { newPaymentMethodRequest } = e.detail;
135
+ if (this.plan) {
136
+ this.dispatchEvent(
137
+ new CustomEvent('UpdatePaymentMethod', {
138
+ detail: { plan: this.plan, newPaymentMethodRequest },
139
+ }),
140
+ );
141
+ }
142
+ }}
143
+ >
144
+ </ia-mgc-edit-payment-method>
145
+ `
146
+ : ''}
141
147
  <hr />
142
148
  <ia-mgc-edit-date
143
149
  @updateDate=${(e: CustomEvent) => {
@@ -78,26 +78,6 @@ export class MGCEditPaymentMethod extends LitElement {
78
78
 
79
79
  @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';
80
80
 
81
- // @property({ type: Boolean }) creditCardSelected: boolean = false;
82
-
83
- // @property({ type: Boolean }) venmoSelected: boolean = false;
84
-
85
- // @property({ type: Boolean }) applePaySelected: boolean = false;
86
-
87
- // @property({ type: Boolean }) googlePaySelected: boolean = false;
88
-
89
- // @property({ type: Boolean }) paypalBlockerSelected: boolean = false;
90
-
91
- /*
92
- .paymentProviders=${this.braintreeManager?.paymentProviders}
93
- @firstUpdated=${this.paymentSelectorFirstUpdated}
94
- @creditCardSelected=${this.creditCardSelected}
95
- @venmoSelected=${this.venmoSelected}
96
- @applePaySelected=${this.applePaySelected}
97
- @googlePaySelected=${this.googlePaySelected}
98
- @paypalBlockerSelected=${this.paypalBlockerSelected}
99
- */
100
-
101
81
  createRenderRoot() {
102
82
  return this;
103
83
  }
@@ -37,6 +37,8 @@ export class MonthlyGivingCircle extends LitElement {
37
37
 
38
38
  @property({ type: String }) patronEmail: string = '';
39
39
 
40
+ @property({ type: Boolean }) canEditPaymentMethod: boolean = false;
41
+
40
42
  @property({ type: Array }) receipts = [];
41
43
 
42
44
  @property({ type: Array }) updates: APlanUpdate[] = [];
@@ -121,6 +123,7 @@ export class MonthlyGivingCircle extends LitElement {
121
123
  ${this.sectionTitle}
122
124
  ${isEditingPlan
123
125
  ? html`<ia-mgc-edit-plan
126
+ .canEditPaymentMethod=${this.canEditPaymentMethod}
124
127
  .patronEmail=${this.patronEmail}
125
128
  .plan=${this.editingThisPlan}
126
129
  @cancelPlan=${() => {