Update assets

assets/admin/settings.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-element', 'wp-i18n', 'wp-plugins'), 'version' => 'a490d49add9e5706b561');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-element', 'wp-i18n', 'wp-plugins'), 'version' => 'f7cdabceadad6150f3d4');

assets/admin/wizard.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '38ea1047ac37843bfe8c');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '4a1f1d4cadc1c2c93cf8');

languages/gtm-kit.pot

@@ -9,7 +9,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2024-08-12T06:21:52+00:00\n"
+"POT-Creation-Date: 2024-08-12T12:55:07+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.9.0\n"
 "X-Domain: gtm-kit\n"
@@ -994,6 +994,51 @@ msgstr ""
 msgid "The user data is available in the datalayer in 'ecommerce.customer' and a subset of the user data formatted for the 'User-Provided Data' variable is available in 'user-data'."
 msgstr ""
 
+#: assets/admin/settings.js:13
+msgid "Webhooks for server-side tracking"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "In order to use webhooks you must first enable Server-side Tagging by entering a sGTM Container Domain"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Go to sGTM settings"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "In order to use webhooks you must configure you server-side container to handle the webhooks"
+msgstr ""
+
+#: assets/admin/settings.js:13
+#: assets/admin/wizard.js:1
+msgid "Go to GTM Templates"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Send webhooks to server GTM container"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "This option will allow webhooks to be sent to your server GTM container."
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Purchase webhook"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Enable this option to include the permalink structure of the product base, category base, tag base and attribute base."
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Refund webhook"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Enable this option to include the path of cart, checkout, order received and my account page."
+msgstr ""
+
 #: assets/admin/settings.js:13
 msgid "Event customization"
 msgstr ""
@@ -1079,31 +1124,55 @@ msgid "If your product feed generator is adding a prefix to the product IDs, you
 msgstr ""
 
 #: assets/admin/settings.js:13
-msgid "Advanced Settings"
+msgid "Custom CSS Selectors"
 msgstr ""
 
 #: assets/admin/settings.js:13
-msgid "Dequeue the default JavaScript"
+msgid "If your shop is not compatible with the default CSS selectors you can specify your own CSS selectors."
 msgstr ""
 
 #: assets/admin/settings.js:13
-msgid "Enable this option to dequeue the default JavaScript if you plan to create your own JavaScript."
+msgid "Single Product (add_to_wishlist):"
 msgstr ""
 
 #: assets/admin/settings.js:13
-msgid "Include permalink structure"
+msgid "Enter CSS selector"
 msgstr ""
 
 #: assets/admin/settings.js:13
-msgid "Enable this option to include the permalink structure of the product base, category base, tag base and attribute base."
+msgid "Enter the CSS selector that matches button, which should be use to fire the add_to_wishlist event."
 msgstr ""
 
 #: assets/admin/settings.js:13
-msgid "Include path of pages"
+msgid "Product List (select_item):"
 msgstr ""
 
 #: assets/admin/settings.js:13
-msgid "Enable this option to include the path of cart, checkout, order received and my account page."
+msgid "Enter the CSS selector that matches your product list item, which should be use to fire the select_item event."
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Product List (add_to_wishlist):"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Advanced Settings"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Dequeue the default JavaScript"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Enable this option to dequeue the default JavaScript if you plan to create your own JavaScript."
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Include permalink structure"
+msgstr ""
+
+#: assets/admin/settings.js:13
+msgid "Include path of pages"
 msgstr ""
 
 #: assets/admin/settings.js:13
@@ -1371,10 +1440,6 @@ msgstr ""
 msgid "The next step is to configure your Google Tag Manager container. You will find templates for this in the GTM Templates section."
 msgstr ""
 
-#: assets/admin/wizard.js:1
-msgid "Go to GTM Templates"
-msgstr ""
-
 #: assets/admin/wizard.js:1
 msgid "To get the most out of Google Tag Manager with GTM Kit, you should also review the tutorials."
 msgstr ""

src/scss/_tailwind-compiled.scss

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -207,6 +211,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -230,9 +236,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -488,6 +494,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -538,6 +548,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 .gtmkit-container {
@@ -712,6 +726,10 @@ video {
   margin-top: 2rem;
 }
 
+.gtmkit-ml-6 {
+  margin-left: 1.5rem;
+}
+
 .gtmkit-block {
   display: block;
 }
@@ -869,6 +887,10 @@ video {
   gap: 4rem;
 }
 
+.gtmkit-gap-2 {
+  gap: 0.5rem;
+}
+
 .gtmkit-gap-4 {
   gap: 1rem;
 }
@@ -899,6 +921,12 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.gtmkit-space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
 .gtmkit-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1119,6 +1147,11 @@ video {
   text-align: center;
 }
 
+.\!gtmkit-text-lg {
+  font-size: 1.125rem !important;
+  line-height: 1.75rem !important;
+}
+
 .gtmkit-text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1217,10 +1250,35 @@ video {
   opacity: 1;
 }
 
+.gtmkit-opacity-30 {
+  opacity: 0.3;
+}
+
 .gtmkit-opacity-60 {
   opacity: 0.6;
 }
 
+.gtmkit-shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.gtmkit-ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.gtmkit-ring-black {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
+}
+
+.gtmkit-ring-opacity-5 {
+  --tw-ring-opacity: 0.05;
+}
+
 .gtmkit-drop-shadow-md {
   --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);