diff --git a/components/blocks/Pricing.template.ts b/components/blocks/Pricing.template.ts index 7f3066b83..0c61d22fc 100644 --- a/components/blocks/Pricing.template.ts +++ b/components/blocks/Pricing.template.ts @@ -31,6 +31,11 @@ export const cardTemplate: Template = { label: 'Annual Price', type: 'string' }, + { + name: 'annualDescription', + label: 'Annual Description', + type: 'string' + }, { name: 'interval', label: 'Interval', @@ -119,6 +124,18 @@ export const pricingTemplate: Template = { label: 'Intro Text', type: 'rich-text', }, + { + name: 'pillSwitchVisibileText', + label: 'Pill Switch Visible Text', + type: 'rich-text', + description: 'this is the text displayed regardless of the switch' + }, + { + name: 'pillSwitchToggleText', + label: 'Pill Switch Toggle Text', + type: 'rich-text', + description: 'this is the text displayed depending on the toggle' + }, { name: 'plans', label: 'Pricing Plans', diff --git a/components/blocks/Pricing.tsx b/components/blocks/Pricing.tsx index 1f402d367..bbb55504a 100644 --- a/components/blocks/Pricing.tsx +++ b/components/blocks/Pricing.tsx @@ -1,26 +1,27 @@ -import { TinaMarkdown } from 'tinacms/dist/rich-text'; -import RenderButton from 'utils/renderButtonArrayHelper'; +import { docAndBlogComponents } from 'components/tinaMarkdownComponents/docAndBlogComponents'; +import { pricingComponents } from 'components/tinaMarkdownComponents/pricingComponents'; +import { useState } from 'react'; +import { AiOutlineUser, AiOutlineUsergroupAdd } from 'react-icons/ai'; +import { BiBadge, BiSupport } from 'react-icons/bi'; +import { CgCrown } from 'react-icons/cg'; import { + FaChevronDown, + FaChevronUp, FaClock, - FaUnlock, - FaCodeBranch, FaCloudDownloadAlt, - FaPuzzlePiece, - FaMarkdown, - FaGithub, + FaCodeBranch, FaFileAlt, - FaChevronDown, - FaChevronUp, + FaGithub, + FaMarkdown, + FaPuzzlePiece, FaStar, + FaUnlock, } from 'react-icons/fa'; -import { AiOutlineUser, AiOutlineUsergroupAdd } from 'react-icons/ai'; -import { BiBadge, BiSupport } from 'react-icons/bi'; -import { CgCrown } from 'react-icons/cg'; import { HiOutlineSparkles } from 'react-icons/hi2'; -import { TbPlugConnected } from 'react-icons/tb'; import { SlLock } from 'react-icons/sl'; -import { useState } from 'react'; -import { pricingComponents } from 'components/tinaMarkdownComponents/pricingComponents'; +import { TbPlugConnected } from 'react-icons/tb'; +import { TinaMarkdown } from 'tinacms/dist/rich-text'; +import RenderButton from 'utils/renderButtonArrayHelper'; const icons = { FaClock, @@ -108,11 +109,14 @@ const PaidTier = ({ data, isMonthly }) => { {data.interval && ( - {data.interval} + {data.interval} )} -