{"version":3,"file":"component---src-pages-pricings-js-6b3501b629b8e47d0ec6.js","mappings":"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","sources":["webpack://Listener/./src/pages/pricings.js"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\n\nimport Layout from \"../components/common/layout/layout\";\nimport SEO from \"../components/common/seo\";\n\nimport ReactMarkdown from \"react-markdown\";\nimport NotFoundPage from \"./404\";\nimport { sendAmplitudeData } from \"../utils/amplitude\"\nimport { AmplitudeEvents } from \"../types/amplitudeEvents\"\nimport \"aos/dist/aos.css\";\n\nconst PricingPage = (context) => {\n  useEffect(() => {\n    window.scrollTo(0, 0);\n\n    sendAmplitudeData(AmplitudeEvents.PRICING_PAGE_VISITED);\n\n    const AOS = require(\"aos\");\n    AOS.init({\n      duration: 1800,\n      once: true\n    });\n\n    if (AOS) {\n      AOS.refresh();\n    }\n  }, []);\n\n  const [activePriceTierTab, setActivePriceTierTab] = useState('priceTier0');\n  const headerData = context.pageContext.headerConfigurations;\n  const footerData = context.pageContext.footerConfigurations;\n\n  const pricingPageConfigs = context.pageContext.node;\n\n  const [planSwitchType, setPlanSwitchType] = useState('annual');\n  const [numberOfEditors, setNumberOfEditors] = useState(1);\n\n  const incrementEditors = () => {\n    if (numberOfEditors > 11) return;\n\n    setNumberOfEditors(numberOfEditors + 1);\n  }\n\n  const decrementEditors = () => {\n    if (numberOfEditors <= 1) return;\n\n    setNumberOfEditors(numberOfEditors - 1);\n  }\n\n  const getPriceTierAmount = (priceTierUnitPrice) => {\n    const originalPriceTierAmount = priceTierUnitPrice * numberOfEditors;\n\n    return `$${originalPriceTierAmount}`;\n  }\n\n  if (!pricingPageConfigs) return <NotFoundPage />;\n\n  return (\n    pricingPageConfigs && <Layout title=\"Pricing\" headerData={headerData} footerData={footerData}>\n      { pricingPageConfigs.seo && <SEO page={pricingPageConfigs.slug} seo={pricingPageConfigs.seo} /> }\n\n      <section className=\"pricing-section\">\n        <div className=\"content-layer\">\n          <h1 className=\"h1\" data-aos=\"fade-up\">{pricingPageConfigs.Heading}</h1>\n          <p data-aos=\"fade-up\" className=\"h2 section-body\">{pricingPageConfigs.Description}</p>\n\n          {/* <div data-aos=\"fade-up\" className=\"plans-switcher noselect\">\n            <label>\n              <em>Annually</em>\n              <input type=\"checkbox\"\n                onClick={() => setPlanSwitchType(planSwitchType === 'annual' ? 'monthly' : 'annual')}\n              />\n              <span className=\"toggle-switch\"></span>\n              <em>Monthly</em>\n            </label>\n          </div> */}\n\n          <h6 className=\"h3\" data-aos=\"fade-up\">{pricingPageConfigs.annualSavingsText}</h6>\n\n          <div className={`price-tiers ${activePriceTierTab}-tab-open`}>\n            <div className=\"tabs\">\n              {\n                pricingPageConfigs.price_tiers.map((priceTier, index) => {\n                  return (\n                    <label className={`price-tier-tab priceTier${index}-tab`} key={priceTier.title}>\n                      <input type=\"radio\" name=\"price-tier\"\n                        checked={`priceTier${index}` === activePriceTierTab}\n                        value={priceTier.title}\n                        onChange={() => setActivePriceTierTab(`priceTier${index}`)}\n                      />\n                      {priceTier.title}\n                    </label>\n                  )\n                })\n              }\n            </div>\n\n            {\n              pricingPageConfigs.price_tiers.map((priceTier, index) => {\n                return (\n                  <div data-aos=\"fade-up\" data-aos-once=\"true\" data-aos-delay={`${index > 0 ? 300 * index : 0}`} className={`price-tier-item priceTier${index}-tab`} key={priceTier.title}>\n                    <h4>{priceTier.title}</h4>\n\n                    { priceTier.description && <p className=\"description\">{priceTier.description}</p> }\n\n                    <p className=\"subscription-cost\">\n                      \n                    </p>\n\n                    { priceTier.offer_text && <p className=\"offer-text\">{priceTier.offer_text}</p> }\n\n                    { priceTier.coming_soon && <p className=\"coming-soon-text\">{priceTier.coming_soon}</p> }\n\n                    <ul className=\"features-list\">\n                      {\n                        priceTier.features.map((priceTierItem, index) => {\n                          return (\n                            <li className=\"features\" key={priceTierItem.feature_title}>\n                              <ul className=\"feature-group\">\n                                <li className=\"feature-heading\">{priceTierItem.feature_title}</li>\n                                {\n                                  priceTierItem.feature.map((item, index) => {\n                                    return item.is_enabled &&\n                                    <li key={item.feature} className={`feature ${item.feature === 'Editors' ? 'center-align-items': ''}`}>\n                                      <p className=\"title-wrapper\">\n                                        <span className={`title ${item.tipsy ? 'has-tipsy' : ''}`}>\n                                          <span className='feature-title'>{item.feature}</span>\n                                          {item.tipsy && <span className=\"tipsy\">{item.tipsy}</span>}\n                                          {item.disclaimer && <span className=\"disclaimer\">{item.disclaimer}</span>}\n                                          {item.badge && <span className=\"badge\">{item.badge}</span>}\n                                        </span>\n                                      </p>\n\n                                      <p className={`quota ${item.feature === 'Editors' ? 'has-quantity-selection noselect': ''}`}>\n                                        {\n                                          item.quota &&\n                                          <span className={`quota-text ${item.is_quota_text_highlighted ? 'highlight': ''}`}>\n                                            {item.quota && (item.feature === 'Editors' ? (numberOfEditors < 10 ? '0' + numberOfEditors : numberOfEditors) : item.quota)}\n                                          </span>\n                                        }\n\n                                        {\n                                          item.feature === 'Editors' &&\n                                          <span className=\"quantity-selector\">\n                                            <em className={`${numberOfEditors === 12 ? 'disabled': ''}`} onClick={() => incrementEditors()} role=\"button\" tabIndex={0}>\n                                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 42 42\"><g isolation=\"isolate\"><g transform=\"translate(12 12)\"><rect fill=\"#fff\" width=\"4\" height=\"18\" rx=\"2\" transform=\"translate(7)\"/><rect fill=\"#fff\" width=\"4\" height=\"18\" rx=\"2\" transform=\"translate(18 7) rotate(90)\"/></g></g></svg>\n                                            </em>\n                                            <em className={`${numberOfEditors === 1 ? 'disabled': ''}`} onClick={() => decrementEditors()} role=\"button\" tabIndex={0}>\n                                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 42 42\"><g isolation=\"isolate\"><g transform=\"translate(12 19)\"><rect fill=\"#fff\" width=\"4\" height=\"18\" rx=\"2\" transform=\"translate(18) rotate(90)\"/></g></g></svg>\n                                            </em>\n                                          </span>\n                                        }\n\n                                        {item.show_tick && <span className=\"tick\"></span>}\n                                      </p>\n                                    </li>\n                                  })\n                                }\n                              </ul>\n                            </li>\n                          )\n                        })\n                      }\n                    </ul>\n\n                    {\n                      priceTier?.price_tier_cta?.button_text &&\n                      <a href={priceTier.price_tier_cta.url} className=\"cta-button\" target={priceTier.price_tier_cta.target}>\n                        {priceTier.price_tier_cta.button_text}\n                      </a>\n                    }\n\n                  </div>\n                )\n              })\n            }\n          </div>\n        </div>\n\n        <div className=\"background-layer\" role=\"presentation\">\n          <div data-aos=\"animate-art-work-cylindrical-light\" className=\"art-work-cylindrical-light\"></div>\n          <div data-aos=\"animate-triangle-pattern-sand-pricing\" className=\"triangle-pattern-sand\"></div>\n\n          <div data-aos-offset=\"600\" data-aos-anchor=\".abstract-art-animation-anchor\" data-aos=\"animate-triangle-sand\" className=\"triangle-sand\"></div>\n          <div data-aos-offset=\"600\" data-aos-anchor=\".abstract-art-animation-anchor\" data-aos=\"animate-triangle-multi-lines\" className=\"triangle-multi-lines\"></div>\n          <div data-aos-offset=\"600\" data-aos-anchor=\".abstract-art-animation-anchor\" data-aos=\"animate-triangle-arrow-pattern-pink\" className=\"triangle-arrow-pattern-pink\"></div>\n          <div data-aos-offset=\"600\" data-aos-anchor=\".abstract-art-animation-anchor\" data-aos=\"animate-art-work-cylindrical-dark\" className=\"art-work-cylindrical-dark\"></div>\n          <span className=\"abstract-art-animation-anchor\"></span>\n\n          <div className=\"triangle-arrow-pattern-pastel-pink\"></div>\n        </div>\n      </section>\n\n      <section className=\"faq-section\">\n        {\n          pricingPageConfigs.pricing_faq_section &&\n          <>\n            <h2 className=\"h1\">{pricingPageConfigs.pricing_faq_section.section_heading}</h2>\n            <p className=\"h2\">{pricingPageConfigs.pricing_faq_section.section_body}</p>\n\n            <ul>\n              {\n                pricingPageConfigs.pricing_faq_section.question_and_answers.question_and_answer.map((qaSection, index) => {\n                  return (\n                    <li key={`question-${index}`}>\n                      <p className=\"question\">{qaSection.heading}</p>\n                      <p className=\"answer\">{qaSection.description}</p>\n                    </li>\n                  )\n                })\n              }\n            </ul>\n          </>\n        }\n\n        <ReactMarkdown className=\"h2 section-description\">\n          {pricingPageConfigs.link_to_help_center}\n        </ReactMarkdown>\n      </section>\n    </Layout>\n  )\n}\n\nexport default PricingPage;\n"],"names":["context","useEffect","window","scrollTo","sendAmplitudeData","AmplitudeEvents","AOS","require","init","duration","once","refresh","activePriceTierTab","setActivePriceTierTab","useState","headerData","pageContext","headerConfigurations","footerData","footerConfigurations","pricingPageConfigs","node","planSwitchType","setPlanSwitchType","numberOfEditors","setNumberOfEditors","React","Layout","title","seo","SEO","page","slug","className","Heading","Description","annualSavingsText","price_tiers","map","priceTier","index","key","type","name","checked","value","onChange","_priceTier$price_tier","description","offer_text","coming_soon","features","priceTierItem","feature_title","feature","item","is_enabled","tipsy","disclaimer","badge","quota","is_quota_text_highlighted","onClick","role","tabIndex","xmlns","width","height","viewBox","isolation","transform","fill","rx","show_tick","price_tier_cta","button_text","href","url","target","pricing_faq_section","section_heading","section_body","question_and_answers","question_and_answer","qaSection","heading","ReactMarkdown","link_to_help_center","NotFoundPage"],"sourceRoot":""}