{"version":3,"sources":["webpack:///./src/constants.ts","webpack:///./src/hooks/use-active-section.ts","webpack:///./src/components/pages/faq/images/wave-top.png","webpack:///./src/components/pages/faq/images/waves.png","webpack:///./src/components/pages/faq/images/robot.png","webpack:///./src/components/pages/faq/selectors.tsx","webpack:///./src/components/pages/faq/faq.tsx"],"names":["DAILY_GOALS","Object","freeze","speak","listen","BENEFITS","WHATS_PUBLIC","throttle","require","useActiveSection","sections","activeSection","setActiveSection","useState","sectionMap","throttledHandleSectionUpdate","handleSectionUpdate","scrollMap","entries","sort","a","b","intersectionObserverCallback","forEach","e","target","id","boundingClientRect","top","isIntersecting","intersectionRatio","useEffect","sectionsElements","map","s","document","getElementById","filter","observer","IntersectionObserver","threshold","rootMargin","observe","unobserve","module","exports","memoize","SECTIONS","whatIsCV","usingCV","glossary","SECTION_NAMES","SECTION_CONTENTS","elems","licenseLink","React","StyledLink","href","blank","datasetLink","LocaleLink","to","sentenceCollectorLink","pontoonLink","articleLink","multilangLink","italic","githubLink","URLS","GITHUB_ROOT","faqSearchSelector","getString","searchString","search","trim","toUpperCase","values","section","key","label","content","c","Array","isArray","question","answers","rest","params","length","props","stringContains","some","answer","Section","memo","activeQuestions","setActiveQuestion","createElement","className","Fragment","cx","active","indexOf","onClick","ChevronDown","Localized","assign","withLocalization","setSearchString","setActiveQuestions","isMobile","setIsMobile","isMobileResolution","windowResized","window","addEventListener","removeEventListener","src","alt","role","onSubmit","preventDefault","LocalizedGetAttribute","attribute","type","value","onChange","event","placeholder","required","SearchIconCode"],"mappings":"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","file":"12.js?id=5e6d194e412528487c3c","sourcesContent":["export const DAILY_GOALS = Object.freeze({\n  speak: [120, 250],\n  listen: [240],\n});\n\nexport const BENEFITS = [\n  'rich-data',\n  'improve-audio',\n  'keep-track',\n  'compare-progress',\n  'view-goals',\n  'join-newsletter',\n];\n\nexport const WHATS_PUBLIC = [\n  'email-not-public',\n  'recordings-and-locale-public',\n  'username-optin-public',\n  'demographic-deidentified-clarity',\n  'username-email-not-demographic',\n];\n","var throttle = require('lodash.throttle');\nimport { useState, useEffect } from 'react';\n\ntype SectionMap = {\n  [key: string]: number;\n};\n\nexport default function useActiveSection(sections: any): string {\n  const [activeSection, setActiveSection] = useState<string | null>(null);\n  const sectionMap: SectionMap = {};\n\n  const handleSectionUpdate = () => {\n    let scrollMap = Object.entries(sectionMap);\n\n    scrollMap.sort((a: any[], b: any[]) => a[1] - b[1]);\n\n    if (scrollMap[0] && scrollMap[0][0] !== activeSection) {\n      setActiveSection(scrollMap[0][0]);\n    }\n  };\n\n  const throttledHandleSectionUpdate = throttle(handleSectionUpdate, 200);\n\n  const intersectionObserverCallback = (entries: any[]) => {\n    entries.forEach(e => {\n      sectionMap[e.target.id] = e.boundingClientRect.top;\n\n      if (!e.isIntersecting || e.intersectionRatio < 0.02) {\n        delete sectionMap[e.target.id];\n      }\n    });\n\n    throttledHandleSectionUpdate();\n  };\n\n  useEffect(() => {\n    const sectionsElements: HTMLElement[] = sections\n      .map((s: string) => document.getElementById(s))\n      .filter((e: HTMLElement) => !!e);\n    const observer = new IntersectionObserver(intersectionObserverCallback, {\n      threshold: [\n        0,\n        0.01,\n        0.02,\n        0.03,\n        0.04,\n        0.05,\n        0.06,\n        0.07,\n        0.08,\n        0.09,\n        0.1,\n        0.9,\n        0.91,\n        0.92,\n        0.93,\n        0.94,\n        0.95,\n        0.96,\n        0.97,\n        0.98,\n        0.99,\n        1,\n      ],\n      rootMargin: '-20%',\n    });\n\n    sectionsElements.map((e: HTMLElement) => observer.observe(e));\n\n    return () => {\n      sectionsElements.map((e: HTMLElement) => observer.unobserve(e));\n    };\n  });\n\n  return activeSection;\n}\n","module.exports = __webpack_public_path__ + \"bfe9a7b121d9bc9feb9f7b4648278ba5.png\";","module.exports = __webpack_public_path__ + \"c381e2acd2f2df69340c557ac29cc72c.png\";","module.exports = __webpack_public_path__ + \"871870523847f9da7958e1b2e7e69831.png\";","import * as React from 'react';\nimport URLS from '../../../urls';\nimport { StyledLink } from '../../ui/ui';\nimport { LocaleLink } from '../../locale-helpers';\nimport { stringContains } from '../../../utility';\nimport { WithLocalizationProps } from '@fluent/react';\nimport { BENEFITS, WHATS_PUBLIC } from '../../../constants';\n\nconst memoize = require('lodash.memoize');\n\nexport const SECTIONS: any = {\n  whatIsCV: 'what-is-common-voice',\n  usingCV: 'using-common-voice',\n  glossary: 'glossary',\n};\n\nconst SECTION_NAMES: any = {\n  [SECTIONS.whatIsCV]: 'faq-what-cv-q',\n  [SECTIONS.usingCV]: 'faq-using-cv',\n  [SECTIONS.glossary]: 'glossary',\n};\n\nconst SECTION_CONTENTS: any = {\n  [SECTIONS.whatIsCV]: [\n    // 'faq-what-cv',\n    // 'faq-why-important',\n    'faq-why-mission',\n    'faq-what-cv-and-deepspeech',\n    'faq-is-goal-assistant',\n  ],\n  [SECTIONS.usingCV]: [\n    [\n      'faq-how-get-q',\n      'faq-how-get-a',\n      {\n        elems: {\n          licenseLink: (\n            <StyledLink\n              href=\"https://creativecommons.org/publicdomain/zero/1.0/\"\n              blank\n            />\n          ),\n          datasetLink: <LocaleLink to=\"https://kenbun.de\" />,\n        },\n      },\n    ],\n    [\n      'faq-when-release2-q',\n      'faq-when-release2-a',\n      {\n        elems: {\n          sentenceCollectorLink: (\n            <StyledLink\n              href=\"https://common-voice.github.io/sentence-collector/\"\n              blank\n            />\n          ),\n          pontoonLink: (\n            <StyledLink\n              href=\"https://pontoon.mozilla.org/projects/common-voice/\"\n              blank\n            />\n          ),\n        },\n      },\n    ],\n    'faq-do-want-native',\n    [\n      'faq-why-different-speakers-q',\n      'faq-why-different-speakers-a',\n      {\n        elems: {\n          articleLink: <StyledLink href=\"https://econ.st/2AVxVG3\" blank />,\n        },\n      },\n    ],\n    [\n      'faq-why-my-lang-q',\n      'faq-why-my-lang-new-a',\n      {\n        elems: {\n          multilangLink: (\n            <StyledLink\n              href=\"https://medium.com/mozilla-open-innovation/more-common-voices-24a80c879944\"\n              blank\n            />\n          ),\n          sentenceCollectorLink: (\n            <StyledLink\n              href=\"https://common-voice.github.io/sentence-collector/\"\n              blank\n            />\n          ),\n        },\n      },\n    ],\n    'faq-what-quality',\n    'faq-why-10k-hours',\n    'faq-how-calc-hours',\n    [\n      'faq-where-src-from-2-q',\n      'faq-where-src-from-2-a',\n      {\n        elems: {\n          italic: <i />,\n          githubLink: (\n            <StyledLink\n              href={`${URLS.GITHUB_ROOT}/tree/master/server/data`}\n              blank\n            />\n          ),\n        },\n      },\n    ],\n    ['faq-is-account-public-q', WHATS_PUBLIC],\n    'faq-how-privacy',\n  ],\n  [SECTIONS.glossary]: [\n    ['localization', 'localization-explanation'],\n    ['sentence-collection', 'sentence-collection-explanation'],\n    ['hours-recorded', 'hours-recorded-explanation'],\n    ['hours-validated', 'hours-validated-explanation'],\n    ['sst', 'sst-explanation'],\n    ['de-identified', 'de-identified-explanation'],\n  ],\n};\n\nexport type FaqSection = {\n  key: string;\n  label: string;\n  content: any[];\n};\n\ninterface FaqSearchSelectorProps {\n  searchString: string;\n}\n\nexport const faqSearchSelector = memoize(\n  ({\n    getString,\n    searchString,\n  }: WithLocalizationProps & FaqSearchSelectorProps): FaqSection[] => {\n    const search = searchString.trim().toUpperCase();\n\n    return Object.values(SECTIONS)\n      .map((section: string) => {\n        const content: any[] = (SECTION_CONTENTS[section] || []) as any[];\n\n        return {\n          key: section,\n          label: SECTION_NAMES[section] || SECTIONS[section],\n          content: content\n            .map(c => (Array.isArray(c) ? c : [c + '-q', c + '-a', {}]))\n            .map(([question, answers, ...rest]) => {\n              const params = rest.length === 0 ? [{}] : rest;\n\n              return [\n                question,\n                Array.isArray(answers) ? answers : [answers],\n                ...params,\n              ];\n            })\n            .filter(([question, answers, props]) => {\n              if (!search) {\n                return true;\n              }\n\n              return (\n                stringContains(getString(question), search) ||\n                answers.some((answer: string) =>\n                  stringContains(getString(answer, props), search)\n                )\n              );\n            }),\n        };\n      })\n      .filter((section: FaqSection) => section.content.length !== 0);\n  },\n  ({ searchString }: FaqSearchSelectorProps) => searchString.toUpperCase()\n);\n","import React from 'react';\nimport { useState } from 'react';\nimport cx from 'classnames';\nimport { isMobileResolution } from '../../../utility';\nimport { LocalizedGetAttribute } from '../../locale-helpers';\nimport { SearchIconCode, ChevronDown } from '../../ui/icons';\nimport useActiveSection from '../../../hooks/use-active-section';\nimport { faqSearchSelector, FaqSection, SECTIONS } from './selectors';\nimport {\n  Localized,\n  withLocalization,\n  WithLocalizationProps,\n} from '@fluent/react';\n\nconst throttle = require('lodash.throttle');\n\nimport './faq.css';\n\ntype SectionProps = {\n  section: FaqSection;\n  activeQuestions: string[];\n  setActiveQuestion: (question: string) => void;\n};\n\nconst Section: React.ComponentType<SectionProps> = React.memo(\n  ({ section, activeQuestions, setActiveQuestion }: SectionProps) => (\n    <div id={section.key} className=\"faq-q-and-a\">\n      {section.content.map(([question, answers, props]) => {\n        return (\n          <React.Fragment key={question}>\n            <div\n              id={question}\n              className={cx('question-block', section.key, {\n                active: activeQuestions.indexOf(question) !== -1,\n              })}>\n              <div\n                className=\"faq-q\"\n                onClick={() => {\n                  setActiveQuestion(question);\n                }}>\n                <div className=\"faq-icon\">\n                  <ChevronDown />\n                </div>\n                <Localized id={question}>\n                  <h3 />\n                </Localized>\n              </div>\n\n              <div className=\"faq-a\">\n                {answers.length > 1 && (\n                  <p>\n                    {answers.map((answer: string) => (\n                      <Localized key={answer} id={answer}>\n                        <li />\n                      </Localized>\n                    ))}\n                  </p>\n                )}\n\n                {answers.length === 1 && (\n                  <Localized id={answers[0]} {...props}>\n                    <p />\n                  </Localized>\n                )}\n\n                <div className=\"line\" />\n              </div>\n            </div>\n          </React.Fragment>\n        );\n      })}\n    </div>\n  )\n);\n\nexport default withLocalization(({ getString }: WithLocalizationProps) => {\n  const activeSection = useActiveSection(Object.values(SECTIONS));\n  const [searchString, setSearchString] = useState<string>('');\n  const [activeQuestions, setActiveQuestions] = useState<string[]>([]);\n  const [isMobile, setIsMobile] = useState<boolean>(isMobileResolution());\n\n  React.useEffect(() => {\n    if (activeQuestions.length !== 0) {\n      setActiveQuestions([]);\n    }\n\n    const windowResized = throttle(() => {\n      if (isMobile !== isMobileResolution()) {\n        setIsMobile(!isMobile);\n      }\n    }, 200);\n\n    window.addEventListener('resize', windowResized);\n\n    return () => {\n      window.removeEventListener('resize', windowResized);\n    };\n  }, [isMobile]);\n\n  const setActiveQuestion = (question: string) => {\n    if (activeQuestions.indexOf(question) === -1) {\n      return setActiveQuestions(\n        isMobile ? [...activeQuestions, question] : [question]\n      );\n    }\n\n    setActiveQuestions(activeQuestions.filter((e: string) => e !== question));\n  };\n\n  const sections: FaqSection[] = faqSearchSelector({ getString, searchString });\n\n  return (\n    <section className=\"faq-hero\">\n      <img\n        className=\"wave-top\"\n        src={require('./images/wave-top.png')}\n        alt=\"Wave\"\n      />\n      <div className=\"faq-header-container\">\n        <img\n          className=\"waves\"\n          src={require('./images/waves.png')}\n          alt=\"Waves\"\n        />\n        <div className=\"faq-header\">\n          <div className=\"text\">\n            <div className=\"header-line\" />\n            <Localized id=\"faq-title\">\n              <h1 />\n            </Localized>\n\n            <Localized id=\"faq-description\">\n              <h2 />\n            </Localized>\n          </div>\n          <div className=\"intro-img\">\n            <img\n              className=\"robot\"\n              src={require('./images/robot.png')}\n              alt=\"\"\n              role=\"presentation\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <section className=\"faq-content\">\n        <div className=\"faq-container no-padding-xs\">\n          <form\n            className=\"faq-search\"\n            onSubmit={(e: React.SyntheticEvent<HTMLElement>) =>\n              e.preventDefault()\n            }>\n            <LocalizedGetAttribute\n              id=\"faq-search-for-answers\"\n              attribute=\"label\">\n              {label => (\n                <input\n                  type=\"text\"\n                  value={searchString}\n                  onChange={event => {\n                    if (activeQuestions.length !== 0) {\n                      setActiveQuestions([]);\n                    }\n\n                    setSearchString(event.target.value);\n                  }}\n                  placeholder={label}\n                  required\n                />\n              )}\n            </LocalizedGetAttribute>\n\n            <button type=\"submit\" className=\"search-button\">\n              <SearchIconCode className=\"icon\" />\n            </button>\n          </form>\n\n          <div className=\"faq-section-container\">\n            <nav>\n              <ul>\n                {sections\n                  .filter(section => section.content.length !== 0)\n                  .map(section => (\n                    <li\n                      key={section.key}\n                      className={cx({ active: section.key == activeSection })}>\n                      <div className=\"line\" />\n\n                      <Localized id={section.label} key={section.label}>\n                        <a href={'#' + section.key} />\n                      </Localized>\n                    </li>\n                  ))}\n              </ul>\n            </nav>\n\n            <section className=\"faq-section\">\n              {sections.map(section => (\n                <Section\n                  section={section}\n                  key={`section-${section.key}`}\n                  activeQuestions={activeQuestions}\n                  setActiveQuestion={setActiveQuestion}\n                />\n              ))}\n\n              {sections.length === 0 && (\n                <p>No results were found. Please try a different search.</p>\n              )}\n            </section>\n          </div>\n        </div>\n      </section>\n    </section>\n  );\n});\n"],"sourceRoot":""}