{"version":3,"file":"component---src-pages-lesson-store-js-fdfe26bdd98114c39eb5.js","mappings":"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","sources":["webpack://waxcarvers-fe/./src/components/Common/NewsLetterPlug.jsx","webpack://waxcarvers-fe/./src/components/Common/PageTitle.jsx","webpack://waxcarvers-fe/./src/components/Shop/SalesTable.jsx","webpack://waxcarvers-fe/./src/components/Shop/LessonStore.jsx","webpack://waxcarvers-fe/./src/pages/lesson-store.js"],"sourcesContent":["import React from \"react\";\n\nexport const JoinNewsLetterButton = () => (\n  <div>\n    <div className=\"bg-blue-100 lg:py-5 rounded\">\n      <div className=\"max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:flex lg:items-center lg:justify-center\">\n        <h2 className=\"text-2xl text-bold tracking-tight text-gray-700 text-center\">\n          <span className=\"block\">Always know what I'm up to!</span>\n        </h2>\n        <div className=\"lg:mt-0 lg:flex-shrink-0 mx-12 mt-8\">\n          <div className=\"rounded-md text-center\">\n            <a\n              href=\"https://newsletter.waxcarvers.com\"\n              aria-label=\"Join newsletter\"\n              className=\"inline-flex items-center justify-center px-5 py-3 border border-transparent\n                         text-base font-medium rounded-md text-white bg-blue-700 hover:bg-indigo-700\"\n            >\n              Get weekly emails!\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n);\n","import React from \"react\";\n\nexport const PageTitle = ({ title, subtitle }) => (\n  <div className=\"text-center\">\n    <h1 className=\"text-5xl tracking-tight text-blue-700\">{title}</h1>\n    <p className=\"mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4\">\n      {subtitle}\n    </p>\n  </div>\n);\n\nexport const PageSubTitle = ({ title, subtitle, color }) => (\n  <div className=\"text-center\">\n    <h2\n      className={`text-4xl tracking-tight ${color ? color : \"text-blue-700\"}`}\n    >\n      {title}\n    </h2>\n    <p className=\"mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4\">\n      {subtitle}\n    </p>\n  </div>\n);\n","import React, { useContext } from 'react'\nimport { LessonStoreContext } from './LessonStoreContext'\n\nconst LessonList = ({ lessons, selectedLessons, selectLesson }) => {\n\n  function classNames (...classes) {\n    return classes.filter(Boolean).join(' ')\n  }\n\n  return (\n    <div>\n      <ul role=\"list\" className=\"mt-3 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4\">\n        {lessons.map((lesson) => (\n          <li key={lesson.name} className=\"col-span-1 flex rounded-md shadow-sm\">\n            <div\n              className={classNames(\n                lesson.bgColor,\n                'flex-shrink-0 flex items-center justify-center w-16 text-white text-sm font-medium rounded-l-md'\n              )}\n            >\n              <img alt=\"Image of the lesson\" src={lesson.images[0]} />\n            </div>\n            <div\n              className=\"flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-gray-200 bg-white\">\n              <div className=\"flex-1 whitespace-normal px-4 py-2 text-sm\">\n                <a href={lesson.href} className=\"font-medium text-gray-900 hover:text-gray-600\">\n                  {lesson.name}\n                </a>\n              </div>\n              <div className=\"flex-shrink-0 pr-2\">\n                <button\n                  type=\"button\"\n                  className=\"inline-flex h-8 w-8 items-center justify-center rounded-full bg-white bg-transparent text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\"\n                >\n                  <span className=\"sr-only\">Select</span>\n                  <input id={`item ${lesson.id}`} type=\"checkbox\"\n                         checked={selectedLessons.includes(lesson.id)}\n                         onChange={() => selectLesson(lesson.id)}\n                         className=\"h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500\" />\n                </button>\n              </div>\n            </div>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n\n}\n\nexport const SalesTable = ({ openCheckout, selectLesson, selectedLessons }) => {\n  const ctx = useContext(LessonStoreContext)\n  const lessons = ctx?.lessons ?? []\n  return <div className=\"px-4 sm:px-6 lg:px-8\">\n    <div className=\"sm:flex sm:items-center\">\n      <div className=\"sm:flex-auto\">\n        <h1 className=\"text-xl font-semibold text-gray-900\">Individual classes</h1>\n        <p className=\"mt-2 text-sm text-gray-700\">Here's is a list of available individual classes. Select the ones you\n          want to purchase and click the checkout button.</p>\n      </div>\n      <div className=\"mt-4 sm:mt-0 sm:ml-16 sm:flex-none\">\n        <button type=\"button\"\n                onClick={openCheckout}\n                className=\"inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:w-auto\">Checkout\n        </button>\n      </div>\n    </div>\n    <div className=\"mt-8 flex flex-col\">\n      <div className=\"-my-2 -mx-4 sm:-mx-6 lg:-mx-8\">\n        <LessonList lessons={lessons} selectLesson={selectLesson} selectedLessons={selectedLessons} />\n      </div>\n    </div>\n  </div>\n}\n","import { SalesTable } from './SalesTable'\nimport React, { useCallback, useState } from 'react'\nimport { SlideOut } from '../Common/SlideOut'\nimport LessonStoreContext from './LessonStoreContext'\n\nconst LessonStoreContents = () => {\n  const [slideOutOpen, setSlideOutOpen] = useState(false)\n  const [selectedLessons, setSelectedLessons] = useState([])\n  const selectLesson = useCallback((id) => {\n    if (selectedLessons.includes(id)) {\n      setSelectedLessons(selectedLessons.filter(it => it !== id))\n    } else {\n      setSelectedLessons([...selectedLessons, id])\n    }\n  }, [selectedLessons, setSelectedLessons])\n  return (<>\n    <SlideOut isOpen={slideOutOpen}\n              setOpen={setSlideOutOpen}\n              selectLesson={selectLesson}\n              selectedLessons={selectedLessons} />\n    <section className=\"mt-12 mx-auto container\">\n      <SalesTable openCheckout={() => setSlideOutOpen(true)}\n                  selectLesson={selectLesson}\n                  selectedLessons={selectedLessons} />\n    </section>\n  </>)\n}\n\nexport const LessonStore = () =>\n  <LessonStoreContext>\n    <div>\n      <LessonStoreContents />\n    </div>\n  </LessonStoreContext>\n\n","import Layout from '../components/layout'\nimport { Helmet } from 'react-helmet'\nimport { PageTitle } from '../components/Common/PageTitle'\nimport { JoinNewsLetterButton } from '../components/Common/NewsLetterPlug'\nimport React from 'react'\nimport { LessonStore } from '../components/Shop/LessonStore'\n\nconst LessonStorePage = () => {\n  const bannerImg = 'http://images.waxcarvers.com.s3-website-eu-west-1.amazonaws.com/waxcarvers.png'\n  const attributes = {\n    title: 'Lesson Store',\n    description: 'Buy Individual Lessons'\n  }\n  return <Layout\n    title=\"Wax Carvers - Lesson Store\" description=\"Don't want to buy the full calendar? Get individual lessons here!\">\n    <Helmet>\n\n      <title>{attributes.title} ¦ Wax Carvers</title>\n      <meta name=\"description\" content={attributes.description} />\n      <meta property=\"og:title\" content={`${attributes.title} | Wax Carvers`} />\n      <meta property=\"og:image\" content={bannerImg} />\n      <meta property=\"og:url\" content={`https://www.waxcarvers.com/lesson-store`} />\n      <meta property=\"og:description\" content={attributes.description} />\n\n      <meta itemProp=\"name\" content={`${attributes.title} | Wax Carvers`} />\n      <meta itemProp=\"description\" content={attributes.description} />\n\n      <meta property=\"twitter:title\" content={`${attributes.title} | Wax Carvers`} />\n      <meta property=\"twitter:description\" content={attributes.description} />\n      <meta property=\"twitter:card\" content={bannerImg} />\n      <meta property=\"twitter:image:src\" content={bannerImg} />\n    </Helmet>\n    <div className=\"relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8\">\n      <div className=\"absolute inset-0\">\n        <div className=\"bg-white h-1/3 sm:h-2/3\"></div>\n      </div>\n      <div className=\"relative max-w-7xl mx-auto\">\n        <PageTitle title=\"Get Individual Lessons\" />\n        <div className=\"mt-12\">\n          <LessonStore />\n        </div>\n      </div>\n    </div>\n    <div className=\"mt-12\">\n      <JoinNewsLetterButton />\n    </div>\n  </Layout>\n}\nexport default LessonStorePage\n"],"names":["JoinNewsLetterButton","className","href","PageTitle","title","subtitle","PageSubTitle","color","LessonList","lessons","selectedLessons","selectLesson","classNames","classes","filter","Boolean","join","role","map","lesson","key","name","bgColor","alt","src","images","type","id","checked","includes","onChange","SalesTable","openCheckout","ctx","useContext","LessonStoreContext","onClick","LessonStoreContents","slideOutOpen","setSlideOutOpen","useState","setSelectedLessons","useCallback","it","SlideOut","isOpen","setOpen","LessonStore","bannerImg","attributes","description","Helmet","content","property","itemProp"],"sourceRoot":""}