{"version":3,"sources":["Preview.js","Slider.js","ColorSelect.js","SeriesSelect.js","FrameSelect.js","SwitchButtonSelect.js","Wizard.js","App.js","reportWebVitals.js","index.js"],"names":["PreviewContainer","styled","div","color","ColorCode","Image","InformationTitle","h1","PreviewImage","img","PreviewImageContainer","PreviewImageCover","Title","step","Preview","seri","frame","cover","src","DefaultCover","SliderContainer","Swiper","CustomSlideItem","SwiperCore","use","Navigation","A11y","Slider","children","otherProps","spaceBetween","slidesPerView","autoplay","navigation","setWrapperSize","breakpoints","640","Item","SwiperSlide","ColorContainer","ColorButton","button","isActive","isBordered","ColorButtonContainer","ColorItem","size","bg","WallPaperItem","ColorSelect","items","onChange","CATEGORIES","ColorButtons","text","value","useState","category","setCategory","changeColor","useEffect","setTimeout","map","index","onClick","selectedCategory","filter","IsTrend","Mode","Name","SeriesSelect","changeSeries","width","FrameSelect","changeFrame","SwitchButtonSelect","changeSwitchButton","WizardContainer","WizardNavigation","WizardButton","WizardContent","Wizard","colors","onChangeColor","series","onChangeSeri","onChangeFrame","onChangeCover","onChangeStep","AppContainer","App","setStep","data","setData","setColors","lang","name","nameEQ","ca","document","cookie","split","i","length","c","charAt","substring","indexOf","getCookie","fetchData","a","fetch","response","json","responseData","mappingData","rd","DefaultFrame","find","rdf","ParentId","Id","fetchColor","seriId","code","activeColor","setActiveColor","activeSeri","setActiveSeri","activeFrame","setActiveFrame","activeCover","setActiveCover","changeSeri","changeCover","d","getSwitches","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.c83be237.chunk.js","sourcesContent":["import styled from \"styled-components\";\n\nconst PreviewContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  background: ${({ color }) => `${color.ColorCode ? color.ColorCode : `url(${color.Image})`}`};\n  object-fit: cover;\n  object-position: center;\n  transition: all 0.3s ease-in-out;\n  flex: 1;\n  text-align: center;\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n`;\n\nconst InformationTitle = styled.h1`\n  margin-top: 30px;\n  margin-bottom: auto;\n`;\n\nconst PreviewImage = styled.img`\n width: 300px;\n max-width: 100%;\n margin: 80px 0pz;\n`;\n\n\nconst PreviewImageContainer = styled.div`\n  position: relative;\n  margin-top: 0;\n  margin-bottom: auto;\n  z-index: 1;\n`;\n\nconst PreviewImageCover = styled.img`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n`;\n\n\nconst Title = ({step}) => {\n  switch(step) {\n    case 0:\n      return <InformationTitle>Önce Duvar Rengi Seçelim</InformationTitle>\n    case 1:\n      return <InformationTitle>Seri Hangisi Olsun ?</InformationTitle>\n    case 2:\n      return <InformationTitle>Haydi Çerçeve Seçelim...</InformationTitle>\n    case 3:\n      return <InformationTitle>Şimdi de Kapağımızı Seçelim</InformationTitle>\n  }\n}\n\n\nconst Preview = ({ color, seri, frame, cover, step }) => {\n  return (\n    <PreviewContainer color={color}>\n      <Title step={step} />\n      <PreviewImageContainer>\n      {frame ? <PreviewImage src={frame.Image} /> : <PreviewImage src={seri && seri.Image || `/Content/images/default-product-image.png`} />}\n      {cover ? <PreviewImageCover src={cover.Image} /> : <PreviewImageCover src={frame && frame.DefaultCover && frame.DefaultCover.Image} />}\n      </PreviewImageContainer>\n     </PreviewContainer>\n  );\n};\n\nexport default Preview;\n","import SwiperCore, { Navigation, A11y } from 'swiper';\r\nimport { Swiper, SwiperSlide } from \"swiper/react\";\r\nimport styled from \"styled-components\";\r\n\r\nimport 'swiper/swiper.scss';\r\nimport 'swiper/components/navigation/navigation.scss';\r\n\r\nconst SliderContainer = styled(Swiper)`\r\n    width: 100%;\r\n    padding: 20px;\r\n`\r\n\r\nexport const CustomSlideItem = styled.div`\r\n    text-align: center;\r\n    align-items:center;\r\n    margin: 0 15px;\r\n    width: 120px;\r\n`;\r\n\r\n// install Swiper modules\r\nSwiperCore.use([Navigation, A11y]);\r\n\r\nconst Slider = ({children, ...otherProps}) => (\r\n    <SliderContainer\r\n        spaceBetween={1}\r\n        slidesPerView={2}\r\n        autoplay={true}\r\n        navigation={true}\r\n        setWrapperSize={true}\r\n         breakpoints={{\r\n        // when window width is >= 640px\r\n        640: {\r\n            slidesPerView: 7,\r\n        }\r\n        }}\r\n        {...otherProps}\r\n    >\r\n        {children}\r\n    </SliderContainer>\r\n)\r\n\r\nSlider.Item = SwiperSlide\r\n\r\nexport default Slider","import { useEffect, useState } from 'react'\r\nimport styled from 'styled-components'\r\n\r\nimport Slider, { CustomSlideItem } from './Slider'\r\n\r\nconst ColorContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  max-width: 810px;\r\n  background-color: #efefef;\r\n`;\r\n\r\nconst ColorButton = styled.button`\r\n  height: 39px;\r\n  width: 33.3333%;\r\n  font-family: \"HaasGrotDisp-Roman\";\r\n  font-size: 14px;\r\n  color: ${({ isActive }) => (isActive ? \"#f05a2a\" : \"#6c6c6c\")};\r\n  background-color: ${({ isActive }) => (isActive ? \"#fff\" : \"#efefef\")};\r\n  text-align: center;\r\n  line-height: 39px;\r\n  border: none;\r\n  ${({ isBordered }) =>\r\n    isBordered\r\n      ? `\r\n   border-left: 1px solid #c5c5c5;\r\n   border-right: 1px solid #c5c5c5;\r\n  `\r\n      : \"\"}\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  transition: all 0.3s linear;\r\n`;\r\n\r\nconst ColorButtonContainer = styled.div`\r\n  width: 100%;\r\n  max-width: 375px;\r\n  border-radius: 20px;\r\n  overflow: hidden;\r\n  border: 1px solid #c5c5c5;\r\n  margin-bottom: 20px;\r\n`;\r\n\r\nconst ColorItem = styled.div`\r\n  width: ${({ size }) => (size === \"small\" ? \"40px\" : \"122px\")};\r\n  height: ${({ size }) => (size === \"small\" ? \"40px\" : \"65px\")};\r\n  position: relative;\r\n  border: 4px solid #efefef;\r\n  background-color: ${({ bg }) => bg};\r\n`;\r\n\r\nconst WallPaperItem = styled.div`\r\n  width: 122px;\r\n  height: 65px;\r\n  position: relative;\r\n  border: 4px solid #efefef;\r\n  background-image: ${({ bg }) => `url(${bg})`};\r\n  background-size:cover;\r\n`;\r\n\r\nconst ColorSelect = ({ items, onChange }) =>\r\n {\r\n \r\n  const CATEGORIES = {\r\n    TRENDS: \"TRENDS\",\r\n    ALL_COLORS: \"ALL_COLORS\",\r\n    WALL_PAPER: \"WALL_PAPER\",\r\n  };\r\n\r\n  const ColorButtons = [\r\n    {\r\n      text: \"Trend Renkler\",\r\n      value: CATEGORIES.TRENDS,\r\n    },\r\n    {\r\n      text: \"Tüm Renkler\",\r\n      value: CATEGORIES.ALL_COLORS,\r\n    },\r\n    {\r\n      text: \"Duvar Kağıdı\",\r\n      value: CATEGORIES.WALL_PAPER,\r\n    },\r\n  ];\r\n\r\n  const [category, setCategory] = useState();\r\n\r\n  const changeCategory = (selectedCategory) => () =>\r\n    setCategory(selectedCategory);\r\n\r\n  const changeColor = (color) => () => onChange(color);\r\n\r\n  useEffect(() => {\r\n      setTimeout(() => {\r\n        setCategory(CATEGORIES.TRENDS)\r\n      }, 50);\r\n  }, [])\r\n\r\n  return (\r\n    <ColorContainer>\r\n      <ColorButtonContainer>\r\n        {ColorButtons.map((button, index) => (\r\n          <ColorButton\r\n            key={button.value}\r\n            isActive={category === button.value}\r\n            isBordered={index % 2 !== 0}\r\n            onClick={changeCategory(button.value)}\r\n          >\r\n            {button.text}\r\n          </ColorButton>\r\n        ))}\r\n      </ColorButtonContainer>\r\n\r\n      {category === CATEGORIES.TRENDS ? (\r\n        <Slider>\r\n          {items\r\n            .filter((color) => color.IsTrend && color.Mode === 1)\r\n            .map((color) => (\r\n                <Slider.Item key={color.Name} onClick={changeColor(color)}>\r\n                  <CustomSlideItem>\r\n                    <ColorItem bg={color.ColorCode} />\r\n                    <span>{color.Name}</span>\r\n                  </CustomSlideItem>\r\n                </Slider.Item>\r\n            ))}\r\n        </Slider>  \r\n      ) : null}\r\n\r\n      {category === CATEGORIES.ALL_COLORS ? (\r\n        <Slider>\r\n          {items\r\n            .filter((color) => color.Mode === 1)\r\n            .map((color) => (\r\n              <Slider.Item key={color.Name} onClick={changeColor(color)}>\r\n                  <CustomSlideItem>\r\n                    <ColorItem size=\"small\" bg={color.ColorCode} />\r\n                  </CustomSlideItem>\r\n              </Slider.Item>\r\n            ))}\r\n        </Slider>\r\n      ) : null}\r\n\r\n      {category === CATEGORIES.WALL_PAPER ? (\r\n        <Slider>\r\n          {items\r\n            .filter((color) => color.Mode === 2)\r\n            .map((color) => (\r\n              <Slider.Item key={color.Name} onClick={changeColor(color)}>\r\n                  <CustomSlideItem>\r\n                    <WallPaperItem bg={color.Image} />\r\n                    <span>{color.Name}</span>\r\n                  </CustomSlideItem>\r\n              </Slider.Item>\r\n            ))}\r\n        </Slider>\r\n      ) : null}\r\n    </ColorContainer>\r\n  );\r\n};\r\n\r\n\r\nexport default ColorSelect","\r\nimport Slider, { CustomSlideItem } from './Slider'\r\n\r\nconst SeriesSelect = ({items, onChange}) => {\r\n\r\n    const changeSeries = (seri) => () => onChange(seri);\r\n  \r\n     return (\r\n      <Slider>\r\n        {items.map((seri) => (\r\n                <Slider.Item key={seri.Name} onClick={changeSeries(seri)}>\r\n                   <CustomSlideItem>\r\n                        <img src={seri.Image} width=\"100px\" />\r\n                        <span>{seri.Name}</span>\r\n                   </CustomSlideItem>\r\n                </Slider.Item>\r\n              ))}\r\n      </Slider>\r\n    );\r\n  };\r\n\r\n  export default SeriesSelect","import Slider, { CustomSlideItem } from './Slider'\r\n\r\nconst FrameSelect = ({items, onChange}) => {\r\n    const changeFrame = (frame) => () => onChange(frame);\r\n    return (\r\n      <Slider>\r\n        {items.map((frame) => (\r\n                <Slider.Item key={frame.Name} onClick={changeFrame(frame)}>\r\n                    <CustomSlideItem>\r\n                        <img src={frame.Image} width=\"100px\" />\r\n                        <span>{frame.Name}</span>\r\n                    </CustomSlideItem>\r\n                </Slider.Item>\r\n              ))}\r\n      </Slider>\r\n    );\r\n  };\r\n  \r\n  export default FrameSelect"," import Slider, { CustomSlideItem } from './Slider'\r\n\r\n\r\nconst SwitchButtonSelect = ({ items, onChange }) => {\r\n    const changeSwitchButton = (button) => () => onChange(button);\r\n  \r\n    return (\r\n      <Slider>\r\n      {items.map((button) => (\r\n          <Slider.Item key={button.Name}  onClick={changeSwitchButton(button)}>\r\n              <CustomSlideItem>\r\n                <img src={button.Image} width=\"100px\" />\r\n                <span>{button.Name}</span>\r\n              </CustomSlideItem>\r\n          </Slider.Item>\r\n        ))}\r\n      </Slider>\r\n    );\r\n  };\r\n\r\n  export default SwitchButtonSelect","import styled from \"styled-components\";\n\nimport ColorSelect from './ColorSelect'\nimport SeriesSelect from './SeriesSelect'\nimport FrameSelect from './FrameSelect'\nimport SwitchButtonSelect from './SwitchButtonSelect'\n\nconst WizardContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n \n    background-color: #efefef;\n`;\n\nconst WizardNavigation = styled.div`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  max-width: 810px;\n  background-color: transparent;\n`;\n\nconst WizardButton = styled.button`\n  height: 52px;\n  width: 25%;\n  display: block;\n  background-color: ${({ isActive }) => (isActive ? \"#efefef\" : \"#e2e2e2\")};\n  color: ${({ isActive }) => (isActive ? \"#1c1c1c\" : \"#6c6c6c\")};\n  font-size: 16px;\n  text-align: center;\n  position: relative;\n  font-family: \"HaasGrotDisp-Medium\";\n  transition: all 0.3s cubic-bezier(0.3, 0.74, 0.5, 0.93);\n  border: none;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 3px;\n    background-color: ${({ isActive }) =>\n      isActive ? \"#f05a2a\" : \"transparent\"};\n  }\n`;\n\nconst WizardContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 800px;\n  max-width: 100%;\n  padding: 20px;\n  background-color: #efefef;\n`;\n\nconst Wizard = ({ colors, onChangeColor, series, onChangeSeri, frame, onChangeFrame, cover, onChangeCover, step, onChangeStep }) => \n{\n  return (\n    <WizardContainer>\n      <WizardNavigation>\n        <WizardButton isActive= {step === 0 } onClick={onChangeStep(0)}>\n          Duvar Rengi\n        </WizardButton>\n        \n        <WizardButton isActive={step === 1} onClick={onChangeStep(1)}>\n          Seri\n        </WizardButton>\n        <WizardButton isActive={step === 2} onClick={onChangeStep(2)}>\n          Çerçeve\n        </WizardButton>\n        <WizardButton isActive={step === 3} onClick={onChangeStep(3)}>\n          Kapak\n        </WizardButton>\n      </WizardNavigation>\n      <WizardContent>\n        {step === 0 ? (\n          <ColorSelect items={colors} onChange={onChangeColor} />\n        ) : null}\n        {step === 1 ? <SeriesSelect items={series} onChange={onChangeSeri} /> : null}\n        {step === 2 ? <FrameSelect items={frame} onChange={onChangeFrame} /> : null}\n        {step === 3 ? <SwitchButtonSelect items={cover} onChange={onChangeCover} /> : null}\n      </WizardContent>\n    </WizardContainer>\n  );\n};\n\nexport default Wizard;\n","import { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport Preview from \"./Preview\";\nimport Wizard from \"./Wizard\";\n\nconst AppContainer = styled.div`\n  height: 800px;\n  display: flex;\n  flex-direction: column;\n  width:100%;\n`;\n\nfunction getCookie(name) {\n  var nameEQ = name + \"=\";\n  var ca = document.cookie.split(';');\n  for(var i=0;i < ca.length;i++) {\n      var c = ca[i];\n      while (c.charAt(0)==' ') c = c.substring(1,c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);\n  }\n  return null;\n}\n\nconst App = () => {\n  const [step, setStep] = useState(0);\n  const [data, setData] = useState([]);\n  const [colors, setColors] = useState([]);\n\n  const getSeries = () => data.filter(d => d.Mode === 0)\n  const getFrame = (seriId) => data.filter(d => d.Mode === 1 && d.ParentId === seriId)\n  const getSwitches = (seriId) => data.filter(d => d.Mode === 2 && d.ParentId === seriId)\n\n  useEffect(() => {\n    const lang = getCookie(\"Language\") || 'tr'\n\n    const fetchData = async () => {\n      const response = await fetch(`https://www.mutlusan.com.tr/pages/GetSihirbazData?lang=${lang}`)\n      const responseData = await response.json()\n      const mappingData = responseData.map(rd => {\n        if (rd.Mode === 0) {\n          return {\n            ...rd,\n            DefaultFrame: responseData.find(rdf => rdf.Mode === 1 && rdf.ParentId === rd.Id)\n          }\n        }\n\n        return rd\n      })\n\n      setData(mappingData)\n    }\n\n    const fetchColor = async () => {\n      const response = await fetch(`https://www.mutlusan.com.tr/pages/getrenkler?=${lang}`)\n       const responseData = await response.json()\n\n      setColors(responseData)\n    }\n \n\n    fetchColor()\n    fetchData()\n \n  }, [])\n\n  const [activeColor, setActiveColor] = useState({\n    code: \"#fff\",\n  });\n\n  const [activeSeri, setActiveSeri] = useState();\n\n  const [activeFrame, setActiveFrame] = useState();\n\n  const [activeCover, setActiveCover] = useState();\n\n  const changeColor = (color) => {\n    setActiveColor(color);\n    setStep(1);\n  };\n\n  const changeSeri = (seri) => {\n    setActiveSeri(seri);\n    setStep(2);\n  }\n\n  const changeFrame = (frame) => {\n    setActiveFrame(frame);\n    setStep(3);\n  }\n\n  const changeCover = (cover) => {\n    setActiveCover(cover);\n  }\n\n  const changeStep = (step) => () => {\n    if (step === 0) {\n      changeFrame()\n      changeCover()\n      changeSeri()\n      changeColor({\n        code: \"#fff\"\n      })\n      setStep(step);\n    } else if (step === 1 && activeColor && activeColor.name) {\n      changeCover()\n      changeFrame()\n      setStep(step);\n    } else if (step === 2 && activeSeri && activeSeri.Name) {\n      changeCover()\n      setStep(step);\n    } else if (step === 3 && activeFrame && activeFrame.Name) {\n      setStep(step);\n    }\n  }\n\n\n  return ( \n    <AppContainer>\n      <Preview \n        step={step}\n        color={activeColor} \n        seri={activeSeri}\n        frame={activeFrame}\n        cover={activeCover}\n      />\n      <Wizard\n        step={step}\n        onChangeStep={changeStep}\n        colors={colors} onChangeColor={changeColor}\n        series={getSeries()} onChangeSeri={changeSeri}\n        frame={getFrame(activeSeri && activeSeri.Id)}   onChangeFrame={changeFrame}\n        cover={getSwitches(activeSeri && activeSeri.Id)}   onChangeCover={changeCover}\n      />\n    </AppContainer>\n  );\n};\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\n\nimport \"./index.css\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}