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