@foxy.io/elements 1.22.1 → 1.23.0-beta.2

package/dist/elements/public/TaxForm/index.js

@@ -2,7 +2,7 @@ import "../../internal/InternalConfirmDialog/index.js";
 import "../../internal/InternalSandbox/index.js";
 import "../Spinner/index.js";
 import "../I18n/index.js";
-import '@vaadin/vaadin-text-field/vaadin-integer-field';
+import '@vaadin/vaadin-text-field/vaadin-number-field';
 import '@vaadin/vaadin-text-field/vaadin-text-field';
 import '@vaadin/vaadin-combo-box';
 import '@vaadin/vaadin-button';

package/dist/elements/public/TaxForm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/TaxForm/index.ts"],"names":[],"mappings":"AAAA,uDAAoD;AACpD,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AACvB,OAAO,gDAAgD,CAAC;AACxD,OAAO,6CAA6C,CAAC;AACrD,OAAO,0BAA0B,CAAC;AAClC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,qBAAkB;AAEpC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\nimport '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport '@vaadin/vaadin-text-field/vaadin-text-field';\nimport '@vaadin/vaadin-combo-box';\nimport '@vaadin/vaadin-button';\nimport '@vaadin/vaadin-select';\n\nimport { TaxForm } from './TaxForm';\n\ncustomElements.define('foxy-tax-form', TaxForm);\n\nexport { TaxForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/TaxForm/index.ts"],"names":[],"mappings":"AAAA,uDAAoD;AACpD,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AACvB,OAAO,+CAA+C,CAAC;AACvD,OAAO,6CAA6C,CAAC;AACrD,OAAO,0BAA0B,CAAC;AAClC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,qBAAkB;AAEpC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\nimport '@vaadin/vaadin-text-field/vaadin-number-field';\nimport '@vaadin/vaadin-text-field/vaadin-text-field';\nimport '@vaadin/vaadin-combo-box';\nimport '@vaadin/vaadin-button';\nimport '@vaadin/vaadin-select';\n\nimport { TaxForm } from './TaxForm';\n\ncustomElements.define('foxy-tax-form', TaxForm);\n\nexport { TaxForm };\n"]}

package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.d.ts

@@ -38,9 +38,6 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
  * @slot google-analytics:before
  * @slot google-analytics:after
  *
- * @slot segment-io:before
- * @slot segment-io:after
- *
  * @slot troubleshooting:before
  * @slot troubleshooting:after
  *
@@ -78,7 +75,7 @@ export declare class TemplateConfigForm extends Base<Data> {
     private __renderConsent;
     private __renderFields;
     private __renderGoogleAnalytics;
-    private __renderSegmentIo;
+    private __renderGoogleTag;
     private __renderTroubleshooting;
     private __renderCustomConfig;
     private __renderHeader;

package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.js

@@ -46,9 +46,6 @@ const Base = ScopedElementsMixin(ResponsiveMixin(ConfigurableMixin(ThemeableMixi
  * @slot google-analytics:before
  * @slot google-analytics:after
  *
- * @slot segment-io:before
- * @slot segment-io:after
- *
  * @slot troubleshooting:before
  * @slot troubleshooting:after
  *
@@ -115,7 +112,7 @@ export class TemplateConfigForm extends Base {
           ${hidden.matches('consent', true) ? '' : this.__renderConsent(json)}
           ${hidden.matches('fields', true) ? '' : this.__renderFields(json)}
           ${hidden.matches('google-analytics', true) ? '' : this.__renderGoogleAnalytics(json)}
-          ${hidden.matches('segment-io', true) ? '' : this.__renderSegmentIo(json)}
+          ${hidden.matches('google-tag', true) ? '' : this.__renderGoogleTag(json)}
           ${hidden.matches('troubleshooting', true) ? '' : this.__renderTroubleshooting(json)}
           ${hidden.matches('custom-config', true) ? '' : this.__renderCustomConfig(json)}
           ${hidden.matches('header', true) ? '' : this.__renderHeader(json)}
@@ -1069,7 +1066,7 @@ export class TemplateConfigForm extends Base {
     __renderGoogleAnalytics(json) {
         const { lang, ns } = this;
         const config = json.analytics_config;
-        const sioConfig = config.segment_io;
+        const gtConfig = config.google_tag;
         const gaConfig = config.google_analytics;
         const isDisabled = !this.in('idle') || this.disabledSelector.matches('google-analytics', true);
         const isReadonly = this.readonlySelector.matches('google-analytics', true);
@@ -1080,6 +1077,13 @@ export class TemplateConfigForm extends Base {
         <x-group frame>
           <span class=${isDisabled ? 'text-disabled' : ''} slot="header">Google Analytics</span>
 
+          <foxy-i18n
+            class="block bg-error-10 text-error font-medium rounded-t p-m"
+            infer=""
+            key="ga_deprecation_notice"
+          >
+          </foxy-i18n>
+
           <div class="p-m space-y-m">
             <vaadin-text-field
               data-testid="google-analytics-field"
@@ -1096,7 +1100,7 @@ export class TemplateConfigForm extends Base {
               @input=${(evt) => {
             gaConfig.account_id = evt.currentTarget.value;
             gaConfig.usage = gaConfig.account_id ? 'required' : 'none';
-            config.usage = gaConfig.account_id || sioConfig.account_id ? 'required' : 'none';
+            config.usage = gaConfig.account_id || gtConfig.account_id ? 'required' : 'none';
             this.edit({ json: JSON.stringify(json) });
         }}
             >
@@ -1130,44 +1134,82 @@ export class TemplateConfigForm extends Base {
       </div>
     `;
     }
-    __renderSegmentIo(json) {
+    __renderGoogleTag(json) {
         const config = json.analytics_config;
-        const sioConfig = config.segment_io;
+        const gtConfig = config.google_tag;
         const gaConfig = config.google_analytics;
-        const isDisabled = !this.in('idle') || this.disabledSelector.matches('segment-io', true);
-        const isReadonly = this.readonlySelector.matches('segment-io', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('google-tag', true);
+        const isReadonly = this.readonlySelector.matches('google-tag', true);
         return html `
-      <div data-testid="segment-io">
-        ${this.renderTemplateOrSlot('segment-io:before')}
+      <div data-testid="google-tag">
+        ${this.renderTemplateOrSlot('google-tag:before')}
 
         <x-group frame>
-          <span class=${isDisabled ? 'text-disabled' : ''} slot="header">Segment.io</span>
+          <span class=${isDisabled ? 'text-disabled' : ''} slot="header">Google Tag</span>
+
+          <div class="p-m space-y-m">
+            <vaadin-text-field
+              data-testid="google-tag-account-id"
+              style="--lumo-border-radius: var(--lumo-border-radius-s)"
+              class="w-full"
+              label=${this.t('gt_account_id')}
+              placeholder="G-123456789"
+              helper-text=${this.t('gt_account_id_explainer')}
+              .value=${live(gtConfig.account_id)}
+              ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
+              clear-button-visible
+              @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
+              @input=${(evt) => {
+            gtConfig.account_id = evt.currentTarget.value;
+            gtConfig.usage = gtConfig.account_id ? 'required' : 'none';
+            config.usage = gtConfig.account_id || gaConfig.account_id ? 'required' : 'none';
+            this.edit({ json: JSON.stringify(json) });
+        }}
+            >
+            </vaadin-text-field>
 
-          <div class="p-m">
             <vaadin-text-field
-              data-testid="segment-io-field"
+              data-testid="google-tag-send-to"
               style="--lumo-border-radius: var(--lumo-border-radius-s)"
               class="w-full"
-              label=${this.t('sio_account_id')}
-              placeholder="MY-WRITE-KEY"
-              helper-text=${this.t('sio_account_id_explainer')}
-              .value=${live(sioConfig.account_id)}
+              label=${this.t('gt_send_to')}
+              placeholder="AW-123456789/sABDCLqU3K2BEJb8cxDE"
+              helper-text=${this.t('gt_send_to_explainer')}
+              .value=${live(gtConfig.send_to)}
               ?disabled=${isDisabled}
               ?readonly=${isReadonly}
               clear-button-visible
               @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
               @input=${(evt) => {
-            sioConfig.account_id = evt.currentTarget.value;
-            sioConfig.usage = sioConfig.account_id ? 'required' : 'none';
-            config.usage = gaConfig.account_id || sioConfig.account_id ? 'required' : 'none';
+            gtConfig.send_to = evt.currentTarget.value;
+            gtConfig.usage = gtConfig.account_id ? 'required' : 'none';
+            config.usage = gtConfig.account_id || gaConfig.account_id ? 'required' : 'none';
             this.edit({ json: JSON.stringify(json) });
         }}
             >
             </vaadin-text-field>
+
+            <p class="text-xs text-secondary">
+              <foxy-i18n infer="" key="gt_usage_notice"></foxy-i18n>
+              <a
+                target="_blank"
+                class="cursor-pointer group text-primary rounded-s font-medium focus-outline-none focus-ring-2 focus-ring-primary-50"
+                href="https://wiki.foxycart.com/v/2.0/analytics#google_tag_ga4_google_ads"
+                rel="nofollow noreferrer noopener"
+              >
+                <foxy-i18n
+                  class="transition-opacity group-hover-opacity-80"
+                  infer=""
+                  key="gt_docs_link"
+                >
+                </foxy-i18n>
+              </a>
+            </p>
           </div>
         </x-group>
 
-        ${this.renderTemplateOrSlot('segment-io:after')}
+        ${this.renderTemplateOrSlot('google-tag:after')}
       </div>
     `;
     }