{"version":3,"sources":["theme/index.ts","config.ts","db.ts","context/AppContext.tsx","components/switch/Switch.tsx","components/Price.tsx","components/configure/SingleOption.tsx","components/configure/Configurator.tsx","components/configure/MultiOption.tsx","components/configure/AccessoryItem.tsx","components/configure/ProductGroupItem.tsx","components/configure/Control.tsx","components/configure/CubeImage.tsx","hook/useImage.tsx","components/configure/Preview.tsx","components/configure/InfoPopup.tsx","hook/useWindowSize.ts","usePage.tsx","context/PageContext.tsx","page/Home.tsx","Syncher.tsx","context/HeroContext.tsx","App.tsx","index.tsx"],"names":["customTheme","theme","colors","styled","styledIn","excluded","include","viltLight","viltDark","getData","data","result","title","basePrice","groups","articles","article","forEach","a","o","id","group","extra1","xml","product","price","parseFloat","vat","image","undefined","thumb","thumbnail","description","descriptionlong","getArticle","find","g","code","accessories","createGroup","push","accessory","name","options","createAccessory","opt","optional","createOption","selected","fixed","config","appReducer","state","action","groupIndex","accessoryIndex","optionIndex","produce","draft","type","option","n","b","codes","includes","appStateContext","React","appDispatchContext","AppContextProvider","children","dispatch","Provider","value","useProductState","context","Error","useProductDispatch","variants","checked","borderRadius","unchecked","outerVariants","Switch","isChecked","isDisabled","onChange","cn","Container","animate","InnerContainer","TheSwitch","SwitchContainer","className","join","Toggle","whileHover","scale","opacity","whileTap","onClick","e","preventDefault","Content","_Container","div","motion","custom","_SwitchContainer","props","gray","_Toggle","button","green","Price","active","left","Math","floor","right","splitPrice","PriceContainer","EuroSign","Natural","Decimals","SingleOption","setOption","showOptionInfo","ConfiguratorContext","useConfigurator","Flex","alignItems","Name","InfoContainer","IconButton","variant","variantColor","aria-label","icon","isRound","size","MultiOption","selectOption","clearOptions","setPrice","reduce","acc","cur","Box","justifyContent","OptionsContainer","map","OptionContainer","key","color","ColorCube","label","AccessoryItem","index","length","op","open","x","transition","stiffness","velocity","closed","ProductGroupItem","Heading","as","margin","pt","pb","textAlign","AccessoryList","staggerChildren","delayChildren","staggerDirection","li","ul","Control","loading","setLoading","priceExcl","priceBtw","ControlContainer","initial","translateX","exit","PriceInfo","toFixed","CTA","Button","isLoading","window","Checkout","_ControlContainer","src","count","done","status","response","setResponse","img","Image","onload","loadImage","useImage","CubeImageContainer","onAnimationComplete","_CubeImageContainer","_count","Preview","onClose","sources","setSources","f1","old","used","filter","c","sort","localeCompare","sortAlpha","filename","PreviewContainer","translateY","ImageContainer","location","href","_Preview","InfoPopup","isOpen","setIsOpen","Modal","isCentered","backgroundColor","p","InfoContent","Configurator","pageHeight","optionInfo","setOptionInfo","calcPrice","all","allActive","ConfiguratorContainer","style","height","Input","GroupList","_ConfiguratorContainer","_GroupList","_Input","isClient","_check","defaultContext","page","section","width","setPage","hero","setHero","PageContext","PageContextProvider","getSize","innerWidth","innerHeight","windowSize","setWindowSize","addEventListener","handleResize","removeEventListener","useWindowSize","disposer","setInterval","hash","s","substring","split","params","clearInterval","usePage","contextValue","setContextValue","HomePage","usePageContext","Syncher","cart","document","getElementById","textContent","JSON","parse","err","console","error","activeCodes","el","stringify","HeroContext","HeroContextProvider","_hero","App","dataSrc","ThemeProvider","styles","css","CSSReset","ColorModeProvider","rootElement","hasChildNodes","hydrate","render"],"mappings":"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","file":"static/js/main.b639b31b.chunk.js","sourcesContent":["import { theme } from \"@chakra-ui/core\";\r\nimport styledIn, { CreateStyled } from \"@emotion/styled\";\r\n\r\nexport const customTheme = {\r\n  ...theme,\r\n  colors: {\r\n    ...theme.colors\r\n    // Go to https://smart-swatch.netlify.com/ to easily generate a new color\r\n    // palette.\r\n  }\r\n};\r\n\r\nexport type Theme = typeof customTheme;\r\nexport const styled = styledIn as CreateStyled<Theme>;\r\n","export default {\n  excluded: [\"DCB01\", \"DCV01\", \"DCV02\", \"DCG01\", \"DCM01\", \"DCF01\", \"DCS01\", \"DCR01\"],\n  include: [\"DCF01\", \"DCL01\", \"DCG01\", \"DCO01\", \"DCP01\"],\n  viltLight: \"DCV01\",\n  viltDark: \"DCV02\"\n};\n","//import { gen } from \"gen\";\n\nimport config from \"config\";\n\nexport type Product = {\n  title: string;\n  groups: ProductGroup[];\n  basePrice: number;\n};\n\nexport type ProductGroup = {\n  title: string;\n  code: string;\n  accessories: Accessory[];\n  //for parsing only\n};\n\nexport type Accessory = {\n  name: string;\n  code: string;\n  options: Option[];\n};\n\nexport type Option = {\n  name: string;\n  code: string;\n  optional: boolean;\n  color?: string;\n  selected?: boolean;\n  price?: number;\n  fixed?: boolean;\n  image?: string;\n  description?: string;\n};\n\n// let basisSet: ProductGroup = {\n//   title: \"Basis set\",\n//   code: \"basisSet\",\n//   matchWebgroups: [\"1\", \"4\"],\n//   accessories: []\n// };\n\n// let electraAccessoires: ProductGroup = {\n//   title: \"Electra accessoires\",\n//   code: \"electraAccessoires\",\n//   matchWebgroups: [\"5\", \"3\"],\n//   accessories: []\n// };\n\n// let verdereAccessoires: ProductGroup = {\n//   title: \"Verdere accessoires\",\n//   code: \"verdereAccessoires\",\n//   matchWebgroups: [\"6\"],\n//   accessories: []\n// };\n\nexport function getData(data: any): Product {\n  const result: Product = {\n    title: \"Desk Cube\",\n    basePrice: 0,\n    groups: []\n  };\n  if (!data) return result;\n\n  data.data.articles[0].article.forEach((a: any) => {\n    let article = getArticle(a);\n\n    let group = result.groups.find((g) => g.code === article.group);\n    if (!group) {\n      group = createGroup(article);\n      result.groups.push(group);\n    }\n\n    let accessory = group.accessories.find((a) => a.code === article.product);\n    if (!accessory) {\n      accessory = createAccessory(article);\n      group.accessories.push(accessory);\n    }\n\n    let opt = createOption(article);\n    if (opt.code === \"DCB01\") {\n      opt.selected = true;\n      opt.fixed = true;\n    }\n    if (opt.code === config.viltLight) {\n      opt.selected = true;\n    }\n    if (article.group === \"Basis set\") {\n      opt.optional = false;\n    }\n    accessory.options.push(opt);\n  });\n\n  //gen(result);\n\n  return result;\n}\n\ntype Article = {\n  id: string;\n  group: string;\n  product: string;\n  title: string;\n  price: number;\n  vat: number;\n  image?: string;\n  thumb?: string;\n  description?: string;\n};\n\nfunction getArticle(o: any): Article {\n  let result: Article = {\n    id: o.id,\n    group: o.extra1?.xml?.group,\n    product: o.extra1?.xml?.product,\n    title: o.extra1?.xml?.title,\n    price: parseFloat(o.price),\n    vat: parseFloat(o.vat),\n    image: o.image && o.image !== \"\" ? o.image : undefined,\n    thumb: o.thumbnail && o.thumbnail !== \"\" ? o.thumbnail : undefined,\n    description: o.descriptionlong && o.descriptionlong !== \"\" ? o.descriptionlong : undefined\n  };\n\n  return result;\n}\n\nfunction createGroup(a: Article): ProductGroup {\n  let result: ProductGroup = {\n    title: a.group,\n    code: a.group,\n    accessories: []\n  };\n  return result;\n}\n\nfunction createAccessory(a: Article): Accessory {\n  let result: Accessory = {\n    name: a.product,\n    code: a.product,\n    options: []\n  };\n  return result;\n}\n\nfunction createOption(a: Article): Option {\n  let result: Option = {\n    name: a.title,\n    code: a.id,\n    price: a.price,\n    optional: true,\n    image: a.image,\n    description: a.description\n  };\n  return result;\n}\n","import * as React from \"react\";\nimport { getData, Product } from \"../db\";\nimport { produce } from \"immer\";\n\nexport type Action =\n  | {\n      type: \"selectOption\";\n      groupIndex: number;\n      accessoryIndex: number;\n      optionIndex: number;\n      b?: boolean;\n      codes?: string[];\n    }\n  | {\n      type: \"setOption\";\n      groupIndex: number;\n      accessoryIndex: number;\n      optionIndex: number;\n      b?: boolean;\n      codes?: string[];\n    }\n  | {\n      type: \"setOptions\";\n      groupIndex: number;\n      accessoryIndex: number;\n      optionIndex: number;\n      b?: boolean;\n      codes?: string[];\n    };\n\nfunction appReducer(state: Product, action: Action): Product {\n  const { groupIndex, accessoryIndex, optionIndex } = action;\n  return produce(state, (draft) => {\n    switch (action.type) {\n      case \"selectOption\":\n        draft.groups[groupIndex].accessories[accessoryIndex].options.forEach((option, n) => {\n          option.selected = n === optionIndex;\n        });\n        break;\n      case \"setOption\":\n        draft.groups[groupIndex].accessories[accessoryIndex].options[optionIndex].selected = !!action.b;\n        break;\n      case \"setOptions\":\n        draft.groups.forEach((g) => {\n          g.accessories.forEach((a) => {\n            a.options.forEach((o) => {\n              if (action.codes!.includes(o.code)) {\n                o.selected = !!action.b;\n              }\n            });\n          });\n        });\n        break;\n      default:\n        return state;\n    }\n  });\n}\n\nexport const appStateContext = React.createContext<Product | undefined>(undefined);\nexport const appDispatchContext = React.createContext<React.Dispatch<any> | undefined>(undefined);\n\nexport interface Props {\n  data: any;\n  children: React.ReactNode;\n}\nexport default function AppContextProvider({ data, children }: Props) {\n  const [state, dispatch] = React.useReducer(appReducer, getData(data));\n\n  return (\n    <appStateContext.Provider value={state}>\n      <appDispatchContext.Provider value={dispatch}>{children}</appDispatchContext.Provider>\n    </appStateContext.Provider>\n  );\n}\n\nexport function useProductState() {\n  const context = React.useContext(appStateContext);\n  if (context === undefined) {\n    throw new Error(\"useProductState must be used within a AppContextProdivder\");\n  }\n  return context;\n}\n\nexport function useProductDispatch() {\n  const context = React.useContext(appDispatchContext);\n  if (context === undefined) {\n    throw new Error(\"useProductDispatch must be used within a AppContextProdivder\");\n  }\n  return context;\n}\n","import * as React from \"react\";\nimport { styled } from \"theme\";\nimport { motion } from \"framer-motion\";\n\nexport interface SwitchProps {\n  id?: string;\n  isChecked: boolean;\n  isDisabled: boolean;\n  onChange: (b: boolean) => void;\n  children: React.ReactNode;\n}\n\nconst variants = {\n  checked: {\n    borderRadius: \"2px\"\n  },\n  unchecked: {\n    borderRadius: \"50%\"\n  }\n};\n\nconst outerVariants = {\n  checked: {\n    borderRadius: \"3px\"\n  },\n  unchecked: {\n    borderRadius: \"50%\"\n  }\n};\n\nconst Switch: React.FC<SwitchProps> = ({ id, isChecked, isDisabled, onChange, children }) => {\n  let cn = [];\n  if (isChecked) cn.push(\"active\");\n  if (isDisabled) cn.push(\"disabled\");\n  return (\n    <Container animate={isChecked ? \"checked\" : \"unchecked\"}>\n      <InnerContainer>\n        <TheSwitch>\n          <SwitchContainer variants={outerVariants} className={cn.join(\" \")}>\n            <Toggle\n              className={cn.join(\" \")}\n              whileHover={{ scale: 1.1, opacity: 0.8 }}\n              whileTap={{ scale: 0.9 }}\n              onClick={(e: any) => {\n                e.preventDefault();\n                if (!isDisabled) {\n                  onChange(!isChecked);\n                }\n              }}\n              variants={variants}\n            />\n          </SwitchContainer>\n        </TheSwitch>\n        <Content>{children}</Content>\n      </InnerContainer>\n    </Container>\n  );\n};\n\nexport default Switch;\n\nconst _Container = styled.div`\n  flex: 1;\n`;\n\nconst Container = motion.custom(_Container);\n\nconst InnerContainer = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n`;\n\nconst Content = styled.div`\n  flex: 1 1 auto;\n`;\n\nconst TheSwitch = styled.div`\n  flex: 0 0 44px;\n`;\n\nconst _SwitchContainer = styled.div`\n  width: 24px;\n  height: 24px;\n  background-color: ${(props) => props.theme.colors.gray[\"800\"]};\n\n  @media (max-width: 768px) {\n    width: 24px;\n    height: 24px;\n  }\n`;\nconst SwitchContainer = motion.custom(_SwitchContainer);\n\nconst _Toggle = styled.button`\n  width: 20px;\n  height: 20px;\n  margin: 2px;\n  background-color: #fff;\n\n  border: 0;\n  outline: 0;\n\n  &.active {\n    background-color: ${(props) => props.theme.colors.green[\"400\"]};\n    margin: 2px;\n    width: 20px;\n    height: 20px;\n  }\n\n  &.disabled {\n    opacity: 0.3;\n  }\n`;\n\nconst Toggle = motion.custom(_Toggle);\n","import * as React from \"react\";\nimport { styled } from \"theme\";\n\nexport interface Props {\n  price: number;\n  active?: boolean;\n}\n\nexport default function Price({ price, active }: Props) {\n  let [left, right] = splitPrice(price);\n  return (\n    <PriceContainer>\n      <EuroSign>&euro;</EuroSign>\n      <Natural className={active ? \"active\" : \"idle\"}>{left}</Natural>\n      <Decimals>{right !== \"\" ? `,${right}` : \"\"}</Decimals>\n    </PriceContainer>\n  );\n}\n\nconst PriceContainer = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  color: ${(props) => props.theme.colors.gray[\"400\"]};\n`;\n\nconst EuroSign = styled.div`\n  font-size: 20px;\n\n  @media (max-width: 400px) {\n    font-size: 14px;\n  }\n`;\n\nconst Natural = styled.div`\n  font-size: 20px;\n  text-align: right;\n  &.active {\n    color: #333;\n    font-weight: bold;\n  }\n`;\n\nconst Decimals = styled.div`\n  font-size: 10px;\n  padding-bottom: 8px;\n  flex: 0 0 18px;\n  text-align: right;\n  color: ${(props) => props.theme.colors.gray[\"500\"]};\n  display: none;\n`;\n\nfunction splitPrice(n: number): [string, string] {\n  let left = Math.floor(n);\n  let right = n - left;\n  right = Math.floor(right * 100);\n\n  return [left + \"\", right + \"\"];\n}\n","import * as React from \"react\";\nimport { Option } from \"db\";\nimport Switch from \"components/switch/Switch\";\nimport { styled } from \"theme\";\nimport Price from \"components/Price\";\nimport { Flex, IconButton } from \"@chakra-ui/core\";\nimport { useConfigurator } from \"./Configurator\";\n\nexport interface Props {\n  option: Option;\n  setOption: (b: boolean) => void;\n}\n\nexport default function SingleOption({ option, setOption }: Props) {\n  const { showOptionInfo } = useConfigurator();\n  return (\n    <Switch\n      id={option.code + \"tog\"}\n      isChecked={!!option.selected}\n      isDisabled={!!option.fixed}\n      onChange={(checked) => {\n        setOption(checked);\n      }}\n    >\n      <Flex alignItems=\"center\">\n        <Name\n          onClick={() => {\n            if (option.fixed !== true) {\n              setOption(!option.selected);\n            }\n          }}\n        >\n          {option.name}\n        </Name>\n\n        <PriceContainer>{option.price && <Price active={!!option.selected} price={option.price} />}</PriceContainer>\n        <InfoContainer>\n          {option.description && (\n            <IconButton\n              variant=\"ghost\"\n              variantColor=\"teal\"\n              aria-label=\"info\"\n              icon=\"info\"\n              isRound={true}\n              size=\"xs\"\n              onClick={() => {\n                showOptionInfo(option);\n              }}\n            />\n          )}\n        </InfoContainer>\n      </Flex>\n    </Switch>\n  );\n}\n\nconst Name = styled.button`\n  flex: 1 1 auto;\n  border: 0;\n  background-color: transparent;\n  outline: 0;\n  padding-right: 10px;\n  text-align: left;\n`;\n\nconst PriceContainer = styled.div`\n  flex: 0 0 80px;\n`;\n\nconst InfoContainer = styled.div`\n  flex: 0 0 32px;\n  display: flex;\n  justify-content: flex-end;\n`;\n","import * as React from \"react\";\nimport { motion } from \"framer-motion\";\nimport { styled } from \"../../theme\";\n\nimport { useProductState } from \"context/AppContext\";\nimport ProductGroupItem from \"./ProductGroupItem\";\nimport { Product, Option } from \"db\";\n\nimport Control from \"./Control\";\nimport Preview from \"./Preview\";\nimport InfoPopup from \"./InfoPopup\";\n\nexport interface Props {\n  pageHeight: number;\n  onClose: () => void;\n}\n\nexport interface IConfiguratorContext {\n  showOptionInfo: (option: Option) => void;\n}\n\nexport const ConfiguratorContext = React.createContext<IConfiguratorContext | undefined>(undefined);\n\nexport default function Configurator({ pageHeight, onClose }: Props) {\n  const product = useProductState();\n  const [optionInfo, setOptionInfo] = React.useState<Option | null>(null);\n\n  const showOptionInfo = (option: Option) => {\n    setOptionInfo(option);\n  };\n\n  let price = calcPrice(product);\n  let all = allActive(product);\n  return (\n    <ConfiguratorContext.Provider value={{ showOptionInfo }}>\n      <ConfiguratorContainer style={{ height: `${pageHeight}px` }}>\n        <Preview onClose={() => onClose()} codes={all.map((a) => a.code)} />\n        <Input\n          key=\"input\"\n          initial={{\n            translateX: \"-50%\"\n          }}\n          animate={{\n            translateX: 0\n          }}\n          exit={{\n            translateX: \"-100%\"\n          }}\n        >\n          <Content>\n            <GroupList\n              animate={{\n                transition: { staggerChildren: 0.07, delayChildren: 0.2 }\n              }}\n              exit={{\n                transition: { staggerChildren: 0.05, staggerDirection: -1 }\n              }}\n            >\n              {product.groups.map((group, n) => (\n                <ProductGroupItem key={n} index={n} group={group} />\n              ))}\n            </GroupList>\n          </Content>\n        </Input>\n        <Control price={price} />\n        <InfoPopup\n          option={optionInfo}\n          onClose={() => {\n            setOptionInfo(null);\n          }}\n        />\n      </ConfiguratorContainer>\n    </ConfiguratorContext.Provider>\n  );\n}\n\nexport function useConfigurator() {\n  const context = React.useContext(ConfiguratorContext);\n  if (context === undefined) {\n    throw new Error(\"useConfigurator must be used within a ConfiguratorContextProvider\");\n  }\n  return context;\n}\n\nexport function calcPrice(product: Product): number {\n  let result = product.basePrice;\n  product.groups.forEach((g) => {\n    g.accessories.forEach((a) => {\n      a.options.forEach((o) => {\n        if (o.selected && o.price !== undefined) {\n          result += o.price;\n        }\n      });\n    });\n  });\n  return result;\n}\n\ntype Temp = {\n  code: string;\n  title: string;\n};\nfunction allActive(product: Product): Temp[] {\n  let result: Temp[] = [];\n  product.groups.forEach((g) => {\n    g.accessories.forEach((a) => {\n      a.options.forEach((o) => {\n        if (o.selected && o.price !== undefined) {\n          result.push({\n            code: o.code,\n            title: o.name\n          });\n        }\n      });\n    });\n  });\n  return result;\n}\n\nconst _ConfiguratorContainer = styled.div`\n  position: fixed;\n  z-index: 5;\n  right: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  overflow: hidden;\n  display: flex;\n  align-items: stretch;\n\n  @media (max-width: 600px) {\n    flex-direction: column;\n  }\n`;\n\nconst ConfiguratorContainer = motion.custom(_ConfiguratorContainer);\n\nconst Content = styled.div`\n  flex: 1 1 auto;\n  overflow-y: scroll;\n`;\n\nconst _GroupList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\nconst GroupList = motion.custom(_GroupList);\n\nconst _Input = styled.div`\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 40%;\n  height: 100%;\n  background-color: #fff;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  @media (max-width: 768px) {\n    top: 30%;\n    height: 60%;\n    width: 100%;\n  }\n`;\n\nconst Input = motion.custom(_Input);\n","import * as React from \"react\";\nimport { Option } from \"db\";\nimport { styled } from \"theme\";\nimport { Flex, Box } from \"@chakra-ui/core\";\nimport Switch from \"components/switch/Switch\";\nimport Price from \"components/Price\";\n\nexport interface Props {\n  title: string;\n  options: Option[];\n  selectOption: (index: number) => void;\n  clearOptions: () => void;\n}\n\nexport default function MultiOption({ title, options, selectOption, clearOptions }: Props) {\n  const [price, setPrice] = React.useState(options[0].price || 0);\n\n  React.useEffect(() => {\n    if (options[0].optional === false) {\n      selectOption(0);\n    }\n  }, []);\n\n  const isChecked = options.reduce((acc, cur) => acc || !!cur.selected, false);\n\n  return (\n    <Switch\n      isChecked={isChecked}\n      isDisabled={options[0].optional === false}\n      onChange={(b) => {\n        if (b) {\n          selectOption(0);\n        } else {\n          clearOptions();\n        }\n      }}\n    >\n      <Box>\n        <Flex justifyContent=\"space-between\">\n          <PriceContainer>{price !== 0 && <Price active={isChecked} price={price} />}</PriceContainer>\n        </Flex>\n        <OptionsContainer>\n          {options.map((option, n) => (\n            <OptionContainer\n              key={option.code}\n              className={option.selected ? \"selected\" : \"idle\"}\n              onClick={(e: any) => {\n                e.preventDefault();\n                if (option.selected) {\n                  clearOptions();\n                } else {\n                  selectOption(n);\n                }\n                setPrice(option.price || 0);\n              }}\n            >\n              {option.color !== undefined && <ColorCube color={option.color} />}\n              {option.name}\n            </OptionContainer>\n          ))}\n        </OptionsContainer>\n      </Box>\n    </Switch>\n  );\n}\n\nconst OptionsContainer = styled.div`\n  display: flex;\n  flex: 1 1 auto;\n\n  align-items: center;\n  margin-top: 9px;\n`;\n\nconst OptionContainer = styled.button`\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  margin: 0 8px 0 0;\n  border: 1px solid #ebebeb;\n  color: #575757;\n  padding: 8px 10px;\n\n  &.selected {\n    border-color: ${(props) => props.theme.colors.green[\"400\"]};\n    color: ${(props) => props.theme.colors.green[\"400\"]};\n  }\n`;\n\nconst ColorCube = styled.div<{ color: string }>`\n  width: 16px;\n  height: 16px;\n  margin-right: 8px;\n  border-radius: 3px;\n  border: 1px solid #eee;\n  background-color: ${(props) => props.color};\n`;\n\nconst Name = styled.label`\n  flex: 1 1 auto;\n  padding-right: 10px;\n`;\n\nconst PriceContainer = styled.div`\n  flex: 0 0 80px;\n`;\n","import { Accessory } from \"db\";\nimport { motion } from \"framer-motion\";\nimport * as React from \"react\";\n\nimport { styled } from \"../../theme\";\n\nimport { useProductDispatch } from \"context/AppContext\";\nimport SingleOption from \"./SingleOption\";\nimport MultiOption from \"./MultiOption\";\n\nexport interface Props {\n  index: number;\n  groupIndex: number;\n  accessory: Accessory;\n}\n\nexport default function AccessoryItem({ groupIndex, index, accessory }: Props) {\n  const dispatch = useProductDispatch();\n  let options = accessory.options;\n\n  return (\n    <Container variants={variants}>\n      {options.length === 1 ? (\n        <SingleOption\n          option={options[0]}\n          setOption={(b) => {\n            dispatch({ type: \"setOption\", groupIndex, accessoryIndex: index, optionIndex: 0, b });\n          }}\n        />\n      ) : (\n        <MultiOption\n          title={accessory.name}\n          options={options}\n          selectOption={(n: number) => {\n            dispatch({ type: \"selectOption\", groupIndex, accessoryIndex: index, optionIndex: n });\n          }}\n          clearOptions={() => {\n            options.forEach((op, n) => {\n              dispatch({ type: \"setOption\", groupIndex, accessoryIndex: index, optionIndex: n, b: false });\n            });\n          }}\n        />\n      )}\n    </Container>\n  );\n}\n\nconst Container = motion.custom(styled.div`\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n\n  padding: 12px 0;\n`);\n\nconst variants = {\n  open: {\n    x: 0,\n    opacity: 1,\n    transition: {\n      x: { stiffness: 1000, velocity: -100 }\n    }\n  },\n  closed: {\n    x: 500,\n    opacity: 0,\n    transition: {\n      x: { stiffness: 1000 }\n    }\n  }\n};\n","import * as React from \"react\";\nimport { motion } from \"framer-motion\";\nimport { styled } from \"../../theme\";\nimport { ProductGroup } from \"db\";\nimport { Box, Heading } from \"@chakra-ui/core\";\nimport AccessoryItem from \"./AccessoryItem\";\nexport interface Props {\n  index: number;\n  group: ProductGroup;\n}\n\nexport default function ProductGroupItem({ index, group }: Props) {\n  return (\n    <Container variants={variants}>\n      <Box>\n        <Heading size=\"md\" as=\"h3\" margin={0} pt={3} pb={2} textAlign=\"center\">\n          {group.title}\n        </Heading>\n        <AccessoryList\n          variants={{\n            open: {\n              transition: { staggerChildren: 0.12, delayChildren: 0.2 }\n            },\n            closed: {\n              transition: { staggerChildren: 0.05, staggerDirection: -1 }\n            }\n          }}\n        >\n          {group.accessories.map((a, n) => (\n            <AccessoryItem key={n} groupIndex={index} index={n} accessory={a} />\n          ))}\n        </AccessoryList>\n      </Box>\n    </Container>\n  );\n}\n\nconst Container = motion.custom(styled.li`\n  padding: 32px 32px 0 32px;\n  margin: 0;\n  @media (max-width: 400px) {\n    padding: 0;\n  }\n`);\n\nconst AccessoryList = motion.custom(styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`);\n\nconst variants = {\n  open: {\n    x: 0,\n    opacity: 1,\n    transition: {\n      x: { stiffness: 1000, velocity: -100 }\n    }\n  },\n  closed: {\n    x: 200,\n    opacity: 0,\n    transition: {\n      x: { stiffness: 1000 }\n    }\n  }\n};\n","import * as React from \"react\";\nimport { styled } from \"theme\";\nimport { Button } from \"@chakra-ui/core\";\n\nimport { motion } from \"framer-motion\";\n\nexport interface Props {\n  price: number;\n}\n\nexport default function Control({ price }: Props) {\n  const [loading, setLoading] = React.useState(false);\n  const submitCart = () => {\n    //@ts-ignore\n    if (window.Checkout) {\n      //@ts-ignore\n      window.Checkout(\"cart\");\n    }\n    setLoading(true);\n  };\n\n  let btw = 1.2;\n  let priceExcl = price / btw;\n  let priceBtw = price - priceExcl;\n\n  return (\n    <ControlContainer\n      initial={{\n        translateX: \"100%\"\n      }}\n      animate={{\n        translateX: 0\n      }}\n      exit={{\n        translateX: \"100%\"\n      }}\n    >\n      <PriceInfo className=\"sub\">\n        <label>exclusief</label>\n        <p>€{priceExcl.toFixed(2)}</p>\n      </PriceInfo>\n      <PriceInfo className=\"sub\">\n        <label>btw</label>\n        <p>€{priceBtw.toFixed(2)}</p>\n      </PriceInfo>\n      <PriceInfo>\n        <label>Totaal</label>\n        <p>€{price}</p>\n      </PriceInfo>\n\n      <CTA>\n        <Button variantColor=\"green\" isLoading={loading} onClick={submitCart}>\n          Bestellen\n        </Button>\n      </CTA>\n    </ControlContainer>\n  );\n}\n\nconst _ControlContainer = styled.div`\n  position: absolute;\n  left: 40%;\n  top: 70%;\n  width: 60%;\n  height: 30%;\n\n  background-color: #322f2a;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  color: #fff;\n  padding: 0 64px;\n\n  @media (max-width: 768px) {\n    left: 0;\n    top: 90%;\n    height: 10%;\n    width: 100%;\n    padding: 0 8px;\n  }\n`;\n\nconst ControlContainer = motion.custom(_ControlContainer);\n\nconst CTA = styled.div``;\n\nconst PriceInfo = styled.div`\n  label {\n    font-size: 12px;\n    opacity: 0.7;\n  }\n  p {\n    font-weight: bold;\n    font-size: 18px;\n  }\n\n  &.sub {\n    opacity: 0.4;\n  }\n\n  @media (max-width: 768px) {\n    label {\n      font-size: 11px;\n      opacity: 0.7;\n    }\n    p {\n      font-weight: bold;\n      font-size: 14px;\n    }\n  }\n`;\n","import * as React from \"react\";\nimport { styled } from \"theme\";\nimport { motion } from \"framer-motion\";\nimport useImage from \"hook/useImage\";\n\nexport interface Props {\n  src: string;\n  count: number;\n  done: () => void;\n}\n\nconst CubeImage: React.FC<Props> = ({ src, count, done }) => {\n  const { status } = useImage(src);\n\n  if (status !== \"complete\") return null;\n  return (\n    <CubeImageContainer\n      src={src}\n      count={count}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      onAnimationComplete={() => {\n        done();\n      }}\n    />\n  );\n};\n\nexport default React.memo(CubeImage);\n\nconst _CubeImageContainer = styled.div<{ src: string; count: number }>`\n  background: transparent url('${(props) => props.src}') no-repeat center center;\n  background-size: contain;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: ${(props) => props.count + 1};\n`;\n\nconst CubeImageContainer = motion.custom(_CubeImageContainer);\n","import * as React from \"react\";\n\nexport interface Response {\n  status: \"idle\" | \"loading\" | \"complete\" | \"failed\";\n}\n\nexport default function useImage(src: string): Response {\n  const [response, setResponse] = React.useState<Response>({ status: \"idle\" });\n\n  React.useEffect(() => {\n    let img = new Image();\n    const onLoad = (e: any) => {\n      setResponse({ status: \"complete\" });\n    };\n    img.onload = onLoad;\n\n    const loadImage = (src: string) => {\n      img.src = src;\n    };\n\n    if (src && response.status === \"idle\") {\n      loadImage(src);\n    }\n\n    return () => {\n      img.onload = null;\n    };\n  }, [src]);\n\n  return response;\n}\n","import * as React from \"react\";\nimport { styled } from \"theme\";\nimport { motion } from \"framer-motion\";\nimport { IconButton } from \"@chakra-ui/core\";\nimport config from \"../../config\";\nimport CubeImage from \"./CubeImage\";\n\nexport interface Props {\n  onClose: () => void;\n  codes: string[];\n}\n\nvar _count = 0;\n\nexport default function Preview({ onClose, codes }: Props) {\n  const [sources, setSources] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (codes.length === 11) {\n      let f1 = \"\";\n      if (codes.includes(config.viltDark)) {\n        f1 = `/_clientfiles/assets/cubes/alles_donkergrijs.jpg`;\n      } else {\n        f1 = `/_clientfiles/assets/cubes/alles_lichtgrijs.jpg`;\n      }\n\n      setSources((old) => [...old, f1]);\n    } else {\n      let used = codes.filter((c) => {\n        if (c === config.viltLight || c === config.viltDark) return true;\n        return config.include.includes(c);\n      });\n      used = sortAlpha(used);\n\n      let filename = `/_clientfiles/assets/cubes/${used.join(\"_\")}.jpg`;\n      if (used.length === 0) {\n        filename = \"/_clientfiles/assets/cubes/DCV01.jpg\";\n      }\n\n      if (sources[sources.length - 1] !== filename) {\n        setSources((old) => [...old, filename]);\n      }\n    }\n  }, [codes]);\n\n  const gc = () => {\n    if (sources.length > 1) {\n      setSources((old) => [old[old.length - 1]]);\n    }\n  };\n\n  return (\n    <PreviewContainer\n      key=\"preview\"\n      initial={{\n        translateY: \"-50%\"\n      }}\n      animate={{\n        translateY: 0\n      }}\n      exit={{\n        translateY: \"-100%\"\n      }}\n    >\n      {/* <Debug>\n        {sources.map((s, n) => (\n          <div key={n}>{s}</div>\n        ))}\n      </Debug> */}\n      <ImageContainer>\n        {sources.map((src, n) => (\n          <CubeImage\n            key={n}\n            src={src}\n            count={_count++}\n            done={() => {\n              gc();\n            }}\n          />\n        ))}\n      </ImageContainer>\n\n      <IconButton\n        className=\"close-button\"\n        aria-label=\"close\"\n        icon=\"small-close\"\n        isRound={true}\n        size=\"sm\"\n        onClick={() => {\n          window.location.href = \"/\";\n        }}\n      />\n    </PreviewContainer>\n  );\n}\n\nfunction sortAlpha(codes: string[]): string[] {\n  return codes.sort((a, b) => {\n    return (\"\" + a).localeCompare(\"\" + b);\n  });\n}\n\nconst _Preview = styled.div`\n  position: absolute;\n  left: 40%;\n  top: 0;\n  width: 60%;\n  height: 70%;\n  background-color: #eee;\n  .close-button {\n    position: absolute;\n    right: 16px;\n    top: 16px;\n    z-index: 999;\n  }\n  @media (max-width: 600px) {\n    left: 0;\n    width: 100%;\n    height: 30%;\n\n    .close-button {\n      right: 8px;\n      top: 8px;\n    }\n  }\n`;\nconst PreviewContainer = motion.custom(_Preview);\n\nconst ImageContainer = styled.div`\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n\n  background-color: #322f2a;\n`;\n\n// const Debug = styled.div`\n//   position: absolute;\n//   z-index: 1000;\n//   left: 0;\n//   bottom: 0;\n//   width: 100%;\n//   height: 300px;\n//   color: #fff;\n// `;\n","import * as React from \"react\";\nimport { Option } from \"../../db\";\nimport { Modal, ModalOverlay, ModalContent, ModalCloseButton, ModalBody } from \"@chakra-ui/core\";\nimport { styled } from \"theme\";\n\nexport interface Props {\n  option: Option | null;\n  onClose: () => void;\n}\n\nconst InfoPopup: React.FC<Props> = ({ option, onClose }) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    setIsOpen(option !== null);\n  }, [option]);\n\n  return (\n    <>\n      <Modal isOpen={isOpen} onClose={onClose} size=\"xl\" isCentered>\n        <ModalOverlay />\n        <ModalContent backgroundColor={\"#322f2a\"}>\n          <ModalCloseButton color=\"#fff\" />\n          <ModalBody p={0}>\n            <InfoContent>\n              <h2>{option?.name}</h2>\n              <p>{option?.description}</p>\n              {option?.image && <Image src={`/_clientfiles/${option!.image}`} />}\n            </InfoContent>\n          </ModalBody>\n        </ModalContent>\n      </Modal>\n    </>\n  );\n};\n\nexport default InfoPopup;\n\nconst InfoContent = styled.div`\n  h2 {\n    color: ${(props) => props.theme.colors.green[\"400\"]};\n    font-size: 22px;\n    padding: 32px;\n  }\n\n  p {\n    font-size: 16px;\n    padding: 0 32px 16px 32px;\n    margin: 0;\n    color: ${(props) => props.theme.colors.gray[\"100\"]};\n  }\n\n  @media (max-width: 400px) {\n    h2 {\n      padding: 16px 60px 8px 16px;\n    }\n\n    p {\n      padding: 0 16px 8px 16px;\n    }\n  }\n`;\n\nconst Image = styled.div<{ src: string }>`\n  background: #333 url(\"${(props) => props.src}\") no-repeat center center;\n  background-size: cover;\n  width: 100%;\n  height: 300px;\n  max-width: 100%;\n`;\n","import * as React from \"react\";\n\nexport type WindowSize = {\n  width: number;\n  height: number;\n};\nconst isClient = typeof window === \"object\";\n\nexport default function useWindowSize(): WindowSize {\n  function getSize() {\n    return {\n      width: isClient ? window.innerWidth : 0,\n      height: isClient ? window.innerHeight : 0\n    };\n  }\n\n  const [windowSize, setWindowSize] = React.useState(getSize());\n\n  React.useEffect(() => {\n    if (!isClient) {\n      return;\n    }\n\n    function handleResize() {\n      setWindowSize(getSize());\n    }\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []); // Empty array ensures that effect is only run on mount and unmount\n\n  return windowSize;\n}\n","import * as React from \"react\";\n\nexport type Page = {\n  section: string;\n  params?: any;\n};\n\nlet _check = \"\";\n\nexport default function usePage(): [Page, any] {\n  const [page, setPage] = React.useState<Page>({\n    section: _check\n  });\n\n  React.useEffect(() => {\n    const check = () => {\n      let p = window.location.hash;\n      if (p !== _check) {\n        _check = p;\n        if (p.length > 1) {\n          let s = p.substring(1).split(\":\");\n          setPage({\n            section: s[0],\n            params: s.length > 1 ? s[1] : undefined\n          });\n        } else {\n          setPage({\n            section: \"\"\n          });\n        }\n      }\n    };\n    const disposer = setInterval(check, 500);\n\n    return () => {\n      clearInterval(disposer);\n    };\n  }, []);\n\n  return [page, setPage];\n}\n","import * as React from \"react\";\nimport useWindowSize, { WindowSize } from \"hook/useWindowSize\";\nimport usePage, { Page } from \"usePage\";\n\nexport type IPageContext = {\n  page: Page;\n  setPage: (p: Page) => void;\n  size: WindowSize;\n  hero: boolean;\n  setHero: (b: boolean) => void;\n};\n\nconst defaultContext: IPageContext = {\n  page: {\n    section: \"home\"\n  },\n  size: {\n    width: 0,\n    height: 0\n  },\n  setPage: (p) => null,\n  hero: true,\n  setHero: (b: boolean) => null\n};\n\nexport const PageContext = React.createContext<IPageContext>(defaultContext);\n\nexport default function PageContextProvider({ children }: { children: React.ReactNode }) {\n  const size = useWindowSize();\n  const [page, setPage] = usePage();\n  const [hero, setHero] = React.useState(true);\n  const [contextValue, setContextValue] = React.useState<IPageContext>({\n    ...defaultContext,\n    size,\n    setPage: (p: Page) => {\n      window.location.hash = p.section;\n      setPage(p);\n    },\n    hero,\n    setHero: (b: boolean) => {\n      setHero(b);\n    }\n  });\n\n  React.useEffect(() => {\n    setContextValue((c) => ({ ...c, page }));\n  }, [page]);\n\n  React.useEffect(() => {\n    setContextValue((c) => ({ ...c, size }));\n  }, [size]);\n\n  return <PageContext.Provider value={contextValue}>{children}</PageContext.Provider>;\n}\n\nexport function usePageContext() {\n  const context = React.useContext(PageContext);\n  if (context === undefined) {\n    throw new Error(\"usePageContext must be used within a PageContextProvider\");\n  }\n  return context;\n}\n","import Configurator from \"components/configure/Configurator\";\nimport { usePageContext } from \"context/PageContext\";\nimport * as React from \"react\";\n\nexport default function HomePage() {\n  const page = usePageContext();\n  let pageHeight = page.size.height;\n\n  return (\n    <div>\n      <Configurator\n        pageHeight={pageHeight}\n        onClose={() => {\n          page.setPage({ section: \"\" });\n        }}\n      />\n    </div>\n  );\n}\n","import * as React from \"react\";\nimport { useProductState, useProductDispatch } from \"context/AppContext\";\nimport { Product } from \"db\";\nimport { calcPrice } from \"components/configure/Configurator\";\n\nexport default function Syncher() {\n  const product = useProductState();\n  const dispatch = useProductDispatch();\n  React.useEffect(() => {\n    let cart = document.getElementById(\"cart\")?.textContent;\n    if (cart) {\n      try {\n        let { codes } = JSON.parse(cart);\n        dispatch({\n          type: \"setOptions\",\n          groupIndex: 0,\n          accessoryIndex: 0,\n          optionIndex: 0,\n          b: true,\n          codes: codes\n        });\n      } catch (err) {\n        console.error(err);\n      }\n    }\n  }, [dispatch]);\n\n  React.useEffect(() => {\n    let codes = activeCodes(product);\n    let price = calcPrice(product);\n    let el = document.getElementById(\"cart\");\n    if (el) {\n      el.textContent = JSON.stringify({\n        codes,\n        price\n      });\n    }\n\n    if (codes.includes(\"DCF01\") || codes.includes(\"DCL01\")) {\n      dispatch({\n        type: \"setOptions\",\n        groupIndex: 0,\n        accessoryIndex: 0,\n        optionIndex: 0,\n        b: true,\n        codes: [\"DCS01\"]\n      });\n    }\n  }, [product, dispatch]);\n\n  return null;\n}\n\nfunction activeCodes(product: Product): string[] {\n  let result: string[] = [];\n  product.groups.forEach((g) => {\n    g.accessories.forEach((a) => {\n      a.options.forEach((o) => {\n        if (o.selected) {\n          result.push(o.code);\n        }\n      });\n    });\n  });\n  return result;\n}\n","import * as React from \"react\";\n\nexport interface IHeroContext {\n  hero: boolean;\n  setHero: (b: boolean) => void;\n}\n\nexport const HeroContext = React.createContext<IHeroContext | undefined>(undefined);\n\nexport const HeroContextProvider: React.FC = ({ children }) => {\n  const [hero, _hero] = React.useState(true);\n\n  const setHero = (b: boolean) => {\n    _hero(b);\n  };\n\n  return <HeroContext.Provider value={{ hero, setHero }}>{children}</HeroContext.Provider>;\n};\n\nexport function useHero() {\n  const context = React.useContext(HeroContext);\n  if (context === undefined) {\n    throw new Error(\"useHero must be used within a HeroContextProvider\");\n  }\n  return context;\n}\n","import React from \"react\";\nimport { ThemeProvider, ColorModeProvider, CSSReset } from \"@chakra-ui/core\";\nimport { customTheme } from \"./theme\";\nimport { Global, css } from \"@emotion/core\";\nimport AppContextProvider from \"context/AppContext\";\nimport HomePage from \"page/Home\";\n\nimport PageContextProvider from \"context/PageContext\";\nimport Navigation from \"components/navigation/Navigation\";\nimport Syncher from \"Syncher\";\nimport { HeroContextProvider } from \"context/HeroContext\";\n\nfunction getData() {\n  let dataSrc = document.getElementById(\"data\")?.textContent;\n  let data = dataSrc ? JSON.parse(dataSrc) : null;\n  return data;\n}\n\nexport default function App() {\n  let data = getData();\n  return (\n    <ThemeProvider theme={customTheme}>\n      <Global\n        styles={css`\n          html {\n            scroll-behavior: smooth;\n          }\n          body {\n            @media (max-width: 800px) {\n            }\n          }\n        `}\n      />\n      <CSSReset />\n      <ColorModeProvider value={\"light\"}>\n        <PageContextProvider>\n          <HeroContextProvider>\n            <AppContextProvider data={data}>\n              <HomePage />\n              <Syncher />\n            </AppContextProvider>\n          </HeroContextProvider>\n        </PageContextProvider>\n      </ColorModeProvider>\n    </ThemeProvider>\n  );\n}\n","import React from \"react\";\nimport { hydrate, render } from \"react-dom\";\nimport App from \"./App\";\n\nconst rootElement = document.getElementById(\"root\");\nif (rootElement && rootElement.hasChildNodes()) {\n  hydrate(<App />, rootElement);\n} else {\n  render(<App />, rootElement);\n}\n"],"sourceRoot":""}