refactor(foxy-admin-subscription-form): update self-service links ui

Foxy · Jan 30, 2025 · ac56f89 · ac56f89
1 parent 5335e1e
commit ac56f89
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 65 deletions.
diff --git a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts
@@ -1,12 +1,12 @@
+import type { PropertyDeclarations } from 'lit-element';
 import type { TemplateResult } from 'lit-html';
 import type { Data } from './types';
 
 import { TranslatableMixin } from '../../../mixins/translatable';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-html';
-import { PropertyDeclarations } from 'lit-element';
+import { html, svg } from 'lit-html';
 
 const NS = 'admin-subscription-form';
 const Base = TranslatableMixin(InternalForm, NS);
@@ -97,20 +97,26 @@ export class AdminSubscriptionForm extends Base<Data> {
         >
         </foxy-internal-admin-subscription-form-link-control>
 
-        <p class="text-s text-secondary">
-          <foxy-i18n infer="" key="uoe_hint_text"></foxy-i18n>
-          ${this.uoeSettingsPage
-            ? html`
-                <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=${this.uoeSettingsPage}
-                >
-                  <foxy-i18n infer="" key="uoe_link_text"></foxy-i18n>
-                </a>
-              `
-            : ''}
-        </p>
+        <div
+          class="flex items-start leading-xs text-xs text-secondary"
+          style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+        >
+          ${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="flex-shrink-0" style="width: 1.25em"><path fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z" clip-rule="evenodd" /></svg>`}
+          <p>
+            <foxy-i18n infer="" key="uoe_hint_text"></foxy-i18n>
+            ${this.uoeSettingsPage
+              ? html`
+                  <a
+                    target="_blank"
+                    class="inline-block rounded font-medium text-body cursor-pointer hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
+                    href=${this.uoeSettingsPage}
+                  >
+                    <foxy-i18n infer="" key="uoe_link_text"></foxy-i18n>
+                  </a>
+                `
+              : ''}
+          </p>
+        </div>
       </foxy-internal-summary-control>
 
       ${this.renderTemplateOrSlot()}

diff --git a/...InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.test.ts b/...InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.test.ts
@@ -84,7 +84,6 @@ describe('AdminSubscriptionForm', () => {
 
       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');
     });
@@ -106,7 +105,6 @@ describe('AdminSubscriptionForm', () => {
 
       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&foo=bar');
       expect(link.href).to.equal('https://example.com/sub_token_url?cart=checkout&foo=bar');
       expect(link.target).to.equal('_blank');
     });

diff --git a/...rnal/InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.ts b/...rnal/InternalAdminSubscriptionFormLinkControl/InternalAdminSubscriptionFormLinkControl.ts
@@ -4,7 +4,7 @@ import type { TemplateResult } from 'lit-html';
 
 import { ResponsiveMixin } from '../../../../../mixins/responsive';
 import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
-import { html, svg } from 'lit-html';
+import { html } from 'lit-html';
 
 export class InternalAdminSubscriptionFormLinkControl extends ResponsiveMixin(InternalControl) {
   static get properties(): PropertyDeclarations {
@@ -35,49 +35,28 @@ export class InternalAdminSubscriptionFormLinkControl extends ResponsiveMixin(In
     }
 
     return html`
-      <div class="leading-s sm-flex sm-items-center sm-gap-m">
-        <foxy-i18n
-          class="block whitespace-nowrap text-s text-secondary sm-text-m sm-text-body sm-flex-1 sm-flex-shrink-0"
-          infer=""
-          key="label"
+      <div class="leading-xs flex items-center gap-s">
+        <a
+          target="_blank"
+          class="truncate min-w-0 font-medium rounded cursor-pointer text-primary hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
+          href=${href}
         >
-        </foxy-i18n>
+          <foxy-i18n infer="" key="label"></foxy-i18n>
+        </a>
 
-        <div class="flex items-center gap-xs min-w-0">
-          <a
-            target="_blank"
-            class="min-w-0 flex-1 truncate font-medium rounded cursor-pointer hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
-            style="max-width: 25rem"
-            href=${href}
-          >
-            ${href}
-          </a>
+        <span> &bull; </span>
 
-          <foxy-copy-to-clipboard
-            infer="copy-to-clipboard"
-            class="text-s flex-shrink-0"
-            text=${href}
-          >
-          </foxy-copy-to-clipboard>
-
-          <div
-            class="transition-colors text-tertiary flex-shrink-0 cursor-pointer hover-text-body"
-            id="trigger"
-          >
-            ${svg`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: calc(1em * var(--lumo-line-height-xs)); height: calc(1em * var(--lumo-line-height-xs)); margin-right: -0.12em"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg>`}
-          </div>
-
-          <vcf-tooltip
-            position="bottom"
-            theme="light"
-            style="--lumo-base-color: black; max-width: 30rem"
-            class="mt-s"
-            for="trigger"
-          >
-            <foxy-i18n class="text-s" style="color: white" infer="" key="helper_text"></foxy-i18n>
-          </vcf-tooltip>
-        </div>
+        <foxy-copy-to-clipboard
+          layout="text"
+          theme="tertiary-inline contrast"
+          infer="copy-to-clipboard"
+          text=${href}
+        >
+        </foxy-copy-to-clipboard>
       </div>
+
+      <foxy-i18n class="leading-xs block text-xs text-secondary" infer="" key="helper_text">
+      </foxy-i18n>
     `;
   }
 }
diff --git a/...s/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLinkControl/index.ts b/...s/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLinkControl/index.ts
@@ -1,7 +1,4 @@
-import '@vaadin-component-factory/vcf-tooltip';
-
 import '../../../../internal/InternalControl/index';
-
 import '../../../CopyToClipboard/index';
 import '../../../I18n/index';
 

diff --git a/src/static/translations/admin-subscription-form/en.json b/src/static/translations/admin-subscription-form/en.json
@@ -98,7 +98,7 @@
       "helper_text": "Loads the subscription into the cart. This is useful for changing the products that make up the subscription by loading the subscription and then proceeding to your website.",
       "copy-to-clipboard": {
         "failed_to_copy": "Failed to copy",
-        "click_to_copy": "Copy link",
+        "click_to_copy": "Copy URL",
         "copying": "Copying...",
         "done": "Copied to clipboard"
       }
@@ -108,7 +108,7 @@
       "helper_text": "Loads the subscription into the cart and redirects to checkout. This link is useful for paying past due amounts, modifying address/payment information or transferring to another email address.",
       "copy-to-clipboard": {
         "failed_to_copy": "Failed to copy",
-        "click_to_copy": "Copy link",
+        "click_to_copy": "Copy URL",
         "copying": "Copying...",
         "done": "Copied to clipboard"
       }
@@ -118,7 +118,7 @@
       "helper_text": "Sets the subscription to cancel at the end of the current paid period based on the next transaction date.",
       "copy-to-clipboard": {
         "failed_to_copy": "Failed to copy",
-        "click_to_copy": "Copy link",
+        "click_to_copy": "Copy URL",
         "copying": "Copying...",
         "done": "Copied to clipboard"
       }
@@ -128,7 +128,7 @@
       "helper_text": "Sets the subscription to cancel the following day.",
       "copy-to-clipboard": {
         "failed_to_copy": "Failed to copy",
-        "click_to_copy": "Copy link",
+        "click_to_copy": "Copy URL",
         "copying": "Copying...",
         "done": "Copied to clipboard"
       }