@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 4.09 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material"),t=require("react"),r=require("../../BrandCore/Icon/Icon.js"),n=require("../../WebCore/Tooltip/Tooltip.js"),s=require("../../WebCore/Typography/Typography.js"),a=require("./data.js"),c=require("./PlanFeatureTableSkeleton.js");const o=({text:t,isEvenRow:n,theme:a})=>{const c="{{tick}}"===t,o="{{dash}}"===t;return e.jsxs(i.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center",padding:`${a.spacing(a.custom.padding.md)} ${a.spacing(a.custom.padding.sm)}`,backgroundColor:n?a.custom.palette.surface.sunken:"transparent"},children:[c&&e.jsx(r.default,{name:"badge-tick-in-circle",size:24}),o&&e.jsx(r.default,{name:"badge-hyphen",size:24}),!c&&!o&&e.jsx(i.Stack,{sx:{direction:"column",gap:a.spacing(a.custom.margin.xs)},children:t.split("\n").map(i=>e.jsx(s,{variation:"lg",component:"p",sx:{color:a.custom.palette.text.secondary,hyphens:"none",whiteSpace:"pre"},children:i},`${i}-cell-text`))})]})};module.exports=({currencySymbol:m,data:p,loading:d,tier1MinimumTerm:l,tier1Price:u,tier1QuestionLimit:g,tier1RespondentPrice:x,tier2MinimumTerm:h,tier2Price:j,tier2QuestionLimit:y,tier2RespondentPrice:f,tier4MinimumTerm:b,tier4Price:$,tier4QuestionLimit:k,tier4RespondentPrice:v,variation:P="default"})=>{if(d)return e.jsx(c,{});const T=i.useTheme(),w={...a,...p},R=e=>"number"==typeof e?`${m}${new Intl.NumberFormat("en-GB").format(e)}`:e||"",S=e=>e.replace("{{currencySymbol}}",m||"").replace("{{tier1MinimumTerm}}",l?`${l} months`:"No minimum term").replace("{{tier2MinimumTerm}}",h?`${h} months`:"No minimum term").replace("{{tier4MinimumTerm}}",b?`${b} months`:"No minimum term").replace("{{tier1Price}}",R(u)).replace("{{tier2Price}}",R(j)).replace("{{tier4Price}}",R($)).replace("{{tier1QuestionLimit}}",g?String(g):"").replace("{{tier2QuestionLimit}}",y?String(y):"").replace("{{tier4QuestionLimit}}",k?String(k):"").replace("{{tier1RespondentPrice}}",R(x)).replace("{{tier2RespondentPrice}}",R(f)).replace("{{tier4RespondentPrice}}",R(v)),C=Object.values(w.headings).map(({heading:e,pricing:i})=>({heading:e,pricing:S(i)})),B=Object.values(w.rows).map((e,i)=>({key:`pricing-table-features-${i}`,type:"row",name:{heading:e.heading,description:e.description},tier1:S(e.tier1),tier2:S(e.tier2),tier4:S(e.tier4)}));return e.jsx(i.Box,{sx:{backgroundColor:T.custom.palette.surface.default,borderRadius:T.spacing(T.custom.radius.xl),boxShadow:T.custom.elevation.raised,padding:{sm:T.spacing(T.custom.padding.md),lg:T.spacing(T.custom.padding.lg)},minWidth:{sm:576}},children:e.jsxs(i.Box,{sx:{display:"grid",gridTemplateColumns:"repeat(4, 1fr)"},children:[e.jsx(i.Box,{sx:{padding:`${T.spacing(T.custom.padding.md)} ${T.spacing(T.custom.padding.sm)}`,mb:2}}),C.map(({heading:t,pricing:r})=>e.jsxs(i.Stack,{sx:{alignItems:"center",justifyContent:"center",textAlign:"center",padding:`${T.spacing(T.custom.padding.md)} ${T.spacing(T.custom.padding.sm)}`},children:[e.jsx(s,{variation:"platform"===P?"lg":"xxl",component:"p",weight:"bold",children:t}),e.jsx(s,{variation:"platform"===P?"sm":"md",component:"p",sx:{color:T.custom.palette.text.secondary,whiteSpace:"nowrap"},children:r})]},t)),B.map((a,c)=>e.jsxs(t.Fragment,{children:[e.jsx(i.Box,{sx:{display:"flex",alignItems:"center",padding:`${T.spacing(T.custom.padding.md)} ${T.spacing(T.custom.padding.sm)}`,backgroundColor:c%2==1?T.custom.palette.surface.sunken:"transparent",minWidth:"160px"},children:e.jsxs(i.Box,{sx:{display:"flex",justifyContent:"flex-start",alignItems:"center",flex:1,gap:1},children:[a.name.description&&e.jsx(n,{message:a.name.description,children:e.jsx(i.Box,{sx:{alignItems:"center",color:T.custom.palette.icon.secondary,display:"flex"},children:e.jsx(r.default,{name:"info",size:24})})}),e.jsx(s,{variation:"platform"===P?"md":"lg",component:"p",children:a.name.heading})]})}),e.jsx(o,{text:a.tier1,isEvenRow:c%2==1,theme:T},`${a.key}-tier1`),e.jsx(o,{text:a.tier2,isEvenRow:c%2==1,theme:T},`${a.key}-tier2`),e.jsx(o,{text:a.tier4,isEvenRow:c%2==1,theme:T},`${a.key}-tier4`)]},`${a.key}-name`))]})})};