@internetarchive/donation-monthly-portal 7.6.0 → 7.7.0

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

@@ -35,7 +35,8 @@ export declare class MGCBraintreeManager extends LitElement {
     render(): import("lit").TemplateResult<1>;
     lightDomCSS(): CSSResult;
     get creditCardTemplate(): import("lit").TemplateResult<1>;
+    renderPayPalVaultButton(): Promise<void>;
+    private handlePayPalAuthorized;
     private setupBraintreeManager;
     get contactForm(): HTMLFormElement | null;
-    setupPaymentHandlers(): Promise<void>;
 }

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

@@ -1,8 +1,10 @@
 import { __decorate } from "tslib";
+/* eslint-disable no-console */
 import { LitElement, html, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { HostedFieldContainer, HostedFieldName, } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-providers/credit-card/hosted-field-container';
 import { BraintreeManager, } from '@internetarchive/donation-form';
+import { DonationPaymentInfo, DonationType, } from '@internetarchive/donation-form-data-models';
 import creditCardImg from '@internetarchive/icon-credit-card/index.js';
 import calendarImg from '@internetarchive/icon-calendar/index.js';
 import lockImg from '@internetarchive/icon-lock/index.js';
@@ -178,6 +180,59 @@ let MGCBraintreeManager = class MGCBraintreeManager extends LitElement {
       </div>
     `;
     }
+    async renderPayPalVaultButton() {
+        var _a, _b, _c;
+        console.log('[PayPal] renderPayPalVaultButton called');
+        const handler = await ((_a = this.braintreeManager) === null || _a === void 0 ? void 0 : _a.paymentProviders.paypalHandler.get());
+        console.log('[PayPal] handler:', handler);
+        if (!handler)
+            return;
+        const container = document.querySelector('#ia-mgc-paypal-button');
+        console.log('[PayPal] container element:', container);
+        const donationInfo = new DonationPaymentInfo({
+            donationType: DonationType.Monthly,
+            amount: (_c = (_b = this.plan) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0,
+            coverFees: false,
+        });
+        const dataSource = await handler.renderPayPalButton({
+            selector: '#ia-mgc-paypal-button',
+            style: { color: 'blue', shape: 'rect', size: 'medium' },
+            donationInfo,
+        });
+        console.log('[PayPal] dataSource:', dataSource);
+        if (!dataSource)
+            return;
+        dataSource.delegate = {
+            payPalPaymentStarted: async () => {
+                console.log('PayPal payment started');
+            },
+            payPalPaymentAuthorized: async (_ds, payload) => {
+                this.handlePayPalAuthorized(payload);
+            },
+            payPalPaymentConfirmed: async (_ds, payload) => {
+                this.handlePayPalAuthorized(payload);
+            },
+            payPalPaymentCancelled: async () => {
+                console.log('PayPal payment cancelled');
+            },
+            payPalPaymentError: async (_ds, error) => {
+                console.error('PayPal vault error:', error);
+                this.dispatchEvent(new CustomEvent('PayPalVaultError', { detail: { error } }));
+            },
+        };
+    }
+    handlePayPalAuthorized(payload) {
+        this.dispatchEvent(new CustomEvent('PayPalVaultAuthorized', {
+            detail: {
+                paymentMethodInfo: {
+                    description: `PayPal - ${payload.details.email}`,
+                    nonce: payload.nonce,
+                    type: payload.type,
+                    details: { email: payload.details.email },
+                },
+            },
+        }));
+    }
     async setupBraintreeManager() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         this.braintreeManager = new BraintreeManager({
@@ -231,15 +286,6 @@ let MGCBraintreeManager = class MGCBraintreeManager extends LitElement {
     get contactForm() {
         return this.querySelector('form[name="contact-form"]');
     }
-    async setupPaymentHandlers() {
-        var _a;
-        // const creditCardFlowHandler = this.paymentConfig?.paymentFlowHandlers?.creditCardHandler;
-        const creditCardHandler = await ((_a = this.braintreeManager) === null || _a === void 0 ? void 0 : _a.paymentProviders.creditCardHandler.get());
-        creditCardHandler === null || creditCardHandler === void 0 ? void 0 : creditCardHandler.hideErrorMessage();
-        // const valid = this.contactForm?.reportValidity();
-        // const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();
-        // console.log("CC hostedFieldsResponse", hostedFieldsResponse);
-    }
 };
 __decorate([
     property({ type: Object })

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\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"]}
+{"version":3,"file":"braintree-manager.js","sourceRoot":"","sources":["../../../../src/form-sections/parts/braintree-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-console */\nimport { 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 {\n  DonationPaymentInfo,\n  DonationType,\n} from '@internetarchive/donation-form-data-models';\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  async renderPayPalVaultButton(): Promise<void> {\n    console.log('[PayPal] renderPayPalVaultButton called');\n\n    const handler =\n      await this.braintreeManager?.paymentProviders.paypalHandler.get();\n    console.log('[PayPal] handler:', handler);\n    if (!handler) return;\n\n    const container = document.querySelector('#ia-mgc-paypal-button');\n    console.log('[PayPal] container element:', container);\n\n    const donationInfo = new DonationPaymentInfo({\n      donationType: DonationType.Monthly,\n      amount: this.plan?.amount ?? 0,\n      coverFees: false,\n    });\n\n    const dataSource = await handler.renderPayPalButton({\n      selector: '#ia-mgc-paypal-button',\n      style: { color: 'blue', shape: 'rect', size: 'medium' },\n      donationInfo,\n    });\n    console.log('[PayPal] dataSource:', dataSource);\n\n    if (!dataSource) return;\n\n    dataSource.delegate = {\n      payPalPaymentStarted: async () => {\n        console.log('PayPal payment started');\n      },\n      payPalPaymentAuthorized: async (_ds: any, payload: any) => {\n        this.handlePayPalAuthorized(payload);\n      },\n      payPalPaymentConfirmed: async (_ds: any, payload: any) => {\n        this.handlePayPalAuthorized(payload);\n      },\n      payPalPaymentCancelled: async () => {\n        console.log('PayPal payment cancelled');\n      },\n      payPalPaymentError: async (_ds: any, error: unknown) => {\n        console.error('PayPal vault error:', error);\n        this.dispatchEvent(\n          new CustomEvent('PayPalVaultError', { detail: { error } }),\n        );\n      },\n    };\n  }\n\n  private handlePayPalAuthorized(payload: {\n    nonce: string;\n    type: string;\n    details: { email: string };\n  }): void {\n    this.dispatchEvent(\n      new CustomEvent('PayPalVaultAuthorized', {\n        detail: {\n          paymentMethodInfo: {\n            description: `PayPal - ${payload.details.email}`,\n            nonce: payload.nonce,\n            type: payload.type,\n            details: { email: payload.details.email },\n          },\n        },\n      }),\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"]}

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

@@ -43,5 +43,6 @@ export declare class MGCEditPaymentMethod extends LitElement {
     get creditCardElement(): ContactForm | null;
     get braintreeManagerElement(): MGCBraintreeManager | null;
     render(): TemplateResult<1>;
+    private handlePayPalVaultAuthorized;
     get styles(): import("lit").CSSResult;
 }

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

@@ -76,9 +76,6 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
         const headline = this.selectedPaymentProvider === PaymentProvider.Venmo
             ? 'Help us stay in touch'
             : 'Enter payment information';
-        const displayContactForm = this.selectedPaymentProvider === PaymentProvider.CreditCard ||
-            this.selectedPaymentProvider === PaymentProvider.Venmo;
-        console.log('contactFormSectioncontactFormSection', { displayContactForm });
         return html `
       <donation-form-section
         badgemode="hidebadge"
@@ -108,13 +105,12 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
         return this.querySelector('ia-mgc-braintree-manager');
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const displayContactForm = this.selectedPaymentProvider === PaymentProvider.CreditCard ||
             this.selectedPaymentProvider === PaymentProvider.Venmo;
         const displayCCFields = this.selectedPaymentProvider === PaymentProvider.CreditCard;
-        console.log('selectedPaymentProvider', {
-            selectedPaymentProvider: this.selectedPaymentProvider,
-        });
+        const displayBraintreeManager = this.selectedPaymentProvider === PaymentProvider.CreditCard ||
+            this.selectedPaymentProvider === PaymentProvider.PayPal;
         return html `
       <style>
         ${this.styles}
@@ -130,7 +126,10 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
                 ${((_b = (_a = this.plan) === null || _a === void 0 ? void 0 : _a.payment) === null || _b === void 0 ? void 0 : _b.paymentMethodType) === 'creditCard'
                 ? 'Credit Card'
                 : (_d = (_c = this.plan) === null || _c === void 0 ? void 0 : _c.payment) === null || _d === void 0 ? void 0 : _d.paymentMethodType}:
-                ${(_f = (_e = this.plan) === null || _e === void 0 ? void 0 : _e.payment) === null || _f === void 0 ? void 0 : _f.cardType} - ${(_h = (_g = this.plan) === null || _g === void 0 ? void 0 : _g.payment) === null || _h === void 0 ? void 0 : _h.last4}
+                ${((_f = (_e = this.plan) === null || _e === void 0 ? void 0 : _e.payment) === null || _f === void 0 ? void 0 : _f.paymentMethodType) ===
+                PaymentProvider.PayPal
+                ? (_h = (_g = this.plan) === null || _g === void 0 ? void 0 : _g.payment) === null || _h === void 0 ? void 0 : _h.paypalEmail
+                : `${(_k = (_j = this.plan) === null || _j === void 0 ? void 0 : _j.payment) === null || _k === void 0 ? void 0 : _k.cardType} - ${(_m = (_l = this.plan) === null || _l === void 0 ? void 0 : _l.payment) === null || _m === void 0 ? void 0 : _m.last4}`}
               </span></ia-mgc-form-section-info
             >`
             : nothing}
@@ -138,9 +137,11 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
             ? html `
             <form id="edit-plan-payment-method" @submit=${this.submitPaymentMethodChange}>
               <payment-selector
-                .paymentProviders=${(_j = this.braintreeManager) === null || _j === void 0 ? void 0 : _j.paymentProviders}
-                @firstUpdated=${() => {
+                .paymentProviders=${(_o = this.braintreeManager) === null || _o === void 0 ? void 0 : _o.paymentProviders}
+                @firstUpdated=${(e) => {
+                var _a;
                 this.paymentSelectorFirstUpdated = true;
+                (_a = e.target) === null || _a === void 0 ? void 0 : _a.showPaypalButton();
             }}
                 @creditCardSelected=${() => {
                 this.selectedPaymentProvider = PaymentProvider.CreditCard;
@@ -154,29 +155,38 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
                 @googlePaySelected=${() => {
                 this.selectedPaymentProvider = PaymentProvider.GooglePay;
             }}
-                @paypalBlockerSelected=${() => {
-                this.selectedPaymentProvider = 'paypalBlocker';
+                @paypalSelected=${() => {
+                this.selectedPaymentProvider = PaymentProvider.PayPal;
             }}
                 @resetPaymentMethod=${async () => {
                 this.selectedPaymentProvider = '';
             }}
                 tabindex="0"
               >
-                <slot name="paypal-button" slot="paypal-button"></slot>
+                <div slot="paypal-button">
+                  <div id="ia-mgc-paypal-button"></div>
+                </div>
               </payment-selector>
 
               <div class="${displayContactForm ? '' : 'hidden'}">
                 <contact-form .donorEmail=${this.patronEmail}></contact-form>
               </div>
-              
 
               <ia-mgc-braintree-manager
-                class="${displayCCFields ? '' : 'hidden'}"
-                .displayCreditCard=${this.selectedPaymentProvider === PaymentProvider.CreditCard}
+                class="${displayBraintreeManager ? '' : 'hidden'}"
+                .displayCreditCard=${displayCCFields}
                 .plan=${this.plan}
                 .paymentConfig=${this.paymentConfig}
                 @BraintreeManagerSetupComplete=${() => {
-                console.log('BraintreeManagerSetupComplete');
+                var _a;
+                (_a = this.braintreeManagerElement) === null || _a === void 0 ? void 0 : _a.renderPayPalVaultButton();
+            }}
+                @PayPalVaultAuthorized=${(e) => {
+                this.handlePayPalVaultAuthorized(e);
+            }}
+                @PayPalVaultError=${() => {
+                this.updateStatus = 'fail';
+                this.updateMessage = 'PayPal error, please try again';
             }}
               ></ia-mgc-braintree-manager>
 
@@ -190,40 +200,39 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
             }}
                 >Cancel</ia-mgc-button
               >
-              <ia-mgc-button
-                id="edit-plan-payment-method-submit"
-                class="primary"
-                type="submit"
-                .isDisabled=${!this.selectedPaymentProvider}
-                .clickHandler=${async (event, iaButton) => {
-                var _a, _b, _c;
-                console.log({ iaButton, event });
-                const button = iaButton;
-                button.isDisabled = true;
-                // validate credit card
-                // if not valid, show error and return
-                const isContactFormValid = (_a = this.creditCardElement) === null || _a === void 0 ? void 0 : _a.reportValidity();
-                if (!isContactFormValid) {
-                    button.isDisabled = false;
-                    return;
-                }
-                const paymentMethodInfo = (await ((_b = this.braintreeManagerElement) === null || _b === void 0 ? void 0 : _b.validateCreditCardFields()));
-                if (!paymentMethodInfo) {
-                    button.isDisabled = false;
-                    return;
-                }
-                const newPaymentMethodRequest = new PaymentMethodRequest({
-                    paymentMethodInfo,
-                    donorContactInfo: (_c = this.contactFormElement) === null || _c === void 0 ? void 0 : _c.donorContactInfo,
-                    paymentProvider: this
-                        .selectedPaymentProvider,
-                });
-                this.dispatchEvent(new CustomEvent('UpdatePaymentMethod', {
-                    detail: { newPaymentMethodRequest },
-                }));
-            }}
-                >Update payment method</ia-mgc-button
-              >
+              ${this.selectedPaymentProvider !== PaymentProvider.PayPal
+                ? html `<ia-mgc-button
+                      id="edit-plan-payment-method-submit"
+                      class="primary"
+                      type="submit"
+                      .isDisabled=${!this.selectedPaymentProvider}
+                      .clickHandler=${async (event, iaButton) => {
+                    var _a, _b, _c;
+                    const button = iaButton;
+                    button.isDisabled = true;
+                    const isContactFormValid = (_a = this.creditCardElement) === null || _a === void 0 ? void 0 : _a.reportValidity();
+                    if (!isContactFormValid) {
+                        button.isDisabled = false;
+                        return;
+                    }
+                    const paymentMethodInfo = (await ((_b = this.braintreeManagerElement) === null || _b === void 0 ? void 0 : _b.validateCreditCardFields()));
+                    if (!paymentMethodInfo) {
+                        button.isDisabled = false;
+                        return;
+                    }
+                    const newPaymentMethodRequest = new PaymentMethodRequest({
+                        paymentMethodInfo,
+                        donorContactInfo: (_c = this.contactFormElement) === null || _c === void 0 ? void 0 : _c.donorContactInfo,
+                        paymentProvider: this
+                            .selectedPaymentProvider,
+                    });
+                    this.dispatchEvent(new CustomEvent('UpdatePaymentMethod', {
+                        detail: { newPaymentMethodRequest },
+                    }));
+                }}
+                      >Update payment method</ia-mgc-button
+                    >`
+                : nothing}
               <ia-mgc-update-status .status=${this.updateStatus}
                 >${this.updateMessage}</ia-mgc-update-status
               ></ia-mgc-form-section-info>
@@ -236,6 +245,18 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
       </donation-form-section>
     `;
     }
+    handlePayPalVaultAuthorized(e) {
+        var _a, _b;
+        const { paymentMethodInfo } = e.detail;
+        const newPaymentMethodRequest = new PaymentMethodRequest({
+            paymentMethodInfo,
+            donorContactInfo: (_b = (_a = this.contactFormElement) === null || _a === void 0 ? void 0 : _a.donorContactInfo) !== null && _b !== void 0 ? _b : {},
+            paymentProvider: PaymentProvider.PayPal,
+        });
+        this.dispatchEvent(new CustomEvent('UpdatePaymentMethod', {
+            detail: { newPaymentMethodRequest },
+        }));
+    }
     get styles() {
         return css `
       payment-selector {
@@ -249,6 +270,10 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
         margin: 10px 0;
       }
 
+      ia-mgc-braintree-manager:not([displaycreditcard]) #ia-mgc-cc-area {
+        display: none;
+      }
+
       .secure-process-note {
         margin-top: 0.5em;
         font-size: 0.75em;
@@ -265,6 +290,13 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
         height: 1px;
         width: 1px;
       }
+
+      #ia-mgc-paypal-button {
+        opacity: 0.001;
+        width: var(--paymentButtonWidth, 5rem);
+        height: var(--paymentButtonHeight, 3.2rem);
+        overflow: hidden;
+      }
     `;
     }
 };

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":"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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  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 {\n  MGCBraintreeManager,\n  PaymentConfig,\n} 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: PaymentConfig = {\n    braintreeAuthToken: '',\n    endpointManager: undefined,\n    paymentClients: undefined,\n    environment: 'Development' as HostingEnvironment.Development,\n    venmoProfileId: '',\n    googlePayMerchantId: '',\n    referrer: '',\n    origin: '',\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"]}
+{"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  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 {\n  MGCBraintreeManager,\n  PaymentConfig,\n} 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: PaymentConfig = {\n    braintreeAuthToken: '',\n    endpointManager: undefined,\n    paymentClients: undefined,\n    environment: 'Development' as HostingEnvironment.Development,\n    venmoProfileId: '',\n    googlePayMerchantId: '',\n    referrer: '',\n    origin: '',\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    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    const displayBraintreeManager =\n      this.selectedPaymentProvider === PaymentProvider.CreditCard ||\n      this.selectedPaymentProvider === PaymentProvider.PayPal;\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?.paymentMethodType ===\n                PaymentProvider.PayPal\n                  ? this.plan?.payment?.paypalEmail\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=${(e: Event) => {\n                  this.paymentSelectorFirstUpdated = true;\n                  (e.target as any)?.showPaypalButton();\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                @paypalSelected=${() => {\n                  this.selectedPaymentProvider = PaymentProvider.PayPal;\n                }}\n                @resetPaymentMethod=${async () => {\n                  this.selectedPaymentProvider = '';\n                }}\n                tabindex=\"0\"\n              >\n                <div slot=\"paypal-button\">\n                  <div id=\"ia-mgc-paypal-button\"></div>\n                </div>\n              </payment-selector>\n\n              <div class=\"${displayContactForm ? '' : 'hidden'}\">\n                <contact-form .donorEmail=${this.patronEmail}></contact-form>\n              </div>\n\n              <ia-mgc-braintree-manager\n                class=\"${displayBraintreeManager ? '' : 'hidden'}\"\n                .displayCreditCard=${displayCCFields}\n                .plan=${this.plan}\n                .paymentConfig=${this.paymentConfig}\n                @BraintreeManagerSetupComplete=${() => {\n                  this.braintreeManagerElement?.renderPayPalVaultButton();\n                }}\n                @PayPalVaultAuthorized=${(e: CustomEvent) => {\n                  this.handlePayPalVaultAuthorized(e);\n                }}\n                @PayPalVaultError=${() => {\n                  this.updateStatus = 'fail';\n                  this.updateMessage = 'PayPal error, please try again';\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              ${\n                this.selectedPaymentProvider !== PaymentProvider.PayPal\n                  ? html`<ia-mgc-button\n                      id=\"edit-plan-payment-method-submit\"\n                      class=\"primary\"\n                      type=\"submit\"\n                      .isDisabled=${!this.selectedPaymentProvider}\n                      .clickHandler=${async (\n                        event: Event,\n                        iaButton: MGCButton,\n                      ) => {\n                        const button = iaButton;\n                        button.isDisabled = true;\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 =\n                          new PaymentMethodRequest({\n                            paymentMethodInfo,\n                            donorContactInfo:\n                              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                  : nothing\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  private handlePayPalVaultAuthorized(e: CustomEvent): void {\n    const { paymentMethodInfo } = e.detail;\n    const newPaymentMethodRequest = new PaymentMethodRequest({\n      paymentMethodInfo,\n      donorContactInfo: this.contactFormElement?.donorContactInfo ?? {},\n      paymentProvider: PaymentProvider.PayPal,\n    });\n    this.dispatchEvent(\n      new CustomEvent('UpdatePaymentMethod', {\n        detail: { newPaymentMethodRequest },\n      }),\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      ia-mgc-braintree-manager:not([displaycreditcard]) #ia-mgc-cc-area {\n        display: none;\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      #ia-mgc-paypal-button {\n        opacity: 0.001;\n        width: var(--paymentButtonWidth, 5rem);\n        height: var(--paymentButtonHeight, 3.2rem);\n        overflow: hidden;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/models/payment-method-request.d.ts

@@ -11,6 +11,8 @@ export type BTPaymentMethodUpdate = {
         expirationMonth?: string;
         expirationYear?: string;
         description?: string;
+        email?: string;
+        username?: string;
     };
 };
 export declare class PaymentMethodRequest {

package/dist/src/models/payment-method-request.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-method-request.js","sourceRoot":"","sources":["../../../src/models/payment-method-request.ts"],"names":[],"mappings":"AAkBA,MAAM,OAAO,oBAAoB;IAK/B,YAAY,MAIX;;QACC,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAClD,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;QAChD,IAAI,CAAC,eAAe,GAAG,MAAA,MAAM,CAAC,eAAe,mCAAI,SAAS,CAAC;IAC7D,CAAC;CACF","sourcesContent":["/* eslint-disable lines-between-class-members */\nimport type { PaymentProvider } from '@internetarchive/donation-form-data-models';\n\nexport type BTPaymentMethodUpdate = {\n  description: string;\n  nonce: string;\n  type: string;\n  details: {\n    cardType?: string;\n    lastFour?: string;\n    lastTwo?: string;\n    bin?: string;\n    expirationMonth?: string;\n    expirationYear?: string;\n    description?: string;\n  };\n};\n\nexport class PaymentMethodRequest {\n  paymentMethodInfo: BTPaymentMethodUpdate;\n  donorContactInfo: any;\n  paymentProvider: PaymentProvider;\n\n  constructor(params: {\n    paymentMethodInfo: any;\n    donorContactInfo: any;\n    paymentProvider: PaymentProvider;\n  }) {\n    this.paymentMethodInfo = params.paymentMethodInfo;\n    this.donorContactInfo = params.donorContactInfo;\n    this.paymentProvider = params.paymentProvider ?? 'unknown';\n  }\n}\n"]}
+{"version":3,"file":"payment-method-request.js","sourceRoot":"","sources":["../../../src/models/payment-method-request.ts"],"names":[],"mappings":"AAoBA,MAAM,OAAO,oBAAoB;IAK/B,YAAY,MAIX;;QACC,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAClD,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;QAChD,IAAI,CAAC,eAAe,GAAG,MAAA,MAAM,CAAC,eAAe,mCAAI,SAAS,CAAC;IAC7D,CAAC;CACF","sourcesContent":["/* eslint-disable lines-between-class-members */\nimport type { PaymentProvider } from '@internetarchive/donation-form-data-models';\n\nexport type BTPaymentMethodUpdate = {\n  description: string;\n  nonce: string;\n  type: string;\n  details: {\n    cardType?: string;\n    lastFour?: string;\n    lastTwo?: string;\n    bin?: string;\n    expirationMonth?: string;\n    expirationYear?: string;\n    description?: string;\n    email?: string;\n    username?: string;\n  };\n};\n\nexport class PaymentMethodRequest {\n  paymentMethodInfo: BTPaymentMethodUpdate;\n  donorContactInfo: any;\n  paymentProvider: PaymentProvider;\n\n  constructor(params: {\n    paymentMethodInfo: any;\n    donorContactInfo: any;\n    paymentProvider: PaymentProvider;\n  }) {\n    this.paymentMethodInfo = params.paymentMethodInfo;\n    this.donorContactInfo = params.donorContactInfo;\n    this.paymentProvider = params.paymentProvider ?? 'unknown';\n  }\n}\n"]}

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

@@ -47,6 +47,7 @@ export declare class MonthlyPlan {
     setAmount(newAmount: number): void;
     get nextBillingDate(): string;
     setNextBillingDate(newDate: string): void;
+    private formatDateUTC;
     get nextBillingDateLocale(): string;
     get lastBillingDateLocale(): string;
     get hasBeenCancelled(): boolean;