{"version":3,"sources":["webpack:///./src/pages/basket.tsx"],"names":["handleClear","clearCart","e","a","preventDefault","handleRemove","removeItem","sku","handleChangeQuantity","setItem","signed","newQuantity","parseInt","target","value","Basket","useCheckout","items","slugToImage","subTotal","className","map","item","i","image","category","name","key","fixed","type","inputMode","pattern","min","max","quantity","onChange","amount","price","mult","onClick","colSpan","length","to"],"mappings":"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","file":"component---src-pages-basket-tsx-7e973577c574bbffe7af.js","sourcesContent":["import React, { Fragment } from \"react\"\nimport { Link } from \"gatsby\"\nimport Img from \"gatsby-image\"\nimport Currency from \"../components/currency\"\nimport SSLFooter from \"../components/ssl_footer\"\nimport { Card, Cards, CardHeadData, CardData } from \"../components/cards\"\nimport useCheckout from \"../hooks/use-checkout\"\n\nconst handleClear = (clearCart: () => void) => async (e: React.MouseEvent) => {\n  e.preventDefault()\n  clearCart()\n}\n\nconst handleRemove =\n  (removeItem: (sku: string) => void, sku: string) => (e: React.MouseEvent) => {\n    e.preventDefault()\n    removeItem(sku)\n  }\n\nconst handleChangeQuantity =\n  (\n    setItem: (sku: string, signed: string, count: number) => void,\n    sku: string,\n    signed: string\n  ) =>\n  (e: React.ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault()\n    const newQuantity = parseInt(e.target.value)\n    setItem(sku, signed, newQuantity)\n  }\n\nconst Basket = () => {\n  const { clearCart, items, slugToImage, removeItem, setItem, subTotal } =\n    useCheckout()\n\n  return (\n    <Fragment>\n      <table className=\"hidden md:table w-full mb-2 bg-gray-100 border border-solid border-gray-800 border-collapse checkoutTable\">\n        <thead>\n          <tr className=\"bg-gray-400 border-0 border-b border-solid border-b-gray-800 border-collapse\">\n            <th className=\"p-1\" />\n            <th className=\"p-1\">Title</th>\n            <th className=\"p-1\">Quantity</th>\n            <th className=\"p-1 text-right\">Price(each)</th>\n            <th className=\"p-1 text-right\">Price(total)</th>\n            <th className=\"p-1\" />\n          </tr>\n        </thead>\n        <tbody>\n          {items.map((item, i: number) => {\n            const image = slugToImage[`${item.category}-${item.name}`]\n            return (\n              <tr key={i}>\n                <td className=\"cell-collapse\">\n                  {image && <Img className=\"shadow-md\" fixed={image} />}\n                </td>\n                <td>{item.name}</td>\n                <td>\n                  <input\n                    className=\"w-full text-right\"\n                    type=\"number\"\n                    name={item.sku}\n                    inputMode=\"numeric\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"99\"\n                    value={item.quantity}\n                    onChange={handleChangeQuantity(\n                      setItem,\n                      item.sku,\n                      item.signed\n                    )}\n                  />\n                </td>\n                <td className=\"text-right\">\n                  <Currency amount={item.price} />\n                </td>\n                <td className=\"text-right\">\n                  <Currency amount={item.price.mult(item.quantity)} />\n                </td>\n                <td className=\"w-40\">\n                  <button\n                    className=\"bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded\"\n                    onClick={handleRemove(removeItem, item.sku)}\n                  >\n                    Remove Item\n                  </button>\n                </td>\n              </tr>\n            )\n          })}\n        </tbody>\n        <tfoot>\n          <tr>\n            <td colSpan={3} />\n            <td className=\"font-bold text-right\">Sub Total</td>\n            <td className=\"font-bold text-right\">\n              <Currency amount={subTotal} />\n            </td>\n            <td />\n          </tr>\n        </tfoot>\n      </table>\n      <Cards className=\"flex flex-col md:hidden\">\n        {items.map((item, i: number) => {\n          const image = slugToImage[`${item.category}-${item.name}`]\n          return (\n            <Card key={i} className=\"my-1\">\n              {image && (\n                <Img\n                  className=\"shadow-md w-full flex-grow w-full\"\n                  fixed={image}\n                />\n              )}\n              <CardHeadData name=\"Title\">{item.name}</CardHeadData>\n              <CardHeadData name=\"Quantity\">\n                <input\n                  type=\"number\"\n                  name={item.sku}\n                  min=\"0\"\n                  max=\"99\"\n                  value={item.quantity}\n                  onChange={handleChangeQuantity(\n                    setItem,\n                    item.sku,\n                    item.signed\n                  )}\n                />\n              </CardHeadData>\n              <CardHeadData name=\"Price(each)\">\n                <Currency amount={item.price} />\n              </CardHeadData>\n              <CardHeadData name=\"Price(total)\">\n                <Currency amount={item.price.mult(item.quantity)} />\n              </CardHeadData>\n              <CardData>\n                <button\n                  className=\"bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded\"\n                  onClick={handleRemove(removeItem, item.sku)}\n                >\n                  Remove Item\n                </button>\n              </CardData>\n            </Card>\n          )\n        })}\n        <Card>\n          <CardHeadData name=\"Sub Total\">\n            <Currency amount={subTotal} />\n          </CardHeadData>\n        </Card>\n      </Cards>\n      {items && items.length ? (\n        <Fragment>\n          <button\n            className=\"bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mr-1 md:mr-2 my-1\"\n            onClick={handleClear(clearCart)}\n          >\n            Clear Basket\n          </button>\n          <Link\n            to=\"/checkout\"\n            className=\"bg-bm-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-1 inline-block md:ml-2 my-1\"\n          >\n            Checkout\n          </Link>\n        </Fragment>\n      ) : (\n        <div />\n      )}\n      <SSLFooter />\n    </Fragment>\n  )\n}\n\nexport default Basket\n"],"sourceRoot":""}