{"version":3,"sources":["webpack:///./src/components/Collapse.tsx","webpack:///./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js","webpack:///./src/components/Faq.tsx","webpack:///./src/pages/faq.tsx"],"names":["Collapse","children","instant","lazy","onComplete","open","transitionDuration","transitionTimingFunction","restProps","source","excluded","key","i","target","sourceKeys","Object","keys","length","indexOf","transition","useState","renderChildren","setRenderChildren","ref","useRef","firstRender","openCollapse","node","current","requestAnimationFrame","style","height","scrollHeight","closeCollapse","offsetHeight","overflow","useLayoutEffect","handleComplete","handleTransitionEnd","event","propertyName","addEventListener","removeEventListener","undefined","questions","question","answer","to","StyledFaq","styled","div","props","theme","colors","primary","border","Faq","showTitle","limit","React","currentIndex","setCurrentIndex","className","Container","h1","as","filter","_","map","item","index","h2","onClick","appearance","p","Link","Header","FaqPage"],"mappings":"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","file":"component---src-pages-faq-tsx-36e8ace9463124659e37.js","sourcesContent":["import React, { HTMLAttributes, useRef, useLayoutEffect, useState } from \"react\"\n\ntype CollapseProps = HTMLAttributes<unknown> & {\n  lazy?: boolean\n  instant?: boolean\n  open?: boolean\n  onComplete?: () => void\n  transitionDuration?: string\n  transitionTimingFunction?: string\n}\n\nfunction Collapse({\n  children,\n  instant,\n  lazy,\n  onComplete,\n  open,\n  transitionDuration = \"400ms\",\n  transitionTimingFunction = \"ease-in-out\",\n  ...restProps\n}: CollapseProps) {\n  const transition = `height ${transitionDuration} ${transitionTimingFunction}`\n  const [renderChildren, setRenderChildren] = useState(lazy ? open : true)\n  const ref = useRef<HTMLDivElement>(null)\n  const firstRender = useRef(true)\n\n  function openCollapse() {\n    const node = ref.current\n    if (node) {\n      requestAnimationFrame(() => {\n        node.style.height = node.scrollHeight + \"px\"\n      })\n    }\n  }\n\n  function closeCollapse() {\n    const node = ref.current\n    if (node) {\n      requestAnimationFrame(() => {\n        node.style.height = node.offsetHeight + \"px\"\n        node.style.overflow = \"hidden\"\n        requestAnimationFrame(() => {\n          if (node) {\n            node.style.height = \"0px\"\n          }\n        })\n      })\n    }\n  }\n\n  useLayoutEffect(() => {\n    if (lazy) {\n      if (open) {\n        if (renderChildren) {\n          openCollapse()\n        } else {\n          setRenderChildren(true)\n        }\n      } else {\n        closeCollapse()\n      }\n    } else {\n      if (open) {\n        openCollapse()\n      } else {\n        closeCollapse()\n      }\n    }\n  }, [open])\n\n  useLayoutEffect(() => {\n    const node = ref.current\n    function handleComplete() {\n      if (node) {\n        node.style.overflow = open ? \"initial\" : \"hidden\"\n        if (open) {\n          node.style.height = \"auto\"\n        }\n        if (!open && lazy) {\n          setRenderChildren(false)\n        }\n        if (onComplete) {\n          onComplete()\n        }\n      }\n    }\n    function handleTransitionEnd(event: TransitionEvent) {\n      if (event.target === node && event.propertyName === \"height\") {\n        handleComplete()\n      }\n    }\n    if (instant || firstRender.current) {\n      handleComplete()\n      firstRender.current = false\n    }\n\n    node?.addEventListener(\"transitionend\", handleTransitionEnd)\n    return () => {\n      node?.removeEventListener(\"transitionend\", handleTransitionEnd)\n    }\n  }, [open])\n\n  useLayoutEffect(() => {\n    if (open) {\n      openCollapse()\n    }\n  }, [renderChildren])\n\n  return (\n    <div\n      ref={ref}\n      style={{\n        transition: instant || firstRender.current ? undefined : transition,\n      }}\n      {...restProps}\n    >\n      {renderChildren ? children : null}\n    </div>\n  )\n}\n\nexport default Collapse\n","export default function _objectWithoutPropertiesLoose(source, excluded) {\n  if (source == null) return {};\n  var target = {};\n  var sourceKeys = Object.keys(source);\n  var key, i;\n  for (i = 0; i < sourceKeys.length; i++) {\n    key = sourceKeys[i];\n    if (excluded.indexOf(key) >= 0) continue;\n    target[key] = source[key];\n  }\n  return target;\n}","import React from \"react\"\nimport { Link } from \"gatsby\"\nimport styled from \"styled-components\"\nimport Container from \"./Container\"\nimport Collapse from \"./Collapse\"\nimport { KeyboardArrowDown } from \"@styled-icons/material-outlined\"\nimport { Button, Text } from \"deskie-ui\"\n\nconst questions: { question: string; answer: JSX.Element | string }[] = [\n  {\n    question: \"Hoe snel kan ik met Deskie beginnen?\",\n    answer: (\n      <>\n        Huh, ben je nog niet gestart? Je kunt direct beginnen.{\" \"}\n        <Link to=\"aan-de-slag\">Meld je aan</Link> en start jouw Deskie.\n      </>\n    ),\n  },\n  {\n    question: \"Moet ik een apart gebruikersaccount aanmaken voor Deskie?\",\n    answer:\n      \"Nee hoor. Je logt gewoon in met je Microsoft 365 account. Deskie is Single-sign-on met jouw systemen.\",\n  },\n  {\n    question: \"Op welke besturingssystemen werkt Deskie?\",\n    answer:\n      \"Je downloadt Deskie als progressive webapp in je browser. Daarna kun je het gebruiken op al je devices.\",\n  },\n  {\n    question: \"Hoe richt ik Deskie in?\",\n    answer:\n      \"Easy. Start met het aantal locaties. Verdeel je locaties in het aantal te boeken ruimtes en voeg hier jouw business rules aan toe. Vervolgens is het een kwestie van aanmelden en je kan van start.\",\n  },\n  {\n    question: \"Hoe bepaal ik mijn business rules?\",\n    answer:\n      \"Die bepaal jij zelf. Jij geeft namelijk per locatie en/of ruimte aan hoeveel mensen er maximaal mogen reserveren. Het is belangrijk dat de 1,5 meter gewaarborgd kan worden.\",\n  },\n  {\n    question: \"Moet ik een uitgebreide plattegrond maken en uploaden?\",\n    answer:\n      \"Nope. Niet nodig. Deskie werkt niet op basis van plattegronden, maar op basis van business rules. Jij bepaalt hoeveel mensen er per ruimte mogen zijn. Vervolgens kiezen medewerkers op locatie hun eigen werkplek.\",\n  },\n  {\n    question: \"Kan ik reserveringen van collega’s zien?\",\n    answer:\n      \"Ja, dat kan zeker. Elke reservering is zichtbaar, zodat je weet welke collega wanneer op kantoor is. Wel zo handig als er samengewerkt moet worden.\",\n  },\n  {\n    question: \"Hoe is het gesteld met de privacy van medewerkers?\",\n    answer:\n      \"Privacy vinden wij belangrijk. Daarom voldoet Deskie voor de volle 100% aan de AVG wetgeving.\",\n  },\n  {\n    question:\n      \"Kan ik het aantal gebruikers tijdens het gebruik van Deskie aanpassen?\",\n    answer:\n      \"Yes, dat kan. Je rekent maandelijks af op het aantal actieve gebruikers.\",\n  },\n  {\n    question: \"In welke talen is Deskie beschikbaar?\",\n    answer: \"Deskie is zowel in het Nederlands als Engels beschikbaar.\",\n  },\n  {\n    question: \"Hoe zeg ik Deskie op?\",\n    answer: (\n      <>\n        Zodra je gebruik maakt van het maandelijkse abonnement kun je Deskie\n        voor de eerst volgende maand opzeggen. Neem hiervoor{\" \"}\n        <Link to=\"contact\">contact</Link> op met Deskie Support.\n      </>\n    ),\n  },\n]\n\nconst StyledFaq = styled.div`\n  padding: 3rem 0;\n\n  h4 {\n    color: ${props => props.theme.colors.primary};\n    margin: 0 0 2rem;\n  }\n\n  .faq-list {\n    background-color: white;\n    border-radius: 1.5rem;\n    box-shadow: 0 0.8px 2.1px rgba(0, 0, 0, 0.02),\n      0 2.7px 6.9px rgba(0, 0, 0, 0.03), 0 12px 31px rgba(0, 0, 0, 0.05);\n    @media screen and (max-width: 36rem) {\n      padding: 0.5rem 0;\n    }\n  }\n\n  .faq-question {\n    cursor: pointer;\n    padding: 2rem;\n    display: flex;\n    align-items: center;\n\n    @media screen and (max-width: 36rem) {\n      font-size: 1rem;\n      padding: 1rem 1.5rem;\n    }\n  }\n\n  .faq-container.active .faq-question-icon svg {\n    transform: rotate(180deg);\n  }\n\n  .faq-question-icon {\n    width: 1.75rem;\n    margin-left: auto;\n    flex-shrink: 0;\n    padding-left: 0.5rem;\n\n    svg {\n      transition: 0.15s ease;\n      width: 100%;\n      height: auto;\n    }\n  }\n\n  .faq-container {\n    border-bottom: 1px solid ${props => props.theme.colors.border};\n\n    &:last-child {\n      border-bottom: 0;\n    }\n  }\n\n  .faq-answer {\n    padding: 0 2rem 2rem;\n\n    @media screen and (max-width: 36rem) {\n      padding: 0 1.5rem 1rem;\n    }\n\n    a {\n      color: ${props => props.theme.colors.primary};\n\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  }\n\n  .faq-footer {\n    display: flex;\n    justify-content: center;\n    margin-top: 2rem;\n\n    a {\n      text-decoration: none;\n    }\n  }\n`\n\ntype FaqProps = {\n  showTitle?: boolean\n  limit?: number\n}\n\nfunction Faq({ showTitle = false, limit }: FaqProps) {\n  const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n    undefined\n  )\n\n  return (\n    <StyledFaq className=\"faq\">\n      <Container>\n        {showTitle && (\n          <Text h1 as=\"h4\">\n            Veelgestelde vragen\n          </Text>\n        )}\n        <div className=\"faq-list\">\n          {questions\n            .filter((_, i) => (limit && i >= limit ? false : true))\n            .map((item, index) => (\n              <div\n                className={`faq-container ${\n                  index === currentIndex ? \"active\" : \"\"\n                }`}\n                key={index}\n              >\n                <Text\n                  as=\"div\"\n                  h2\n                  className=\"faq-question\"\n                  onClick={() =>\n                    setCurrentIndex(\n                      typeof currentIndex === \"undefined\"\n                        ? index\n                        : index === currentIndex\n                        ? undefined\n                        : index\n                    )\n                  }\n                >\n                  {item.question}\n                  <span className=\"faq-question-icon\">\n                    <KeyboardArrowDown />\n                  </span>\n                </Text>\n\n                <Collapse open={index === currentIndex}>\n                  <Text appearance=\"secondary\" p className=\"faq-answer\">\n                    {item.answer}\n                  </Text>\n                </Collapse>\n              </div>\n            ))}\n        </div>\n        {limit && (\n          <div className=\"faq-footer\">\n            {/* @ts-ignore */}\n            <Button as={Link} to=\"/faq\">\n              Bekijk alle vragen\n            </Button>\n          </div>\n        )}\n      </Container>\n    </StyledFaq>\n  )\n}\n\nexport default Faq\n","import React from \"react\"\nimport { Text } from \"deskie-ui\"\nimport Container from \"../components/Container\"\nimport PageWrapper from \"../components/PageWrapper\"\nimport PlanMeeting from \"../components/PlanMeeting\"\nimport styled from \"styled-components\"\nimport Faq from \"../components/Faq\"\n\nconst Header = styled(Container)`\n  margin-top: -6rem;\n  padding-top: 8rem;\n  padding-bottom: 6rem;\n\n  h1 {\n    color: white;\n    font-weight: 600;\n    font-size: min(\n      max(1.75rem, calc(1.75rem + ((1vw - 0.4rem) * 1.875))),\n      2.5rem\n    );\n    line-height: 1.3;\n    margin: 0 0 0.5rem;\n  }\n\n  p {\n    color: rgba(255, 255, 255, 0.7);\n  }\n\n  background-image: url(\"/paths.svg\");\n  background-size: auto 160%;\n  background-position: 100% 0%;\n  background-repeat: no-repeat;\n`\n\n// const Content = styled(Container)`\n//   h2 {\n//     color: ${props => props.theme.colors.primary};\n//   }\n\n//   .button {\n//     margin-top: 2rem;\n//   }\n// `\n\nfunction FaqPage() {\n  return (\n    <>\n      <Header>\n        <Text h1>Veelgestelde vragen</Text>\n      </Header>\n      <PageWrapper>\n        <Faq />\n        <PlanMeeting />\n      </PageWrapper>\n    </>\n  )\n}\n\nexport default FaqPage\n"],"sourceRoot":""}