"use strict";(globalThis.webpackChunkgtm_kit_settings=globalThis.webpackChunkgtm_kit_settings||[]).push([[767],{5767:(t,e,i)=>{i.r(e),i.d(e,{default:()=>_});var a=i(6087),s=i(7723),m=i(9730),g=i(6427),n=i(3951),r=i(7767),l=i(5573),o=i(790),k=(0,o.jsx)(l.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,o.jsx)(l.Path,{d:"M12 4a8 8 0 1 1 .001 16.001A8 8 0 0 1 12 4Zm0 1.5a6.5 6.5 0 1 0-.001 13.001A6.5 6.5 0 0 0 12 5.5Zm.75 11h-1.5V15h1.5v1.5Zm-.445-9.234a3 3 0 0 1 .445 5.89V14h-1.5v-1.25c0-.57.452-.958.917-1.01A1.5 1.5 0 0 0 12 8.75a1.5 1.5 0 0 0-1.5 1.5H9a3 3 0 0 1 3.305-2.984Z"})}),c=i(8621);const d=(0,a.memo)((()=>{const[t,e]=(0,a.useState)(!1);return(0,o.jsxs)("div",{className:"gtmkit-inline-block",children:[(0,o.jsx)(g.Button,{icon:k,onClick:()=>e(!t),"aria-label":(0,s.__)("Help finding GTM Container ID","gtm-kit"),className:"gtmkit-help-button"}),t&&(0,o.jsx)(g.Popover,{position:"middle right",onClose:()=>e(!1),className:"gtmkit-help-popover",children:(0,o.jsxs)("div",{className:"gtmkit-p-4 gtmkit-max-w-[90vw] gtmkit-w-[600px] gtmkit-min-w-[600px]",children:[(0,o.jsx)("h3",{className:"gtmkit-font-bold gtmkit-text-base gtmkit-mb-3",children:(0,s.__)("Where to find your GTM Container ID","gtm-kit")}),(0,o.jsx)("p",{className:"gtmkit-mb-4 gtmkit-text-sm gtmkit-text-color-grey",children:(0,s.__)("You can find your GTM Container ID in Google Tag Manager at the top of your workspace. It looks like GTM-XXXXXXX.","gtm-kit")}),(0,o.jsx)("img",{src:`${c.A.getPluginUrl()}/assets/images/gtm-id-location.png`,alt:(0,s.__)("GTM Container ID location in Google Tag Manager","gtm-kit"),className:"gtmkit-w-full gtmkit-h-auto gtmkit-border gtmkit-rounded"}),(0,o.jsx)("p",{className:"gtmkit-mt-4 gtmkit-text-sm",children:(0,o.jsx)("a",{href:"https://tagmanager.google.com/",target:"_blank",rel:"noreferrer",className:"gtmkit-text-color-primary gtmkit-underline",children:(0,s.__)("Open Google Tag Manager","gtm-kit")})})]})})]})})),x=t=>{if(!t||""===t.trim())return!1;const e=h(t);return/^GTM-[A-Z0-9]+$/i.test(e)},h=t=>{return t?((t,e)=>{if(!t||"string"!=typeof t)return e;const i=t.trim();return i.startsWith(e)?i:e+i})((e=t)&&"string"==typeof e?e.trim().toUpperCase():"","GTM-"):"";var e},p=()=>{const{useSettings:t,updateStateSettings:e,updateSettings:i,isPending:m}=(0,a.useContext)(n.ph),l=(0,r.Zp)();return(0,o.jsx)(o.Fragment,{children:(0,o.jsxs)("div",{className:"md:gtmkit-grid gtmkit-grid-cols-2 gtmkit-gap-16 gtmkit-mb-8",children:[(0,o.jsxs)("div",{className:"",children:[(0,o.jsx)("div",{className:"gtmkit-settings-field-wrap gtmkit-w-full !gtmkit-px-8 ",children:(0,o.jsx)(g.TextControl,{label:(0,s.__)("Container ID","gtm-kit"),placeholder:(0,s.__)("Enter Container ID","gtm-kit"),value:t&&t.general.gtm_id,className:"gtmkit-text-center",onChange:t=>e("general","gtm_id",t),onBlur:t=>{const i=h(t.target.value);i!==t.target.value&&e("general","gtm_id",i)},help:(0,o.jsxs)("div",{className:"gtmkit-inline-flex gtmkit-items-center gtmkit-gap-1",children:[(0,o.jsx)("span",{children:(0,s.__)("Find your Container ID in Google Tag Manager","gtm-kit")}),(0,o.jsx)(d,{})]})})}),(0,o.jsx)("div",{className:"gtmkit-flex gtmkit-mt-12",children:(0,o.jsxs)(g.Button,{variant:"primary",className:"gtmkit-mx-auto gtmkit-rounded-md !gtmkit-py-6 !gtmkit-px-8 gtmkit-text-base disabled:!gtmkit-bg-color-button-disabled disabled:!gtmkit-text-color-grey",onClick:()=>{i(),l("/essential-settings",{replace:!0})},disabled:m||!x(t.general.gtm_id),children:[(0,s.__)("Save and continue","gtm-kit"),m?(0,o.jsx)(g.Spinner,{}):""]})})]}),(0,o.jsxs)("div",{className:"gtmkit-mt-8 gtmkit-border gtmkit-p-6 gtmkit-text-color-grey gtmkit-text-center",children:[(0,o.jsx)("h2",{className:"gtmkit-font-bold gtmkit-text-base gtmkit-mb-4",children:"Need help?"}),(0,o.jsxs)("p",{className:"gtmkit-mb-6",children:[(0,s.__)("Find your GTM container ID on","gtm-kit"),(0,o.jsx)("a",{className:"gtmkit-ml-2 gtmkit-text-color-primary gtmkit-underline",href:"https://tagmanager.google.com/",target:"_blank",rel:"noreferrer",children:"Google Tag Manager"})]}),(0,o.jsxs)("p",{children:[(0,s.__)("It should look something like this:","gtm-kit")," ","GTM-12ZM7SF4"]})]})]})})},u=()=>{const{importSettings:t,isPending:e}=(0,a.useContext)(n.ph),{useInstallData:i}=(0,a.useContext)(m.p6),[r,l]=(0,a.useState)(!0),k=Object.keys(i.import_data)[0],[c,d]=(0,a.useState)(k),x=[];return Object.keys(i.import_data).forEach((t=>{x.push({value:t,label:i.import_data[t].name})})),r?(0,o.jsx)(o.Fragment,{children:(0,o.jsxs)("div",{className:"gtmkit-max-w-lg gtmkit-mx-auto gtmkit-border gtmkit-p-8 gtmkit-my-8 gtmkit-text-left",children:[(0,o.jsx)("h2",{className:"gtmkit-text-lg gtmkit-text-color-heading gtmkit-font-bold",children:(0,s.__)("Would you like to import plugin settings?","gtm-kit")}),(0,o.jsxs)("p",{className:"gtmkit-text-base gtmkit-my-4 gtmkit-text-color-grey",children:[(0,s.__)("We have found the configuration of other plugins in the database.","gtm-kit")," ",(0,s.__)("Would you like to import your settings to GTM Kit?","gtm-kit")]}),(0,o.jsx)(g.RadioControl,{help:(0,s.__)("Select the plugin you want to import settings from.","gtm-kit"),selected:c,options:x,onChange:t=>d(t)}),(0,o.jsxs)("div",{className:"gtmkit-flex gtmkit-mt-12",children:[(0,o.jsxs)(g.Button,{variant:"primary",className:"gtmkit-mx-auto gtmkit-rounded-md !gtmkit-py-6 !gtmkit-px-8 gtmkit-text-base",onClick:()=>{t(c,i.import_data[c]),l(!1)},children:[(0,o.jsx)("span",{className:"gtmkit-text-lg gtmkit-font-bold",children:(0,s.__)("Yes","gtm-kit")}),e?(0,o.jsx)(g.Spinner,{}):""]}),(0,o.jsxs)(g.Button,{variant:"primary",className:"gtmkit-mx-auto gtmkit-rounded-md !gtmkit-py-6 !gtmkit-px-8 gtmkit-text-base",onClick:()=>{l(!1)},children:[(0,o.jsx)("span",{className:"gtmkit-text-lg gtmkit-font-bold",children:(0,s.__)("No","gtm-kit")}),e?(0,o.jsx)(g.Spinner,{}):""]})]})]})}):(0,o.jsx)(p,{})},_=()=>{const{useInstallData:t}=(0,a.useContext)(m.p6),{firstInstall:e}=t,{importAvailable:i}=t;return(0,o.jsxs)("div",{className:"gtmkit-text-center",children:[(0,o.jsx)("h1",{className:"gtmkit-text-4xl gtmkit-font-medium gtmkit-mb-8 gtmkit-text-color-heading",children:(0,s.__)("You've successfully installed GTM Kit!","gtm-kit")}),(0,o.jsx)("div",{className:"gtmkit-max-w-lg gtmkit-mx-auto",children:(0,o.jsx)("p",{className:"gtmkit-text-base gtmkit-mb-4 gtmkit-text-color-grey",children:(0,s.__)("To start collecting data with Google Tag manager you must register the Container ID of your Google Tag Manager container.","gtm-kit")})}),e&&i?(0,o.jsx)(u,{}):(0,o.jsx)(p,{})]})}}}]);