Merge pull request #163 from Foxy/beta

chore: release 1.27.1

custom-elements.json

@@ -9830,7 +9830,7 @@
       "attributes": [
         {
           "name": "embed-url",
-          "description": "URL of the Payment Card Embed for updating payment method.\nWhen set, the payment method will be editable. Otherwise, the customers\nwill only be able to view and delete it.\n\n```html\n<foxy-customer-portal\n  embed-url=\"https://embed.foxy.io/v1.html?template_set=123\"\n  base=\"https://demo.foxycart.com/s/customer/\"\n>\n</foxy-customer-portal>\n```"
+          "description": "URL of the Payment Card Embed for updating payment method.\nWhen set, the payment method will be editable. Otherwise, the customers\nwill only be able to view and delete it.\n\n```html\n<foxy-customer-portal\n  embed-url=\"https://embed.foxy.io/v1.html?template_set_id=123\"\n  base=\"https://demo.foxycart.com/s/customer/\"\n>\n</foxy-customer-portal>\n```"
         },
         {
           "name": "group",
@@ -9915,7 +9915,7 @@
         {
           "name": "embedUrl",
           "attribute": "embed-url",
-          "description": "URL of the Payment Card Embed for updating payment method.\nWhen set, the payment method will be editable. Otherwise, the customers\nwill only be able to view and delete it.\n\n```html\n<foxy-customer-portal\n  embed-url=\"https://embed.foxy.io/v1.html?template_set=123\"\n  base=\"https://demo.foxycart.com/s/customer/\"\n>\n</foxy-customer-portal>\n```"
+          "description": "URL of the Payment Card Embed for updating payment method.\nWhen set, the payment method will be editable. Otherwise, the customers\nwill only be able to view and delete it.\n\n```html\n<foxy-customer-portal\n  embed-url=\"https://embed.foxy.io/v1.html?template_set_id=123\"\n  base=\"https://demo.foxycart.com/s/customer/\"\n>\n</foxy-customer-portal>\n```"
         },
         {
           "name": "group",
@@ -20911,7 +20911,7 @@
     },
     {
       "name": "foxy-payment-card-embed",
-      "path": "./src/elements/public/PaymentCardEmbedElement/index.ts",
+      "path": "./src/elements/public/PaymentCardEmbed/index.ts",
       "description": "A secure, PCI-compliant element for collecting payment card information with\nsupport for Stripe, Square and embedded gateways.",
       "attributes": [
         {
@@ -20972,6 +20972,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "PaymentCardEmbed",
+          "type": "typeof PaymentCardEmbed",
+          "default": "\"SDKPaymentCardEmbed\""
+        },
         {
           "name": "url",
           "attribute": "url",
@@ -21061,6 +21066,12 @@
           "description": "Set a name for this element here to enable property inference. Set to `null` to disable.",
           "type": "string"
         }
+      ],
+      "events": [
+        {
+          "name": "CustomEvent",
+          "description": "Instance of `CustomEvent` with type `submit`. Dispatched when the user submits the form (not available for Stripe)."
+        }
       ]
     },
     {
@@ -32449,4 +32460,4 @@
       ]
     }
   ]
-}
+}

src/elements/internal/InternalSelectControl/InternalSelectControl.test.ts

@@ -167,6 +167,18 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.deep.property('items', [{ label: 'i18n_test', value: 'test' }]);
   });
 
+  it('sets "items" with raw label text on vaadin-combo-box from "options" on itself', async () => {
+    const layout = html`<test-internal-select-control></test-internal-select-control>`;
+    const control = await fixture<TestControl>(layout);
+    const comboBox = control.renderRoot.querySelector('vaadin-combo-box')!;
+
+    expect(comboBox).to.have.deep.property('items', []);
+
+    control.options = [{ rawLabel: 'foo bar', value: 'test' }];
+    await control.requestUpdate();
+    expect(comboBox).to.have.deep.property('items', [{ label: 'foo bar', value: 'test' }]);
+  });
+
   it('sets "disabled" on vaadin-combo-box from "disabled" on itself', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);

src/elements/internal/InternalSelectControl/InternalSelectControl.ts

@@ -43,7 +43,10 @@ export class InternalSelectControl extends InternalEditableControl {
         ?readonly=${this.readonly}
         clear-button-visible
         .checkValidity=${this._checkValidity}
-        .items=${this.options.map(({ value, label }) => ({ value, label: this.t(label) }))}
+        .items=${this.options.map(option => ({
+          label: 'label' in option ? this.t(option.label) : option.rawLabel,
+          value: option.value,
+        }))}
         .value=${this._value}
         @change=${(evt: CustomEvent) => {
           evt.stopPropagation();

src/elements/internal/InternalSelectControl/types.ts

@@ -1,6 +1,13 @@
-export type Option = {
-  /** I18n label key for the dropdown item. */
-  label: string;
+export type Option = (
+  | {
+      /** I18n label key for the dropdown item. */
+      label: string;
+    }
+  | {
+      /** Translated label text. */
+      rawLabel: string;
+    }
+) & {
   /** Dropdown item value. */
   value: string;
 };

src/elements/public/CustomerPortal/CustomerPortal.ts

@@ -37,7 +37,7 @@ export class CustomerPortal extends TranslatableMixin(
    *
    * ```html
    * <foxy-customer-portal
-   *  embed-url="https://embed.foxy.io/v1.html?template_set=123"
+   *  embed-url="https://embed.foxy.io/v1.html?template_set_id=123"
    *  base="https://demo.foxycart.com/s/customer/"
    * >
    * </foxy-customer-portal>

src/elements/public/PaymentCardEmbedElement/PaymentCardEmbedElement.stories.mdx → src/elements/public/PaymentCardEmbed/PaymentCardEmbed.stories.mdx

@@ -2,16 +2,16 @@ import { Meta, Story, Title, Canvas, Subtitle } from '@web/storybook-prebuilt/ad
 import { html } from 'lit-html';
 import '../index.ts';
 
-<Meta title="Other / PaymentCardEmbedElement" />
+<Meta title="Other / PaymentCardEmbed" />
 
-<Title>PaymentCardEmbedElement</Title>
+<Title>PaymentCardEmbed</Title>
 
 <Subtitle>
   A secure, PCI-compliant way to collect payment information with support for Stripe, Square and
   embedded gateways.
 </Subtitle>
 
-PaymentCardEmbedElement is a custom element wrapper for the `SDK.Customer.PaymentCardEmbed` class. If you're already using other Foxy Elements like Customer Portal in your projects, this is the recommended way to collect payment information from your customers. Othwerwise, you can use the SDK directly to reduce the bundle size.
+PaymentCardEmbed is a custom element wrapper for the `SDK.Customer.PaymentCardEmbed` class. If you're already using other Foxy Elements like Customer Portal in your projects, this is the recommended way to collect payment information from your customers. Othwerwise, you can use the SDK directly to reduce the bundle size.
 
 <Canvas
   mdxSource={`
@@ -50,7 +50,7 @@ To adapt the example above to your use case, replace the template set ID in the
 
 ## Styling
 
-Like all other elements in this library, PaymentCardEmbedElement is designed to be styled with CSS custom properties. You can apply them the same way you would with any other element. Here's the list of all supported properties and their default values:
+Like all other elements in this library, PaymentCardEmbed is designed to be styled with CSS custom properties. You can apply them the same way you would with any other element. Here's the list of all supported properties and their default values:
 
 ```css
 foxy-payment-card-embed {
@@ -88,7 +88,7 @@ Please note that the default provider and Stripe support all web-safe fonts and
 
 ## Translating
 
-PaymentCardEmbedElement comes with English translations only by default. If you need to support more languages, you can do so by using the same i18n approach as with other elements in this library. Here's an example of how you can add Spanish translations for the default configuration:
+PaymentCardEmbed comes with English translations only by default. If you need to support more languages, you can do so by using the same i18n approach as with other elements in this library. Here's an example of how you can add Spanish translations for the default configuration:
 
 ```html
 <foxy-payment-card-embed
@@ -171,7 +171,7 @@ i18next.addResourceBundle('es', 'my-payment-card-embed', {
 
 ## Interactivity
 
-Like all inputs in this library, PaymentCardEmbedElement has support for disabled and readonly states. You can toggle them by setting the `disabled` and `readonly` attributes respectively. In both cases that will prevent the user from interacting with the element but the styles and semantics will be slightly different.
+Like all inputs in this library, PaymentCardEmbed has support for disabled and readonly states. You can toggle them by setting the `disabled` and `readonly` attributes respectively. In both cases that will prevent the user from interacting with the element but the styles and semantics will be slightly different.
 
 ### Disabled
 
@@ -262,7 +262,7 @@ element
   });
 ```
 
-Once you have the token, you can use it to update customer's default payment method by sending a `PATCH` request to the customer endpoint with the token as a value of the `cc_token` property. This feeature is available both in Backend (`api.foxy.io/customers/123/default_payment_method`) and Customer API (`your-store.foxycart.com/s/customer/default_payment_method`) endpoints. Note that the card token has a limited lifespan and should be used immediately after it's created.
+Once you have the token, you can use it to update customer's default payment method by sending a `PATCH` request to the customer endpoint with the token as a value of the `cc_token` property. This feature is available both in Backend (`api.foxy.io/customers/123/default_payment_method`) and Customer API (`your-store.foxycart.com/s/customer/default_payment_method`) endpoints. Note that the card token has a limited lifespan and should be used immediately after it's created.
 
 ## Clearing the form
 

src/elements/public/PaymentCardEmbedElement/PaymentCardEmbedElement.test.ts → src/elements/public/PaymentCardEmbed/PaymentCardEmbed.test.ts

@@ -1,14 +1,14 @@
 import './index';
 
 import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
-import { PaymentCardEmbedElement } from './PaymentCardEmbedElement';
-import { PaymentCardEmbed } from '@foxy.io/sdk/customer';
+import { PaymentCardEmbed } from './PaymentCardEmbed';
+import { PaymentCardEmbed as SDKPaymentCardEmbed } from '@foxy.io/sdk/customer';
 import { LitElement } from 'lit-element';
 import { I18n } from '../I18n/I18n';
 import { stub } from 'sinon';
 
-class TestElement extends PaymentCardEmbedElement {
-  static readonly PaymentCardEmbed = class extends PaymentCardEmbed {
+class TestElement extends PaymentCardEmbed {
+  static readonly PaymentCardEmbed = class extends SDKPaymentCardEmbed {
     configure = stub();
 
     mount = stub().resolves();
@@ -22,7 +22,7 @@ class TestElement extends PaymentCardEmbedElement {
 
 customElements.define('test-element', TestElement);
 
-describe('PaymentCardEmbedElement', () => {
+describe('PaymentCardEmbed', () => {
   it('imports and defines foxy-spinner element', () => {
     expect(customElements.get('foxy-spinner')).to.exist;
   });
@@ -32,25 +32,25 @@ describe('PaymentCardEmbedElement', () => {
   });
 
   it('defines itself as foxy-payment-card-embed element', () => {
-    expect(customElements.get('foxy-payment-card-embed')).to.equal(PaymentCardEmbedElement);
+    expect(customElements.get('foxy-payment-card-embed')).to.equal(PaymentCardEmbed);
   });
 
   it('exposes PaymentCardEmbed class as a static property', () => {
-    expect(PaymentCardEmbedElement.PaymentCardEmbed).to.equal(PaymentCardEmbed);
+    expect(PaymentCardEmbed.PaymentCardEmbed).to.equal(SDKPaymentCardEmbed);
   });
 
   it('has a default i18next namespace "payment-card-embed"', () => {
-    expect(PaymentCardEmbedElement).to.have.property('defaultNS', 'payment-card-embed');
-    expect(new PaymentCardEmbedElement()).to.have.property('ns', 'payment-card-embed');
+    expect(PaymentCardEmbed).to.have.property('defaultNS', 'payment-card-embed');
+    expect(new PaymentCardEmbed()).to.have.property('ns', 'payment-card-embed');
   });
 
   it('extends LitElement', () => {
-    expect(new PaymentCardEmbedElement()).to.be.instanceOf(LitElement);
+    expect(new PaymentCardEmbed()).to.be.instanceOf(LitElement);
   });
 
   it('has a reactive property "url" that defaults to null', () => {
-    expect(PaymentCardEmbedElement).to.have.deep.nested.property('properties.url', {});
-    expect(new PaymentCardEmbedElement()).to.have.property('url', null);
+    expect(PaymentCardEmbed).to.have.deep.nested.property('properties.url', {});
+    expect(new PaymentCardEmbed()).to.have.property('url', null);
   });
 
   it('renders a spinner by default', async () => {
@@ -160,22 +160,22 @@ describe('PaymentCardEmbedElement', () => {
         '--lumo-contrast-50pct': 'rgba(28, 48, 74, 0.5)',
         '--lumo-size-m': '36px',
         '--lumo-size-xs': '26px',
-        '--lumo-border-radius-m': '8px',
+        '--lumo-border-radius-m': '4px',
         '--lumo-border-radius-s': '4px',
         '--lumo-font-family':
           '-apple-system, "system-ui", Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
         '--lumo-font-size-m': '16px',
         '--lumo-font-size-s': '14px',
         '--lumo-font-size-xs': '13px',
-        '--lumo-primary-color': 'rgba(26, 57, 96, 0.1)',
-        '--lumo-primary-text-color': 'rgba(26, 57, 96, 0.1)',
-        '--lumo-primary-color-50pct': 'rgba(26, 57, 96, 0.1)',
-        '--lumo-secondary-text-color': 'rgba(26, 57, 96, 0.1)',
+        '--lumo-primary-color': 'rgb(22, 118, 243)',
+        '--lumo-primary-text-color': 'rgb(22, 118, 243)',
+        '--lumo-primary-color-50pct': 'rgba(22, 118, 243, 0.5)',
+        '--lumo-secondary-text-color': 'rgba(27, 43, 65, 0.72)',
         '--lumo-disabled-text-color': 'rgba(28, 52, 84, 0.26)',
-        '--lumo-body-text-color': 'rgba(0, 0, 0, 0)',
-        '--lumo-error-text-color': 'rgba(28, 52, 84, 0.26)',
-        '--lumo-error-color-10pct': 'rgba(28, 52, 84, 0.26)',
-        '--lumo-error-color-50pct': 'rgba(28, 52, 84, 0.26)',
+        '--lumo-body-text-color': 'rgba(24, 39, 57, 0.94)',
+        '--lumo-error-text-color': 'rgb(245, 36, 25)',
+        '--lumo-error-color-10pct': 'rgba(255, 61, 51, 0.1)',
+        '--lumo-error-color-50pct': 'rgba(255, 61, 51, 0.5)',
         '--lumo-line-height-xs': '20px',
         '--lumo-base-color': 'rgb(255, 255, 255)',
       },

src/elements/public/PaymentCardEmbedElement/PaymentCardEmbedElement.ts → src/elements/public/PaymentCardEmbed/PaymentCardEmbed.ts

@@ -5,7 +5,7 @@ import type { TemplateResult } from 'lit-html';
 import { TranslatableMixin } from '../../../mixins/translatable';
 import { ConfigurableMixin } from '../../../mixins/configurable';
 import { LitElement, html } from 'lit-element';
-import { PaymentCardEmbed } from '@foxy.io/sdk/customer';
+import { PaymentCardEmbed as SDKPaymentCardEmbed } from '@foxy.io/sdk/customer';
 import { InferrableMixin } from '../../../mixins/inferrable';
 import { ThemeableMixin } from '../../../mixins/themeable';
 import { classMap } from '../../../utils/class-map';
@@ -23,8 +23,8 @@ const Base = ConfigurableMixin(TranslatableMixin(InferrableMixin(ThemeableMixin(
  * @element foxy-payment-card-embed
  * @since 1.27.0
  */
-export class PaymentCardEmbedElement extends Base {
-  static readonly PaymentCardEmbed = PaymentCardEmbed;
+export class PaymentCardEmbed extends Base {
+  static readonly PaymentCardEmbed = SDKPaymentCardEmbed;
 
   static get properties(): PropertyDeclarations {
     return {
@@ -46,7 +46,7 @@ export class PaymentCardEmbedElement extends Base {
 
   private __configRefreshInterval: NodeJS.Timeout | null = null;
 
-  private __embed: PaymentCardEmbed | null = null;
+  private __embed: SDKPaymentCardEmbed | null = null;
 
   private __ready = false;
 
@@ -211,7 +211,7 @@ export class PaymentCardEmbedElement extends Base {
       this.__ready = false;
       this.__embed = null;
     } else {
-      const This = this.constructor as typeof PaymentCardEmbedElement;
+      const This = this.constructor as typeof PaymentCardEmbed;
       this.__embed = new This.PaymentCardEmbed({ url, ...config });
       this.__embed.mount(root).then(() => (this.__ready = true));
       this.__embed.onsubmit = () => this.dispatchEvent(new CustomEvent('submit'));

src/elements/public/PaymentCardEmbed/index.ts

@@ -0,0 +1,9 @@
+import '@vaadin/vaadin-lumo-styles';
+import '../Spinner/index';
+import '../I18n/index';
+
+import { PaymentCardEmbed } from './PaymentCardEmbed';
+
+customElements.define('foxy-payment-card-embed', PaymentCardEmbed);
+
+export { PaymentCardEmbed };

src/elements/public/TemplateSetForm/TemplateSetForm.stories.ts

@@ -26,10 +26,17 @@ const summary: Summary = {
 
 export default getMeta(summary);
 
-export const Playground = getStory({ ...summary, code: true });
-export const Empty = getStory(summary);
-export const Error = getStory(summary);
-export const Busy = getStory(summary);
+const ext = `
+  payment-method-sets="https://demo.api/hapi/payment_method_sets"
+  language-strings="https://demo.api/hapi/property_helpers/10"
+  locale-codes="https://demo.api/hapi/property_helpers/7"
+  languages="https://demo.api/hapi/property_helpers/6"
+`;
+
+export const Playground = getStory({ ...summary, code: true, ext });
+export const Empty = getStory({ ...summary, ext });
+export const Error = getStory({ ...summary, ext });
+export const Busy = getStory({ ...summary, ext });
 
 Empty.args.href = '';
 Error.args.href = 'https://demo.api/virtual/empty?status=404';

src/elements/public/TemplateSetForm/TemplateSetForm.test.ts

@@ -162,7 +162,7 @@ describe('TemplateSetForm', () => {
 
     const helperHref = 'https://demo.api/hapi/property_helpers/7';
     const helper = await getTestData<Resource<Rels.LocaleCodes>>(helperHref, router);
-    const options = Object.entries(helper.values).map(v => ({ value: v[0], label: v[1] }));
+    const options = Object.entries(helper.values).map(v => ({ value: v[0], rawLabel: v[1] }));
 
     const element = await fixture<Form>(html`
       <foxy-template-set-form

src/elements/public/TemplateSetForm/TemplateSetForm.ts

@@ -118,7 +118,7 @@ export class TemplateSetForm extends Base<Data> {
 
   renderBody(): TemplateResult {
     const localeCodeEntries = Object.entries(this.__localeCodesLoader?.data?.values ?? {});
-    const localeCodes = localeCodeEntries.map(([value, label]) => ({ value, label }));
+    const localeCodes = localeCodeEntries.map(([value, rawLabel]) => ({ value, rawLabel }));
 
     const languageEntries = Object.entries(this.__languagesLoader?.data?.values ?? {});
     const languages = languageEntries.map(([value, label]) => ({ value, label }));

src/elements/public/Transaction/internal/InternalTransactionSummaryControl/InternalTransactionSummaryControl.test.ts

@@ -52,7 +52,7 @@ describe('Transaction', () => {
 
       expect(value).to.exist;
       expect(value).to.have.deep.property('options', {
-        currencyDisplay: 'code',
+        currencyDisplay: 'symbol',
         signDisplay: 'auto',
         amount: '10 USD',
       });

src/elements/public/UpdatePaymentMethodForm/internal/InternalUpdatePaymentMethodFormCcTokenControl/InternalUpdatePaymentMethodFormCcTokenControl.test.ts

@@ -1,4 +1,4 @@
-import type { PaymentCardEmbedElement } from '../../../PaymentCardEmbedElement/PaymentCardEmbedElement';
+import type { PaymentCardEmbed } from '../../../PaymentCardEmbed/PaymentCardEmbed';
 import type { NucleonElement } from '../../../NucleonElement/NucleonElement';
 
 import '../../../NucleonElement/index';
@@ -70,9 +70,7 @@ describe('UpdatePaymentMethodForm', () => {
       expect(button).to.exist;
       expect(button).to.have.attribute('theme', 'primary');
 
-      const embed = control.renderRoot.querySelector(
-        'foxy-payment-card-embed'
-      ) as PaymentCardEmbedElement;
+      const embed = control.renderRoot.querySelector('foxy-payment-card-embed') as PaymentCardEmbed;
 
       const tokenize = stub(embed, 'tokenize').resolves('test-token');
       const edit = stub(nucleon, 'edit');
@@ -113,9 +111,7 @@ describe('UpdatePaymentMethodForm', () => {
       expect(label).to.exist;
       expect(label).to.have.attribute('infer', '');
 
-      const embed = control.renderRoot.querySelector(
-        'foxy-payment-card-embed'
-      ) as PaymentCardEmbedElement;
+      const embed = control.renderRoot.querySelector('foxy-payment-card-embed') as PaymentCardEmbed;
 
       const tokenize = stub(embed, 'tokenize').resolves('test-token');
       const edit = stub(nucleon, 'edit');