{"version":3,"file":"component---src-pages-gift-card-js-7fe05fca53256f53f14a.js","mappings":"2LAEO,MAAMA,EAAY,QAAC,MAAEC,EAAF,SAASC,GAAV,SACvB,uBAAKC,UAAU,eACb,sBAAIA,UAAU,yCAAyCF,GACvD,qBAAGE,UAAU,wDACVD,GAJkB,EASZE,EAAe,QAAC,MAAEH,EAAF,SAASC,EAAT,MAAmBG,GAApB,SAC1B,uBAAKF,UAAU,eACb,sBACEA,UAAS,4BAA6BE,GAAgB,kBAErDJ,GAEH,qBAAGE,UAAU,wDACVD,GARqB,C,oFCX5B,EAAe,IAA0B,sD,4CCOzC,MAAMI,EAAiB,IAIhB,IAJiB,QACtBC,EADsB,KAEtBC,EAAO,sBAFe,OAGtBC,EAAS,KACL,EACJ,MAAM,QAAEC,EAAF,mBAAWC,IAAuBC,EAAAA,EAAAA,GAAkBL,EAAS,CACjEM,YAAY,EACZC,eAAgBL,IAGlB,OACE,wBAAMN,UAAU,iDACd,0BACEY,KAAK,SACLC,QAASL,EACTR,UAAU,yNAGTO,EACC,uBAAKP,UAAU,iBACb,uBACEA,UAAU,uBACVc,MAAM,6BACNC,QAAQ,YACRC,KAAK,gBAEL,wBACEC,SAAS,UACTC,EAAE,01BACFC,SAAS,aAVf,oBAgBAd,GAzBR,EA6HF,MA7F0B,KACxB,MAAQe,MAAOC,IAAiBC,EAAAA,EAAAA,YAAWC,EAAAA,GACrCC,EAAWH,EAAeA,EAAaG,SAAW,GACxDC,QAAQC,IAAIL,EAAaG,UACzB,MAAMG,EAAkBH,EAASI,QAAQC,GACX,cAArBA,EAAGC,SAASlB,OAKrB,OAFAa,QAAQC,IAAIC,EAAgB,IAG1B,gBAAC,IAAD,KACE,uBAAK3B,UAAU,kBACb,uBAAKA,UAAU,QACb,gBAACH,EAAA,EAAD,CAAWC,MAAM,kBAEnB,4BACE,uBAAKE,UAAU,yDACb,uBAAKA,UAAU,yCACb,uBAAKA,UAAU,oBACb,uBACE+B,IAAKC,EACLC,IAAI,eACJjC,UAAU,+BAGZ,uBAAKA,UAAU,yCAEjB,uBAAKA,UAAU,uDACb,uBAAKA,UAAU,SACb,uBAAKA,UAAU,gBACb,uBAAKA,UAAU,sBAMzB,uBAAKA,UAAU,4BACb,uBACE+B,IAAKC,EACLC,IAAI,eACJjC,UAAU,gCAId,uBAAKA,UAAU,uBACb,uBAAKA,UAAU,+CACb,qBAAGA,UAAU,oEAAb,yFAIA,2BACA,qBAAGA,UAAU,oEAAb,qCAGA,2BACA,qBAAGA,UAAU,oEAAb,0GAIA,2BACA,qBAAGA,UAAU,oEAAb,kJAKA,uBAAKA,UAAU,+BACb,uBAAKA,UAAU,0BACb,gBAACG,EAAD,CACEC,QAASuB,EAAgB,GACzBtB,KAAK,uBACLC,OAAQ,QAKd,qBAAGN,UAAU,oEAAb,iCAGA,2BACA,qBAAGA,UAAU,oEAAb,6IAtEZ,C","sources":["webpack://waxcarvers-fe/./src/components/Common/PageTitle.jsx","webpack://waxcarvers-fe/./src/static/voucher/voucher.png","webpack://waxcarvers-fe/./src/pages/gift-card.js"],"sourcesContent":["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","export default __webpack_public_path__ + \"static/voucher-3028cc9792294922cdb8656865814bdd.png\";","import React, { useContext } from \"react\";\nimport placeholder from \"../static/voucher/voucher.png\";\nimport { AppContext } from \"../context\";\nimport { useStripeCheckout } from \"../hooks/useStripeCheckout\";\nimport Layout from \"../components/layout\";\nimport { PageTitle } from \"../components/Common/PageTitle\";\n\nconst CheckoutButton = ({\n  product,\n  text = \"Continue to payment\",\n  amount = 5000,\n}) => {\n  const { loading, redirectToCheckout } = useStripeCheckout(product, {\n    isGiftCard: true,\n    giftCardAmount: amount,\n  });\n\n  return (\n    <span className=\"inline-flex rounded-md shadow-sm items-center\">\n      <button\n        type=\"button\"\n        onClick={redirectToCheckout}\n        className=\"px-12 py-6 mx-auto text-base font-bold text-blue-700 hover:text-blue-800 sm:text-lg cursor-pointer\n                  md:text-inline-flex items-center justify-center  border border-transparent rounded-md bg-gray-50 hover:bg-blue-100\"\n      >\n        {loading ? (\n          <div className=\"flex flex-row\">\n            <svg\n              className=\"animate-spin w-6 h-6\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n            &nbsp; Creating Order\n          </div>\n        ) : (\n          text\n        )}\n      </button>\n    </span>\n  );\n};\n\nconst GiftCardSalesPage = () => {\n  const { state: contextState } = useContext(AppContext);\n  const products = contextState ? contextState.products : [];\n  console.log(contextState.products);\n  const giftCardProduct = products.filter((it) => {\n    return it.metadata.type === \"gift_card\";\n  });\n\n  console.log(giftCardProduct[0]);\n\n  return (\n    <Layout>\n      <div className=\"bg-white mb-12\">\n        <div className=\"m-12\">\n          <PageTitle title=\"Gift Voucher\" />\n        </div>\n        <main>\n          <div className=\"hidden sm:max-w-3xl sm:mx-auto sm:p-6 sm:block lg:p-8\">\n            <div className=\"relative shadow-xl sm:overflow-hidden\">\n              <div className=\"absolute inset-0\">\n                <img\n                  src={placeholder}\n                  alt=\"Gift Voucher\"\n                  className=\"h-full w-full object-cover\"\n                />\n\n                <div className=\"absolute inset-0 mix-blend-multiply\"></div>\n              </div>\n              <div className=\"relative px-4 py-64 sm:px-6 sm:p-24 lg:p-32 lg:px-8\">\n                <div className=\"py-16\">\n                  <div className=\"mt-16  mx-12\">\n                    <div className=\" text-center\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div className=\"sm:hidden mx-auto sm:p-6\">\n            <img\n              src={placeholder}\n              alt=\"Gift Voucher\"\n              className=\"h-full w-full object-cover\"\n            />\n          </div>\n\n          <div className=\"bg-blue-600 md:mt-4\">\n            <div className=\"max-w-4xl mx-auto py-6 px-4 sm:px-4 lg:px-4\">\n              <p className=\"text-xl text-white tracking-wide text-center whitespace-pre-wrap\">\n                Know someone that would love to take a class, but you’re not\n                sure what class that is?\n              </p>\n              <br />\n              <p className=\"text-xl text-white tracking-wide text-center whitespace-pre-wrap\">\n                Why not give them a gift voucher!\n              </p>\n              <br />\n              <p className=\"text-xl text-white tracking-wide text-center whitespace-pre-wrap\">\n                The price for a regular class is €50, but email me if you want a\n                gift voucher with a different amount.\n              </p>\n              <br />\n              <p className=\"text-xl text-white tracking-wide text-center whitespace-pre-wrap\">\n                You receive purchase confirmation immediately. Please give me 24\n                hours to send you a PDF version of the gift voucher with all the\n                information.\n              </p>\n              <div className=\"lg:flex-shrink-0 mx-12 my-8\">\n                <div className=\"rounded-md text-center\">\n                  <CheckoutButton\n                    product={giftCardProduct[0]}\n                    text=\"Buy Gift Voucher €50\"\n                    amount={5000}\n                  />\n                </div>\n              </div>\n\n              <p className=\"text-xl text-white tracking-wide text-center whitespace-pre-wrap\">\n                How to redeem a gift voucher:\n              </p>\n              <br />\n              <p className=\"text-xl text-white tracking-wide text-center whitespace-pre-wrap\">\n                Send me an email with your email address, voucher number, and\n                the class you want to take. That way I can set up your account\n                for you.\n              </p>\n            </div>\n          </div>\n        </main>\n      </div>\n    </Layout>\n  );\n};\n\nexport default GiftCardSalesPage;\n"],"names":["PageTitle","title","subtitle","className","PageSubTitle","color","CheckoutButton","product","text","amount","loading","redirectToCheckout","useStripeCheckout","isGiftCard","giftCardAmount","type","onClick","xmlns","viewBox","fill","fillRule","d","clipRule","state","contextState","useContext","AppContext","products","console","log","giftCardProduct","filter","it","metadata","src","placeholder","alt"],"sourceRoot":""}