"use strict";(globalThis.webpackChunkgtm_kit_settings=globalThis.webpackChunkgtm_kit_settings||[]).push([[176],{237:(t,e,i)=>{i.d(e,{A:()=>l});var r=i(6087),a=i(790);const m=(0,r.memo)((({as:t="h3",title:e="",children:i,className:r="",...m})=>(0,a.jsxs)(t,{...m,className:"gtmkit-font-bold gtmkit-text-lg gtmkit-px-8 gtmkit-py-4 gtmkit-border-b gtmkit-border-color-grey gtmkit-flex gtmkit-items-center "+r,children:[e,i]}))),s=(0,r.memo)((({as:t="div",children:e,className:i="",...r})=>(0,a.jsx)(t,{...r,className:"gtmkit-px-8 gtmkit-py-6 "+i,children:e}))),n=(0,r.forwardRef)((({children:t,className:e="",disabled:i=!1,...r},m)=>(0,a.jsx)("div",{...r,className:"gtmkit-mb-12 gtmkit-border gtmkit-bg-white gtmkit-max-w-screen-lg gtmkit-border-color-grey gtmkit-rounded "+e+(i?"gtmkit-opacity-60":""),ref:m,children:t})));n.Header=m,n.Content=s;const l=n},1176:(t,e,i)=>{i.r(e),i.d(e,{default:()=>k});var r=i(7723),a=i(6087),m=i(6427),s=i(237),n=i(3951),l=i(9730),g=i(9132),o=i(7449),c=i(8621),d=i(790);const k=(0,a.memo)((({templateData:t})=>{const{useSettings:e}=(0,a.useContext)(n.ph),{useSiteData:i}=(0,a.useContext)(l.p6),{hasValidLicense:k}=(0,a.useContext)(g.BN),h=(0,a.useMemo)((()=>e.general.sgtm_domain&&"www.googletagmanager.com"!==e.general.sgtm_domain),[e.general.sgtm_domain]),[u,x]=(0,a.useState)(1),[p,_]=(0,a.useState)({}),[y,b]=(0,a.useState)({}),[j,v]=(0,a.useState)(h?"server-side":"standard"),[f,C]=(0,a.useState)(i.ecommerce?"ecommerce":"lead");(0,a.useEffect)((()=>{if(h){const t={};e.general.sgtm_domain&&!y.serverContainer?.url&&(t.serverContainer={url:e.general.sgtm_domain,containerId:e.general.gtm_id||""}),Object.keys(t).length>0&&b((e=>({...e,...t})))}}),[h,e.general.sgtm_domain,e.general.sgtm_container_identifier,e.general.gtm_id,y.serverContainer?.url]);const N=(0,a.useCallback)((t=>{t<u&&x(t)}),[u]),T=(0,a.useCallback)((t=>{_((e=>({...e,[t]:!e[t]})))}),[]),w=(0,a.useCallback)(((t,e,i)=>{b((r=>({...r,[t]:{...r[t],[e]:i}})))}),[]),S=(0,a.useCallback)((t=>{v(t),"server-side"===t&&!y.serverContainer?.url&&e.general.sgtm_domain&&b((t=>({...t,serverContainer:{url:e.general.sgtm_domain,containerId:e.general.sgtm_container_identifier||""}})))}),[y.serverContainer?.url,e.general.sgtm_domain,e.general.sgtm_container_identifier]),G=(0,a.useCallback)((async(t="WEB")=>{const e={selectedServices:Object.keys(p).filter((t=>p[t])),serviceConfigs:y,gtmType:j,serverContainerUrl:y.serverContainer?.url||"",serverContainerId:y.serverContainer?.containerId||"",ecommerce:"ecommerce"===f,siteType:f,usageContext:t};try{const i=await fetch(c.A.getGeneratorUrl(),{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":c.A.getNonce()},body:JSON.stringify(e)});if(i.ok){const e=await i.blob(),r=window.URL.createObjectURL(e),a=document.createElement("a");a.href=r,a.download=`gtm-template-${t.toLowerCase()}.json`,document.body.appendChild(a),a.click(),window.URL.revokeObjectURL(r),document.body.removeChild(a)}else alert((0,r.__)("Error generating template. Please try again.","gtm-kit"))}catch(t){alert((0,r.__)("Error generating template. Please check your connection and try again.","gtm-kit"))}}),[p,y,j,f]),M=(0,a.useCallback)((()=>t.filter((t=>p[t.id]))),[t,p]),B=(0,a.useMemo)((()=>Object.values(p).some((t=>t))),[p]),R=(0,a.useMemo)((()=>M()),[M]);return t&&0!==t.length?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("h2",{className:"gtmkit-text-2xl gtmkit-font-bold gtmkit-text-color-heading gtmkit-mb-8",children:(0,r.__)("Template Assistant","gtm-kit")}),(0,d.jsxs)(s.A,{children:[(0,d.jsx)(s.A.Header,{title:(0,r.__)("Get your Google Tag Manager container template","gtm-kit")}),(0,d.jsxs)(s.A.Content,{children:[(0,d.jsx)("p",{className:"gtmkit-mb-4",children:(0,r.__)("GTM Kit is sending data to your Google Tag Manger container but you still need to configure Tags, Triggers and Variables in GTM to use the data.","gtm-kit")}),(0,d.jsxs)("p",{className:"gtmkit-mb-4",children:[(0,r.__)("Below you will find the template generator, which will generate a Google Tag Manager template based on you choices.","gtm-kit")," ",(0,r.__)("When you have generated the template you can import it into your Google Tag Manager container and deploy it.","gtm-kit")]}),(0,d.jsx)("div",{className:"gtmkit-mt-8 gtmkit-mb-6",children:(0,d.jsxs)("div",{className:"gtmkit-flex gtmkit-items-center gtmkit-space-x-4",children:[(0,d.jsx)("div",{onClick:()=>N(1),className:"gtmkit-px-4 gtmkit-py-1 gtmkit-rounded-full gtmkit-text-sm "+(1===u?"gtmkit-bg-color-primary gtmkit-text-white":u>1?"gtmkit-bg-gray-300 gtmkit-cursor-pointer hover:gtmkit-bg-gray-400":"gtmkit-bg-gray-200"),style:u>1?{cursor:"pointer"}:{},children:(0,r.__)("1. Configuration Type","gtm-kit")}),(0,d.jsx)("div",{onClick:()=>N(2),className:"gtmkit-px-4 gtmkit-py-1 gtmkit-rounded-full gtmkit-text-sm "+(2===u?"gtmkit-bg-color-primary gtmkit-text-white":u>2?"gtmkit-bg-gray-300 gtmkit-cursor-pointer hover:gtmkit-bg-gray-400":"gtmkit-bg-gray-200"),style:u>2?{cursor:"pointer"}:{},children:(0,r.__)("2. Requirements","gtm-kit")}),(0,d.jsx)("div",{onClick:()=>N(3),className:"gtmkit-px-4 gtmkit-py-1 gtmkit-rounded-full gtmkit-text-sm "+(3===u?"gtmkit-bg-color-primary gtmkit-text-white":u>3?"gtmkit-bg-gray-300 gtmkit-cursor-pointer hover:gtmkit-bg-gray-400":"gtmkit-bg-gray-200"),style:u>3?{cursor:"pointer"}:{},children:(0,r.__)("3. Configure","gtm-kit")}),(0,d.jsx)("div",{className:"gtmkit-px-4 gtmkit-py-1 gtmkit-rounded-full gtmkit-text-sm "+(4===u?"gtmkit-bg-color-primary gtmkit-text-white":"gtmkit-bg-gray-200"),children:(0,r.__)("4. Generate","gtm-kit")})]})}),1===u&&(0,d.jsxs)("div",{children:[(0,d.jsx)("h3",{className:"gtmkit-pt-3 gtmkit-mb-2 gtmkit-font-bold",children:(0,r.__)("Configuration Type","gtm-kit")}),(0,d.jsx)("div",{className:"gtmkit-mb-6",children:(0,d.jsx)(m.RadioControl,{label:(0,r.__)("Select your site type:","gtm-kit"),help:(0,r.__)("Choose whether your site is primarily for e-commerce or lead generation.","gtm-kit"),selected:f,options:[{label:(0,d.jsxs)(d.Fragment,{children:[(0,r.__)("E-commerce","gtm-kit"),i.ecommerce&&(0,d.jsxs)("span",{className:"gtmkit-ml-2",children:["(",(0,r.__)("Recommended based on your setup","gtm-kit"),")"]})]}),value:"ecommerce"},{label:(0,d.jsxs)(d.Fragment,{children:[(0,r.__)("Lead Generation","gtm-kit"),!i.ecommerce&&(0,d.jsxs)("span",{className:"gtmkit-ml-2",children:["(",(0,r.__)("Recommended based on your setup","gtm-kit"),")"]})]}),value:"lead"}],onChange:t=>C(t)})}),(0,d.jsx)("div",{className:"gtmkit-mb-6",children:(0,d.jsx)(m.RadioControl,{label:(0,r.__)("Select your Google Tag Manager setup:","gtm-kit"),help:(0,r.__)("Choose the type of Google Tag Manager setup you are using.","gtm-kit"),selected:j,options:[{label:(0,r.__)("Standard GTM","gtm-kit"),value:"standard"},{label:(0,d.jsxs)(d.Fragment,{children:[(0,r.__)("Server-side GTM","gtm-kit"),h&&(0,d.jsxs)("span",{className:"gtmkit-ml-2",children:["(",(0,r.__)("It looks like you are using server-side GTM","gtm-kit"),")"]})]}),value:"server-side"}],onChange:S})}),(0,d.jsx)("div",{className:"gtmkit-mt-6 gtmkit-flex gtmkit-space-x-4",children:(0,d.jsx)(m.Button,{isPrimary:!0,onClick:()=>x(2),children:(0,r.__)("Continue to Service Selection","gtm-kit")})})]}),2===u&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("h3",{className:"gtmkit-pt-3 gtmkit-mb-2 gtmkit-font-bold",children:(0,r.__)("Specify your tracking needs","gtm-kit")}),(0,d.jsx)("p",{className:"gtmkit-mb-4",children:(0,r.__)("Select the services that you want to send tracking data to.","gtm-kit")}),(0,d.jsx)("div",{className:"gtmkit-grid gtmkit-grid-cols-3 gtmkit-gap-4",children:t.map((t=>(0,d.jsxs)("div",{className:"gtmkit-border gtmkit-border-gray-200 gtmkit-rounded-lg gtmkit-p-4",children:[(0,d.jsx)(m.CheckboxControl,{label:t.title,help:t.collections.filter((t=>"all"===t.type||t.type===f)).map((t=>(0,d.jsx)("div",{children:t.title},t.id))),disabled:t.premium&&!k||t.sgtm&&!h,checked:p[t.id]||!1,onChange:()=>T(t.id)}),(0,d.jsxs)("div",{className:"gtmkit-flex gtmkit-gap-x-2 gtmkit-ml-6",children:[t.premium&&!k&&(0,d.jsx)("a",{className:"gtmkit-w-fit gtmkit-px-3 gtmkit-py-0.5 gtmkit-rounded-full gtmkit-text-xs gtmkit-bg-gray-200 gtmkit-whitespace-nowrap",href:(0,o.a)("upgrades","upgrades"),children:(0,r.__)("Premium","gtm-kit")}),t.sgtm&&!h&&(0,d.jsx)("a",{className:"gtmkit-w-fit gtmkit-px-3 gtmkit-py-0.5 gtmkit-rounded-full gtmkit-text-xs gtmkit-bg-gray-200 gtmkit-whitespace-nowrap",href:(0,o.a)("general","container?focus=sgtm"),children:(0,r.__)("Requires sGTM","gtm-kit")})]})]},t.id)))}),(0,d.jsxs)("div",{className:"gtmkit-mt-6 gtmkit-flex gtmkit-space-x-4",children:[(0,d.jsx)(m.Button,{isSecondary:!0,onClick:()=>x(1),children:(0,r.__)("Back","gtm-kit")}),(0,d.jsx)(m.Button,{isPrimary:!0,disabled:!B,onClick:()=>x(3),children:(0,r.__)("Continue to Configuration","gtm-kit")})]})]}),3===u&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("h3",{className:"gtmkit-pt-3 gtmkit-mb-2 gtmkit-font-bold",children:(0,r.__)("Input your unique values","gtm-kit")}),(0,d.jsx)("p",{className:"gtmkit-mb-8",children:(0,r.__)("These values are optional and you can edit them in your container at any time.","gtm-kit")}),(0,d.jsxs)("div",{className:"gtmkit-space-y-6",children:["server-side"===j&&(0,d.jsxs)("div",{className:"gtmkit-border gtmkit-border-gray-200 gtmkit-rounded-lg gtmkit-px-6 gtmkit-py-4",children:[(0,d.jsx)("h4",{className:"gtmkit-font-semibold gtmkit-mb-3",children:(0,r.__)("Server-side GTM Configuration","gtm-kit")}),(0,d.jsx)(m.TextControl,{label:(0,r.__)("Server Container URL","gtm-kit"),placeholder:(0,r.__)("Enter your server container URL","gtm-kit"),value:y.serverContainer?.url||e.general.sgtm_domain||"",onChange:t=>w("serverContainer","url",t)}),(0,d.jsx)(m.TextControl,{label:(0,r.__)("Server Container ID","gtm-kit"),placeholder:(0,r.__)("GTM-XXXXX","gtm-kit"),help:(0,r.__)("Enter your server-side GTM container ID (e.g., GTM-XXXXXX)","gtm-kit"),value:y.serverContainer?.containerId||e.general.sgtm_container_identifier||"",onChange:t=>w("serverContainer","containerId",t)})]}),R.map((t=>{const e=t.collections.filter((t=>"all"===t.type||t.type===f)).flatMap((t=>t.templates.filter((t=>t.fields&&Object.keys(t.fields).length>0)))),i=new Map;e.forEach((t=>{const e=t.fields;e.key&&(i.has(e.key)||i.set(e.key,e)),Array.isArray(e)&&e.forEach((t=>{i.has(t.key)||i.set(t.key,t)}))}));const a=Array.from(i.values());return(0,d.jsxs)("div",{className:"gtmkit-border gtmkit-border-gray-200 gtmkit-rounded-lg gtmkit-px-6 gtmkit-py-4",children:[(0,d.jsx)("h4",{className:"gtmkit-font-semibold gtmkit-mb-3",children:t.title}),0===a.length?(0,d.jsx)("p",{className:"gtmkit-text-gray-600 gtmkit-italic",children:(0,r.__)("No configuration required","gtm-kit")}):(0,d.jsx)("div",{className:"gtmkit-space-y-4",children:a.map((e=>(0,d.jsx)(m.TextControl,{label:e.label,placeholder:e.placeholder,value:y[t.id]?.[e.key]||"",onChange:i=>w(t.id,e.key,i)},`${t.id}-${e.key}`)))})]},t.id)}))]}),(0,d.jsxs)("div",{className:"gtmkit-mt-6 gtmkit-flex gtmkit-space-x-4",children:[(0,d.jsx)(m.Button,{isSecondary:!0,onClick:()=>x(2),children:(0,r.__)("Back","gtm-kit")}),(0,d.jsx)(m.Button,{isPrimary:!0,onClick:()=>x(4),children:(0,r.__)("Continue to Generate","gtm-kit")})]})]}),4===u&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("h3",{className:"gtmkit-pt-3 gtmkit-mb-2 gtmkit-font-bold",children:(0,r.__)("Download and import the template","gtm-kit")}),(0,d.jsx)("p",{className:"gtmkit-mb-4",children:(0,r.__)("Review your configuration and generate the GTM template.","gtm-kit")}),(0,d.jsxs)("div",{className:"gtmkit-bg-gray-50 gtmkit-px-6 gtmkit-py-4 gtmkit-rounded-lg gtmkit-mb-4",children:[(0,d.jsx)("h4",{className:"gtmkit-font-semibold gtmkit-mb-2",children:(0,r.__)("Google Tag Manager configuration:","gtm-kit")}),(0,d.jsx)("p",{className:"gtmkit-mb-8",children:"server-side"===j?(0,r.__)("Client-Side + Server-Side GTM","gtm-kit"):(0,r.__)("Standard Client-Side GTM","gtm-kit")}),(0,d.jsx)("h4",{className:"gtmkit-font-semibold gtmkit-mb-2",children:(0,r.__)("Selected Services:","gtm-kit")}),(0,d.jsx)("ul",{className:"gtmkit-text-sm gtmkit-list-disc gtmkit-list-inside gtmkit-space-y-1",children:R.map((t=>(0,d.jsx)("li",{children:t.title},t.id)))})]}),(0,d.jsxs)("div",{className:"gtmkit-mt-6 gtmkit-flex gtmkit-space-x-4",children:[(0,d.jsx)(m.Button,{isSecondary:!0,onClick:()=>x(3),children:(0,r.__)("Back","gtm-kit")}),"server-side"===j?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(m.Button,{isPrimary:!0,onClick:()=>G("WEB"),children:(0,r.__)("Download Web Template","gtm-kit")}),(0,d.jsx)(m.Button,{isPrimary:!0,onClick:()=>G("SERVER"),children:(0,r.__)("Download Server Template","gtm-kit")})]}):(0,d.jsx)(m.Button,{isPrimary:!0,onClick:()=>G("WEB"),children:(0,r.__)("Generate & Download Template","gtm-kit")})]}),(0,d.jsxs)("p",{className:"gtmkit-mt-12 gtmkit-mb-4",children:[(0,r.__)("Please read the guide on how to use the import files and configure GTM.","gtm-kit"),(0,d.jsx)("a",{className:"gtmkit-ml-2 gtmkit-text-color-primary gtmkit-font-semibold hover:gtmkit-underline",href:"https://jump.gtmkit.com/link/5-7DD1E",target:"_blank",rel:"noreferrer",children:(0,r.__)("Read the guide","gtm-kit")})]})]})]})]})]}):(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("h2",{className:"gtmkit-text-2xl gtmkit-font-bold gtmkit-text-color-heading gtmkit-mb-8",children:(0,r.__)("Template Assistant","gtm-kit")}),(0,d.jsxs)(s.A,{children:[(0,d.jsx)(s.A.Header,{title:(0,r.__)("Get your Google Tag Manager container template","gtm-kit")}),(0,d.jsx)(s.A.Content,{children:(0,d.jsxs)("div",{className:"gtmkit-bg-yellow-50 gtmkit-border gtmkit-border-yellow-200 gtmkit-rounded-lg gtmkit-p-6 gtmkit-text-center",children:[(0,d.jsx)("p",{className:"gtmkit-text-lg gtmkit-font-semibold gtmkit-mb-2",children:(0,r.__)("Template service is currently unavailable","gtm-kit")}),(0,d.jsx)("p",{className:"gtmkit-text-gray-600",children:(0,r.__)("The template service is not available at the moment. Please try again later.","gtm-kit")})]})})]})]})}))}}]);