|
1
|
|
-(()=>{"use strict";var e={n:t=>{var i=t&&t.__esModule?()=>t.default:()=>t;return e.d(i,{a:i}),i},d:(t,i)=>{for(var r in i)e.o(i,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:i[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const t=window.wp.element,i=window.wp.apiFetch;var r=e.n(i);const l=window.wp.components,o=window.wp.i18n,n=window.ReactJSXRuntime,a={none:null,star:(0,n.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,n.jsx)("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"})}),fire:(0,n.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,n.jsx)("path",{d:"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"})}),lightning:(0,n.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,n.jsx)("polygon",{points:"13 2 3 14 12 14 11 22 21 10 12 10 13 2"})}),tag:(0,n.jsxs)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,n.jsx)("path",{d:"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"}),(0,n.jsx)("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]}),crown:(0,n.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,n.jsx)("path",{d:"m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14"})}),percent:(0,n.jsxs)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,n.jsx)("line",{x1:"19",y1:"5",x2:"5",y2:"19"}),(0,n.jsx)("circle",{cx:"6.5",cy:"6.5",r:"2.5"}),(0,n.jsx)("circle",{cx:"17.5",cy:"17.5",r:"2.5"})]}),award:(0,n.jsxs)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,n.jsx)("circle",{cx:"12",cy:"8",r:"7"}),(0,n.jsx)("polyline",{points:"8.21 13.89 7 23 12 20 17 23 15.79 13.88"})]})},s=({label:e,onUpdate:i,onRemove:r})=>{const[s,d]=(0,t.useState)(!1),c=(t,r)=>i(e.id,{...e,[t]:r}),p={backgroundColor:"outline"===e.border_style||"dashed"===e.border_style?"transparent":e.background_color||"#2271b1",color:e.text_color||"#ffffff",padding:`${void 0!==e.padding_y?e.padding_y:2}px ${void 0!==e.padding_x?e.padding_x:8}px`,display:"inline-flex",alignItems:"center",gap:"4px",justifyContent:"center",fontSize:`${e.font_size||12}px`,fontWeight:"600",textTransform:"uppercase",transition:"all 0.2s ease",borderRadius:`${void 0!==e.border_radius?e.border_radius:4}px`,border:"dashed"===e.border_style?`${e.border_width||2}px dashed ${e.border_color||e.text_color||"#2271b1"}`:"outline"===e.border_style?`${e.border_width||2}px solid ${e.border_color||e.text_color||"#2271b1"}`:e.border_width>0?`${e.border_width}px solid ${e.border_color||"#000000"}`:"none",width:"auto",height:"auto"};return(0,n.jsxs)("div",{style:{background:"#fff",border:"1px solid #e2e4e7",borderRadius:"8px",marginBottom:"16px",display:"flex",overflow:"hidden",boxShadow:"0 1px 3px rgba(0,0,0,0.04)"},children:[(0,n.jsxs)("div",{style:{flex:1,padding:"20px"},children:[(0,n.jsxs)("div",{style:{display:"flex",flexWrap:"wrap",gap:"20px",alignItems:"flex-start"},children:[(0,n.jsx)("style",{children:'\n\t\t\t\t\t\t.tier-label-field { flex: 1 1 160px; min-width: 0; }\n\t\t\t\t\t\t.tier-label-field select,\n\t\t\t\t\t\t.tier-label-field input[type="text"] { min-width: 0 !important; width: 100% !important; }\n\t\t\t\t\t\t.tier-color-picker { padding: 0; border: none; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; background: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset; }\n\t\t\t\t\t\t.tier-color-picker::-webkit-color-swatch-wrapper { padding: 0; }\n\t\t\t\t\t\t.tier-color-picker::-webkit-color-swatch { border: none; border-radius: 6px; }\n\t\t\t\t\t\t.tier-remove-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: #d63638; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; opacity: 0.5; transition: opacity 0.2s; border-radius: 4px; }\n\t\t\t\t\t\t.tier-remove-btn:hover { opacity: 1; background: rgba(214, 54, 56, 0.1); }\n\t\t\t\t\t\t'}),(0,n.jsx)("div",{className:"tier-label-field",children:(0,n.jsx)(l.TextControl,{label:(0,o.__)("Title","tier-pricing-table"),value:e.title,onChange:e=>c("title",e),placeholder:(0,o.__)("Enter title","tier-pricing-table")})}),(0,n.jsx)("div",{className:"tier-label-field",style:{flexBasis:"120px"},children:(0,n.jsx)(l.SelectControl,{label:(0,o.__)("Style Preset","tier-pricing-table"),value:e.style||"rounded",options:[{label:(0,o.__)("Square","tier-pricing-table"),value:"square"},{label:(0,o.__)("Rounded","tier-pricing-table"),value:"rounded"},{label:(0,o.__)("Pill","tier-pricing-table"),value:"pill"},{label:(0,o.__)("Outline","tier-pricing-table"),value:"outline"},{label:(0,o.__)("Dashed","tier-pricing-table"),value:"dashed"}],onChange:t=>(t=>{let r={style:t,font_size:12,padding_x:8,padding_y:2,border_width:0,border_style:"solid"};"square"===t?r.border_radius=0:"rounded"===t?r.border_radius=4:"pill"===t?r.border_radius=50:"outline"===t?(r.border_style="outline",r.border_width=2):"dashed"===t&&(r.border_style="dashed",r.border_width=2),i(e.id,{...e,...r})})(t)})}),(0,n.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100px"},children:(0,n.jsx)(l.SelectControl,{label:(0,o.__)("Icon","tier-pricing-table"),value:e.icon||"",options:[{label:(0,o.__)("None","tier-pricing-table"),value:""},{label:(0,o.__)("Star","tier-pricing-table"),value:"star"},{label:(0,o.__)("Fire","tier-pricing-table"),value:"fire"},{label:(0,o.__)("Lightning","tier-pricing-table"),value:"lightning"},{label:(0,o.__)("Tag","tier-pricing-table"),value:"tag"},{label:(0,o.__)("Crown","tier-pricing-table"),value:"crown"},{label:(0,o.__)("Percent","tier-pricing-table"),value:"percent"},{label:(0,o.__)("Award","tier-pricing-table"),value:"award"}],onChange:e=>c("icon",e)})}),(0,n.jsxs)("div",{style:{flex:"0 0 auto",display:"flex",gap:"16px"},children:[(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{style:{marginBottom:"8px",fontSize:"13px",color:"#1e1e1e"},children:(0,o.__)("Bg Color","tier-pricing-table")}),(0,n.jsx)("input",{type:"color",value:e.background_color||"#2271b1",onChange:e=>c("background_color",e.target.value),className:"tier-color-picker"})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{style:{marginBottom:"8px",fontSize:"13px",color:"#1e1e1e"},children:(0,o.__)("Text Color","tier-pricing-table")}),(0,n.jsx)("input",{type:"color",value:e.text_color||"#ffffff",onChange:e=>c("text_color",e.target.value),className:"tier-color-picker"})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{style:{marginBottom:"8px",fontSize:"13px",color:"#1e1e1e"},children:(0,o.__)("Border","tier-pricing-table")}),(0,n.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[(0,n.jsx)("input",{type:"color",value:e.border_color||"#000000",onChange:e=>c("border_color",e.target.value),className:"tier-color-picker"}),(0,n.jsx)(l.Button,{isSmall:!0,variant:"tertiary",onClick:()=>c("border_color",""),style:{padding:"0 4px",minWidth:"auto",height:"36px",color:e.border_color?"#d63638":"#a7aaad"},title:(0,o.__)("Clear border color","tier-pricing-table"),children:"×"})]})]})]})]}),(0,n.jsxs)("div",{style:{marginTop:"16px"},children:[(0,n.jsx)(l.Button,{variant:"link",onClick:()=>d(!s),style:{textDecoration:"none"},children:s?(0,o.__)("Hide Advanced Settings","tier-pricing-table"):(0,o.__)("Show Advanced Settings","tier-pricing-table")}),s&&(0,n.jsxs)("div",{style:{marginTop:"16px",display:"flex",flexWrap:"wrap",gap:"20px",padding:"16px",background:"#f8f9fa",borderRadius:"6px",border:"1px solid #e2e4e7"},children:[(0,n.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,n.jsx)(l.RangeControl,{label:(0,o.__)("Font Size (px)","tier-pricing-table"),value:e.font_size||12,onChange:e=>c("font_size",e),min:8,max:20})}),(0,n.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,n.jsx)(l.RangeControl,{label:(0,o.__)("Border Width (px)","tier-pricing-table"),value:e.border_width||0,onChange:e=>c("border_width",e),min:0,max:10})}),(0,n.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,n.jsx)(l.RangeControl,{label:(0,o.__)("Padding Horizontal (px)","tier-pricing-table"),value:void 0!==e.padding_x?e.padding_x:8,onChange:e=>c("padding_x",e),min:0,max:15})}),(0,n.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,n.jsx)(l.RangeControl,{label:(0,o.__)("Padding Vertical (px)","tier-pricing-table"),value:void 0!==e.padding_y?e.padding_y:2,onChange:e=>c("padding_y",e),min:0,max:15})}),(0,n.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,n.jsx)(l.RangeControl,{label:(0,o.__)("Border Radius (px)","tier-pricing-table"),value:void 0!==e.border_radius?e.border_radius:4,onChange:e=>c("border_radius",e),min:0,max:50})}),(0,n.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,n.jsx)(l.TextControl,{label:(0,o.__)("Extra CSS Class","tier-pricing-table"),value:e.css_class,onChange:e=>c("css_class",e),placeholder:(0,o.__)("e.g., my-custom-class","tier-pricing-table")})})]})]})]}),(0,n.jsxs)("div",{style:{width:"180px",background:"#f8f9fa",borderLeft:"1px solid #e2e4e7",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"24px",position:"relative"},children:[(0,n.jsxs)("div",{style:p,className:e.css_class,children:[e.icon&&a[e.icon]&&a[e.icon],e.title||(0,o.__)("Preview","tier-pricing-table")]}),(0,n.jsx)("button",{className:"tier-remove-btn",onClick:()=>r(e.id),title:(0,o.__)("Remove label","tier-pricing-table"),children:(0,n.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,n.jsx)("path",{d:"M18 6 6 18"}),(0,n.jsx)("path",{d:"m6 6 12 12"})]})})]})]})},d=()=>{const[e,i]=(0,t.useState)([]),[a,d]=(0,t.useState)(!0),[c,p]=(0,t.useState)(!1),[x,g]=(0,t.useState)("");(0,t.useEffect)(()=>{r()({path:"tier-pricing-table/features/tier-labels/v1/labels"}).then(e=>{i(Array.isArray(e)?e:[]),d(!1)})},[]);const b=()=>{i([...e,{id:"id_"+Math.random().toString(36).substr(2,9),title:(0,o.__)("New Label","tier-pricing-table"),background_color:"#2271b1",text_color:"#ffffff",border_color:"",style:"rounded",border_style:"solid",css_class:"",font_size:12,border_width:0,padding_x:8,padding_y:2,border_radius:4,icon:""}])};return a?(0,n.jsx)(l.Flex,{align:"center",justify:"center",style:{height:"200px"},children:(0,n.jsx)(l.Spinner,{})}):(0,n.jsxs)("div",{className:"tier-labels-settings",style:{marginTop:"20px",position:"relative"},children:[x&&(0,n.jsxs)("div",{style:{position:"fixed",bottom:"40px",left:"50%",transform:"translateX(-50%)",background:"#1d2327",color:"#fff",padding:"12px 24px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0,0,0,0.15)",zIndex:9999,fontSize:"14px",fontWeight:500,display:"flex",alignItems:"center",gap:"8px",animation:"tierToastSlideUp 0.3s ease-out forwards"},children:[(0,n.jsx)("style",{children:"\n\t\t\t\t\t\t@keyframes tierToastSlideUp {\n\t\t\t\t\t\t\tfrom { opacity: 0; transform: translate(-50%, 20px); }\n\t\t\t\t\t\t\tto { opacity: 1; transform: translate(-50%, 0); }\n\t\t\t\t\t\t}\n\t\t\t\t\t\t"}),(0,n.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"#46b450",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,n.jsx)("path",{d:"M20 6 9 17l-5-5"})}),x]}),0===e.length&&(0,n.jsxs)("div",{style:{padding:"40px",textAlign:"center",background:"#f8f9fa",border:"1px dashed #c3c4c7",borderRadius:"8px",marginBottom:"24px",color:"#50575e"},children:[(0,n.jsxs)("svg",{style:{margin:"0 auto 12px",color:"#a7aaad",display:"block"},width:"32",height:"32",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,n.jsx)("path",{d:"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"}),(0,n.jsx)("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]}),(0,n.jsx)("h3",{style:{margin:"0 0 8px",fontSize:"16px",color:"#1d2327",fontWeight:600},children:(0,o.__)("No Labels Created","tier-pricing-table")}),(0,n.jsx)("p",{style:{margin:"0 0 8px",fontSize:"14px"},children:(0,o.__)("Create your first custom tier label to highlight special pricing offers.","tier-pricing-table")}),(0,n.jsx)("p",{style:{margin:0,fontSize:"13px",color:"#646970",maxWidth:"500px",marginLeft:"auto",marginRight:"auto"},children:(0,o.__)("Once created, you can assign your labels to specific pricing tiers when editing a product.","tier-pricing-table")}),(0,n.jsx)("p",{}),(0,n.jsx)(l.Button,{variant:"primary",onClick:b,children:(0,o.__)("Add your first label","tier-pricing-table")})]}),e.map(t=>(0,n.jsx)(s,{label:t,onRemove:t=>i(e.filter(e=>e.id!==t)),onUpdate:(t,r)=>i(e.map(e=>e.id===t?r:e))},t.id)),(0,n.jsxs)(l.Flex,{gap:"4",style:{marginTop:"20px"},children:[(0,n.jsx)(l.Button,{variant:"primary",onClick:()=>{p(!0),r()({path:"tier-pricing-table/features/tier-labels/v1/labels",method:"POST",data:{labels:e}}).then(()=>{p(!1),g((0,o.__)("Labels saved successfully!","tier-pricing-table")),setTimeout(()=>g(""),3e3)})},isBusy:c,disabled:c,children:c?(0,o.__)("Saving...","tier-pricing-table"):(0,o.__)("Save Labels","tier-pricing-table")}),(0,n.jsx)(l.Button,{variant:"secondary",onClick:b,children:(0,o.__)("+ Add Label","tier-pricing-table")})]})]})};document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("tiered-pricing__feature__tier-labels");e&&(0,t.createRoot)(e).render((0,n.jsx)(d,{}))})})(); |
|
1
|
+(()=>{"use strict";var e={n:t=>{var i=t&&t.__esModule?()=>t.default:()=>t;return e.d(i,{a:i}),i},d:(t,i)=>{for(var r in i)e.o(i,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:i[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const t=window.wp.element,i=window.wp.apiFetch;var r=e.n(i);const l=window.wp.components,n=window.wp.i18n,o=window.ReactJSXRuntime,d={none:null,star:(0,o.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,o.jsx)("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"})}),fire:(0,o.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,o.jsx)("path",{d:"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"})}),lightning:(0,o.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,o.jsx)("polygon",{points:"13 2 3 14 12 14 11 22 21 10 12 10 13 2"})}),tag:(0,o.jsxs)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,o.jsx)("path",{d:"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"}),(0,o.jsx)("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]}),crown:(0,o.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,o.jsx)("path",{d:"m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14"})}),percent:(0,o.jsxs)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,o.jsx)("line",{x1:"19",y1:"5",x2:"5",y2:"19"}),(0,o.jsx)("circle",{cx:"6.5",cy:"6.5",r:"2.5"}),(0,o.jsx)("circle",{cx:"17.5",cy:"17.5",r:"2.5"})]}),award:(0,o.jsxs)("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,o.jsx)("circle",{cx:"12",cy:"8",r:"7"}),(0,o.jsx)("polyline",{points:"8.21 13.89 7 23 12 20 17 23 15.79 13.88"})]})},a=({label:e,onUpdate:i,onRemove:r})=>{const[a,s]=(0,t.useState)(!1),p=(t,r)=>i(e.id,{...e,[t]:r}),c={backgroundColor:"outline"===e.border_style||"dashed"===e.border_style?"transparent":e.background_color||"#2271b1",color:e.text_color||"#ffffff",padding:`${void 0!==e.padding_y?e.padding_y:2}px ${void 0!==e.padding_x?e.padding_x:8}px`,display:"inline-flex",alignItems:"center",gap:"4px",justifyContent:"center",fontSize:`${e.font_size||12}px`,fontWeight:"600",textTransform:"uppercase",transition:"all 0.2s ease",borderRadius:`${void 0!==e.border_radius?e.border_radius:4}px`,border:"dashed"===e.border_style?`${e.border_width||2}px dashed ${e.border_color||e.text_color||"#2271b1"}`:"outline"===e.border_style?`${e.border_width||2}px solid ${e.border_color||e.text_color||"#2271b1"}`:e.border_width>0?`${e.border_width}px solid ${e.border_color||"#000000"}`:"none",width:"auto",height:"auto"};return(0,o.jsxs)("div",{style:{background:"#fff",border:"1px solid #e2e4e7",borderRadius:"8px",marginBottom:"16px",display:"flex",overflow:"hidden",boxShadow:"0 1px 3px rgba(0,0,0,0.04)"},children:[(0,o.jsxs)("div",{style:{flex:1,padding:"20px"},children:[(0,o.jsxs)("div",{style:{display:"flex",flexWrap:"wrap",gap:"20px",alignItems:"flex-start"},children:[(0,o.jsx)("style",{children:'\n\t\t\t\t\t\t.tier-label-field { flex: 1 1 160px; min-width: 0; }\n\t\t\t\t\t\t.tier-label-field select,\n\t\t\t\t\t\t.tier-label-field input[type="text"] { min-width: 0 !important; width: 100% !important; }\n\t\t\t\t\t\t.tier-color-picker { padding: 0; border: none; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; background: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset; }\n\t\t\t\t\t\t.tier-color-picker::-webkit-color-swatch-wrapper { padding: 0; }\n\t\t\t\t\t\t.tier-color-picker::-webkit-color-swatch { border: none; border-radius: 6px; }\n\t\t\t\t\t\t.tier-remove-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: #d63638; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; opacity: 0.5; transition: opacity 0.2s; border-radius: 4px; }\n\t\t\t\t\t\t.tier-remove-btn:hover { opacity: 1; background: rgba(214, 54, 56, 0.1); }\n\t\t\t\t\t\t'}),(0,o.jsx)("div",{className:"tier-label-field",children:(0,o.jsx)(l.TextControl,{label:(0,n.__)("Title","tier-pricing-table"),value:e.title,onChange:e=>p("title",e),placeholder:(0,n.__)("Enter title","tier-pricing-table")})}),(0,o.jsx)("div",{className:"tier-label-field",style:{flexBasis:"120px"},children:(0,o.jsx)(l.SelectControl,{label:(0,n.__)("Style Preset","tier-pricing-table"),value:e.style||"rounded",options:[{label:(0,n.__)("Square","tier-pricing-table"),value:"square"},{label:(0,n.__)("Rounded","tier-pricing-table"),value:"rounded"},{label:(0,n.__)("Pill","tier-pricing-table"),value:"pill"},{label:(0,n.__)("Outline","tier-pricing-table"),value:"outline"},{label:(0,n.__)("Dashed","tier-pricing-table"),value:"dashed"}],onChange:t=>(t=>{let r={style:t,font_size:12,padding_x:8,padding_y:2,border_width:0,border_style:"solid"};"square"===t?r.border_radius=0:"rounded"===t?r.border_radius=4:"pill"===t?r.border_radius=50:"outline"===t?(r.border_style="outline",r.border_width=2):"dashed"===t&&(r.border_style="dashed",r.border_width=2),i(e.id,{...e,...r})})(t)})}),(0,o.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100px"},children:(0,o.jsx)(l.SelectControl,{label:(0,n.__)("Icon","tier-pricing-table"),value:e.icon||"",options:[{label:(0,n.__)("None","tier-pricing-table"),value:""},{label:(0,n.__)("Star","tier-pricing-table"),value:"star"},{label:(0,n.__)("Fire","tier-pricing-table"),value:"fire"},{label:(0,n.__)("Lightning","tier-pricing-table"),value:"lightning"},{label:(0,n.__)("Tag","tier-pricing-table"),value:"tag"},{label:(0,n.__)("Crown","tier-pricing-table"),value:"crown"},{label:(0,n.__)("Percent","tier-pricing-table"),value:"percent"},{label:(0,n.__)("Award","tier-pricing-table"),value:"award"}],onChange:e=>p("icon",e)})}),(0,o.jsxs)("div",{style:{flex:"0 0 auto",display:"flex",gap:"16px"},children:[(0,o.jsxs)("div",{children:[(0,o.jsx)("div",{style:{marginBottom:"8px",fontSize:"13px",color:"#1e1e1e"},children:(0,n.__)("Bg Color","tier-pricing-table")}),(0,o.jsx)("input",{type:"color",value:e.background_color||"#2271b1",onChange:e=>p("background_color",e.target.value),className:"tier-color-picker"})]}),(0,o.jsxs)("div",{children:[(0,o.jsx)("div",{style:{marginBottom:"8px",fontSize:"13px",color:"#1e1e1e"},children:(0,n.__)("Text Color","tier-pricing-table")}),(0,o.jsx)("input",{type:"color",value:e.text_color||"#ffffff",onChange:e=>p("text_color",e.target.value),className:"tier-color-picker"})]}),(0,o.jsxs)("div",{children:[(0,o.jsx)("div",{style:{marginBottom:"8px",fontSize:"13px",color:"#1e1e1e"},children:(0,n.__)("Border","tier-pricing-table")}),(0,o.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[(0,o.jsx)("input",{type:"color",value:e.border_color||"#000000",onChange:e=>p("border_color",e.target.value),className:"tier-color-picker"}),(0,o.jsx)(l.Button,{isSmall:!0,variant:"tertiary",onClick:()=>p("border_color",""),style:{padding:"0 4px",minWidth:"auto",height:"36px",color:e.border_color?"#d63638":"#a7aaad"},title:(0,n.__)("Clear border color","tier-pricing-table"),children:"×"})]})]})]})]}),(0,o.jsxs)("div",{style:{marginTop:"16px"},children:[(0,o.jsx)(l.Button,{variant:"link",onClick:()=>s(!a),style:{textDecoration:"none"},children:a?(0,n.__)("Hide Advanced Settings","tier-pricing-table"):(0,n.__)("Show Advanced Settings","tier-pricing-table")}),a&&(0,o.jsxs)("div",{style:{marginTop:"16px",display:"flex",flexWrap:"wrap",gap:"20px",padding:"16px",background:"#f8f9fa",borderRadius:"6px",border:"1px solid #e2e4e7"},children:[(0,o.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,o.jsx)(l.RangeControl,{label:(0,n.__)("Font Size (px)","tier-pricing-table"),value:e.font_size||12,onChange:e=>p("font_size",e),min:8,max:20})}),(0,o.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,o.jsx)(l.RangeControl,{label:(0,n.__)("Border Width (px)","tier-pricing-table"),value:e.border_width||0,onChange:e=>p("border_width",e),min:0,max:10})}),(0,o.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,o.jsx)(l.RangeControl,{label:(0,n.__)("Padding Horizontal (px)","tier-pricing-table"),value:void 0!==e.padding_x?e.padding_x:8,onChange:e=>p("padding_x",e),min:0,max:15})}),(0,o.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,o.jsx)(l.RangeControl,{label:(0,n.__)("Padding Vertical (px)","tier-pricing-table"),value:void 0!==e.padding_y?e.padding_y:2,onChange:e=>p("padding_y",e),min:0,max:15})}),(0,o.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,o.jsx)(l.RangeControl,{label:(0,n.__)("Border Radius (px)","tier-pricing-table"),value:void 0!==e.border_radius?e.border_radius:4,onChange:e=>p("border_radius",e),min:0,max:50})}),(0,o.jsx)("div",{className:"tier-label-field",style:{flexBasis:"100%"},children:(0,o.jsx)(l.TextControl,{label:(0,n.__)("Extra CSS Class","tier-pricing-table"),value:e.css_class,onChange:e=>p("css_class",e),placeholder:(0,n.__)("e.g., my-custom-class","tier-pricing-table")})})]})]})]}),(0,o.jsxs)("div",{style:{width:"180px",background:"#f8f9fa",borderLeft:"1px solid #e2e4e7",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"24px",position:"relative"},children:[(0,o.jsxs)("div",{style:c,className:e.css_class,children:[e.icon&&d[e.icon]&&d[e.icon],e.title||(0,n.__)("Preview","tier-pricing-table")]}),(0,o.jsx)("button",{className:"tier-remove-btn",onClick:()=>r(e.id),title:(0,n.__)("Remove label","tier-pricing-table"),children:(0,o.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,o.jsx)("path",{d:"M18 6 6 18"}),(0,o.jsx)("path",{d:"m6 6 12 12"})]})})]})]})},s=()=>{const[e,i]=(0,t.useState)([]),[s,p]=(0,t.useState)(!0),[c,x]=(0,t.useState)(!1),[g,b]=(0,t.useState)("");(0,t.useEffect)(()=>{r()({path:"tier-pricing-table/features/tier-labels/v1/labels"}).then(e=>{i(Array.isArray(e)?e:[]),p(!1)})},[]);const h=()=>{i([...e,{id:"id_"+Math.random().toString(36).substr(2,9),title:(0,n.__)("New Label","tier-pricing-table"),background_color:"#2271b1",text_color:"#ffffff",border_color:"",style:"rounded",border_style:"solid",css_class:"",font_size:12,border_width:0,padding_x:8,padding_y:2,border_radius:4,icon:""}])};return s?(0,o.jsx)(l.Flex,{align:"center",justify:"center",style:{height:"200px"},children:(0,o.jsx)(l.Spinner,{})}):(0,o.jsxs)("div",{className:"tier-labels-settings",style:{marginTop:"20px",position:"relative"},children:[g&&(0,o.jsxs)("div",{style:{position:"fixed",bottom:"40px",left:"50%",transform:"translateX(-50%)",background:"#1d2327",color:"#fff",padding:"12px 24px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0,0,0,0.15)",zIndex:9999,fontSize:"14px",fontWeight:500,display:"flex",alignItems:"center",gap:"8px",animation:"tierToastSlideUp 0.3s ease-out forwards"},children:[(0,o.jsx)("style",{children:"\n\t\t\t\t\t\t@keyframes tierToastSlideUp {\n\t\t\t\t\t\t\tfrom { opacity: 0; transform: translate(-50%, 20px); }\n\t\t\t\t\t\t\tto { opacity: 1; transform: translate(-50%, 0); }\n\t\t\t\t\t\t}\n\t\t\t\t\t\t"}),(0,o.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"#46b450",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,o.jsx)("path",{d:"M20 6 9 17l-5-5"})}),g]}),0===e.length&&(0,o.jsxs)("div",{style:{background:"#ffffff",border:"1px solid #c3c4c7",borderRadius:"8px",marginBottom:"24px",color:"#50575e",display:"flex",flexWrap:"wrap",alignItems:"stretch",overflow:"hidden"},children:[(0,o.jsxs)("div",{style:{flex:"1 1 300px",padding:"40px",textAlign:"left",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start"},children:[(0,o.jsxs)("svg",{style:{margin:"0 0 16px",color:"#a7aaad",display:"block"},width:"40",height:"40",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,o.jsx)("path",{d:"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"}),(0,o.jsx)("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]}),(0,o.jsx)("h3",{style:{margin:"0 0 12px",fontSize:"20px",color:"#1d2327",fontWeight:600},children:(0,n.__)("No Labels Created","tier-pricing-table")}),(0,o.jsx)("p",{style:{margin:"0 0 8px",fontSize:"14px",lineHeight:"1.5"},children:(0,n.__)("Create your first custom tier label to highlight special pricing offers.","tier-pricing-table")}),(0,o.jsx)("p",{style:{margin:"0 0 24px",fontSize:"13px",color:"#646970",lineHeight:"1.5"},children:(0,n.__)("Once created, you can assign your labels to specific pricing tiers when editing a product.","tier-pricing-table")}),(0,o.jsx)(l.Button,{variant:"primary",onClick:h,children:(0,n.__)("Add your first label","tier-pricing-table")})]}),(0,o.jsx)("div",{style:{flex:"1 1 400px",padding:"40px",display:"flex",justifyContent:"center",alignItems:"center",background:"#f8f9fa",borderLeft:"1px solid #e2e4e7"},children:(0,o.jsx)("div",{style:{width:"100%",maxWidth:"400px",background:"#fff",border:"1px solid #dcdcde",borderRadius:"4px",textAlign:"left",overflow:"hidden",boxShadow:"0 4px 12px rgba(0,0,0,0.08)"},children:(0,o.jsxs)("table",{style:{width:"100%",borderCollapse:"collapse",fontSize:"14px",margin:0},children:[(0,o.jsx)("thead",{children:(0,o.jsxs)("tr",{style:{background:"#f6f7f7",borderBottom:"1px solid #dcdcde"},children:[(0,o.jsx)("th",{style:{padding:"12px 16px",fontWeight:600,textAlign:"left",border:"none"},children:(0,n.__)("Quantity","tier-pricing-table")}),(0,o.jsx)("th",{style:{padding:"12px 16px",fontWeight:600,textAlign:"left",border:"none"},children:(0,n.__)("Discount","tier-pricing-table")}),(0,o.jsx)("th",{style:{padding:"12px 16px",fontWeight:600,textAlign:"left",border:"none"},children:(0,n.__)("Price","tier-pricing-table")})]})}),(0,o.jsxs)("tbody",{children:[(0,o.jsxs)("tr",{style:{borderBottom:"1px solid #f0f0f1"},children:[(0,o.jsx)("td",{style:{padding:"12px 16px",border:"none"},children:"1 - 4"}),(0,o.jsx)("td",{style:{padding:"12px 16px",border:"none"},children:"-"}),(0,o.jsx)("td",{style:{padding:"12px 16px",border:"none"},children:"$10.00"})]}),(0,o.jsxs)("tr",{style:{borderBottom:"1px solid #f0f0f1"},children:[(0,o.jsxs)("td",{style:{padding:"12px 16px",border:"none",display:"flex",alignItems:"center",gap:"8px"},children:["5 - 9",(0,o.jsx)("span",{style:{background:"#2271b1",color:"#fff",padding:"2px 8px",borderRadius:"4px",fontSize:"11px",fontWeight:"bold",textTransform:"uppercase",display:"inline-flex",alignItems:"center"},children:(0,n.__)("Most Popular","tier-pricing-table")})]}),(0,o.jsx)("td",{style:{padding:"12px 16px",border:"none"},children:"10%"}),(0,o.jsx)("td",{style:{padding:"12px 16px",border:"none"},children:"$9.00"})]}),(0,o.jsxs)("tr",{style:{borderBottom:"1px solid #f0f0f1"},children:[(0,o.jsx)("td",{style:{padding:"12px 16px",border:"none"},children:"10 - 19"}),(0,o.jsx)("td",{style:{padding:"12px 16px",border:"none"},children:"25%"}),(0,o.jsx)("td",{style:{padding:"12px 16px",border:"none"},children:"$7.50"})]}),(0,o.jsxs)("tr",{children:[(0,o.jsxs)("td",{style:{padding:"12px 16px",border:"none",display:"flex",alignItems:"center",gap:"8px"},children:["20+",(0,o.jsxs)("span",{style:{background:"#d63638",color:"#fff",padding:"2px 8px",borderRadius:"4px",fontSize:"11px",fontWeight:"bold",textTransform:"uppercase",display:"inline-flex",alignItems:"center",gap:"4px"},children:[d.star," ",(0,n.__)("Best Value","tier-pricing-table")]})]}),(0,o.jsx)("td",{style:{padding:"12px 16px",border:"none"},children:"50%"}),(0,o.jsx)("td",{style:{padding:"12px 16px",border:"none"},children:"$5.00"})]})]})]})})})]}),e.map(t=>(0,o.jsx)(a,{label:t,onRemove:t=>i(e.filter(e=>e.id!==t)),onUpdate:(t,r)=>i(e.map(e=>e.id===t?r:e))},t.id)),(0,o.jsxs)(l.Flex,{gap:"4",style:{marginTop:"20px"},children:[(0,o.jsx)(l.Button,{variant:"primary",onClick:()=>{x(!0),r()({path:"tier-pricing-table/features/tier-labels/v1/labels",method:"POST",data:{labels:e}}).then(()=>{x(!1),b((0,n.__)("Labels saved successfully!","tier-pricing-table")),setTimeout(()=>b(""),3e3)})},isBusy:c,disabled:c,children:c?(0,n.__)("Saving...","tier-pricing-table"):(0,n.__)("Save Labels","tier-pricing-table")}),(0,o.jsx)(l.Button,{variant:"secondary",onClick:h,children:(0,n.__)("+ Add Label","tier-pricing-table")})]})]})};document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("tiered-pricing__feature__tier-labels");e&&(0,t.createRoot)(e).render((0,o.jsx)(s,{}))})})(); |
