# tier-pricing-table/6.1.0/src/Addons/TierLabels/build/index.js

Tiered Pricing Table for WooCommerce, version 6.1.0. 1 lines.

- Page: https://pluginprobe.com/plugins/tier-pricing-table/6.1.0/code/src/Addons/TierLabels/build/index.js
- Raw: https://pluginprobe.com/plugins/tier-pricing-table/6.1.0/raw/src/Addons/TierLabels/build/index.js
- Modified: 2026-05-15T12:21:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/tier-pricing-table/6.1.0/code/src/Addons/TierLabels/build/index.js#L10-L20`.

```javascript
(()=>{"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,a=window.wp.i18n,o=window.ReactJSXRuntime,n=({label:e,onUpdate:i,onRemove:r})=>{const[n,d]=(0,t.useState)(!1),s=(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",transform:"scale(1.3)",justifyContent:"center",fontSize:`${e.font_size||12}px`,fontWeight:"600",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,a.__)("Title","tier-pricing-table"),value:e.title,onChange:e=>s("title",e),placeholder:(0,a.__)("Enter title","tier-pricing-table")})}),(0,o.jsx)("div",{className:"tier-label-field",style:{flexBasis:"120px"},children:(0,o.jsx)(l.SelectControl,{label:(0,a.__)("Style Preset","tier-pricing-table"),value:e.style||"rounded",options:[{label:(0,a.__)("Square","tier-pricing-table"),value:"square"},{label:(0,a.__)("Rounded","tier-pricing-table"),value:"rounded"},{label:(0,a.__)("Pill","tier-pricing-table"),value:"pill"},{label:(0,a.__)("Outline","tier-pricing-table"),value:"outline"},{label:(0,a.__)("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",children:(0,o.jsx)(l.TextControl,{label:(0,a.__)("Extra CSS Class","tier-pricing-table"),value:e.css_class,onChange:e=>s("css_class",e),placeholder:(0,a.__)("e.g., my-custom-class","tier-pricing-table")})}),(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,a.__)("Bg Color","tier-pricing-table")}),(0,o.jsx)("input",{type:"color",value:e.background_color||"#2271b1",onChange:e=>s("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,a.__)("Text Color","tier-pricing-table")}),(0,o.jsx)("input",{type:"color",value:e.text_color||"#ffffff",onChange:e=>s("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,a.__)("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=>s("border_color",e.target.value),className:"tier-color-picker"}),(0,o.jsx)(l.Button,{isSmall:!0,variant:"tertiary",onClick:()=>s("border_color",""),style:{padding:"0 4px",minWidth:"auto",height:"36px",color:e.border_color?"#d63638":"#a7aaad"},title:(0,a.__)("Clear border color","tier-pricing-table"),children:"×"})]})]})]})]}),(0,o.jsxs)("div",{style:{marginTop:"16px"},children:[(0,o.jsx)(l.Button,{variant:"link",onClick:()=>d(!n),style:{textDecoration:"none"},children:n?(0,a.__)("Hide Advanced Settings","tier-pricing-table"):(0,a.__)("Show Advanced Settings","tier-pricing-table")}),n&&(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,a.__)("Font Size (px)","tier-pricing-table"),value:e.font_size||12,onChange:e=>s("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,a.__)("Border Width (px)","tier-pricing-table"),value:e.border_width||0,onChange:e=>s("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,a.__)("Padding Horizontal (px)","tier-pricing-table"),value:void 0!==e.padding_x?e.padding_x:8,onChange:e=>s("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,a.__)("Padding Vertical (px)","tier-pricing-table"),value:void 0!==e.padding_y?e.padding_y:2,onChange:e=>s("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,a.__)("Border Radius (px)","tier-pricing-table"),value:void 0!==e.border_radius?e.border_radius:4,onChange:e=>s("border_radius",e),min:0,max:50})})]})]})]}),(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.jsx)("div",{style:c,className:e.css_class,children:e.title||(0,a.__)("Preview","tier-pricing-table")}),(0,o.jsx)("button",{className:"tier-remove-btn",onClick:()=>r(e.id),title:(0,a.__)("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"})]})})]})]})},d=()=>{const[e,i]=(0,t.useState)([]),[d,s]=(0,t.useState)(!0),[c,p]=(0,t.useState)(!1),[x,b]=(0,t.useState)("");(0,t.useEffect)(()=>{r()({path:"tier-pricing-table/features/tier-labels/v1/labels"}).then(e=>{i(Array.isArray(e)?e:[]),s(!1)})},[]);const g=()=>{i([...e,{id:"id_"+Math.random().toString(36).substr(2,9),title:(0,a.__)("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}])};return d?(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:[x&&(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"})}),x]}),0===e.length&&(0,o.jsxs)("div",{style:{padding:"40px",textAlign:"center",background:"#f8f9fa",border:"1px dashed #c3c4c7",borderRadius:"8px",marginBottom:"24px",color:"#50575e"},children:[(0,o.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,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 8px",fontSize:"16px",color:"#1d2327",fontWeight:600},children:(0,a.__)("No Labels Created","tier-pricing-table")}),(0,o.jsx)("p",{style:{margin:"0 0 8px",fontSize:"14px"},children:(0,a.__)("Create your first custom tier label to highlight special pricing offers.","tier-pricing-table")}),(0,o.jsx)("p",{style:{margin:0,fontSize:"13px",color:"#646970",maxWidth:"500px",marginLeft:"auto",marginRight:"auto"},children:(0,a.__)("Once created, you can assign your labels to specific pricing tiers when editing a product.","tier-pricing-table")}),(0,o.jsx)("p",{}),(0,o.jsx)(l.Button,{variant:"primary",onClick:g,children:(0,a.__)("Add your first label","tier-pricing-table")})]}),e.map(t=>(0,o.jsx)(n,{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:()=>{p(!0),r()({path:"tier-pricing-table/features/tier-labels/v1/labels",method:"POST",data:{labels:e}}).then(()=>{p(!1),b((0,a.__)("Labels saved successfully!","tier-pricing-table")),setTimeout(()=>b(""),3e3)})},isBusy:c,disabled:c,children:c?(0,a.__)("Saving...","tier-pricing-table"):(0,a.__)("Save Labels","tier-pricing-table")}),(0,o.jsx)(l.Button,{variant:"secondary",onClick:g,children:(0,a.__)("+ 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)(d,{}))})})();
```