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

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import '@internetarchive/donation-form/dist/src/form-elements/badged-input';
-import { PaymentClientsInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';
+import type { PaymentConfig } from './form-sections/parts/braintree-manager';
 import type { MonthlyPlan } from './models/plan';
 import './form-sections/amount';
 import './form-sections/date';
@@ -9,22 +9,14 @@ import './form-sections/payment-method';
 export declare class IauxEditPlanForm extends LitElement {
     plan?: MonthlyPlan;
     patronEmail: string;
+    canEditPaymentMethod: boolean;
     updateAmountHandler?: (plan: MonthlyPlan, amountUpdates: {
         amount: number;
         baseAmount: number;
         coverFees: boolean;
         feeCovered: number;
     }) => void;
-    paymentConfig: {
-        referrer: string;
-        origin: string;
-        braintreeAuthToken: string;
-        venmoProfileId: string;
-        googlePayMerchantId: string;
-        environment: string;
-        paymentClients: PaymentClientsInterface | undefined;
-        endpointManager: object;
-    };
+    paymentConfig: PaymentConfig;
     braintreeNumberInput: HTMLDivElement;
     braintreeExpirationDateInput: HTMLDivElement;
     braintreeCVVInput: HTMLDivElement;

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

@@ -2,9 +2,7 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import '@internetarchive/donation-form/dist/src/form-elements/badged-input';
-import { LazyLoaderService } from '@internetarchive/lazy-loader-service';
-import { HostingEnvironment, } from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';
-import { PaymentClients, } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';
+import { HostingEnvironment } from '@internetarchive/donation-form';
 import './form-sections/amount';
 import './form-sections/date';
 import './form-sections/cancel';
@@ -13,26 +11,16 @@ let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
     constructor() {
         super(...arguments);
         this.patronEmail = '';
+        this.canEditPaymentMethod = false;
         this.paymentConfig = {
             referrer: '',
             origin: '',
-            braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',
-            venmoProfileId: '1953896702662410263',
+            braintreeAuthToken: '',
+            venmoProfileId: '',
             googlePayMerchantId: '',
-            environment: 'dev',
-            paymentClients: new PaymentClients(new LazyLoaderService(), HostingEnvironment.Development),
-            endpointManager: {
-                // eslint-disable-next-line arrow-body-style, @typescript-eslint/no-unused-vars
-                submitData: async (_request) => {
-                    // eslint-disable-next-line no-debugger
-                    debugger;
-                },
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                donationSuccessful: (_response) => {
-                    // eslint-disable-next-line no-debugger
-                    debugger;
-                },
-            },
+            environment: HostingEnvironment.Development,
+            paymentClients: undefined,
+            endpointManager: undefined,
         };
     }
     createRenderRoot() {
@@ -68,21 +56,25 @@ let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
             }
         }}
         ></ia-mgc-edit-plan-amount>
-        <hr />
-        <ia-mgc-edit-payment-method
-          .plan=${this.plan}
-          .patronEmail=${this.patronEmail}
-          .paymentConfig=${this.paymentConfig}
-          @UpdatePaymentMethod=${(e) => {
-            const { newPaymentMethodRequest } = e.detail;
-            if (this.plan) {
-                this.dispatchEvent(new CustomEvent('UpdatePaymentMethod', {
-                    detail: { plan: this.plan, newPaymentMethodRequest },
-                }));
-            }
-        }}
-        >
-        </ia-mgc-edit-payment-method>
+        ${this.canEditPaymentMethod
+            ? html `
+              <hr />
+              <ia-mgc-edit-payment-method
+                .plan=${this.plan}
+                .patronEmail=${this.patronEmail}
+                .paymentConfig=${this.paymentConfig}
+                @UpdatePaymentMethod=${(e) => {
+                const { newPaymentMethodRequest } = e.detail;
+                if (this.plan) {
+                    this.dispatchEvent(new CustomEvent('UpdatePaymentMethod', {
+                        detail: { plan: this.plan, newPaymentMethodRequest },
+                    }));
+                }
+            }}
+              >
+              </ia-mgc-edit-payment-method>
+            `
+            : ''}
         <hr />
         <ia-mgc-edit-date
           @updateDate=${(e) => {
@@ -120,6 +112,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], IauxEditPlanForm.prototype, "patronEmail", void 0);
+__decorate([
+    property({ type: Boolean })
+], IauxEditPlanForm.prototype, "canEditPaymentMethod", void 0);
 __decorate([
     property({ type: Object })
 ], IauxEditPlanForm.prototype, "updateAmountHandler", void 0);

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

@@ -1 +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: 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"]}
+{"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 { HostingEnvironment } from '@internetarchive/donation-form';\nimport type { PaymentConfig } from './form-sections/parts/braintree-manager';\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: PaymentConfig = {\n    referrer: '',\n    origin: '',\n    braintreeAuthToken: '',\n    venmoProfileId: '',\n    googlePayMerchantId: '',\n    environment: HostingEnvironment.Development,\n    paymentClients: undefined,\n    endpointManager: undefined,\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"]}

package/dist/src/form-sections/parts/braintree-manager.d.ts

@@ -3,13 +3,15 @@ import { BraintreeManagerInterface, HostingEnvironment } from '@internetarchive/
 import type { BraintreeEndpointManagerInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';
 import type { PaymentClientsInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';
 import type { MonthlyPlan } from '../../models/plan';
-type PaymentConfig = {
+export type PaymentConfig = {
     braintreeAuthToken?: string;
     endpointManager?: BraintreeEndpointManagerInterface;
     paymentClients?: PaymentClientsInterface;
     environment?: HostingEnvironment;
     venmoProfileId?: string;
     googlePayMerchantId?: string;
+    referrer: string;
+    origin: string;
 };
 export declare class MGCBraintreeManager extends LitElement {
     plan?: MonthlyPlan;
@@ -37,4 +39,3 @@ export declare class MGCBraintreeManager extends LitElement {
     get contactForm(): HTMLFormElement | null;
     setupPaymentHandlers(): Promise<void>;
 }
-export {};

package/dist/src/form-sections/parts/braintree-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"braintree-manager.js","sourceRoot":"","sources":["../../../../src/form-sections/parts/braintree-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, PropertyValueMap } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport {\n  HostedFieldContainer,\n  HostedFieldName,\n} from '@internetarchive/donation-form/dist/src/braintree-manager/payment-providers/credit-card/hosted-field-container';\nimport {\n  BraintreeManager,\n  BraintreeManagerInterface,\n  HostingEnvironment,\n} from '@internetarchive/donation-form';\nimport type { BraintreeEndpointManagerInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';\nimport type { PaymentClientsInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';\n\nimport creditCardImg from '@internetarchive/icon-credit-card/index.js';\nimport calendarImg from '@internetarchive/icon-calendar/index.js';\nimport lockImg from '@internetarchive/icon-lock/index.js';\n\nimport type { MonthlyPlan } from '../../models/plan';\n\ntype PaymentConfig = {\n  braintreeAuthToken?: string;\n  endpointManager?: BraintreeEndpointManagerInterface;\n  paymentClients?: PaymentClientsInterface;\n  environment?: HostingEnvironment;\n  venmoProfileId?: string;\n  googlePayMerchantId?: string;\n};\n\n@customElement('ia-mgc-braintree-manager')\nexport class MGCBraintreeManager extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Boolean, reflect: true }) displayCreditCard: boolean =\n    false;\n\n  @property({ type: String }) patronEmail: string = '';\n\n  @property({ type: Object }) paymentConfig?: PaymentConfig;\n\n  @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n  @state() private elementConnected: boolean = false;\n\n  get braintreeInputs(): {\n    errorMessage: HTMLDivElement | null;\n    number: HTMLDivElement | null;\n    cvv: HTMLDivElement | null;\n    expirationDate: HTMLDivElement | null;\n  } {\n    return {\n      errorMessage: this.querySelector(\n        '#braintree-error-message',\n      ) as HTMLDivElement | null,\n      number: this.querySelector(\n        '#braintree-creditcard',\n      ) as HTMLDivElement | null,\n      cvv: this.querySelector('#braintree-cvv') as HTMLDivElement | null,\n      expirationDate: this.querySelector(\n        '#braintree-expiration',\n      ) as HTMLDivElement | null,\n    };\n  }\n\n  createRenderRoot() {\n    return this;\n  }\n\n  disconnectedCallback(): void {\n    this.elementConnected = false;\n  }\n\n  connectedCallback(): void {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n\n    console.log('connectedCallback', { paymentConfig: this.paymentConfig });\n\n    this.elementConnected = true;\n  }\n\n  protected updated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    const elementHasConnectedToDOM =\n      changed.has('elementConnected') && this.elementConnected;\n    if (elementHasConnectedToDOM) {\n      if (this.paymentConfig) {\n        const {\n          braintreeAuthToken,\n          endpointManager,\n          paymentClients,\n          environment,\n        } = this.paymentConfig || {};\n\n        const needsBraintreeManager =\n          !this.braintreeManager &&\n          braintreeAuthToken &&\n          endpointManager &&\n          paymentClients &&\n          environment;\n        if (needsBraintreeManager) {\n          this.setupBraintreeManager();\n        }\n      }\n    }\n\n    if (\n      this.braintreeManager &&\n      changed.has('displayCreditCard') &&\n      this.displayCreditCard\n    ) {\n      this.setupCreditCardHandler();\n    }\n  }\n\n  async validateCreditCardFields() {\n    const handler =\n      await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n    let tokenized = false;\n    let hostedFieldsResponse = null;\n    try {\n      hostedFieldsResponse = await handler?.tokenizeHostedFields();\n      tokenized = true;\n    } catch (e) {\n      const error = e as unknown as any;\n\n      handler?.showErrorMessage();\n\n      // todo: move these codes to an enum/type\n      switch (error.code) {\n        case 'HOSTED_FIELDS_FIELDS_EMPTY':\n          // occurs when none of the fields are filled in\n          handler?.markFieldErrors([\n            HostedFieldName.Number,\n            HostedFieldName.CVV,\n            HostedFieldName.ExpirationDate,\n          ]);\n          break;\n        case 'HOSTED_FIELDS_FIELDS_INVALID':\n          // occurs when certain fields do not pass client side validationto\n          // Object.keys(.details.invalidFields).forEach(key => {\n          //   handler?.markFieldErrors([key as HostedFieldName]);\n          // });\n          break;\n        case 'HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE':\n          // occurs when:\n          //   * the client token used for client authorization was generated\n          //     with a customer ID and the fail on duplicate payment method\n          //     option is set to true\n          //   * the card being tokenized has previously been vaulted (with any customer)\n          break;\n        case 'HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED':\n          // occurs when:\n          //   * the client token used for client authorization was generated\n          //     with a customer ID and the verify card option is set to true\n          //     and you have credit card verification turned on in the Braintree\n          //     control panel\n          //   * the cvv does not pass verfication\n          handler?.markFieldErrors([HostedFieldName.CVV]);\n          break;\n        case 'HOSTED_FIELDS_FAILED_TOKENIZATION':\n          // occurs for any other tokenization error on the server\n          break;\n        case 'HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR':\n          // occurs when the Braintree gateway cannot be contacted\n          break;\n        default:\n          // something else happened\n          break;\n      }\n    }\n\n    if (!tokenized) {\n      return false;\n    }\n\n    return hostedFieldsResponse;\n  }\n\n  async setupCreditCardHandler() {\n    // braintree turn on hosted fields\n    const handler =\n      await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n    try {\n      await handler?.tokenizeHostedFields();\n    } catch (e) {\n      // todo: show error message only about fields not loading\n    }\n\n    handler?.removeFieldErrors([\n      HostedFieldName.Number,\n      HostedFieldName.CVV,\n      HostedFieldName.ExpirationDate,\n    ]);\n  }\n\n  render() {\n    return html` <div>${this.creditCardTemplate}</div> `;\n  }\n\n  lightDomCSS(): CSSResult {\n    return css`\n      contact-form form badged-input {\n        width: 100%;\n      }\n\n      #ia-mgc-cc-area .braintree-input {\n        width: 100%;\n        display: block;\n        height: stretch;\n        height: -webkit-fill-available;\n      }\n    `;\n  }\n\n  get creditCardTemplate() {\n    return html`\n      <div id=\"ia-mgc-cc-area\" style=\"border: 1px sold red;\">\n        <style>\n          ${this.lightDomCSS()}\n        </style>\n        <div id=\"braintree-error-message\"></div>\n        <div class=\"braintree-row\">\n          <badged-input\n            .icon=${creditCardImg}\n            ?required=${true}\n            class=\"creditcard\"\n          >\n            <div class=\"braintree-input\" id=\"braintree-creditcard\"></div>\n          </badged-input>\n        </div>\n        <div class=\"braintree-row\">\n          <badged-input\n            .icon=${calendarImg}\n            ?required=${true}\n            class=\"expiration\"\n          >\n            <div class=\"braintree-input\" id=\"braintree-expiration\"></div>\n          </badged-input>\n          <badged-input .icon=${lockImg} ?required=${true} class=\"cvv\">\n            <div class=\"braintree-input\" id=\"braintree-cvv\"></div>\n          </badged-input>\n        </div>\n      </div>\n    `;\n  }\n\n  private async setupBraintreeManager(): Promise<void> {\n    this.braintreeManager = new BraintreeManager({\n      paymentClients:\n        this.paymentConfig?.paymentClients ?? ({} as PaymentClientsInterface),\n      endpointManager: this.paymentConfig\n        ?.endpointManager as BraintreeEndpointManagerInterface,\n      authorizationToken: this.paymentConfig?.braintreeAuthToken ?? '',\n      venmoProfileId: this.paymentConfig?.venmoProfileId,\n      googlePayMerchantId: this.paymentConfig?.googlePayMerchantId,\n      hostedFieldConfig: {\n        hostedFieldStyle: {}, // Provide your custom style object here\n        hostedFieldFieldOptions: {\n          number: {\n            selector: '#braintree-creditcard',\n            placeholder: 'Card number',\n          },\n          cvv: {\n            selector: '#braintree-cvv',\n            placeholder: 'CVC',\n          },\n          expirationDate: {\n            selector: '#braintree-expiration',\n            placeholder: 'MM / YY',\n          },\n        }, // Provide your custom field options here\n        hostedFieldContainer: new HostedFieldContainer({\n          number: this.braintreeInputs.number as HTMLDivElement,\n          cvv: this.braintreeInputs.cvv as HTMLDivElement,\n          expirationDate: this.braintreeInputs.expirationDate as HTMLDivElement,\n          errorContainer: this.braintreeInputs.errorMessage as HTMLDivElement,\n        }),\n      },\n      hostingEnvironment: this.paymentConfig?.environment as HostingEnvironment,\n      referrer: window.location.href,\n      loggedInUser: this.patronEmail,\n      origin: window.location.origin,\n    });\n\n    this.braintreeManager.on(\n      'paymentProvidersHostedFieldsRetry',\n      (retryNumber: number) => {\n        const event = new CustomEvent('paymentProvidersHostedFieldsRetry', {\n          detail: { retryNumber },\n        });\n        this.dispatchEvent(event);\n      },\n    );\n\n    this.braintreeManager.on(\n      'paymentProvidersHostedFieldsFailed',\n      (error: unknown) => {\n        const event = new CustomEvent('paymentProvidersHostedFieldsFailed', {\n          detail: { error },\n        });\n        this.dispatchEvent(event);\n      },\n    );\n\n    this.dispatchEvent(new Event('BraintreeManagerSetupComplete'));\n  }\n\n  get contactForm(): HTMLFormElement | null {\n    return this.querySelector('form[name=\"contact-form\"]');\n  }\n\n  async setupPaymentHandlers() {\n    // const creditCardFlowHandler = this.paymentConfig?.paymentFlowHandlers?.creditCardHandler;\n    const creditCardHandler =\n      await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n    creditCardHandler?.hideErrorMessage();\n    // const valid = this.contactForm?.reportValidity();\n    // const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();\n    // console.log(\"CC hostedFieldsResponse\", hostedFieldsResponse);\n  }\n}\n"]}
+{"version":3,"file":"braintree-manager.js","sourceRoot":"","sources":["../../../../src/form-sections/parts/braintree-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, PropertyValueMap } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport {\n  HostedFieldContainer,\n  HostedFieldName,\n} from '@internetarchive/donation-form/dist/src/braintree-manager/payment-providers/credit-card/hosted-field-container';\nimport {\n  BraintreeManager,\n  BraintreeManagerInterface,\n  HostingEnvironment,\n} from '@internetarchive/donation-form';\nimport type { BraintreeEndpointManagerInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';\nimport type { PaymentClientsInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';\n\nimport creditCardImg from '@internetarchive/icon-credit-card/index.js';\nimport calendarImg from '@internetarchive/icon-calendar/index.js';\nimport lockImg from '@internetarchive/icon-lock/index.js';\n\nimport type { MonthlyPlan } from '../../models/plan';\n\nexport type PaymentConfig = {\n  braintreeAuthToken?: string;\n  endpointManager?: BraintreeEndpointManagerInterface;\n  paymentClients?: PaymentClientsInterface;\n  environment?: HostingEnvironment;\n  venmoProfileId?: string;\n  googlePayMerchantId?: string;\n  referrer: string;\n  origin: string;\n};\n\n@customElement('ia-mgc-braintree-manager')\nexport class MGCBraintreeManager extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Boolean, reflect: true }) displayCreditCard: boolean =\n    false;\n\n  @property({ type: String }) patronEmail: string = '';\n\n  @property({ type: Object }) paymentConfig?: PaymentConfig;\n\n  @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n  @state() private elementConnected: boolean = false;\n\n  get braintreeInputs(): {\n    errorMessage: HTMLDivElement | null;\n    number: HTMLDivElement | null;\n    cvv: HTMLDivElement | null;\n    expirationDate: HTMLDivElement | null;\n  } {\n    return {\n      errorMessage: this.querySelector(\n        '#braintree-error-message',\n      ) as HTMLDivElement | null,\n      number: this.querySelector(\n        '#braintree-creditcard',\n      ) as HTMLDivElement | null,\n      cvv: this.querySelector('#braintree-cvv') as HTMLDivElement | null,\n      expirationDate: this.querySelector(\n        '#braintree-expiration',\n      ) as HTMLDivElement | null,\n    };\n  }\n\n  createRenderRoot() {\n    return this;\n  }\n\n  disconnectedCallback(): void {\n    this.elementConnected = false;\n  }\n\n  connectedCallback(): void {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n\n    console.log('connectedCallback', { paymentConfig: this.paymentConfig });\n\n    this.elementConnected = true;\n  }\n\n  protected updated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    const elementHasConnectedToDOM =\n      changed.has('elementConnected') && this.elementConnected;\n    if (elementHasConnectedToDOM) {\n      if (this.paymentConfig) {\n        const {\n          braintreeAuthToken,\n          endpointManager,\n          paymentClients,\n          environment,\n        } = this.paymentConfig || {};\n\n        const needsBraintreeManager =\n          !this.braintreeManager &&\n          braintreeAuthToken &&\n          endpointManager &&\n          paymentClients &&\n          environment;\n        if (needsBraintreeManager) {\n          this.setupBraintreeManager();\n        }\n      }\n    }\n\n    if (\n      this.braintreeManager &&\n      changed.has('displayCreditCard') &&\n      this.displayCreditCard\n    ) {\n      this.setupCreditCardHandler();\n    }\n  }\n\n  async validateCreditCardFields() {\n    const handler =\n      await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n    let tokenized = false;\n    let hostedFieldsResponse = null;\n    try {\n      hostedFieldsResponse = await handler?.tokenizeHostedFields();\n      tokenized = true;\n    } catch (e) {\n      const error = e as unknown as any;\n\n      handler?.showErrorMessage();\n\n      // todo: move these codes to an enum/type\n      switch (error.code) {\n        case 'HOSTED_FIELDS_FIELDS_EMPTY':\n          // occurs when none of the fields are filled in\n          handler?.markFieldErrors([\n            HostedFieldName.Number,\n            HostedFieldName.CVV,\n            HostedFieldName.ExpirationDate,\n          ]);\n          break;\n        case 'HOSTED_FIELDS_FIELDS_INVALID':\n          // occurs when certain fields do not pass client side validationto\n          // Object.keys(.details.invalidFields).forEach(key => {\n          //   handler?.markFieldErrors([key as HostedFieldName]);\n          // });\n          break;\n        case 'HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE':\n          // occurs when:\n          //   * the client token used for client authorization was generated\n          //     with a customer ID and the fail on duplicate payment method\n          //     option is set to true\n          //   * the card being tokenized has previously been vaulted (with any customer)\n          break;\n        case 'HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED':\n          // occurs when:\n          //   * the client token used for client authorization was generated\n          //     with a customer ID and the verify card option is set to true\n          //     and you have credit card verification turned on in the Braintree\n          //     control panel\n          //   * the cvv does not pass verfication\n          handler?.markFieldErrors([HostedFieldName.CVV]);\n          break;\n        case 'HOSTED_FIELDS_FAILED_TOKENIZATION':\n          // occurs for any other tokenization error on the server\n          break;\n        case 'HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR':\n          // occurs when the Braintree gateway cannot be contacted\n          break;\n        default:\n          // something else happened\n          break;\n      }\n    }\n\n    if (!tokenized) {\n      return false;\n    }\n\n    return hostedFieldsResponse;\n  }\n\n  async setupCreditCardHandler() {\n    // braintree turn on hosted fields\n    const handler =\n      await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n    try {\n      await handler?.tokenizeHostedFields();\n    } catch (e) {\n      // todo: show error message only about fields not loading\n    }\n\n    handler?.removeFieldErrors([\n      HostedFieldName.Number,\n      HostedFieldName.CVV,\n      HostedFieldName.ExpirationDate,\n    ]);\n  }\n\n  render() {\n    return html` <div>${this.creditCardTemplate}</div> `;\n  }\n\n  lightDomCSS(): CSSResult {\n    return css`\n      contact-form form badged-input {\n        width: 100%;\n      }\n\n      #ia-mgc-cc-area .braintree-input {\n        width: 100%;\n        display: block;\n        height: stretch;\n        height: -webkit-fill-available;\n      }\n    `;\n  }\n\n  get creditCardTemplate() {\n    return html`\n      <div id=\"ia-mgc-cc-area\" style=\"border: 1px sold red;\">\n        <style>\n          ${this.lightDomCSS()}\n        </style>\n        <div id=\"braintree-error-message\"></div>\n        <div class=\"braintree-row\">\n          <badged-input\n            .icon=${creditCardImg}\n            ?required=${true}\n            class=\"creditcard\"\n          >\n            <div class=\"braintree-input\" id=\"braintree-creditcard\"></div>\n          </badged-input>\n        </div>\n        <div class=\"braintree-row\">\n          <badged-input\n            .icon=${calendarImg}\n            ?required=${true}\n            class=\"expiration\"\n          >\n            <div class=\"braintree-input\" id=\"braintree-expiration\"></div>\n          </badged-input>\n          <badged-input .icon=${lockImg} ?required=${true} class=\"cvv\">\n            <div class=\"braintree-input\" id=\"braintree-cvv\"></div>\n          </badged-input>\n        </div>\n      </div>\n    `;\n  }\n\n  private async setupBraintreeManager(): Promise<void> {\n    this.braintreeManager = new BraintreeManager({\n      paymentClients:\n        this.paymentConfig?.paymentClients ?? ({} as PaymentClientsInterface),\n      endpointManager: this.paymentConfig\n        ?.endpointManager as BraintreeEndpointManagerInterface,\n      authorizationToken: this.paymentConfig?.braintreeAuthToken ?? '',\n      venmoProfileId: this.paymentConfig?.venmoProfileId,\n      googlePayMerchantId: this.paymentConfig?.googlePayMerchantId,\n      hostedFieldConfig: {\n        hostedFieldStyle: {}, // Provide your custom style object here\n        hostedFieldFieldOptions: {\n          number: {\n            selector: '#braintree-creditcard',\n            placeholder: 'Card number',\n          },\n          cvv: {\n            selector: '#braintree-cvv',\n            placeholder: 'CVC',\n          },\n          expirationDate: {\n            selector: '#braintree-expiration',\n            placeholder: 'MM / YY',\n          },\n        }, // Provide your custom field options here\n        hostedFieldContainer: new HostedFieldContainer({\n          number: this.braintreeInputs.number as HTMLDivElement,\n          cvv: this.braintreeInputs.cvv as HTMLDivElement,\n          expirationDate: this.braintreeInputs.expirationDate as HTMLDivElement,\n          errorContainer: this.braintreeInputs.errorMessage as HTMLDivElement,\n        }),\n      },\n      hostingEnvironment: this.paymentConfig?.environment as HostingEnvironment,\n      referrer: window.location.href,\n      loggedInUser: this.patronEmail,\n      origin: window.location.origin,\n    });\n\n    this.braintreeManager.on(\n      'paymentProvidersHostedFieldsRetry',\n      (retryNumber: number) => {\n        const event = new CustomEvent('paymentProvidersHostedFieldsRetry', {\n          detail: { retryNumber },\n        });\n        this.dispatchEvent(event);\n      },\n    );\n\n    this.braintreeManager.on(\n      'paymentProvidersHostedFieldsFailed',\n      (error: unknown) => {\n        const event = new CustomEvent('paymentProvidersHostedFieldsFailed', {\n          detail: { error },\n        });\n        this.dispatchEvent(event);\n      },\n    );\n\n    this.dispatchEvent(new Event('BraintreeManagerSetupComplete'));\n  }\n\n  get contactForm(): HTMLFormElement | null {\n    return this.querySelector('form[name=\"contact-form\"]');\n  }\n\n  async setupPaymentHandlers() {\n    // const creditCardFlowHandler = this.paymentConfig?.paymentFlowHandlers?.creditCardHandler;\n    const creditCardHandler =\n      await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n    creditCardHandler?.hideErrorMessage();\n    // const valid = this.contactForm?.reportValidity();\n    // const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();\n    // console.log(\"CC hostedFieldsResponse\", hostedFieldsResponse);\n  }\n}\n"]}

package/dist/src/form-sections/payment-method.d.ts

@@ -3,7 +3,7 @@ import '@internetarchive/donation-form-section';
 import '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';
 import '@internetarchive/donation-form/dist/src/form-elements/payment-selector.js';
 import '../form-sections/parts/braintree-manager';
-import type { BraintreeManagerInterface, PaymentClientsInterface } from '@internetarchive/donation-form';
+import type { BraintreeManagerInterface, PaymentClientsInterface, BraintreeEndpointManagerInterface, HostingEnvironment } from '@internetarchive/donation-form';
 import type { ContactForm } from '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';
 import type { MonthlyPlan } from '../models/plan';
 import '../presentational/donation-section-info';
@@ -24,15 +24,13 @@ import type { MGCBraintreeManager } from '../form-sections/parts/braintree-manag
 export declare class MGCEditPaymentMethod extends LitElement {
     plan?: MonthlyPlan;
     paymentConfig: {
-        referrer: string;
-        origin: string;
-        braintreeAuthToken: string;
-        venmoProfileId: string;
-        googlePayMerchantId: string;
-        environment: string;
-        paymentClients: PaymentClientsInterface | undefined;
-        endpointManager: object;
-    };
+        braintreeAuthToken?: string;
+        endpointManager?: BraintreeEndpointManagerInterface;
+        paymentClients?: PaymentClientsInterface;
+        environment?: HostingEnvironment.Development | HostingEnvironment.Production;
+        venmoProfileId?: string;
+        googlePayMerchantId?: string;
+    } | undefined;
     patronEmail: string;
     currentlyEditing?: boolean;
     newPaymentMethod: string;

package/dist/src/form-sections/payment-method.js

@@ -26,14 +26,12 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
     constructor() {
         super(...arguments);
         this.paymentConfig = {
-            referrer: '',
-            origin: '',
-            braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',
-            venmoProfileId: '1953896702662410263',
-            googlePayMerchantId: '',
-            environment: 'dev',
+            braintreeAuthToken: '',
+            endpointManager: undefined,
             paymentClients: undefined,
-            endpointManager: {},
+            environment: 'Development',
+            venmoProfileId: '',
+            googlePayMerchantId: '',
         };
         this.patronEmail = '';
         this.currentlyEditing = false;
@@ -43,20 +41,6 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
         this.updateMessage = '';
         this.updateStatus = '';
     }
-    // @property({ type: Boolean }) creditCardSelected: boolean = false;
-    // @property({ type: Boolean }) venmoSelected: boolean = false;
-    // @property({ type: Boolean }) applePaySelected: boolean = false;
-    // @property({ type: Boolean }) googlePaySelected: boolean = false;
-    // @property({ type: Boolean }) paypalBlockerSelected: boolean = false;
-    /*
-      .paymentProviders=${this.braintreeManager?.paymentProviders}
-      @firstUpdated=${this.paymentSelectorFirstUpdated}
-      @creditCardSelected=${this.creditCardSelected}
-      @venmoSelected=${this.venmoSelected}
-      @applePaySelected=${this.applePaySelected}
-      @googlePaySelected=${this.googlePaySelected}
-      @paypalBlockerSelected=${this.paypalBlockerSelected}
-    */
     createRenderRoot() {
         return this;
     }

package/dist/src/form-sections/payment-method.js.map

@@ -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"]}
+{"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  BraintreeEndpointManagerInterface,\n  HostingEnvironment,\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    | {\n        braintreeAuthToken?: string;\n        endpointManager?: BraintreeEndpointManagerInterface;\n        paymentClients?: PaymentClientsInterface;\n        environment?:\n          | HostingEnvironment.Development\n          | HostingEnvironment.Production;\n        venmoProfileId?: string;\n        googlePayMerchantId?: string;\n      }\n    | undefined = {\n    braintreeAuthToken: '',\n    endpointManager: undefined,\n    paymentClients: undefined,\n    environment: 'Development' as HostingEnvironment.Development,\n    venmoProfileId: '',\n    googlePayMerchantId: '',\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"]}

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

@@ -3,6 +3,7 @@ import './welcome-message';
 import './plans';
 import './presentational/mgc-title';
 import './receipts';
+import { HostingEnvironment, PaymentClientsInterface } from '@internetarchive/donation-form';
 import type { IauxMgcReceipts } from './receipts';
 import './presentational/mgc-button';
 import type { MonthlyPlan } from './models/plan';
@@ -18,15 +19,23 @@ export type APlanUpdate = {
 export declare class MonthlyGivingCircle extends LitElement {
     patronName: string;
     patronEmail: string;
+    canEditPaymentMethod: boolean;
     receipts: never[];
     updates: APlanUpdate[];
     plans: never[];
     editingThisPlan?: MonthlyPlan;
     viewToDisplay: 'welcome' | 'receipts' | 'plans' | 'editPlan';
     canEdit: boolean;
-    braintreeAuthToken: string;
-    venmoProfileId: string;
-    googleMerchantId: string;
+    paymentConfig: {
+        referrer: string;
+        origin: string;
+        braintreeAuthToken: string;
+        venmoProfileId: string;
+        googlePayMerchantId: string;
+        paymentClients: PaymentClientsInterface | undefined;
+        environment: HostingEnvironment;
+        endpointManager: object;
+    };
     protected createRenderRoot(): this;
     updated(changed: PropertyValues): void;
     get receiptListElement(): IauxMgcReceipts;

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

@@ -5,6 +5,7 @@ import './welcome-message';
 import './plans';
 import './presentational/mgc-title';
 import './receipts';
+import { HostingEnvironment, } from '@internetarchive/donation-form';
 import './presentational/mgc-button';
 import './edit-plan-form';
 var DisplayChangeEvents;
@@ -19,14 +20,22 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
         super(...arguments);
         this.patronName = '';
         this.patronEmail = '';
+        this.canEditPaymentMethod = false;
         this.receipts = [];
         this.updates = [];
         this.plans = [];
         this.viewToDisplay = 'welcome';
         this.canEdit = false;
-        this.braintreeAuthToken = '';
-        this.venmoProfileId = '';
-        this.googleMerchantId = '';
+        this.paymentConfig = {
+            referrer: '',
+            origin: '',
+            braintreeAuthToken: '',
+            venmoProfileId: '',
+            googlePayMerchantId: '',
+            environment: HostingEnvironment.Development,
+            paymentClients: undefined,
+            endpointManager: {},
+        };
     }
     createRenderRoot() {
         return this;
@@ -79,8 +88,10 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
       ${this.sectionTitle}
       ${isEditingPlan
             ? html `<ia-mgc-edit-plan
+            .canEditPaymentMethod=${this.canEditPaymentMethod}
             .patronEmail=${this.patronEmail}
             .plan=${this.editingThisPlan}
+            .paymentConfig=${this.paymentConfig}
             @cancelPlan=${() => {
                 this.dispatchEvent(new CustomEvent('cancelPlan', {
                     detail: { plan: this.editingThisPlan },
@@ -230,6 +241,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], MonthlyGivingCircle.prototype, "patronEmail", void 0);
+__decorate([
+    property({ type: Boolean })
+], MonthlyGivingCircle.prototype, "canEditPaymentMethod", void 0);
 __decorate([
     property({ type: Array })
 ], MonthlyGivingCircle.prototype, "receipts", void 0);
@@ -249,14 +263,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], MonthlyGivingCircle.prototype, "canEdit", void 0);
 __decorate([
-    property({ type: String, reflect: true })
-], MonthlyGivingCircle.prototype, "braintreeAuthToken", void 0);
-__decorate([
-    property({ type: String })
-], MonthlyGivingCircle.prototype, "venmoProfileId", void 0);
-__decorate([
-    property({ type: String })
-], MonthlyGivingCircle.prototype, "googleMerchantId", void 0);
+    property({ type: Object })
+], MonthlyGivingCircle.prototype, "paymentConfig", void 0);
 MonthlyGivingCircle = __decorate([
     customElement('ia-monthly-giving-circle')
 ], MonthlyGivingCircle);

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":["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"]}
+{"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 {\n  HostingEnvironment,\n  PaymentClientsInterface,\n} from '@internetarchive/donation-form';\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: Object }) paymentConfig: {\n    referrer: string;\n    origin: string;\n    braintreeAuthToken: string;\n    venmoProfileId: string;\n    googlePayMerchantId: string;\n    paymentClients: PaymentClientsInterface | undefined;\n    environment: HostingEnvironment;\n    endpointManager: object;\n  } = {\n    referrer: '',\n    origin: '',\n    braintreeAuthToken: '',\n    venmoProfileId: '',\n    googlePayMerchantId: '',\n    environment: HostingEnvironment.Development,\n    paymentClients: undefined,\n    endpointManager: {},\n  };\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            .paymentConfig=${this.paymentConfig}\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

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-monthly-portal",
-  "version": "7.1.1-payment-method-2",
+  "version": "7.1.1-payment-method-5",
   "description": "The Internet Archive Monthly Portal",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",

package/src/edit-plan-form.ts

@@ -3,17 +3,8 @@ import { customElement, property, query } from 'lit/decorators.js';
 
 import '@internetarchive/donation-form/dist/src/form-elements/badged-input';
 
-import { LazyLoaderService } from '@internetarchive/lazy-loader-service';
-import {
-  BraintreeEndpointManagerInterface,
-  HostingEnvironment,
-} from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';
-import {
-  PaymentClients,
-  PaymentClientsInterface,
-} from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';
-import type { DonationRequest } from '@internetarchive/donation-form-data-models';
-
+import { HostingEnvironment } from '@internetarchive/donation-form';
+import type { PaymentConfig } from './form-sections/parts/braintree-manager';
 import type { MonthlyPlan } from './models/plan';
 import './form-sections/amount';
 import './form-sections/date';
@@ -29,6 +20,8 @@ export class IauxEditPlanForm extends LitElement {
 
   @property({ type: String }) patronEmail: string = '';
 
+  @property({ type: Boolean }) canEditPaymentMethod: boolean = false;
+
   @property({ type: Object }) updateAmountHandler?: (
     plan: MonthlyPlan,
     amountUpdates: {
@@ -39,38 +32,15 @@ export class IauxEditPlanForm extends LitElement {
     },
   ) => void;
 
-  @property({ type: Object }) paymentConfig: {
-    referrer: string;
-    origin: string;
-    braintreeAuthToken: string;
-    venmoProfileId: string;
-    googlePayMerchantId: string;
-    environment: string;
-    paymentClients: PaymentClientsInterface | undefined;
-    endpointManager: object;
-  } = {
+  @property({ type: Object }) paymentConfig: PaymentConfig = {
     referrer: '',
     origin: '',
-    braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',
-    venmoProfileId: '1953896702662410263',
+    braintreeAuthToken: '',
+    venmoProfileId: '',
     googlePayMerchantId: '',
-    environment: 'dev',
-    paymentClients: new PaymentClients(
-      new LazyLoaderService(),
-      HostingEnvironment.Development,
-    ),
-    endpointManager: {
-      // eslint-disable-next-line arrow-body-style, @typescript-eslint/no-unused-vars
-      submitData: async (_request: DonationRequest) => {
-        // eslint-disable-next-line no-debugger
-        debugger;
-      },
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      donationSuccessful: (_response: any) => {
-        // eslint-disable-next-line no-debugger
-        debugger;
-      },
-    } as unknown as BraintreeEndpointManagerInterface,
+    environment: HostingEnvironment.Development,
+    paymentClients: undefined,
+    endpointManager: undefined,
   };
 
   @query('#braintree-creditcard') braintreeNumberInput!: HTMLDivElement;
@@ -121,23 +91,27 @@ export class IauxEditPlanForm extends LitElement {
             }
           }}
         ></ia-mgc-edit-plan-amount>
-        <hr />
-        <ia-mgc-edit-payment-method
-          .plan=${this.plan}
-          .patronEmail=${this.patronEmail}
-          .paymentConfig=${this.paymentConfig}
-          @UpdatePaymentMethod=${(e: CustomEvent) => {
-            const { newPaymentMethodRequest } = e.detail;
-            if (this.plan) {
-              this.dispatchEvent(
-                new CustomEvent('UpdatePaymentMethod', {
-                  detail: { plan: this.plan, newPaymentMethodRequest },
-                }),
-              );
-            }
-          }}
-        >
-        </ia-mgc-edit-payment-method>
+        ${this.canEditPaymentMethod
+          ? html`
+              <hr />
+              <ia-mgc-edit-payment-method
+                .plan=${this.plan}
+                .patronEmail=${this.patronEmail}
+                .paymentConfig=${this.paymentConfig}
+                @UpdatePaymentMethod=${(e: CustomEvent) => {
+                  const { newPaymentMethodRequest } = e.detail;
+                  if (this.plan) {
+                    this.dispatchEvent(
+                      new CustomEvent('UpdatePaymentMethod', {
+                        detail: { plan: this.plan, newPaymentMethodRequest },
+                      }),
+                    );
+                  }
+                }}
+              >
+              </ia-mgc-edit-payment-method>
+            `
+          : ''}
         <hr />
         <ia-mgc-edit-date
           @updateDate=${(e: CustomEvent) => {

package/src/form-sections/parts/braintree-manager.ts

@@ -19,13 +19,15 @@ import lockImg from '@internetarchive/icon-lock/index.js';
 
 import type { MonthlyPlan } from '../../models/plan';
 
-type PaymentConfig = {
+export type PaymentConfig = {
   braintreeAuthToken?: string;
   endpointManager?: BraintreeEndpointManagerInterface;
   paymentClients?: PaymentClientsInterface;
   environment?: HostingEnvironment;
   venmoProfileId?: string;
   googlePayMerchantId?: string;
+  referrer: string;
+  origin: string;
 };
 
 @customElement('ia-mgc-braintree-manager')

package/src/form-sections/payment-method.ts

@@ -15,6 +15,8 @@ import { PaymentProvider } from '@internetarchive/donation-form-data-models';
 import type {
   BraintreeManagerInterface,
   PaymentClientsInterface,
+  BraintreeEndpointManagerInterface,
+  HostingEnvironment,
 } from '@internetarchive/donation-form';
 import type { ContactForm } from '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';
 import type { MonthlyPlan } from '../models/plan';
@@ -40,24 +42,24 @@ import { PaymentMethodRequest } from '../models/payment-method-request';
 export class MGCEditPaymentMethod extends LitElement {
   @property({ type: Object }) plan?: MonthlyPlan;
 
-  @property({ type: Object }) paymentConfig: {
-    referrer: string;
-    origin: string;
-    braintreeAuthToken: string;
-    venmoProfileId: string;
-    googlePayMerchantId: string;
-    environment: string;
-    paymentClients: PaymentClientsInterface | undefined;
-    endpointManager: object;
-  } = {
-    referrer: '',
-    origin: '',
-    braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',
-    venmoProfileId: '1953896702662410263',
-    googlePayMerchantId: '',
-    environment: 'dev',
+  @property({ type: Object }) paymentConfig:
+    | {
+        braintreeAuthToken?: string;
+        endpointManager?: BraintreeEndpointManagerInterface;
+        paymentClients?: PaymentClientsInterface;
+        environment?:
+          | HostingEnvironment.Development
+          | HostingEnvironment.Production;
+        venmoProfileId?: string;
+        googlePayMerchantId?: string;
+      }
+    | undefined = {
+    braintreeAuthToken: '',
+    endpointManager: undefined,
     paymentClients: undefined,
-    endpointManager: {},
+    environment: 'Development' as HostingEnvironment.Development,
+    venmoProfileId: '',
+    googlePayMerchantId: '',
   };
 
   @property({ type: String }) patronEmail: string = '';
@@ -78,26 +80,6 @@ export class MGCEditPaymentMethod extends LitElement {
 
   @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';
 
-  // @property({ type: Boolean }) creditCardSelected: boolean = false;
-
-  // @property({ type: Boolean }) venmoSelected: boolean = false;
-
-  // @property({ type: Boolean }) applePaySelected: boolean = false;
-
-  // @property({ type: Boolean }) googlePaySelected: boolean = false;
-
-  // @property({ type: Boolean }) paypalBlockerSelected: boolean = false;
-
-  /*
-    .paymentProviders=${this.braintreeManager?.paymentProviders}
-    @firstUpdated=${this.paymentSelectorFirstUpdated}
-    @creditCardSelected=${this.creditCardSelected}
-    @venmoSelected=${this.venmoSelected}
-    @applePaySelected=${this.applePaySelected}
-    @googlePaySelected=${this.googlePaySelected}
-    @paypalBlockerSelected=${this.paypalBlockerSelected}
-  */
-
   createRenderRoot() {
     return this;
   }

package/src/monthly-giving-circle.ts

@@ -5,6 +5,10 @@ import './welcome-message';
 import './plans';
 import './presentational/mgc-title';
 import './receipts';
+import {
+  HostingEnvironment,
+  PaymentClientsInterface,
+} from '@internetarchive/donation-form';
 import type { IauxMgcReceipts } from './receipts';
 import './presentational/mgc-button';
 import type { MonthlyPlan } from './models/plan';
@@ -37,6 +41,8 @@ export class MonthlyGivingCircle extends LitElement {
 
   @property({ type: String }) patronEmail: string = '';
 
+  @property({ type: Boolean }) canEditPaymentMethod: boolean = false;
+
   @property({ type: Array }) receipts = [];
 
   @property({ type: Array }) updates: APlanUpdate[] = [];
@@ -53,11 +59,25 @@ export class MonthlyGivingCircle extends LitElement {
 
   @property({ type: Boolean, reflect: true }) canEdit = false;
 
-  @property({ type: String, reflect: true }) braintreeAuthToken: string = '';
-
-  @property({ type: String }) venmoProfileId: string = '';
-
-  @property({ type: String }) googleMerchantId: string = '';
+  @property({ type: Object }) paymentConfig: {
+    referrer: string;
+    origin: string;
+    braintreeAuthToken: string;
+    venmoProfileId: string;
+    googlePayMerchantId: string;
+    paymentClients: PaymentClientsInterface | undefined;
+    environment: HostingEnvironment;
+    endpointManager: object;
+  } = {
+    referrer: '',
+    origin: '',
+    braintreeAuthToken: '',
+    venmoProfileId: '',
+    googlePayMerchantId: '',
+    environment: HostingEnvironment.Development,
+    paymentClients: undefined,
+    endpointManager: {},
+  };
 
   protected createRenderRoot() {
     return this;
@@ -121,8 +141,10 @@ export class MonthlyGivingCircle extends LitElement {
       ${this.sectionTitle}
       ${isEditingPlan
         ? html`<ia-mgc-edit-plan
+            .canEditPaymentMethod=${this.canEditPaymentMethod}
             .patronEmail=${this.patronEmail}
             .plan=${this.editingThisPlan}
+            .paymentConfig=${this.paymentConfig}
             @cancelPlan=${() => {
               this.dispatchEvent(
                 new CustomEvent('cancelPlan', {