{"version":3,"sources":["webpack:///./src/pages/aan-de-slag.tsx"],"names":["Header","styled","Container","Content","props","theme","colors","primary","Register","useState","name","setName","companyName","setCompanyName","h1","p","style","width","onSubmit","e","preventDefault","plan","URLSearchParams","window","location","search","get","_name","encodeURIComponent","_companyName","href","direction","gap","label","value","onChange","target","required","type","icon","aria-hidden","focusable","data-prefix","role","xmlns","viewBox","fill","d"],"mappings":"2FAAA,4FAOMA,EAASC,YAAOC,KAAV,yEAAGD,CAAH,gWA0BNE,EAAUF,YAAOC,KAAV,0EAAGD,CAAH,sPAIA,SAAAG,GAAK,OAAIA,EAAMC,MAAMC,OAAOC,WAkG1BC,UAvEf,WAAoB,MACMC,mBAAiB,IAAlCC,EADW,KACLC,EADK,OAEoBF,mBAAiB,IAAhDG,EAFW,KAEEC,EAFF,KAclB,OACE,oCACE,kBAACb,EAAD,KACE,kBAAC,IAAD,CAAMc,IAAE,GAAR,kCAEF,kBAAC,IAAD,KACE,kBAACX,EAAD,KACE,kBAAC,IAAD,CAAMY,GAAC,GAAP,6GAKA,0BAAMC,MAAO,CAAEC,MAAO,QAAUC,SAtBxC,SAAsBC,GACpBA,EAAEC,iBAEF,IAAMC,EACJ,IAAIC,gBAAgBC,OAAOC,SAASC,QAAQC,IAAI,SAAW,UACvDC,EAAQC,mBAAmBlB,GAC3BmB,EAAeD,mBAAmBhB,GACxCW,OAAOC,SAASM,KAAhB,qCAA4DH,EAA5D,gBAAiFE,EAAjF,SAAsGR,IAgB9F,kBAAC,IAAD,CAAMU,UAAU,MAAMC,IAAI,UACxB,kBAAC,IAAD,CAAWhB,MAAO,CAAEC,MAAO,QAAUgB,MAAM,SACzC,kBAAC,IAAD,CACEC,MAAOxB,EACPyB,SAAU,SAAAhB,GAAC,OAAIR,EAAQQ,EAAEiB,OAAOF,QAChCG,UAAQ,KAGZ,kBAAC,IAAD,CAAWrB,MAAO,CAAEC,MAAO,QAAUgB,MAAM,iBACzC,kBAAC,IAAD,CACEC,MAAOtB,EACPuB,SAAU,SAAAhB,GAAC,OAAIN,EAAeM,EAAEiB,OAAOF,QACvCG,UAAQ,MAId,kBAAC,IAAD,CACEC,KAAK,SACLC,KACE,yBACEC,cAAY,OACZC,UAAU,QACVC,cAAY,MACZC,KAAK,MACLC,MAAM,6BACNC,QAAQ,eAER,0BACEC,KAAK,eACLC,EAAE,8IAbV,8BAsBJ,kBAAC,IAAD","file":"component---src-pages-aan-de-slag-tsx-f973a676a20d02dadafb.js","sourcesContent":["import React, { useState, FormEvent } from \"react\"\nimport { Text, Button, Flow, FormField, Input } from \"deskie-ui\"\nimport Container from \"../components/Container\"\nimport PageWrapper from \"../components/PageWrapper\"\nimport PlanMeeting from \"../components/PlanMeeting\"\nimport styled from \"styled-components\"\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\nconst Content = styled(Container)`\n  padding-bottom: 3rem;\n\n  h2 {\n    color: ${props => props.theme.colors.primary};\n  }\n\n  form {\n    margin-top: 1rem;\n\n    @media screen and (max-width: 600px) {\n      & > .flow {\n        flex-direction: column;\n\n        & > * + * {\n          margin-left: 0;\n          margin-top: 2rem;\n        }\n      }\n    }\n  }\n\n  .button {\n    margin-top: 2rem;\n\n    @media screen and (max-width: 600px) {\n      width: 100%;\n    }\n  }\n`\n\nfunction Register() {\n  const [name, setName] = useState<string>(\"\")\n  const [companyName, setCompanyName] = useState<string>(\"\")\n\n  function handleSubmit(e: FormEvent<HTMLFormElement>) {\n    e.preventDefault()\n    // Do not used build in Navigate function because a page refresh is necessary\n    const plan =\n      new URLSearchParams(window.location.search).get(\"plan\") || \"Premium\"\n    const _name = encodeURIComponent(name)\n    const _companyName = encodeURIComponent(companyName)\n    window.location.href = `/login/az?returnUrl=/welcome?name=${_name}&companyName=${_companyName}&plan=${plan}`\n  }\n\n  return (\n    <>\n      <Header>\n        <Text h1>Aan de slag met Deskie. Nice!</Text>\n      </Header>\n      <PageWrapper>\n        <Content>\n          <Text p>\n            Meld je aan en registreer je met jouw Microsoft 365 account. Daarna\n            kun je direct met Deskie aan de slag!\n          </Text>\n\n          <form style={{ width: \"100%\" }} onSubmit={handleSubmit}>\n            <Flow direction=\"row\" gap=\"1.5rem\">\n              <FormField style={{ width: \"100%\" }} label=\"Naam*\">\n                <Input\n                  value={name}\n                  onChange={e => setName(e.target.value)}\n                  required\n                />\n              </FormField>\n              <FormField style={{ width: \"100%\" }} label=\"Bedrijfsnaam*\">\n                <Input\n                  value={companyName}\n                  onChange={e => setCompanyName(e.target.value)}\n                  required\n                />\n              </FormField>\n            </Flow>\n            <Button\n              type=\"submit\"\n              icon={\n                <svg\n                  aria-hidden=\"true\"\n                  focusable=\"false\"\n                  data-prefix=\"fab\"\n                  role=\"img\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 448 512\"\n                >\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z\"\n                  ></path>\n                </svg>\n              }\n            >\n              Registreer met Microsoft\n            </Button>\n          </form>\n        </Content>\n        <PlanMeeting />\n      </PageWrapper>\n    </>\n  )\n}\n\nexport default Register\n"],"sourceRoot":""}