Skip to content

Commit

Permalink
feat(foxy-admin-subscription-form): combine subscription links into d…
Browse files Browse the repository at this point in the history
…ifferent ui
  • Loading branch information
pheekus committed Jan 30, 2025
1 parent 4abd6e0 commit 83877a0
Show file tree
Hide file tree
Showing 10 changed files with 392 additions and 201 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,8 @@ describe('AdminSubscriptionForm', () => {
expect(customElements.get('foxy-transaction')).to.exist;
});

it('imports and defines foxy-internal-admin-subscription-form-load-in-cart-action', () => {
expect(customElements.get('foxy-internal-admin-subscription-form-load-in-cart-action')).to
.exist;
it('imports and defines foxy-internal-admin-subscription-form-link-control', () => {
expect(customElements.get('foxy-internal-admin-subscription-form-link-control')).to.exist;
});

it('imports and defines foxy-internal-admin-subscription-form-error', () => {
Expand Down Expand Up @@ -112,39 +111,6 @@ describe('AdminSubscriptionForm', () => {
expect(form.headerSubtitleOptions).to.deep.equal({ context: 'inactive' });
});

it('renders load in cart action for viewing the subscription in cart', async () => {
const router = createRouter();
const form = await fixture<Form>(html`
<foxy-admin-subscription-form
href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
@fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
>
</foxy-admin-subscription-form>
`);

await waitUntil(() => !!form.data, '', { timeout: 5000 });
await form.requestUpdate();
const action = form.renderRoot.querySelector('[infer="view-action"]');
expect(action?.localName).to.equal('foxy-internal-admin-subscription-form-load-in-cart-action');
});

it('renders load in cart action for cancelling the subscription', async () => {
const router = createRouter();
const form = await fixture<Form>(html`
<foxy-admin-subscription-form
href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
@fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
>
</foxy-admin-subscription-form>
`);

await waitUntil(() => !!form.data, '', { timeout: 5000 });
await form.requestUpdate();
const action = form.renderRoot.querySelector('[infer="cancel-action"]');
expect(action?.localName).to.equal('foxy-internal-admin-subscription-form-load-in-cart-action');
expect(action?.getAttribute('action')).to.equal('cancel');
});

it('renders error message control', async () => {
const router = createRouter();
const form = await fixture<Form>(html`
Expand Down Expand Up @@ -307,6 +273,93 @@ describe('AdminSubscriptionForm', () => {
expect(slot).to.exist;
});

it('renders summary control with self-service links', async () => {
const router = createRouter();
const form = await fixture<Form>(html`
<foxy-admin-subscription-form
href="https://demo.api/hapi/subscriptions/0"
@fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
>
</foxy-admin-subscription-form>
`);

await waitUntil(() => !!form.data, '', { timeout: 5000 });
const control = form.renderRoot.querySelector('[infer="self-service-links"]');
expect(control?.localName).to.equal('foxy-internal-summary-control');
});

it('renders internal link control for loading subscription in cart inside of the self-service links summary control', async () => {
const router = createRouter();
const form = await fixture<Form>(html`
<foxy-admin-subscription-form
href="https://demo.api/hapi/subscriptions/0"
@fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
>
</foxy-admin-subscription-form>
`);

await waitUntil(() => !!form.data, '', { timeout: 5000 });
const summary = form.renderRoot.querySelector('[infer="self-service-links"]');
const control = summary?.querySelector('[infer="load-in-cart"]');

expect(control?.localName).to.equal('foxy-internal-admin-subscription-form-link-control');
expect(control).to.not.have.attribute('search');
});

it('renders internal link control for loading subscription on checkout inside of the self-service links summary control', async () => {
const router = createRouter();
const form = await fixture<Form>(html`
<foxy-admin-subscription-form
href="https://demo.api/hapi/subscriptions/0"
@fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
>
</foxy-admin-subscription-form>
`);

await waitUntil(() => !!form.data, '', { timeout: 5000 });
const summary = form.renderRoot.querySelector('[infer="self-service-links"]');
const control = summary?.querySelector('[infer="load-on-checkout"]');

expect(control?.localName).to.equal('foxy-internal-admin-subscription-form-link-control');
expect(control).to.have.attribute('search', 'cart=checkout');
});

it('renders internal link control for canceling subscription at the end of the billing period inside of the self-service links summary control', async () => {
const router = createRouter();
const form = await fixture<Form>(html`
<foxy-admin-subscription-form
href="https://demo.api/hapi/subscriptions/0"
@fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
>
</foxy-admin-subscription-form>
`);

await waitUntil(() => !!form.data, '', { timeout: 5000 });
const summary = form.renderRoot.querySelector('[infer="self-service-links"]');
const control = summary?.querySelector('[infer="cancel-at-end-of-billing-period"]');

expect(control?.localName).to.equal('foxy-internal-admin-subscription-form-link-control');
expect(control).to.have.attribute('search', 'sub_cancel=next_transaction_date');
});

it('renders internal link control for canceling subscription on the next day inside of the self-service links summary control', async () => {
const router = createRouter();
const form = await fixture<Form>(html`
<foxy-admin-subscription-form
href="https://demo.api/hapi/subscriptions/0"
@fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
>
</foxy-admin-subscription-form>
`);

await waitUntil(() => !!form.data, '', { timeout: 5000 });
const summary = form.renderRoot.querySelector('[infer="self-service-links"]');
const control = summary?.querySelector('[infer="cancel-next-day"]');

expect(control?.localName).to.equal('foxy-internal-admin-subscription-form-link-control');
expect(control).to.have.attribute('search', 'sub_cancel=true');
});

it('renders async list control for attributes', async () => {
const router = createRouter();
const form = await fixture<Form>(html`
Expand Down
47 changes: 34 additions & 13 deletions src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,6 @@ export class AdminSubscriptionForm extends Base<Data> {
return { context: this.data?.is_active ? 'active' : 'inactive' };
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
renderHeaderActions(data: Data): TemplateResult {
return html`
<foxy-internal-admin-subscription-form-load-in-cart-action infer="view-action">
</foxy-internal-admin-subscription-form-load-in-cart-action>
<foxy-internal-admin-subscription-form-load-in-cart-action
action="cancel"
infer="cancel-action"
>
</foxy-internal-admin-subscription-form-load-in-cart-action>
`;
}

renderBody(): TemplateResult {
let transactionsHref: string | undefined;

Expand Down Expand Up @@ -79,6 +66,40 @@ export class AdminSubscriptionForm extends Base<Data> {
${this.renderTemplateOrSlot()}
<foxy-internal-summary-control infer="self-service-links">
<foxy-internal-admin-subscription-form-link-control infer="load-in-cart">
</foxy-internal-admin-subscription-form-link-control>
<foxy-internal-admin-subscription-form-link-control
search="cart=checkout"
infer="load-on-checkout"
>
</foxy-internal-admin-subscription-form-link-control>
<foxy-internal-admin-subscription-form-link-control
search="sub_cancel=next_transaction_date"
infer="cancel-at-end-of-billing-period"
>
</foxy-internal-admin-subscription-form-link-control>
<foxy-internal-admin-subscription-form-link-control
search="sub_cancel=true"
infer="cancel-next-day"
>
</foxy-internal-admin-subscription-form-link-control>
<p class="text-s text-secondary">
<foxy-i18n infer="" key="uoe_hint_text"></foxy-i18n>
<a
target="_blank"
class="inline-block rounded font-medium text-body transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
href="https://admin.foxycart.com"
>
<foxy-i18n infer="" key="uoe_link_text"></foxy-i18n>
</a>
</p>
</foxy-internal-summary-control>
<foxy-internal-async-list-control
infer="attributes"
class="min-w-0"
Expand Down
2 changes: 1 addition & 1 deletion src/elements/public/AdminSubscriptionForm/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import '../AttributeCard/index';
import '../AttributeForm/index';
import '../Transaction/index';

import './internal/InternalAdminSubscriptionFormLoadInCartAction/index';
import './internal/InternalAdminSubscriptionFormLinkControl/index';
import './internal/InternalAdminSubscriptionFormError/index';

import { AdminSubscriptionForm } from './AdminSubscriptionForm';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import type { NucleonElement } from '../../../NucleonElement/NucleonElement';
import type { Data } from '../../types';

import { InternalAdminSubscriptionFormLinkControl as Control } from './InternalAdminSubscriptionFormLinkControl';
import { expect, fixture, html } from '@open-wc/testing';
import { getTestData } from '../../../../../testgen/getTestData';

import '../../../NucleonElement/index';
import './index';

describe('AdminSubscriptionForm', () => {
describe('InternalAdminSubscriptionFormLinkControl', () => {
const OriginalResizeObserver = window.ResizeObserver;

// @ts-expect-error disabling ResizeObserver because it errors in test env
before(() => (window.ResizeObserver = undefined));
after(() => (window.ResizeObserver = OriginalResizeObserver));

it('imports and defines foxy-copy-to-clipboard', () => {
expect(customElements.get('foxy-copy-to-clipboard')).to.exist;
});

it('imports and defines foxy-internal-control', () => {
expect(customElements.get('foxy-internal-control')).to.exist;
});

it('imports and defines vcf-tooltip', () => {
expect(customElements.get('vcf-tooltip')).to.exist;
});

it('imports and defines foxy-i18n', () => {
expect(customElements.get('foxy-i18n')).to.exist;
});

it('defines itself as foxy-internal-admin-subscription-form-link-control', () => {
expect(customElements.get('foxy-internal-admin-subscription-form-link-control')).to.equal(
Control
);
});

it('has a reactive property "search" that defaults to null', () => {
expect(new Control()).to.have.property('search', null);
expect(Control).to.have.deep.nested.property('properties.search', {});
});

it('extends InternalControl', () => {
expect(new Control()).to.be.instanceOf(customElements.get('foxy-internal-control'));
});

it('renders a translatable label', async () => {
const control = await fixture<Control>(html`
<foxy-internal-admin-subscription-form-link-control>
</foxy-internal-admin-subscription-form-link-control>
`);

const label = control.renderRoot.querySelector('foxy-i18n[infer=""][key="label"]');
expect(label).to.exist;
});

it('renders a translatable helper text', async () => {
const control = await fixture<Control>(html`
<foxy-internal-admin-subscription-form-link-control>
</foxy-internal-admin-subscription-form-link-control>
`);

const helperText = control.renderRoot.querySelector('foxy-i18n[infer=""][key="helper_text"]');
expect(helperText).to.exist;
});

it('renders sub_token link from parent form by default', async () => {
const data = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
data._links['fx:sub_token_url'].href = 'https://example.com/sub_token_url';

const nucleon = await fixture<NucleonElement<Data>>(html`
<foxy-nucleon .data=${data}>
<foxy-internal-admin-subscription-form-link-control infer="">
</foxy-internal-admin-subscription-form-link-control>
</foxy-nucleon>
`);

const control = nucleon.firstElementChild as Control;
control.inferProperties();
await control.requestUpdate();

const link = control.renderRoot.querySelector('a') as HTMLAnchorElement;
expect(link).to.exist;
expect(link).to.include.text('https://example.com/sub_token_url');
expect(link.href).to.equal('https://example.com/sub_token_url');
expect(link.target).to.equal('_blank');
});

it('adds search to sub_token link when set', async () => {
const data = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
data._links['fx:sub_token_url'].href = 'https://example.com/sub_token_url';

const nucleon = await fixture<NucleonElement<Data>>(html`
<foxy-nucleon .data=${data}>
<foxy-internal-admin-subscription-form-link-control search="cart=checkout" infer="">
</foxy-internal-admin-subscription-form-link-control>
</foxy-nucleon>
`);

const control = nucleon.firstElementChild as Control;
control.inferProperties();
await control.requestUpdate();

const link = control.renderRoot.querySelector('a') as HTMLAnchorElement;
expect(link).to.exist;
expect(link).to.include.text('https://example.com/sub_token_url?cart=checkout');
expect(link.href).to.equal('https://example.com/sub_token_url?cart=checkout');
expect(link.target).to.equal('_blank');
});

it('renders copy to clipboard button with link url', async () => {
const data = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
data._links['fx:sub_token_url'].href = 'https://example.com/sub_token_url';

const nucleon = await fixture<NucleonElement<Data>>(html`
<foxy-nucleon .data=${data}>
<foxy-internal-admin-subscription-form-link-control search="cart=checkout" infer="">
</foxy-internal-admin-subscription-form-link-control>
</foxy-nucleon>
`);

const control = nucleon.firstElementChild as Control;
control.inferProperties();
await control.requestUpdate();

const button = control.renderRoot.querySelector('foxy-copy-to-clipboard') as HTMLElement;
expect(button).to.exist;
expect(button).to.have.attribute('text', 'https://example.com/sub_token_url?cart=checkout');
});
});
});
Loading

0 comments on commit 83877a0

Please sign in to comment.