{"_id":"storefront-data-hooks-jorgemasta","_rev":"45-74bfe6836923be6bf6c683934792d77d","name":"storefront-data-hooks-jorgemasta","dist-tags":{"latest":"1.9.9","beta":"1.9.6-beta.3"},"versions":{"1.0.2":{"name":"storefront-data-hooks-jorgemasta","version":"1.0.2","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^9.5.5","prettier":"^2.1.2","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"gitHead":"177bdd9c92966ed344d96f83a7101c7c820775a8","description":"Table of Contents =================","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.0.2","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-iqbONgX3bzGoqjuVaF/NuIsxQP1Fl0w9RwAFobSoD1jl4pHel5LIcT0UOvtZP941ltRaWjSCrtQZ6By8mjMbKQ==","shasum":"2e6609af3e9a31855841910badb823c615ebab06","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.0.2.tgz","fileCount":171,"unpackedSize":504487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNmfwCRA9TVsSAnZWagAAOPkP/0D/3bomqkiZtQZ1peqK\ndpATR1pC7fNkRahHLb6Odjdd+4pNISYwoo51Lw3LAXnEaMopAWXW/l85H9Uq\ngbUGlYM5J64qx6Me+CCVoDNzenNPXYqteSXOZkD25AhJXn3TOO5Tek0wNWaZ\nMfFPkAVeFceSh9ZFSsgd6z2X4ovv8kHQvpGCvhdibTgnFS6ukIoRExP6D6NV\nsAyEGd7NjlHRtS7aSLCkRLUk2kpNMNBz4kEzedDHao5X8xdQLYu6j3j/V0C6\n8D3w0XD8+07VZOOBAHsUv0tMHjF5KJCJbVTmFlQmNcI/JBfTyrgtmMBlnOnm\nlbohoc/muN6KDq6ZjxTOrudzWFvEEfSHJ+UCefM4IT9+zn7PtL4y7b8mh2v8\njAmkj9phoSX/HuKslXekp4AFqk9OQzwqtg3CL+6IEzimr1ioKOneo00YgCKr\nn1tefrnS3QjAQBWiaL4b/9scZKN67mLMR5lkIBtYpKU8BN6AzbHLRaPp+3zB\nI3jsbqFy7PPIbtRMaoxe2idX1zbljyvXhFApfKLyJQkRu84hj6268jicPW+L\nJMjieYeG1SYxM93pxmA6tn5cnrXzCfwyHM8cpstRNVYoS3xu4RXhFvdgT0nc\nqyDgB2JysR05kfR55zvf+j/sO0C3apEbfkn6D4e/NKyJmRe+/d9SsRy9rB5T\nJOt3\r\n=isYF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfpaXBN1ldjgUKfRFSwxwSVHq/t0s7M0L5GiVh6GnndQIgJAGLQGSd3BRIepKZSYqRupPbKYUii/Ka31xyVbsXmAo="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.0.2_1614178287603_0.0880327776915546"},"_hasShrinkwrap":false},"1.5.4":{"name":"storefront-data-hooks-jorgemasta","version":"1.5.4","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.1.2","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"gitHead":"3bfd923db3424ce352b8e10dd58fd8570c1b24ff","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.5.4","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-yn0/jX57oeiZj0A8I+6G4nVWB6rqdvmyifJDhum0PEBL8yNWfuOqGNNuIQoBSzGPT09Ws4jV5Pa+mzJ+2EYjtQ==","shasum":"02a29301d75c964204972b2a65b4bf1f9d355e16","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.5.4.tgz","fileCount":217,"unpackedSize":649156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC86RCRA9TVsSAnZWagAAnPIP/36FKXb7ZMd7Um2E0IOG\nIIffjsw1XkpqPUdR6J3wVOukz/OfL2cJv1StXHARBSZthk0xzUi35p4eGH6/\nJmMA8CqbNHEZ8pcEj3R0+8SBSYd4dUzonxFn9Q1AexRjUYuvu1zpbg+suUBt\nbVdo6pixjwHWhGj8ZD4hLPTM6AmnCRDG2Lv1tTLmeTeZtKO5C+31g+Y7gJ9Q\nhBkUOyDlD9UHJFG5TQ1Gk3YLUDwlRwAUlVOdCsMuK3mPWy9RRKaQKBtm1iF5\nZ5o5JHgo2Dk/HtGMVKdOqNORnBQsu11U6f8QIK1KHLZoiRVFeRhdaNs70SAS\nK6l0AXFPb6ywC0l+evtl8KHOE3PAQdkeAD8CDEan5B85c22uLLeWX7/3fr7r\nHY+LM9AQy2EwnVE+P3sgPikDhkP1193Wf66fprJPN3P1cYSEfpjU7VDvw1fJ\nkmlPzJxq+3wqgcfUBz+mt5p8TrVijXjrnkC90CyKBQ6VUO5AJQMYO3Rr+EKX\nrKGwdlqbQa+XQ32eMQ9bM1caPhhFYOpjqUX8bfS1neb4JWHE9/D/iVgY5s+W\nA6WbZz2s3poCvHlPutdgMOIIuik7r51TM4+E/8JCqhZrX9gnr8Pe+jmbAcJH\nOl4nkLConxuOwjK4yIgMvdOGGa53OXXI90UgtjKxoaW3idRsiM75Gr9g6X51\n7bqU\r\n=aIGe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2AzY8jqteHj2YVnHkIlpcVeQthXAwM3fOpbnNYiVDVAiBFmY7VYS0bU73P7OEHwtUzI+AnGcKwWHG0dyYzVwPmHw=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.5.4_1628163729124_0.6338815474279564"},"_hasShrinkwrap":false},"1.5.5":{"name":"storefront-data-hooks-jorgemasta","version":"1.5.5","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.1.2","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"gitHead":"16e2c7c873171a54b9839ee8ebad15d65c9d76eb","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.5.5","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-rpqS0lWe3n4/GL/6bXXsV7Xwrd5q5BZFFGrrVLn0r8GyFIJ9J4qZ1nsALt4BVO+bzzBIPJx7Lf1vkJxDr/Vjgg==","shasum":"2f05056d5f436a18b6f5d2f9d96dc3117cbb1b7a","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.5.5.tgz","fileCount":215,"unpackedSize":644355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC8+iCRA9TVsSAnZWagAAzjsQAJqFl2RFhxS5HzfduqJV\nQMim7kDWMTdWEmiB7rTCCelp4dr7LvXjX2Ae0XoJN7Z51SnWOUnYlaoORCQ4\n/uqRG4jI5jnGX5Rw7z6hssqYpdL8asg73qlyhu7Rtg0mb85bvknnvX9F86rM\nJ/R0q/s0hstuwtgyy2i2UDP7QVI1f24d68i8xIO0XmaQrSsC5c24KTa94C3s\nh9SsCRtYhAjD/h/kri8Ifp+5Dbj1USHtAMLJXUlPybEQg0GswqNNSBebXgZr\nUz3sD8VRmthpF8gl9otxRUGu7nNehcRWTXz7zP5bpXbUOaocz+X4Y09tQbx1\nQWObjW7pJf3o8ug5Gog6Ct2HpUpi7SDWH5PTUyQ5+KoV1LOlPOMGPugVCWb1\nRdPxKVQZCIyMUvgF1vo3TZexykChuG9KK2slzAsCmjt0Iy2hQkIJMatBKOtH\nCo8mklmENEmCfjL1zQdwB5YCU8hcA7lhUVdq2zjSCtBWXf3ZyaHMsJjIy8Ae\nGisTH9fKDQrojA8blLoCNhMwht93nuQZ97sMgKMzOg7CLw2GuwL41TLxo0iO\noG/vD2Ckp99DWT9eiBoy6urKjXBoU8CaB5ZFXsyPxWgu+BRG+Sg4c+HhU0c7\nlFKJ9Rlfxc6V3QJKg3ZJLN0QkG1Xt9XtUts02UogWzkxVHbOrYv7XW/MZEdh\nvY9+\r\n=tBTK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBmWljJlg930ZoH/3bkB7kV7faybLe+VZo0vK6h0oHEFAiEAvpI7NYP/06iwYGS1+0CQ8SAIfZB+cZTQxBUcGKeHPpo="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.5.5_1628164002658_0.1161662660282996"},"_hasShrinkwrap":false},"1.5.6-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.5.6-beta.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.1.2","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"6af8ca4e278eb069daf729faf6bfa341eb09767f","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.5.6-beta.0","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1F+Ic3h8nRL1p/Cqi+sCNp+qmfC8MSb8B3jw89dgBYUZpT8pi3CgGpLArCgEMwTHjPjrEyfdq/hI5oe2giOJhQ==","shasum":"06a81a52349572dbed624a85dd7641b83aa248d8","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.5.6-beta.0.tgz","fileCount":215,"unpackedSize":644362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC8/ECRA9TVsSAnZWagAAmLQP+QCnXuA39lPk7elZRqJB\np4JQsufh9XIh+IWQJHjEQCEs1I27QZW2l0wyl+avZPV8pxl5Eu/gGb14vSxC\n6jqU2OMGDxp+lNgoGL9M7N365Wo2GjBixLoTeNUFxOoUr2YcnEUp8LnNdN7T\nLSPSR7zI3RxkGtwiZJAOwqwrpNrhqpd+IuDe2lyFo6ZB16Wt6mrqLtYRkYGj\noNJ2xYafkABi+5O29XGv+SJuNfWsIxUUBODbPMWnkD3DLIpxbCNekUx0otDk\nUzkzAL45SvrdFPyskJUkHdt7gIuuc59Ij5SMMYWmSqwF8xPdmoVwBxhHYzeg\nt8KvFj6LcJIsETSv9Bl3J+ONgj7E5uigVYV2/QQq4BraTyX6jDyy9rGb2UMc\nPZxreuu9+8jCBu23dCw+AJthsfUHh0gyFLbGTCGL1xjCRAo2sg9+r1OvooYU\n64YiBHcddAEZ0IZHVBf/rK3S9CR1cKHy4xlbLBOJIzr457/xIXmtuexlT/Xa\nejl9C3zWoZJbON/AbXLnq+S3stz8SZ65GKKVdP7rSDrhJ/QWYtouz90BKD3b\n+yf5hoJqXDkFlWPQi8RyNSiKIXY1GNNu+XDPNHMVD+DMSe4C33YX1hP6A2TO\nsrPvnAGQio9M4PoZrjiJJwvuaW26evUwJCxnKUqpnfXau4lsNTwywrjLkDsT\nyqr6\r\n=Rk+r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDMNLBMgtH8zvu+c+3D+/DrU/lXSh1RjoJwoq9JD50NjAiEAjntgh6ti6jpbZiap2mQG2UiVqQ0dXUQYtw9vqHgriXE="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.5.6-beta.0_1628164036247_0.1356414478373369"},"_hasShrinkwrap":false},"1.5.6-beta.1":{"name":"storefront-data-hooks-jorgemasta","version":"1.5.6-beta.1","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.1.2","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"36fa4fbd62d903b1022166e8f42618d994a72043","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.5.6-beta.1","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-aGjWaoR0G+MKx7SVg9cEBSw0pHKFeQX84MYEpFkTy7pEY/Pqwz/urVronqzgb/tDfd6CuTfjn+UArraGIF32jQ==","shasum":"45c5bd9d252a214d8d1137baf05da72d0881f7cb","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.5.6-beta.1.tgz","fileCount":215,"unpackedSize":644417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC9AfCRA9TVsSAnZWagAAj0MP/joR8d17XOUecy4OGr45\nRBh8Lr0NusJPhAXjFvAb+AgS88DDPDjeBelfkvpnMYLruDmckPIxVaE6Udd5\nEWhg2I4gesSoOnVb1UrGNKtan8lNFsMlhoeD03hEiHYuIs7igp8p7NXCvrUF\n79QjPK1/W9rPxAmQg2Fvch25EPDnm3m6V6yF8tjwSETN+tUMOXTptym+oe0e\nu9Q6Z0TluH1qbxRj3gdzoCFEaPDi4kGkIZ7uCDtVC2LfmZdGMxU8+j3wFWIC\n3vodtCWK7GawsAAoS2C2H2Dh/Gey/YDVTSOxXlKUvMbHJAw3RM57kzeh56iL\nw3lPuCilaanfWoQEcxVooDEO7m54Ig721pm+efLOBgQt4jHdwzblEFS6xgf7\nHcA2yshGPTYgDW+GXIWuxzA95uc/FH9S6sZDcsl9F90MVzLAayaCNjdNhemg\n6g74rEk25vilPI6wW6F2ExkSo2WEACQAVaZvMogrl60P5/8K+B7kTSbXFBP6\nDIjXtk7CgkiSkT6MJtg3Fwpc2tcbQA2vxw+1IJdRwOthOHi+SXdS4FJXoDmp\nv06+KB8jAPMFtgJo/9r7Fwq642WBiw3kxlbMXex8/5rgQYAFeOiydiU7KF3I\n319bL+LYHu/eGmXG60+ieSTKDxTZgVwM4Qw9KyrEOAYUzqfUdMjk27NG05S/\nVbPX\r\n=s18i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDx4xdjoatdXpmPx2LJHRiFE2Y3ujchJ/XHlfTGbYqw1AIgYMtXjhanliho/sZgDObTHqiszB7HKhI5lT9fRXsid+k="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.5.6-beta.1_1628164127756_0.12012866131003208"},"_hasShrinkwrap":false},"1.5.6":{"name":"storefront-data-hooks-jorgemasta","version":"1.5.6","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.1.2","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"gitHead":"db9d9abdffc36dc93837937ca9a25d1b208b7cf9","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.5.6","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0YcEAcjzuEvudDveDwpbV6uO4FixlRFtZT36PcaT/GWQt+qvKd89fZVIOxG+O1VAFqv53kbjLOx+Hm3ARXn0JQ==","shasum":"6dd3bd4a4db711bd8d7bca0dda7e41885d0d67c1","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.5.6.tgz","fileCount":215,"unpackedSize":644410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC9BFCRA9TVsSAnZWagAAzw4QAKE5iSfAekU1Ety17+6H\nvDmAw5d4lq1NO7fxe2FimWIMSzRKFye/cbhqhGsypGlFIeMNEsrEsUH+U99s\nGu2NeadEchWHSXXks8vMdO5Ms6V1sHi+W1t0zzylzsCIDHcKcZIDz/mYp2Z5\nbRhV9IEzF7P5seRmtl2+9aMzp3+wzK5G0RylcH6xKkGQZndQZVyEZC4U4fgm\ncL/l0MVohQK1v+OAdjYKJ9MP5qrCNadJy3KU2E1s9PHheSE6CY2wYpQ0YMS9\n9TpI6YjAi0+2KCRYXsYg+gbMInEMGza/b1D5Ji7hGxPRnjm+HmMS6QeifBCj\nXnMkVOC21MygkqS/YlD6Dg9XYElWebBi8wUDViu1kcIW8Lx4kSsPx/ZJOjv3\nVmw2GV3+O9cziM8x4LdzhSL4dff0SkHd4POfidlo3UlZmK4yEFRax5FVOlaD\nOwSNcNvV+L94+W4OoJJEMbwkNBAszx6T+jM5YT+gUwAGub/yb7mqJ8nKIblP\nZLKVVvvMEoME7V8b6KMqeX0lkc5oMA4DsUEU3OZWTHlMdGkKT27Gieqy/P4u\ncLKX4i5ObdorAJwndEsBJ64ItWxPcWkXlltXLQvMBfSVlXcjUByqcf8f6qlN\nGrmT93s+PPvi/fo9NdqIzRNo4CzYz8LAo8N+6pquYpS5tBX35jN9XB1otLcB\nsv3e\r\n=RU5I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDR++pquYlV339fToYW0lLh52U4ALbhSQaotbyXSle5HwIgNM/O4bKnSOOmsxbwwsRA4KIcBuNy4PPaSbUOAzfPf0k="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.5.6_1628164165736_0.23676659832597902"},"_hasShrinkwrap":false},"1.5.7":{"name":"storefront-data-hooks-jorgemasta","version":"1.5.7","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.1.2","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"gitHead":"58c3153293e9dc7006a3c80e2a92d4746e10dc72","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.5.7","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-qTA2D5JRygRYRBYMIQK1X/uruX8tKgTvolX6aXSSlGW4qxtMR+BIAxheD0AEvxL+LKaEjFFXIrhweClGsGWRxA==","shasum":"3a82df72b1b5f34c03d3c225250d3925cd11431c","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.5.7.tgz","fileCount":215,"unpackedSize":644410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC9BdCRA9TVsSAnZWagAArhwP/3f2QNBrH0ilod/cpYFK\nHjwX+oIP8k0G4Fe6gp4oUxpfZ9+Jwq+hEM+o27K+iIPl3kOig9GKbcF2L13n\nc0Wm/HO+bPMaBlG1yvY5AmP9GxzA6jCIx6ig+VBqAChUR/mn1/EYP1wcorci\nzrSZSIYbYU2DXWicOSi7acDQ87l2ymotKPa3bB4GcbVpK4udLU97iF9yJ8uL\ncSU7tTVPCJHxP6ky4/qL8sXjsxwMRCbZXXUuEMqaAHcqQ7cyyLxopa5hfbtO\ngOYDd/WxufOaroAbZ50DyxiCBdFbiyKP88OxYxVREML3YdtQRudOSBSbKx1c\nORs/8vzZ45RTVW/6txRFyxaiNRM6jYxXoUV87e3rw7RP2PVqzZrO6f/ulwfK\nTFv+x07kHwZZ/luhqVsCKAYUkhmAs1+VjHiRdY5gKTviPahFYnvEjbqtwDai\n1CKNCtx3ex0GvcAaWz7ftD3bWp+JDiPdr/CwcCod/84Pn52C1FWVZzVj2oTI\naGyhMhyLMjJYhGYmtrEUC5Vy6yjNw+nKvFmcLMgoxF1YEpJETgMNmjLafuSk\nlF14mwrhaTUkQ63SoK4FndyHF1CFNQbgUUwzlvCXX+7uVVtY3khsqE3Ag3Pc\n8HNrOANGZN46P5ccANXik3Q9LH4dpcdYQ/2lsfLZx4ZHeFY9b6QaqhzVzU3m\nlpFl\r\n=inrm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnVwNtHkT+gwp1Em91XDGtHU1RoKrf05Ed6u6bzs5o/AiEAyjYhKzcgaBI8pyyyqrYHVYBoldNPFF1pWhmhqPncuyA="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.5.7_1628164189207_0.26617932662942545"},"_hasShrinkwrap":false},"1.5.8":{"name":"storefront-data-hooks-jorgemasta","version":"1.5.8","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.1.2","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"gitHead":"c7538e1f466db5da60bee2be95332ba34ed0ec83","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.5.8","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dDNwF2hDvtlN0oGu+6kQyFPDPpMiI/HM8twXF3DXe2mKVkyRspgxVNVtcJHKJIc+gC2kyYKMTdy+z+2pDtc3Ww==","shasum":"a27f2c783132b5c429f0698861d3e64520bbf745","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.5.8.tgz","fileCount":215,"unpackedSize":644410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC9KgCRA9TVsSAnZWagAAucEP/0e3B1NZvwmA8ZyEdG4R\nmcQGgMv2ZXQALqFxAKEPxHEAUAWCDrlybI4R1UUYwuxYK9eP0Uxzk3R41x6G\nqWfudS6VxZ0VjEWm5Bl2AWj8WLnPtAG2OFpyDGkM3+UUjeoqpVaKsIxKElnZ\noz+kXOJiBO5sPZgT6nPh/XyNX1Nyoc1N8ZE59IhsF8yhZ6Rq9GZmdZ+27t5u\nZggTdFBh/HC5yrYrDesowahvKJAhIU22WLkOpHLrqCyLMu0vXZTRd3TmFu2L\n10QOCdzXzkp5VYU1C4dq80D8Jm5TeHkX21Gg61aI/80YlDHgNtSdpxG+dr6p\nparZ1RDYQkhgJ+mzMR1AVjS3nT08NVwK2VvKSNFUUlF17UI22Z+pr/XnUBed\nOEVXy+/QVurv9/OmeXZvOpnGvw+mdMpyzt3TJLAD3ckC7qdq2P0LUfbIosNG\n+q27qo62PS/yr6vnKA6zm6dtR9szicj7v9U0VVIgjTRs0OP8h0NdBVDZ20wu\nOYPOQf/QA9aO66dp6I0Qv8CG44Vx0Oiug4W3xciCeHI6Hu1wbRhR8v13b3Ax\n6o9WrZAdIvvNKJNIfBGNqVrc0lcrtUbiGMD6Orlmu9SlrHmNJUGNwEJcc+YD\nBFCGmNlZNkBOYroLtTLYnK+nGQpZ0N4Q6Q2pEsnWMlraIe6pRq5xB3w5MR6+\nlMO/\r\n=jL/D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxeMOn/Gyl8IO5LpFxFZRXoCMxWXVo7VWl+rOhWhUitAiAUnt0vIt0nslKPtFBdpFMiSuE7A2b9lGu9Qj+TsfY/1w=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.5.8_1628164767935_0.5484083986191586"},"_hasShrinkwrap":false},"1.5.9-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.5.9-beta.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.1.2","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"820fedd5dd83ef59012de93304a04276ee941dc4","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.5.9-beta.0","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-7puhwdPrIvpDEKq39wwGx3bfs7h2iaJsht9oSz+dTCkW0nKSsxz3PkE+BF6vXmH5QRL17OON7Ek7iHCJ7C5y+A==","shasum":"89d16e3926cffc181fa929e53eea4d2d1a0885a5","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.5.9-beta.0.tgz","fileCount":215,"unpackedSize":644674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC9PvCRA9TVsSAnZWagAAawsP/22OdMBK1MM6xJKImOVd\nFtppSY8nq4db82LnNj3hdH/jbZ/PmsWuc1/TL3F6tiYbSMaG81sgi+Ytd/wh\nIHgpf4LH13uhb866sMLbkLxNufIHMcS4lHdDvfK2dZCKFFLrMTziHbVilMMI\nSUI0D/vGpin5Cn7ZcAQqrHhYVjurtZt4LAKWseob4QHoJTNDg1R3Wa4KPOk6\ne5iN+CsKIvYV36gHF60QEUDx+KoJEPayYN0l5aXb1WC3Yh1yWfzJfuv7GG+6\n88UZRxd/mjxvda7386Ep1/OOuuP/LSBEwcDbBuDtzU6t+LUbP490lOBSyup7\nH0t5yRdbrQX3iujtCqXr9/haOysM5uH7dbnyf0770DuTJJ4nf5nark99Ww8N\njH/qJRoiOh4NMDFGJYznilngwNJPZDFIQ8J4e+wLpfwP+mM437U5R2SQCnnp\n2Gudy3jd4k46JfuT0fr0Wz4ozMBhM1lOic4Bm19XRxeoDLwAbRa2wOaRu6ZU\n/6dZP9gzyeih7VFZ9Tbv7g3EafUvClFNBX9OqAnincf7AxN3OlFOd0B56AGp\ncokjYlddh0j/2s78Hvj7wmMSEBX7ReQxQqZHQsNzNVmoliWAGUPTuAKUVb6/\n//7lFrfRQUb7RjIsPVHNXn3rXQFK840Y6+9779AbNKwxjC0ddPWBpc6QEnGn\nYlYO\r\n=fsZD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbp6xzvbwf4l4dWKJl6gkMqSUzsfT8yst1x+2AaYrr/QIhAObtNa592F7SUzM0Rt3+4xq7UJYDLUaM1fTXoaDLpFZw"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.5.9-beta.0_1628165103613_0.6581850315190143"},"_hasShrinkwrap":false},"1.7.1-beta.9":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.9","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"gitHead":"b882d79586fa98df1c7587a8ab15c01f9cacfffa","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.9","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-2SQkLpU2frul66gxmCY3KPJ0jIYKSK0mD2cenGAGotrXr3WIcXHtQsqkMGGaLXbDlh5J2/oijOcpIqCcRzPxyA==","shasum":"e17dc7329fb3ed267d85308cccbc3ccd61e5c924","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.9.tgz","fileCount":218,"unpackedSize":676787,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoEOdZT4/2h8XLsQsT9dLAJiV4Hd4/PMn2sFRT6Zu2kAIgbRmwnkFtWz/5GvQbvLG11+kEQbpfFX69mnfP4SsLSw0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicQ2iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoilQ//Tskt13C7ThbejNI4bJ9c3A3ewR0zrjN2QNJADgDE40bF9qXH\r\nI32/vzThFqchtIXXTqkF6bcr2t/XS0Svq751pcnPp+sjNxJdpLV+PZd21U6x\r\nVjyU735VUt0Q6+WVhwN+HJkpUcGRXpkGfpQqRk2FEY3vK4iemfylJpVOSeMb\r\nmlxJPykRdxXLZ9qZQF+D23Jn5AWzTSRINhH4HbzkyAIx8ICV7tmr3dKlDD2P\r\nmBLPjpN1+0MgvZ62VuLD781rt3wPjzNXAskBjNc4kVP+nrrcV1+q0mlAZlr3\r\nQ7UnJTUloSdHu6K7hd/fRPjWDov1tSD9pw8FAEJA/770N4OBq6pP8iBJN1RO\r\nAKntv8rV79RDNGMu3J9/b7cynbVrxJMZlgX9YP2x5xCC7IfaUxobc+14kEed\r\nJFaAAnfXzv6IWH3IiLHtQCvK0Gd4aThlMmMwmQWhmOs1CP/bUAd1/xGeKR0X\r\nKOd2k9LBD3X5bI6I5y7SOI/o9T57c67771e13Ezqnkr+yAgR1ZgLjNK41TRm\r\nGA3KiUdksUxoq+RQ+Kkc6xfE+Q/NfQwtPhdI7jPLawhbaZK3FYQmLMe2kowh\r\nwBDhjXEPfpS/I/zj1BTReDUNAGgNT/ynaBGUKXjHMzKvtFOTxTz8pG6AKbfu\r\nEBWYODkHWX59riWuRNm6VGzadZrmCp/0Ns8=\r\n=dTDl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.9_1651576226612_0.5248001472716743"},"_hasShrinkwrap":false},"1.7.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"gitHead":"b72e809e3d42316a022b9992c732b543b89523f7","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.7.0","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-CH3+1+iq40zAXZTgO/NJKf2++5glVJR49QvE7BzNqGg3u/Ev93mdygBTviS0bmRPINORGoqzCzAXdm1iehVARQ==","shasum":"95cc0ed2a91c750f4651f7e333e68c2a0312aeeb","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.0.tgz","fileCount":218,"unpackedSize":676780,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5TEPxI8BjDdCsJ540ImxGUjtbmhVEh7DBnOgm9p7ghAiAxjDxNqfQAqGQDeZofvcmjVLMYx0pBf8KDVCw+0FaPLg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicRCiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6/A//VBSXY7jJpo6wrjedwkRl90ztMednbnQ3iE28ao3eXmX/R60c\r\nsN0CAHtK6xQ27tyNdl04ookG1VdS7MgsckTvk/4gSPoFG6zLF1X6u/cBDgUa\r\npLZWNVfjz8n7Bk6xikpszuV+DEFDNwc1BslGVrXoeKs/RThGl8ptZeVRqIci\r\njAdMuLDeyzoC4Cgu8f+6UF3Q5u8ZS4Heg2N+UoCawyV/xLyZwRePRgvgf+f6\r\nWnzeWOdQBxn8sMoe9s+3UF9CCMmPJDnKDyEAkdVrPJLdFPFmgajNYYmSy6wJ\r\ncak12Qm1mMYyROxzHEY75QL31FgLRuFeEH2lyfdsALX350murTJ8ljmpUAxf\r\nWk5x6O5nGWJzeArEZDPWRgarI5p6QXKyKr2uIijhIhfp2pMQn8UNLLQdRWzw\r\n27LGxLKHUacFHX0uaJlazxhvtevvhIK/Z6YWFqrwQn0I3TcZy/gk6PlpKoSZ\r\nq2Seafwv5GVZELEpV2fL5X4ouDqTddTFhwW1IDaCe1zKBQYylYifDNBD46sa\r\n2PEe+bN9qNyd1NB8lvhHzhLXUu4/e3Pwjd1+YzhTTDiy6sUGPZHVHpl+LhyG\r\ncKLHgjS329+5ZjbbI4OiiW3bDOyY6YL4QtfKcfIyBMwYjdNDjNSFlPjQL3rL\r\nbAJX0fx0m9Q0QHaQNUlcoYH1O8MDp8YLAPI=\r\n=L7ox\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.0_1651576993958_0.024465286534482322"},"_hasShrinkwrap":false},"1.7.1-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"8293ce915cf59071d97b05e36313cc92e0abd1cf","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-v66GVRqUf2/MlGrq9f4yKRjFKt5N2ZdH4cpNR/t2/WqLKa9yYnZvkVaSmKue0DdL6m3pG/EKeID5QpTNMs0DAg==","shasum":"ceb3df55dfe1f7ecb9aabb6887abd5f9e628f71f","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.0.tgz","fileCount":217,"unpackedSize":668061,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmO5xDwARyUuYi30btaR/nZnwY1x+Ow6GMxbk27yzvgAIhAKDe8I6INWoWixE3zpAkSoFi2X+DbnZkdkOI9lcHIeDk"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicRMyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZKRAAj4uMuyYPwGpvXvS0nLTv2W24G+VH+U+LX5cBuzGjr0S29txu\r\natwXRVgDuk+XrA33ga8tducojMvS24zWF+R2OcnPMxX+/HMr2de8dfTcd5PO\r\nGeJ0RAQpnWJ+A/qJq7iD/Y7iqrhw5mOS8aoXSows823m7D8Vv+xLXBmMDp74\r\nRmZiNm3wRWrthc1KZ6gr69SqGkjjLR7yVyu0dQ+0Fx1whBko/8mSE9nMirQO\r\ndadMxP9oXO9xsLexoiJHjaHSa3UcTumPFLzUrRZPyQDP3i0RWrFwKvnOvB4Z\r\nYp/4dI0oBz3pXmCNxhMJjMDjF2nCY+8YnZYNBNXGSvrk4sLJpkFZsFaftluc\r\n97FI1kY2rU2/Ck+qfWTje0u9lxDeiuZMXJ3kVq99zplZYWmmnKyiRM+DPziB\r\ndQxGMOXQivHCZA1ghJDo+iQBE3F5bE1Mo/3pHVsn5nxZzteP7pMW5FS5ZQZx\r\nXqDbh8kcEZHwqI27U/j+Qvu6GsUlUBZbpnhJYG85vhONZtcxXBruYqP4DBRX\r\nvV0YjSYoSU8LupIG5/qzoRGUrxnbKU71cWr3+AnnL9Q2irIa3jcwtm6jAt5s\r\n6emmF1v51EfUnBQUP7ckGJOyUBoyXLM2TUTf2yIo0KIS0yeKI0V8pZBcIsHU\r\n2JT61FLO9J+MHvUuTfYt0yPOnKQl8Umk5Zs=\r\n=VWR5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.0_1651577649761_0.0980265759252088"},"_hasShrinkwrap":false},"1.7.1-beta.10":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.10","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"01cd3881c5d4b50f6349c0f31da495f8966087ae","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.10","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-NZRr3OZab9L7iBnd27mXBEHD75B06q7C/AnQtEiQa8GARvGqtXhJRW30kmTHUlE6dzhLFEc2rGMoXsgQVnIwbQ==","shasum":"8db12a93097184c4cbb69639df2cd21ca24ceecf","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.10.tgz","fileCount":217,"unpackedSize":668062,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERl2/pSrXixQ8H7I0LwNacr0DWVLzp180vy4X+UvISoAiEArXw3BzZA0643fSWrKcFNpO2GauLzi00AyKcEdhpcuqM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicRW5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLlA//cT0GowEssH5agYCuoM1dFiKG8g84MZjeWOqraixDAnIJHvhy\r\nxWA1aiVxLxmakd0By41vyDob1wCHDZrMH2dR+Y0xEdC5mqQqykLgEL04NH0v\r\nLI+mO0D4WhFS0lQDlgZ61Vx/4ljfKskHJYN+IjhFxxJfeyU2fWSkd5E+0SWl\r\nzGIzPyAaFfsKr3Vit4mPjqWD35qr/SMNzLcu/OAJuGJMD7ibEE7c1RVH/S64\r\n1dgg1qUm3P/Z1m5bT8Hv+IX1WcDvnwO8WNWR6SEIiTxHo/jU0q0hQy/g0f5R\r\niq5F/NHyPMyXeku+VGc1aT91w7oPUFeTh925hwIKGA4RzNWImH/ZcaeltzT/\r\nhkx+yJCnxeR4+/Jw4zg8W2y7hWFizsVu4Hf0f5kszBqLgcGxNJoGIYt+wTsR\r\nvW9v1CFiM1Ypti/oGrtO9BtmSh5DbOg6oJmF80dW6knznsaqvs1Jxm4rumxL\r\n+/HJDM7TxteNupKOtlzOXL/sVDAD0mWo5hrIsCe2vd+RKy04Z8VbkO2v8mbW\r\nUW/wt9ZOKpp2a/hNquXztjZs9SeZEd9vBp/CJ+gS8hmQXvX6LVl8Np2J9sOS\r\nTmSJGtu2lpFoHo1rESMkedVx4NJzAgFUonuKX/VMkGpe0+fMsuxaUIwtaphh\r\nV5xgeYwRh/7UmwwD2QV4VfG1fnyMhfkB1jM=\r\n=azKb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.10_1651578296836_0.4950248310419969"},"_hasShrinkwrap":false},"1.7.1-beta.11":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.11","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"d22ccb5192f237d2a26c3d6224d667f112a26d20","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.11","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-NfeODJhdlHrnQGMtpYKfS7pRROOqbYhM54n4KkX3bfUCkpqavdAri2Z3aVTfBPlbcxq0sjCXIi6RdP/O5oj3lA==","shasum":"5a35aec34f8154d8f0cc1bd9529d705eb2e6b452","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.11.tgz","fileCount":217,"unpackedSize":668062,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEHoDX8ByVEzQgvK0QexDWQc3CVxtDgDpT8CkprATQvQIgUBD7LtNT8wlFFZmq9bxkokeBqSBiy4M14vcOm4q2k0o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicRgYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqmRAAliRnoDJg+mXHnU+Pf5N69s4bN1JFNtbWcGCZr/ztc2eCfG/W\r\niCbesGTu7d6+XGxSpec8LlqEh+yKwVP+c27Usu5bvFTpUrq3K5KTx9kjTFuM\r\nEBsGiAVBcNAyMeN1C36BXW4tAGqi7G9mg1acxw6Ex5TyhraJpXurlkVizlIS\r\ncOnV5/aHKF1yQl7wz7ixSPE9IFHtyv5E6pk/i1qb5Zt2Pfu/v3chNe4ezYMA\r\n3eDIt+b8ziPZjBdasRxyh2jLp1OkOKFTATJKQUj8fTomciuKFx7uQ1nrBauf\r\n6ZY0ZcnUutorvvUclHbYPHEpq76z5tTplFEfDCl9Mu5aidXWU1uRJNV7UGwm\r\nk8bfb7V50n8SUqeoNI1P4wStgssC3iLaX29yvF6BWOx2IhYNh5tZxDpGTrEe\r\nbCWluhyRFki5bT89w0yfZHMoY/MHSHmUSgHa3V+jf5G5Elm2h9k85uhlAG38\r\nflUaBQklCNWcWnF6khdXnGI/BMSA7pbib5gMEttuWgakE22stJTRCK/G++xh\r\nccWmQwMNC+CJwLzPwhSpWynIQS4MHkxhlQbtphtg8Yiwjsf1KXb6jFWC4/1r\r\ncHEJv+Q9OwBVeUxvaf4za9abFz8QIoqTiQht3bpglM+QP//OTsuZL0plV1zS\r\nq+F+qVFSIru63U5HAvRTZW3yu7tmAXX9BxY=\r\n=VPCp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.11_1651578904068_0.17938229072755285"},"_hasShrinkwrap":false},"1.7.1-beta.12":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.12","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"5e128f27d6ba24a4c232e871816e2cb8f5f0e84b","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.12","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-pB8B+cOHFjIsC/2oeZSJAjE20O2IrXmeG20tzuVtOFWcao+zY3Xn5DAIsc5VSGYl2BlipPfG5K2fE3Mx7YrOgg==","shasum":"73e772cd76689c2c2340e09ad439fa5bc83351f9","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.12.tgz","fileCount":217,"unpackedSize":668062,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwNBDTluLriHRcGdn4q1xkoW6TDMXfJ6sGGjQaUlyX0AiEA/o9yaPZWRiX0uyU7Qz5RHwbkpOK7WN/5XGo8qGEWziE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicRn6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQMg/9F0yLnasyi/Ub0p+EV2ATtFA+KoheuhYQelDcS1Di4xWYcOrg\r\nFoxDk2KgCNw99OJxq3c0rs8ZxLV7Iz44DkH5qmcZP1tQJYeSCbTtFtnlKl6l\r\nFED4NRCzcRuRQEO48wpBcYTgo+ZKCZ0IjxZQx8xSHdP9mTh4DSbc7jiPAcpO\r\nVBz+HeojAul9X8kowR20GHiPR2A+DTuXqNBT1pHHDbwxVL6BKtkGu6gYjHml\r\nL3e+b3YyLbiBNGYyrqOnFXTtityWQqXCIfMQJZCrbjV0fr7JkkM2bGum0ULq\r\nP8/L8gs/IRpDmviUpEiWH8Wp63r1Ou8HEObebU0gjpfTy1vVhmY9IunQxJet\r\npEFt24XuSCBgJz7+LdglDfBLCz7pA3NZpL6t+LOsjNi4RFnq4zgLtIZSSVQK\r\ndh3nUA94YvPL0rV1bsAYx9cGDeKLbhfxJ5TJh7T8YRC4Hrye6KxoUKvsoDQg\r\ngKid3wM4pPpevY7SU5Wsqfp5OClohmIMJ5hmKfFtsXL2/ADCxwZ8C9DeFwUm\r\nVyDUtRanJDg5h+9tCEmlKPjoKBCfwei/1PEHbVkX9NAWJJooJWmwcS2JHZII\r\n2yQ+ibc2PudzdQJ1i8RUcXposLGf1gLUUnSqMaFvxBcxTu4HRs7jKmX8cfza\r\nPlDCmBAwVrNjmNNnFq6pEt3AVVURS7rhvog=\r\n=aMbS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.12_1651579386441_0.3467267723642089"},"_hasShrinkwrap":false},"1.7.1-beta.13":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.13","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/jorgemasta/storefront-hooks-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"9f30914ae0b311581cd606a999299e67dc3ec013","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-hooks-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-hooks-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.13","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-0oSdNIuhW05cjLJm0VDvfqx7WKMOBBMfPn134vNr2f355+fmMxqLumNd+qYLaT7JD4es+OFn7S6cQYO7A6yUbQ==","shasum":"1d0d0c98fda64ba764061cd5a41b6a3853eaab53","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.13.tgz","fileCount":217,"unpackedSize":668057,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLiBz1v2IHx4b8PjQ34x9+xsvp0XU1roKKVJzO4TuwpAiB2C+QCIWHQpYks2moUhSdQt8/JJBjcwmTiXS+3KArVEA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicRw5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ/g/+MXtw1wHWwB48fBCcTu0aJm4lmAe05XSwhOCFNINxC7ZduUE1\r\nNyimzGj96mqSTwGCIoYP8LbMHnqoSmeOm+JLW/FUTTb17qpvLnQkyMRoKV8y\r\n/Iv81pEisB4mx4yu9DXmdI8hBj2k8jToGI0UHuJk/eFkk6/I11IeYsGxowhZ\r\nEL/SfSeMcyOK+yhYSr5qqw6Z2R2Rv+nqTRGAVp67nidC+4zeYjNkkiHOZoTr\r\nMBVAJav8wtzr3606rDXBmfavdhLygew4OP0FjdssrVL+5OeXsGpiSm+Z28Jw\r\nKRw1iOgPPgEiwnHgxa2+rGcXIdhlD0pRJTe8/VCe/5b4105JttBR0DJXgrdm\r\n8sdxCuNW6XyfjirRaYj3+ShtgxbTCGvbSwpDkddr3+9HKRpN5DsJ4sU9fqny\r\nS2kUtSAODZS9iD/ZlxtD5Grp3GGEa3WoIVRbgnDD1pQSBxjnwEYVCg3lj4oi\r\nyjXoQfeVfT2ixaDnyIPxoOplGzo8/0sSmVdFoZ5tBi0nlitKA2vEA5xUWSgm\r\nmn2msHzkVwsVhrX6rY5/FUgUZcEmYY6HnZPvwzrAEhHSlKPr+6q6E6kNV7sI\r\nROBFXuNYGy39OPEV1eDBGAQPzJIUag4kkYE61h9/nWP+Nk1zctO/Ppg31X0s\r\nyAP1Hg4NZcZeU/1dMZvwm0LvdUbYR/YltWY=\r\n=TfA5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.13_1651579961410_0.3511941808100967"},"_hasShrinkwrap":false},"1.7.1-beta.14":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.14","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/jorgemasta/storefront-hooks-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"f462c360322989860b1865969b4b27ed8a5f4f17","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-hooks-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-hooks-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.14","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-o3YFDpq/wRysBnwYnhqR5axFwmXneuFNYmlZOD2jpliL7hjkU6kNDzDso8Xph3OyEcie3t+mJGYK2aS1HCDMJA==","shasum":"390e84e9bd3d87e743b0e64b50810a5e1374dd9b","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.14.tgz","fileCount":217,"unpackedSize":668061,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4UiQvMjk6XRrgmgQKkZEs3cKX3umwQHcjrMwegQxSKwIhANVCHOminJPESM1INBWg0tFmxyd71wut+yaVxqNLqLet"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicS6kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkdQ//bGs4hAnkwNQr0uSqT5uxnmu51ChltXm0fEIuNa5DRpId/R2c\r\nGDYRjXX4YJODYudqIyfai0uSYcyB5pCXe5yVqb3GVhkx2S4LYxEzYW1vPn1k\r\nj12Im8x8iUQrgjn6pugXiHwbfwasszfu6B0N0KfqW51l8of1BhTvJbOmRkUo\r\nm/K16DVt4r7ji3THCBf2aWg/aUABAvPNZELrUQQWIuJw9chKXdj8QQQrYmEP\r\nS4GkRmhmYlyq0cSfc9qutMr0WXlZR9aB2jYAdz7zdJ0A3dwGpmNtPxBJVmhJ\r\nCuGXIaPIIl1OLVe812kJw0uahj+gpxxKJY6uHHVAlOC50Cvz53+3jRb0UZV6\r\nNACTItO/ZhJ/dCZUTAePNGfTO1hbOVLf6I6BBK7nmPanXpkUGF2Fteqiut6A\r\nhF7vo4xdnEwDnYdY6v3PqtZlZJXatDB/JmYy5QW92fi6OZaYi2jPVasoVYeu\r\nLKvJa0ZssWf51ASRWxVcRHNBQ7oTMDjmbrrb+cYlqZC6RJBAci5WoUGi7Vuz\r\ncCSYhOzg40wQRL2iwwWkyBqCLq6Mg0Je6cD+qV1rt95kn9KESBZH6jxedgzm\r\n52C4kggJkpV0ZyJs8lAzvsyWmyUCp0Wj+kP1wy61NT//kVklGhiMB993ySVl\r\nZqGmktPBj2lWg7sIsnYgen3T+N6qSVxwqS8=\r\n=tjbd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.14_1651584675758_0.36749078984073913"},"_hasShrinkwrap":false},"1.7.1-beta.15":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.15","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/jorgemasta/storefront-hooks-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"50fc7f0c665386dde94a26ae2972dcf0416e599c","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-hooks-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-hooks-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.15","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-9Wjz/lKSIuXxo67r1HTCci0WX9XFXlHrZ0BucKRGgA0A5ab5gcuk2ddnCQshbJ2nGQBUPS6nakktxhPQQ/DsAg==","shasum":"b42c7af8cbd9b83ef108b2748bae945249c9c48c","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.15.tgz","fileCount":217,"unpackedSize":668061,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELScU1ixhK2/HzeGmNkVWKeU+IYixlMtRXTAmkJI8mhAiAJbJ8oh4LKKcNTWA6XX1NcD7z/IBOWn1ta7COhGoSvgg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicS/vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgbA//dO4D4dcPxoXgY13L2dfnArjdGMWmiaegkUVhNI3+awrtPk44\r\n1YVJio+1K45XHwRW5h8SmVqA6qy0QO1UcLUweir0oq6kOU6uFE0+8EKUQT8z\r\nq62fBzRuLsPTfdkvHq49kSdawRI7F/Y+awV8rL40Vs1zN7GDnSC2aAHJXb2R\r\noDC/ALDi22MffOtQ/4k76rzpQZopjwHNmoyhn9puhAz2zefI3F0RUYJq7p9L\r\ny+MerZPYEzMNvueWtCfzFE6cFuxG9RlRg0Um9ZBQd40tP++nLrjqZLQ0G//4\r\nNTdXSvfYqpeWySXGvGPmineCekdsOG84cw2/BRLf05ESuk+wlFXtdVieb7na\r\nf2LkFaqkGwHV8sG96nGoaoC/tS089C27zQ9atOFaW3tN941bMARuSP2QkjVa\r\nHXkCMVFnAvZ6s6rEC+45eK5XN/w0ie1Las5hJgUeTH/61Tnq2/tZiCAXZ4Jx\r\nq7keTsE6bo1vF5dNFRGpsBUtwS4QEil+hWqOQF5GyDsu67k7Qp1n7eVEe7mx\r\nKXkVKmXjDblJKvtD3KUOIt4fcCAFLLrP/BvZj5TJ2Qd7FqRC+rRHBOlkz6TU\r\nrxkt1f0bhmHhfhA7zYKAQDf9xePgrXwaSwO710V3cAhsIFVkL8ykeu2TOwl/\r\neh1gXAytcn9jOwI4kPLC0vUyEP4bxENdwAw=\r\n=KBjB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.15_1651585007671_0.01492283612109313"},"_hasShrinkwrap":false},"1.7.1-beta.16":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.16","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-hooks-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"ca161a2da370c14cd72c89b54d4bd0e7ef77f992","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-hooks-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-hooks-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.16","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-L3aLUf1tDQZi/+KtxbrZbwdI5HcgsMW1K4lvmz/d9rb2GJ4fgT9RbD6slSg7PqaAqhhJfmyu6MvOB6StBngEvA==","shasum":"949b25fb35fee63d8576f5d204d9353305c8754b","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.16.tgz","fileCount":217,"unpackedSize":668042,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBl4ErQcAoj6RzJvMD1ZP/S2XhFbDabYG1onOXBwiPmmAiBky+Ak3uiGhssmdnLvPD66HfJ6lDJNavUHPTxfM4ajDA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicTdTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2aQ//SGPtUKYON3l3Vn6ekCtUFmMrrZSuLwmFEBINl0N804/tvR1b\r\nUmXTWgihJJDxL8Scm86w1bpvivt3ToidXpWd9GDpBuBnVcuWiXvW1kiE0fOP\r\nnU0ZRoXsHaKUb2W/kMIHspsgwqPd4ofUR96mDOyB1PD9J62RZy1V0N8THfZx\r\nFzu4rHnKTACrr6nL7GBmc+AvL78c7snzXiqU559J1zGXJZ07MFzq5u7AI4ci\r\nbJ6GjMNyoUdQUSidyI0G0oRNrzZFuZJ4Dh4cPo/MtjKd2SBrwIPYrm7fTj+K\r\n8zN5+uY5rw05ymX5iW5bahUa9gihFFyjRlOSvMAIWVLLb+WRRk224LEdvH1z\r\n/L2onSi0x7Ss0NDnb23xTxsE/so5nBEfVW8F8u50VxfX1sNTDKeyp2X3TyjI\r\nBZu+MuZ9+I+optsE8WoJYn7yGWdWAiONrfWMIKfSF0zbBwLg94YgKokRbBIL\r\nB0yH9oBST1HWoFm0guDJPnJ63QwzCD42i5xcKDOmOegcGI/oapc66ZLhHBoY\r\nrhkDZ/lVqeB1Q+j8IOxSCrtMBSawbMPViNk37/a49nSlQbo8NGRXVy4HB+CI\r\nEPSKoKlhSHJ06ZaHLTBIk6/+p7m4kIYs+mlGl4pZQT2GIUcZeFkIgLJvIRt5\r\nkez4iyKKeSnefmLadxXzrOZGlGKLV+9TYK0=\r\n=76bv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.16_1651586899266_0.576797375955391"},"_hasShrinkwrap":false},"1.7.1-beta.17":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.17","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"7d3fd9ff954983a4f90533256017137f44fd765e","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.17","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-aQKNIIRTagvnrvniuPq71OnSR+Wb+4QxfIGVyrOiCxJFvnOEC7Ci63AbfMm+uLw1lr1tsUIWc1T2/TY5oYe9TA==","shasum":"02e519053dca6801c26d77098ecfae4ae5907953","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.17.tgz","fileCount":217,"unpackedSize":668036,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRqImSzefDlmxYTEONYtezMjHZVj/Ul6jnXqLy2E6/4wIgKzKuirTucACS7+fMS2rqq14SJkQQCvKAJoT627bAjLI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicT6/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVmA//W6HMJd1GONDzV9yDfPWYq9GVA/pTKACF4mL8vcSNecPlKFvo\r\nZ2bwPcTBTJ/PNyvUlbIcqChRjrEkKhmKzjm+6xV82echc5i/ga9P8HmrTDMm\r\nwIiAnCiJy8K6Xd7L81sxDbJP8bhP9GOvsfaiRYT6hNxLg0gHAazH1K+tHg0t\r\ngJfUEa0k4HLIs160v/lyeXdJIJzuBv+Ks1zh/MwOWp7C02rNQZgYFK7Hlajd\r\nWXB1LBH0+sGgsPCDI8f1u2ljmCr6qoVzo/WbMjI3nncxeLw1EbDm2Zyc8nA3\r\nTilpDFj2IGjT+XXcHwMRp217VwA65e+7jJcONyKgBvmFy7/ClmewEFyk615U\r\naRcx4ARFasbgJ6B8zZuzCN4n1/yCEnVHi1EQdzWWr+bQ51cxuWtzi1I/3/wX\r\nOVLdd1Qo4fcOEzKRCaY4gAxcabtGNuf7w/mtpbfzOARLaK9FmUr6q4PImP06\r\nuo4m6stCKNqCgWu5in1iqglL0DdAU1A0ffR1wcqp1laQR6aFLNQcUDT8jjMh\r\nC/23tTxja/yPqE8OhgMdAusZCcxvGSagPubrHJ/mukrH9R+mq0xZHS2cIDWn\r\nwALIcDVHygEgNIn+TD48ItgBbBQg+9QFH0oIWKbXXae293gQYJtaGvbXqYPr\r\nOTeWg2bHsrbZGeiz+en9GzqJcTHrAPLT3iE=\r\n=u5vi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.17_1651588798974_0.7936110262221439"},"_hasShrinkwrap":false},"1.7.1-beta.19":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1-beta.19","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"7dc931651b47558c2836106281f2e1e6bb5ffae5","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1-beta.19","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-iahc6eK607NWBR8Lz1CWw1ztKtw3kMBNDXsxVNGo7OLR1k+JVRiU1X0d3kvEwePhhJnBMBGBSW6CVvi7HW4cbQ==","shasum":"9c01322131b005f8711bd1f2f06e8a8d7922f1ff","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1-beta.19.tgz","fileCount":217,"unpackedSize":668036,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDUVkQps/TsCm/pDFVNtUjUKtuT9X00KwLePjXqZWsfoAiEAjc9FiMfyWARn/Z9dVDmxL9Xnpi0SoV5XOkNEKxg93ek="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicUGzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNsw/9Gz8NFDJSnQnE58Hot++8l/NbrqK5tefLIjD7NnqpcIRIkYQ5\r\n2TLG12/2Xj3gR1azXa/F4GPUV3TzuUIhLEt3i9wfrpWD7ZnNgZjn0qVDepY2\r\nHKVpKcMr1z1xBMsrIV9Oh+pSJqj3rQtoL+BilC/JjTbfvkCRT02s7ESZ25co\r\nUniBfZylDMmVcr/iO4nr05NrqfkW33T1RzZhmQWYGJ67NSd9NMMopbNv89bJ\r\nyFtRXydF3UDYYqg95Ymg8NLtjjv6PLXlaSv4x/dhSBrEoj4WPIRhU5zOrtbc\r\n6rpIV5+IKZoY/PnPFzbAovdl39r4o1tJCUIKj9UBnExkAqBJazxSs9HxcdJM\r\nU+A1PPZRU+in8IFYZhn93d5zsiA8sDQuWbPOPZler+FK0fEg6ZbuMczRfLo3\r\n8YbIijODfIj6+D6NdlMQ3NgF4FIUwvLQuKNFYKSynYxckdmtX3HuSCN2Bbdk\r\n/0alsUXPcgwSejN/eM93Oh6IYN6IcoCMLqneqJngwDVu0ZAUiSV5UJu7dJ7M\r\nK7yR85Wqe3Cb3JgvsafTHIee6gEdJsfHxaC+FDjbrYIdm0MJjxesm3BrULNX\r\nONU4Ar73dE4jiiOeu4h2q1cEbDkA4Oke80XLvJLkJ4FNv5ZFaYZ10JJn6bom\r\nIyAfFgaTDmPQmh+pRJsD7ZA3QEoeV8TeDJw=\r\n=73CQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1-beta.19_1651589555439_0.6568735198206008"},"_hasShrinkwrap":false},"1.7.1":{"name":"storefront-data-hooks-jorgemasta","version":"1.7.1","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^3.0.1","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^14.10.1","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","gitHead":"e54f1f7f43f40e7af2367de5604edba0fce5fd5b","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.7.1","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-EWnFB3NMoPrIW0+bG+jRdwA/689fvgdjZOxZQO7BcwsyJkdB2zbQ+cNOYSXmVh3k4Vp2zai6CNDjoGvRZT51Sw==","shasum":"95b795c23f01f4c41ad92a5cf88a80942a94e365","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.7.1.tgz","fileCount":217,"unpackedSize":668028,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsjQXTKsnJxIvWEM77M0zeB6I/PKEmTcP7RhObzqMDRgIgI+eXp7+hJyEZpnyq5MMJTnFSYoXZxC+zLWtWKcttWqc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicU/uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqMxAAhyTrLTbgW8QRyY7Cb4rv3pw71gWNYCWX4MsvVkpgRS37Uv5r\r\nbuFMiFTVK5pHR9xpe5AnBKisq29qyJnF6r/NCx5dEvSENy35JFuriX1MZbQu\r\nD2V8Heekso8XUgWH0l2KNZE+glg1HnleCh67/f9xnYLzfJnJLar5hDCT0Sgk\r\nCa1E9+t1ESkrXXEvmGi4VFUpjPWhfWVcYe9q5diRSuvaUfUKdQo7JLM2RVAc\r\nSbdJMQD3JxzjmMfCuIfDGKKyaU8U5BWUfHnNHUwULW4SxXw38SB/zK8B77Po\r\nVqv4lLbx5HWgxgEvun8pO1qlDFiRnkYQLpRW+z0KRQfhLgOK0yosrOVwE9m/\r\n7HR6TnwFvOw1bPzFmum5K1kWBtDe8pLnGlLZjeqgHJEOqeDR51eElEblcx87\r\nrS9iAJ1/MrPg0HRi1+XOmtwE3//1FkoB1sAgbAxt/gJzmsmC0hDtjvIqwEFj\r\ngpUuUfXhoLlrtOvcFHvYt4tBanQOzOvss4awFgtOQFpPh5g2qQ2lxPxz5hO8\r\nDm0Jp5fG00nN04Icwe4q3ApIQeok+J9Qq6rpTXltQS5gRF9fgwwpqUdbtCkO\r\nn/yBPfkpSJSTcnAl8APg5hAk1PoeWfM1TYwVklu1+NosGdi5mr52ivKrN7bz\r\nWdma2uqThjS6fXKYLZpnyS+fIkjgqMCbn14=\r\n=Elof\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.7.1_1651593197900_0.9944773557594948"},"_hasShrinkwrap":false},"1.8.0-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.8.0-beta.0","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"f1396b3a11fad9485008e126c1c633bdf846fef3","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.8.0-beta.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Lm04lHM83CXbo16r23InEQ0S7T+WlELsy5be9LFyHgSLqv1I7G/IVgVt4cvQAyWJMWzZUl3r4pyAbIHf16NgRA==","shasum":"6fb680ef4d024356fb60613d85f2723510a6d69d","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.8.0-beta.0.tgz","fileCount":217,"unpackedSize":668040,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFckAs99+iTQCuHyZhkt2+p9GnXQ3vZorL80eMEDsndTAiEAuD2SPzRs6RbYgQex3h3vmmyuKxIBCZyyhDGP8r+pRy8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic7n9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbYw//VSmvWQQ2OO/wNU9lpRybaxW+MEalw35EQ0krYX1fMHXhpWeE\r\nI3cVmwQEJf7J4I/xXWi0GrVkYwwzzfIQGWnlKw2UZM43m0wFyMENg7fCOzEA\r\nyt96JzqkklMC/2iTXVLbLc0VT8p651ouzABgXtBOwZDz3jOwPGZUocieq7pk\r\niBXcgNA+jyFQtwx6fITIehOJo8mgiQaURdImPjcvrc/lcGvPPw15LyCiUeiD\r\nK2gDzzJ9WZrBfpiyqUjM7D12MNne3lMQCXvJ4ukIfgxt5RBOaqQTxHjhTYes\r\neiy9Ra22k1WCEcg1Xr75+KsSqSqFt1wIrQq190YEInXmumZn/zMvOSgGhNAr\r\nLrXSne5Gy+H/F17jr7cKEL1dVee+jUrYAhS6jrbt4jjQ1PgnrUOd/BQVpU5o\r\nbVjEZ97+NaB/0tFnwzckuyvJbhxEFXogOlDsCiXwlBDFASYNkyW2NyIpr5H3\r\nshZ9d5yHVxTxhjcW64UTt2eqeWFY/1Rw1NCxI84tISHirZbDDEtPygO0lUfQ\r\ntnfHlbmVl0Y5BTTWw92p1BEQxbp+p87JBzNXQZV0nu0zjYZ0EBI+GUf8GjmP\r\n8fyFGOrR2w5JelZCkymdd3Q5qqadgLo3VrdqSfHi3PURL9RYhDnNxj8XEgNK\r\nVKJugnGucZuHEcUt5vu0c+S5HDE4HuDzImI=\r\n=6yRU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.8.0-beta.0_1651751421678_0.24688690379433598"},"_hasShrinkwrap":false},"1.8.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.8.0","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","gitHead":"c1297a4e6759f33ee14fdb844f10d6a09d257a37","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.8.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-PEkOajGma9uP0ADxDeh6SyoUzePzM3H53W2ZiUVQLl6gDAN/6x/tnNE8VlgSyzGzd40TwxW/5IN9+gTVamO1lQ==","shasum":"60632f5c9a7bef8fe8c91e3fd2fd94f239d76f08","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.8.0.tgz","fileCount":217,"unpackedSize":668033,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGhrv6Prjdgrol3r0Br16+EnTkGf4gafgJTyBxasgcYAiEA7/wqoISmgyzwkNh4DeYWVCDe4HvEDNxAf0vsAQue8cY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic7wuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDRw/+JZRWKlGfUEdgBMc2uRNrwBD32qLwM4iq0nGTzv1G3kftP3D9\r\nSn3UNy6qF/fQ5lUPUJ4r3axE1aQcJdtEK0u6O7xoj+JaObk0Kdiz98F94q7Q\r\nRQXXF8KSio8fKifgReJVhx/3i+669rx/3FRqbgdf4668sQWrFGePOoz5C4h3\r\nD+QAj4vsZmVoLeeJjvzaXYumRq15+t29N7yfWFX4EUbsFVEiQy3xujyj4TnB\r\nCBvGN5BC7Od3I2M4Qeq2q8XoitvnO2gZst8KbDYP664qA2PdLEPPrrPFHEyc\r\nW01nFZVLqVZryo8pXh2tX+EBfkgP/uXZMlQo4aA0T78kxp9bPRdJJfecHOvp\r\nNbLN8cPWWJ9kiokHA80gUKwELF38+NtprUnowQgw0p3ewT3NZgRgqGd+eehn\r\nWfndIVPHPMVNz1CDXVAIi+6lsgvdVBLtmQxWYfb4F+VQvb/pC+T2qEDJYPc7\r\nQmZUYhnSJPOvv+AnjGG2p5hmpOUeVk6fXpoIv1zzYQfKYDES6bCIig3QwxlE\r\nAYjurcyYd18MNMZw9pqvcmX4pU+GkEO0WIrp+8lKh/HYYSfImb7dkGVSIo0b\r\nbkqbMjnacnYb3LhGy45o1EmAqtAaHNbmPMaMbasHc+79VgV/Q98wWTjDugnm\r\n7r5zr5wQf9zOOz5qchKwz213x56Z1JfzswQ=\r\n=uhVT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.8.0_1651751982069_0.08499266396865823"},"_hasShrinkwrap":false},"1.9.0-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.0-beta.0","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"1b083a5ecc55943d13792eadf5ecc9e79d16d1d8","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.0-beta.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-tsM0R0KChXrdKhUfEsYfTePTO2BsusS9UnOw6vgWVMFgRIls9nUi+wKDZrV8UJx98GO/+qHk+s8WupkFIGL/3Q==","shasum":"19dfe097fe88cf164536a2c3ee4fd1fd5172a13c","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.0-beta.0.tgz","fileCount":217,"unpackedSize":668129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIzQVEx2/CQ91FE0v/sAYVmyo62VaPnIbYKwJv4pBRLQIhAMTOjkmaAEO/YEFB7CsX5hbNWkr+v8LZIKb7GwL9LnAw"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic74kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrezBAApAJKsh+hK/hLYVkRqI73fkMAvHuYL4QcuxbTm2CUMmxO3ejR\r\nVSJxAYHzjSQ9FcYkQiAvd9j4bNwkVaWHQy9KdH8sKwFu8DWo56PiDdk13qRi\r\nERq2sxVaGESR9EwfJsJDxX/CFdO7j/WIBTNDUbiUvmFLeZHcjmKemn3iM6xf\r\nzlYWp9uwJWGQvS7Mb26GPyruVf60062c2PpiGB/VRQObwbSluHLyUCwzUVCe\r\ndKtX3h2ABs0tGpaV7LraTxFKoctV5Alm8YTg12q8du/XhzNfkQg8a4scYx1E\r\nMJNe7lpV5J7xz7cOxXWkl6od1HvZhSmXuyevBsJ0uoBG1hp4an16vFGGGcD8\r\nRRevCyew+gY52btuH+849Dr4wzI3cQ30rVTQHY9Q/4vxe3J5pwvnhmPi1hrH\r\nmS6tKDLSea+PrXPXxK0ChY63jEqdHGnaC52bljybtKugfWdTX2QZgu+t9L2Z\r\nKqtyt9AV3gv8VCR/kwv6Zz9uX4YWc+pJFMwMJDcIykg/ngv6AmfQmJ8KvMrH\r\n785fJ0tYZaQkwLOvkuNQSMZkn3Na2+wz0Z/OIaocUmyiTJqcuK70xhDES6qc\r\n6EMeHnofwkj7LYzuP/u1wHgrVHDFhclsWw7frJlYJGtDKoQSqq5JN2isIjQK\r\n40HWK0INbsT02Tej8/aliuv6KCnlyqKFhjw=\r\n=GqAM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.0-beta.0_1651752484241_0.7419290336515791"},"_hasShrinkwrap":false},"1.9.1-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.1-beta.0","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"0e5d89a956cd61b9865b3bbbbe0596fb871ed399","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.1-beta.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-OFBhPhEQVO9pZ4R1QWsl8iypggqKHtndr7dWp+u81w9onIJIATlcHkC4Y2Vftbi/AuegoFbbG9daPsR42MARTA==","shasum":"e33a8aefa29f8de87ba1b65b408bb9ef6a6aa593","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.1-beta.0.tgz","fileCount":217,"unpackedSize":668129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYGCUlIYa9+Cms4Uh4uyaeVyYcX2OsM3G1skV6fIoj0AiBzh2eTHGguLmocIpNa4moqPc0QS08Ndxxt8CXGkCoqUA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic7/FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowZw/+Md+Cx9Ml4p20g3FuAW9ZFwLdc2XDguhxbMpAl0XdFF9Olyh1\r\nlvlxku8Jlj2YOCqBAKYYRAep840zu72NO8nhQcD+QcPcW46d1w997dtUPLKG\r\nSYFJrDSVOaYRASOe+pvPKq7cQl0L1mPRKWp9Nw7cvu3R4+YKoZutsGHip3Ea\r\nQ9PG7NFQ1TU8bFQoJaC0gT0JItGJ509JL9JM3jK+Fwc9PjTqMqDm0y1QWrEQ\r\nXDV9QgonQ0AtpIdOBKBxTsYf12Elro8/wYAYjnNKDA7rE8MeEtznI2jrnl7K\r\nXdWPB6ACoSuwOrv5wvSVlwCwdbWiiAs8PIssld+btNPZ9MOOTEeXX57lwu8S\r\nkwP/TFPTFxQ7FMSE+xM37tZIjrLhQeY7loM+Xs4iFxTQ5OVV9HkiuSUe0MJh\r\nVQ1eIMkB/FTHwxZyd4K/F1P+bHd0JR5Kad0JoAjYZ3SCbhsuiYXJ8YI2urW4\r\nHfi9vE4eLFWhCIUBR1dTjjiMINypqHY/2E7OrSG4d59BPF8Q+/KeztkNmlRa\r\nYwXr4M0GifKfwmb49WdfhVIUsb9BKHQoLegGw7pxS3sVpnkYaSfXAV/CQrxJ\r\nqhbSXo+bMb/xFupUwwGoTqRgz4p6t8qhNIU/wp6s4XJuO6CdOC5u1ctIImZt\r\n+CdSPfRH7zmYV2IFMSS2jFaBM8nn3zZVwBQ=\r\n=b+NX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.1-beta.0_1651752901157_0.8384411127804174"},"_hasShrinkwrap":false},"1.9.1":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.1","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","gitHead":"5068919306c815c8d7061a7725f83e25aee7e310","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-ZYDeN511CP2PBLVMBiXbX/R++vxNkrllo950TTwAxvGA2rfaASyhi1L/5kUb4qCL/eOJks+D4Z0HrOk6CGu7/w==","shasum":"cc0db7c8d05624dd913382c871a3d13984631bf3","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.1.tgz","fileCount":217,"unpackedSize":668122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKYs64AHFpx7I1wBNkPVyMal+ZJ1OxKni/URYJ8jp/YAiEAnPZr2Hl46k+dyoysJ6vJ72c+V7y3+m/OWSIsutGEzZU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic8FCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPrg//aQG4YEtEAXtqGC3MZL3yyrLlvh1ay9Bw5IZRFIV07EG2cCid\r\n4jJkfD4TMES1VxtNLqlzHPYl5Kn0uyUH3ZrDVB98UB21g+Cl4R2jr/152Y2R\r\nHXat6ppnWB3lbNdUUpzuSmMf1MsC3iXqDSdQG0Pw5F/jlKCs0Umfz3LuQanG\r\nVuIo2bgkMerILbh3Rkt7kwsbZ8y9oWHzav1PMc5QYPW1BdrMA8nUpdhtRAmJ\r\nVm6kEYrLNK/me5ml2Mw25pwMxuuV7t1Pv6FHbwWJXtuqkVb9HnwzkSQyVyWb\r\nOR2rNdNoeeZTRm/n1Ko7Fwe1yKCiHrrL1q3AJzanlkYUEd4lk2YVozIEEHJ5\r\nu0JwQdOff7BMOoJSlNyJBicmh5GqmAw2mRvkQlsvCOoOFxxXnhlhuOXiFAj+\r\nydrdnKut0CWZCQgt7rdhjSI2EQiTXIJb/mplulLlQs3JAyQ09u6MoVARJs36\r\ncpttbl1Uhw7iXMU+eXtjoAOiuvKIsYdqjE+8GSG2cPYzyPe7XB/r22da5NrB\r\nndTZKjzGNNNpPDOmloLthZDxFHb7x5oNrWrutz3vJlHpHijPfE2vJGJUwr8S\r\nb3xmFaYcZdO6yjmO7m2z6nRN8K7fkgqtaA7PMtZgq+uX5rdvrN4FC6KRm0iV\r\n9HxZS10YnkTJHdVJv7orniwC+eGQFgZoNSQ=\r\n=yU/o\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.1_1651753281784_0.5901643486080146"},"_hasShrinkwrap":false},"1.9.2-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.2-beta.0","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"39267df5b36c91426731a04f3a696b08db7a3cc3","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.2-beta.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-TB1oA36tt+88vR5G4yZJo5H+3+XYxHTva1BjrmyyZ2vg/lBDk9ER4panfQ7+E6L5q2pwlSqjM35Ut2IO4+elLg==","shasum":"67bc0ff55eba7ca55ba14bcc2d452ce505abab64","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.2-beta.0.tgz","fileCount":217,"unpackedSize":668129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL71475kOIyJyWy8Nrp5NseI9Mxj5WkVsEYLqCTIRpngIgINoPnxqwyyUWwqVCTHCrU2hKmJAbAcIN17drRmv2WdQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic8GhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHxw/+PTch0TWzYWL++FX735TFC4VHOI8GP/ZuCvCPB3x0VIVFstii\r\nDEyQjIaM/UQ/CUH+ChGnWVrpNMwXzkmW/MLLWd/p0gLMebmxb7NSJP/iPuYy\r\nUQf4rl34fWM6IDjRFp773WWRoVK+oAoI1FKgC0WadpWos11nE3Hj8drfsqRm\r\naH0UTvlmOL1hS1Y79KYfOWdjg4N79SoPNxLfcPb/1W9wBvYJMCHwhQESTkWE\r\nyZ6R6bkTj4zqtUMQ0zfZY6HaXkFXHQp/uM2k8Tbera+J0SRMT5Rzv38UtWFa\r\ny9CYEtGwTyw+y49IuDJSZuHM6MgrIim+x0ggbb3rJU/tBil+3NlqFX8BAD1i\r\nnSck10O23i/B5duPoapwaLxQnHzM6k3EfKUPASiyxw/Lpk1IYmxwgoR7yn7k\r\nlEudHJBHXqV/xTFZe/YTifTQh5P13d6gCPbMqQbT13STrVHQ3yTty5rerKuK\r\nOr7u3Trt6s7i9VF2nOaFU9NqwJv1xARVA7ecoFV79avYlmzAyVnKgndKHSV9\r\nD1BLx4VQrmWRwZNbCLWWGN1L561lzkJrNDRRuA9jLYtv7SPEC2hROpgErlei\r\nXuSoGvqaqPVXVte0sesXPwqH1baKxHLme8bmg+kMnAzzl6qHbUKsN9u/1LYJ\r\nfkl8dOuhOJxC/jKLd4tDxfleI4OCK8+mnMc=\r\n=MX4r\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.2-beta.0_1651753377397_0.942245160580337"},"_hasShrinkwrap":false},"1.9.2-beta.1":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.2-beta.1","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"c3637d6b2c20c0f13cb12157a6c34ea2e93ee206","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.2-beta.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-l2IzOWADCyQkMydRNQivdMBZbFe0YM9AmKyqcFnN4WReELqzDx318BnRWjc59vsHE6FPEAHn+WlmBTsQqVquyg==","shasum":"5480edc0db273038b88db07b22cbe6c903dfb5ff","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.2-beta.1.tgz","fileCount":217,"unpackedSize":668200,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDRRYnIbyL7VTigBp0HOyCsO3qbcsg2DQ1EK7WWiGLxQIgGhYDPSCCKuL9GOzNUwmGBtPSGG0sHmpfLL3njqaBWcA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic94QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3OxAApRDpu+O0b7az1Kn5qvVUIRXqP4Mbn/g51b7WfVn6W3P3edNd\r\n3DNwZcNI5XASDaDd91QjfQMZqANwAoRowlpILnoQJW+er+BMlib1LmVXSc9+\r\nn9nPpBIqyAgqiyII+RpZkKJSlHXxz+VhYtxlJsmOdZSMfefwOeIefgJcA8/B\r\n8vCh3qVPehghnEu/ZnlUvinBNdfIHS13P3LZo24foESnDJ52U2Z6p86tj6KY\r\nzb4haBHiswnWdKvrBoANknoo6Z/Uav4TLdXtvETs4RDTlQ9FDU8CxyiSwpmG\r\nzxr8cw0//ndr+kTIeDKXbOgG+Fw697lTGnSLwNWxPMWiGvdFAufPz4fsvNST\r\nbNrT3CBRXAZgMA53ZYwJjyp6RK65N50H9s5j+450D1QcZseRvnXXTKnfZqeL\r\nMGZc96irXrVDHg1pl/3V4hP6cg1JTuQ2FrK+8U8UYGTOuZ2NoBJEf0seKT4/\r\n7pE8c0OEVGAjE35V36zPT7Vh9qwlvbHe3L/3HLq1JEBYYCqPKvPSV6qn93+A\r\nB5l06Ovz+T1a04lg45XbeDjI28s8zP4PhoYiXel5kTXUUDf7M/TpOkc/Gktq\r\nJYg1HGH8WXORZAiE2qOhwdq2D4B5fMV34UkYrYSSiO9xB4IAyWFby2Wmipuk\r\nKSxryyKrvZ2o/OlKkm5/IlLvFfFv9t7zb7M=\r\n=AX7/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.2-beta.1_1651760656731_0.9368719839916928"},"_hasShrinkwrap":false},"1.9.2":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","gitHead":"7fe972961d5d3e2bd86a2261d3ba6ae832d892d3","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.2","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-5VAUsJ8N9M7vrUTbXY5rMRmLWZMnhLegjWUY/8yJcVcbAP6dqhobn+Sd5sBIAksBKyk8YXnKEYwsTUofxrMHHA==","shasum":"5de78aa487582c42fc19f79d43cfb7ec2d7443ca","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.2.tgz","fileCount":217,"unpackedSize":668193,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrZ871F5NX6itvNX2vrLOQC8I9b28QSTv6aEbEeco02wIhAM6S6vofT1UkcpEY0BT44DeATM43Q6nPOv4DWZSkJrVP"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic99jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoq8A/9FS67EanVbTSlj9Nq1NI/JXkTGZs+9SvYll+mSzyHlISb8zk5\r\nHttCDDj10tz0uCK3EJGGLseDflr+Goe4GQOsl9U70OBeOrmq5vVvHL9bVR22\r\n6a4sVAA2APKXzDXz4a6niMEDtxRwod3aKajq0u0G2giQRrG95ZSO3QxFd4Ju\r\na9KehLtLlog6TlnFM1Jl+rD82atgnHW06NGr50wGLhFDFCwXgKFZWrIMs0Px\r\nobBWp8dWmogBAeHJW1tyL2he1nD+xgUFnD3RSle7Kmq0KC7mMhgAJQD5mT8d\r\n+6EHWStjolAI+ACzfeu+a83PvYe/FurQ1n5AS1L/7IlzB8RPFS/IrPkID1dI\r\nul6I2rDypEp+8Sup8DgcQrC0jEa3+78Lo5po9cG1Fk7NFDoW6Em0NGanfr8i\r\neuT/PaFeDzQ4T66DpXJIIwyIgZWf0TKs+dRCr85y6RveexjZmDWNKF9tqklE\r\npH5wO3+m8JPzROsM7LoLad4bm0OOyLFxL2eBZLdfMs29g4BBeL8pUi0HgYmA\r\nuVjLTh7psK27KJ5q9AKgOm6wD/7US2K+yvvhkwHYeRvoVne5QuFcGs8rVMjt\r\n7WzWQLKHLAobxWjfqZU+j6slCGXLGZ8AR/43zM96yM3HYTrTcHroMLaEIt7E\r\nFOH9nzbH5biTDY37mrj+jfDt2GTRDtz9pPo=\r\n=HIzA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.2_1651760995735_0.28815772982029286"},"_hasShrinkwrap":false},"1.9.3-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.3-beta.0","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"83e5259c54acf2ed67a0a77262a7540bd1c22882","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.3-beta.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-20rI+HVwSiG9r/mmrl+SI+GSimeZ0h1CKZDqr/rejB4UzLEyt/3MFg4A0CbKuuiCF0xGcCgN4il6GSj5BGWDcQ==","shasum":"0366dc962314850ca210220b8ba0f7babaa547eb","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.3-beta.0.tgz","fileCount":217,"unpackedSize":668200,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYaEQnEEKiaFZDl5xiaVSowJIqILAmcpwxDd6wyZBPBAIgAlc233kCfClLIA6j6w8BzkSnzG03VM2/rs986xDIpuA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic+BmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEJhAAofIZ9RG4tUCbLEoGJBw3V6X776wZB3U1RCCPp6dBPKo5rFch\r\nKiSEvrwK3Sama6pB4kGtKNIyUUVnkoTOUbJ8fQP26D3LESmp4hZdEBOE1DFq\r\n2RFmlIBdrUiTxaoP7WU/21z5Zv8lg7KLomJrf3iB5FydfgXRUT2qd2I5vGWO\r\nh8kaA5GpXXOb5O0/1RTACiPlV5ODnOmAypaJP6Icz54I6+AsxkcJPTbilZ7f\r\n3/mk+bvVIox0RtAL3WKByy8lhsjdVx1ZpAW5vuqQ9rh7viKlAcO6mB2OlCwO\r\nwq/vUWp3Kt8HbCw9SX8VEVYg1x8EF8IdTr0oFw5FQFWzPtxBMck/1OmyTxUa\r\n2m22bWwHip81noiCASyR2Pk+WIuv/tpfdZtzFAsjhL4Y3Dy/bfP0o2/BRyBT\r\nuteEURmi4u30Rg+mfL8hDx2tR6Yuw0TeftqMuG1ibLj59mW4fWWuyYHYqw6W\r\nkZTt/EMCMARVDpjJBgOPfSLf6EZLukSjRA5YpghvN7bShurqERXUo6E26esD\r\n76w3At8LKYhSBnvZ8oiHcYMV8sA3/JJuBO2i2aN14EoARLuBYwBZ5q/01YgH\r\npiKuHpmwEFiI3q9hntIcze+M2PbwXl2YNvf1lAFu7Gr/IF6attwV3aPSHX95\r\nNEiUpHiC8CgSxCAKuCwujZ0ly3hGn9fmgSM=\r\n=7k+3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.3-beta.0_1651761254249_0.14570547640117915"},"_hasShrinkwrap":false},"1.9.3-beta.1":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.3-beta.1","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"1417e10e6a423f516875afdeb5ac8262fa16cc98","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.3-beta.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Xk9b/ZpHHT8g/5YaBqy21zsCPk/t1WkfmCliWnITpruN+YoAoR8ZOoA47S8bZ1Fcq5lZkJ4F/8rz1UEDskK7GA==","shasum":"7b441889373815160d74c5652f6e4b033b1ebd1b","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.3-beta.1.tgz","fileCount":217,"unpackedSize":668129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzNwBQk6A+HzYfoBCeq5SIPi8e1BvOf844e1xy9t6CpAiBNavphpRQm5OINV5pYNkHU+TRE9UYo57bfkywtwHmKtQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic+GaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq71Q//UdQt1jvTkeDJSSyLMJcRh0YDYACbB7nyIQpTaon9/PrzDMpm\r\nGo2v3EtH4g/Q65j6wXLTicYmLjXCS1XGtkV7Q2m+GrscS2ko5MKEOm12qMyd\r\nGunsaULdngd8LH8O+G1Kv5k/XgsGpeYLfbCL+OtC6zVO1Hr0MPfnbOEoV+IZ\r\n4AU3a6qxd9ob2Fga10IwQwA8ZtsXHaCywsVWCev1WdfFilNDmCSd8SXnfzVK\r\n84JPEEAt36d2OdGGS5S6DmI/1HUM42UNFcnFhNzD7RfpSF7J9frHT8UQMouv\r\nCEwLVMxvJUaNq2/F1aD79aAfzXSXqL63VPXoFVu9o0IgHdouDTbQ+ywBrjYA\r\ndpljqVso/cPpezKkeATNPrh9luYliBdR7XhcL5+9KCptPu/KIqNRRgy4vwov\r\n58fQNRx7+AiuSzMI7IXAhMJOoBJjsza/GED/o2JouNPCTOaksFy5HdWFQJKj\r\n5kctIJJwQ5qv6FZZb17klIgadIbbLARoCuoWX5snH/Bh7q81xmstGDW6kdAf\r\n8WSwDIuDb3HtqEXZJsQ5z7K2m68HqRwngaI8cinpB4nCfHpWJA5B8kKdekd0\r\nrrvLVndHFZTRoGoulw5/yIUPi9pRAdI2fw2lesij1BEJ+SQodO03g+H/+fH+\r\nNkqy7cUqptZtW3ZUayHCB74Qnd4JqxWiNj0=\r\n=6hgr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.3-beta.1_1651761561911_0.30601653892330116"},"_hasShrinkwrap":false},"1.9.3":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.3","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","gitHead":"dd1a158cb17b45f26bed76c1e231664a8b9af87a","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.3","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Af59e5y6gOMFylPPUsJxEWfZQSYzWbOTcbRd/C/53+JiXT67tIKPy/nMuFs3gBHTKKAbqYhfxybzInDho4LxOg==","shasum":"38ea63276019f3e839e22f984e6c75424de4a9ee","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.3.tgz","fileCount":217,"unpackedSize":668122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3OzUFaHjTxm2JCk1bHSSj/lpp+mhfd9zQ13R8dXalDAiBgbZYz7KtUcTZyaft4lEZ7jKpVSwxi8L3uYRWSV1kN8w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic+RZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDhQ//XyHWA8xgZRPBZDOVBG90y/J53Op/vD+PqWvIP9XwoubN7KzB\r\nPa2op29nruXZpAfU9cQ/bCSGrORAwGnxakfRKEl5YGcTkesj8Cr/SwPwgghC\r\ncyvA5QVjYzyzRGbMO7739gqW9VC+LzGdi173ThYIwXcPmw1nihYnTcpEH1sn\r\n5un01X3Vb/dZ9jqtG9hoMYn/JwSOmWuHdaBPqq1AbpQyGZ3KeT9DpBeKtai7\r\nJGovAEHQHTatpjTtmJmWtc/X2zeH1d/pHHiYoNYO74tqMD5+1qCNpjpjXa/f\r\naBPBeiFTigrhyKm3SiUEhwBztB2G265F5CiLIKc4HEEzXJ0WHC6K4sQjTly+\r\n2RbEuMBpWvN/Ts/WLlpNgHVhFu9OOKYUd7DEuRmA/4PSYANWrFGBebgvQILQ\r\nFlrf2h1+3aS2G9pRT9kRcjPIckHa5la6PV8i/zXSfTOYTJYsdaSOud+uBKH/\r\n6VrIKZfyXJbaunJuATQtZeLT3aeOQyh3/xZqigsoF9HlmEF1AruRr9Fo8+gP\r\ng+LoE0H5ak4toniKUJZnbLg1AUsDXmLP+ihYbU0CrmLXNQaV4QwOh6WDP/tQ\r\noxk+MXZqFjlSJIxN922bpya0EczDs5pPmISl1L+qgLPN040mjInA8UBdGu+L\r\nH9rtncclWzfyr5hww0CS0tjzeHCHNBsdaSE=\r\n=0izS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.3_1651762265237_0.8024202886403977"},"_hasShrinkwrap":false},"1.9.4":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.4","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","gitHead":"fd8aa15c6dc411008b8af3c6826edf80c6da95dc","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.4","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Hz+Yk7um2JizJSm08jaDf9u1TUWr3ud5o5y0BeOxQXUBRjB7JfytISKhkPhW3aNY4Qpn3Mqk2AoRXtrm67aERg==","shasum":"c4930865167d118b5336a869e01b9f61d346f431","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.4.tgz","fileCount":217,"unpackedSize":668122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCceKDDj3EaIkbz/F1AWu4RdqslYHt/AyZKeqP0QUHurAIgUSeddMQul1cwOP8FI0wsxbXP437ieDuHq9fFCz4S1YE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic+W7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTdA/+N7Au3KSoatE50CRtMXI8F14+3oPbO2jpXd+0Hk3ZZ/L7M8JP\r\nsEGmX3sLikY+cT7EJ1S+lSOdSAlwmwPkSXxS20LXaUGstP3Hz9pmS7j//Pp8\r\n9sOfGJaD1YzyfmuqeYGtDsTSU7VCXEoNksWqZXmQK4AiOTwQwt3V4iQUtn22\r\nkGq2sksEsHm+3WfgjEQ90WxiqNO3vsV3XywHTpt8EJBn9mstSTEcGrfrcczp\r\nUEoUTrm5UbGhXsr167/lZnpVhc3OVAwX7s6V2yGT6dTjfti+owDrx/9SSfHu\r\nspQ/KsuXD+6u9uviZAhEz826tGSqJ5PfhXopJ7D/2MQzrR3qijU5+7jVYx5f\r\n2ggmzekevq1G08sTKoH80TI4KLNpL4xTT7OurRULVa5X4S0anPiQLDokek9j\r\nHvItMN9AMbXbuXSOcuZjaBHcx3Bn0WhzaDc30zAaxa0jjnGpdHYPuQPl3cFI\r\nWcQldNFzryy01lpd+8Pk1iJQzvN0F/zrzLSYjrbzqJ4Dc/M09tQBZfOO0YDI\r\nVGhqMzTltZENvO3Ka4r7crFaOBYvn0/CBBW4q+8H/4c1lgcCamXPqdeWfZdz\r\nPwLTmoX6I9dJcQABW5mSD/BaCZ3JQM7CIbvIhqiezm5MK0qkH1aueQMlK/UP\r\nGL76oRAsX7NfSZ8ueQpaOL273lTYf3LWIK0=\r\n=IaRn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.4_1651762619265_0.6736474919107589"},"_hasShrinkwrap":false},"1.9.3-beta.2":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.3-beta.2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"8c0c4b689ab348c4649be3f952bd81a618e7a06b","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.3-beta.2","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-UsuS6eCUDonsoiQlwqKzYOxGy61atn4CuuVEowd5y5szCq/VRtVQDdVoJ/Zg/vv562FftbOxaGmVCivM/F05tQ==","shasum":"17fe4e839088b56f90572df615747bb360b4611e","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.3-beta.2.tgz","fileCount":217,"unpackedSize":668129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjneWSnWi7lgCxbkVv9pXPjKAdB9XC4GYtYWf3kQykdQIhAOSMNHljQKxgDyOMmBrCL/EdkCP9hlYWARPlk+pW5yim"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic+ZPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVMA//SebyTA5aYcIcS1MPu8Oy7XJWVA7HrWBxAanLoo5/qkU8fMuN\r\nsrZySpTfqatNukb4y40iS8DuOpVLdL0IiJ2xhmGHmCzzMctH5F9RqpmxhdBK\r\ndoEJaCgAHIu3GoAduAhNwsWpTdxMg/QcGFfKtx0CeGOiNPb7mDtYoXxUVrwg\r\nk4bQFJEtAcGWqx6XFQh0EEkn6w0qCu240xY5DASbMQ4akeMnC1hWIr1XDZkO\r\nR2OY7Z9jCtoEi0QdsqS3gdghKF/GeDXMYoDs6aSet27k5MM60QhVr/AIRpGL\r\nHz0sCSUmr8gMZrdPg/f4L3+bv9vgujnSe1cZKVXg9/TgT+8Y1DVYWNJ7jEfT\r\nlsJAp3elnY8ASITeyF+dpn1kgG350Jm62GcPka7plzKh7zbffMxl4WsNFDE5\r\nbpgpIFMByOKg7wK1pfiX09HI4V5BSLTmaJb46Ebv9huEFReh8IipeIzcpuYE\r\nGf+BWu68CCMhZYeyy36+e+kbA/jIOkBEN7GEAkzpzVd6LAwDDL4De2WNwU5y\r\npBtXQjPDKcqsZy3k/UtfUTndHbDpK/B08ARVlWi74CuDTVHdrtsThwqg1+LY\r\nBkv/TXCJTPs150rKhQXdkKV/xXEvpv2TURquznI01+O+gu/du6rGDm6MRhIR\r\nBdBOjEYmytkeBa0623iCEpCmiQ9Aziw106s=\r\n=Oqw7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.3-beta.2_1651762767087_0.8215638194112966"},"_hasShrinkwrap":false},"1.9.4-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.4-beta.0","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"b6c264814365ad63f74fc58032cf5770163b4c0a","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.4-beta.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-5MxIku6jnVaONy7a4GGqOomcuCPKOQCytbxVdAddFU4p95NQpTUiNZuJzjy1kU8vVg871mxnpFe5DLR6kLMsXQ==","shasum":"6fbc78374ef59b8879b0fea06a0e06e9acf427d8","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.4-beta.0.tgz","fileCount":217,"unpackedSize":668129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7tZw5CJRJcISXnKLcc7KqgaZ6eLYySs18t0YguPQLMQIhAKhx0IL52JVAn32yAAYZj2brBwp4Wdez1u0GsrH6YEYv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic+2bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpipBAAh8SUDIgFDglv4vDbivRYakHS7ey5ptvQYpTmmUvr1DKr9ydA\r\nMf8aHrD/4lhSyvdmMzvzbqSyWokVqyLUg/dOaVTBajNoTIVALt7bo40y3Oil\r\nGGaLgdECsLZQtu1mxNrIt6Huy7CK8k76Gt3jIs+6tXT8DBi2EXAPdyd/7Hjn\r\n1zwZQ0ISEKeiwNl0S8Oo1eLr+L/c5GoYg9b4rIUKMImivL04UnorPi3cKI3L\r\n8FXfIj7xB2+3g2wzxR1arITYJT/kChMmfDx3RYGxz3rcqigK+4eEpqBRtSFo\r\noxRkmGZ01LyUCq6fsLY7hxGeL+RSR31Xu9JmElXhBlAY7mlSTWv2aXa+b7xi\r\nFFBEcKQ5yV8GlS6WFhR1Xvz+ZBA703n1tJZZBDF7hb9Lz7n7Z/+eDz4BXanA\r\nsfFkOk6KO7PMlM3hyaELzsyM0T3zrPtgnVV8Frew7hodYrsH4zIyimejd4Hw\r\nxmC5XQZm0nUvSdBty4e+HKf0Gn93EPxR8Nast/XeAbKmpCTRO7+YpD8GLczt\r\n+19TzmfRsv8oXpoBuay3XLrb5vScVy0yFAGvOvgrALMOTlpXbHxRcpjCRak8\r\nGeTmWOZDnLoCdF1bVzi61m7vJ3Nk99K3EevVm/HkWUXhGXENSTSg8FxsYVNC\r\nTTb46ENQqJNALUKg01sElSQDu4ddAl+g0Vw=\r\n=e3zp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.4-beta.0_1651764635542_0.08966466008262608"},"_hasShrinkwrap":false},"1.9.5-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.5-beta.0","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"e094e6e004c874e6d83c07c138a43338e66b9e5a","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.5-beta.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-7WPn4i4iMcCLWduJW+J32+eUPuo4YS9XRvK3lJflny6C+wdATRc77cZdvbX0bMYQ9+OBfyAfsjdtP4Xu6lx60A==","shasum":"85573c5b5c5b745eec5859f8e912b0a167d198a4","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.5-beta.0.tgz","fileCount":217,"unpackedSize":668200,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7RpQHkyiU9TTZPhvsdNyxxz4CEx+eyOxioGqbQwG22QIgB2PnLxiSh08lHIWTknt0UztVUBay+UdaYVMqdiy3y5E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic+4NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS5w//SfndO7IKn5bqq7aFtaQFKquPW96ab19ZRAs27xOyXsy9QpAr\r\n4kVgT+/PqgJcKv6fm17K7+kHwEGnQ2jVFDzA9vpqoDOvpoQ729cJxClKzjTc\r\nbr/un9bEo58jlUG5GhhBQ0Zlm0KWA4gDHLbG485oDIQDEufanYIS3w7EjepT\r\nl52ottU4h7w7/cxvjUTDPFDodR4YjVLwzw6QW7SIwxZM01CoplpATI+sImAL\r\nwlDR5t0HSvpy0X60FfNyO7X7/d2z4qE2wo4ttH3LqUM+dQljRzue7dyJz/Vo\r\nSYX46c80c+oKkg3W5GsIbZfGGO8Z2wlQoR2oUhrJUCEreDawe1D5ocZUQk4/\r\naGBj48GFTsciM+GQxuUcVqCXrF/IR+jF7OC9clTXyBaOCzDKVtmf9ZFNi0QG\r\n43j4MBLh/60c3SMpL3Uq7aVmb3euRtaNRXkpUjd4OrtVWGRpqdMDKKyVhPRA\r\ns0Ko3bczItN2DHVwRFpsvi/f3T7mlkH2nlJboY7xrhwjh0+TWPHdL+KtfmOQ\r\nOdhLi3CqMTWM/DCPe7+HaXy+V/ow6Rq6BlZbnezLSZ4mkE2Ml3zpAR2T6cNt\r\nsngxBbRSMmHqQ1zrJyr+MrRdhAqv4vv+y9LHe964+e29J+vZ5UXYJWMnhdKN\r\nrGv3y+1PDSAhHkwtnNeT9W6y3zbEvucH/TA=\r\n=MSKn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.5-beta.0_1651764749428_0.46806356208988364"},"_hasShrinkwrap":false},"1.9.6-beta.0":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.6-beta.0","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"9618c076c8ef45193e51733a4932ced6af1e8db3","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.6-beta.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-T9miK+hPN3yapt6W1/H7CLxE75J3BHduIS9p4foO1u6gX2itG1+So9PFP3E8NlIHsDYHWKSBKUZTHOuoffh+qA==","shasum":"e0166d287e94abdcc81808b6a94402aa4f31b8cd","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.6-beta.0.tgz","fileCount":217,"unpackedSize":668211,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0zTMIlzKnT4A+P62JvJ1MvjyAIgeFId5l7IXVwu18sQIhALhD/tRQbnaBM+QywsWrI1EMQjeAGtJ2sd/SYRkLGWH/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic+6QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohLQ//QjdKfGq/gGsvDXV6NITenM0fpc5WqE0PB0/7nNWDrkNDvYhx\r\njBsC/Xkf8ds3tYEXpNk3+QPXtE+Fqmm53M9sY1NxWh3SAvvkAZy7+4uLISRG\r\n06M3YVjZ+HJp0c+9H5Y08j9el8H/ZUL4/ul43Yw/1sy62E/KpQQSA0bpi5B8\r\npT4QMfzCFW4uXTT/Ls56f/D2YH36mxuG6cdt982N8RJOj3Jz9IeT3N/uHJbp\r\n77jcg4/jldt81hM51iURiz0eamq71WbvGo0gl3rGLruatPoCV1UhnAbvndK3\r\nzUw//I/jIhqRZ/qEhe5FBOp/FfsdomEGVTP4jNCWG9PLt3UNki2tJwq5sEue\r\nSV5TORvmvRcWuyNpBVfc8NnENmylN9MA3HLxVMyvEuRKcmY+WWP2Wu77srbB\r\nS2/RxZwsG/7Jk7ddKacys+zBRpEciWe8ECJZ01+eNJAdh9xHkhs+7KvxxKpf\r\nhBycOZhPOPjDrGYwBE9z5ogrDrsjqn64lHogxJTDldMG04yJSwiCg+zn6/gu\r\n7QXWoyUqvwdOgfM7YWuEpxl35FRE/rrKSYSFgCkXAw7y1Uf5vMS62BNqVzy5\r\nYKgjTAgI/I+mEW2cKhjXoi6salZMuYgL8wJFS+kdDBwalzoIp1jlNEaz0JX0\r\nxHruqGxHkJMEX6yqVnSNn5WOZbS0QddylfQ=\r\n=XhRL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.6-beta.0_1651764880432_0.6335304287934085"},"_hasShrinkwrap":false},"1.9.6-beta.1":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.6-beta.1","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"7e8e21f5da7177469db981673386b3bbec4dc495","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.6-beta.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-XoiFLwGS21pXep5B2CDDr4RuPpP1k1ZdrlGel+qxG6jnlqGcYaeBjNyQ041zA5asBvhNbeO5b00Ti22jAcDpsQ==","shasum":"af97d5f6c5265f59ef03ccdb8011fcbaf6b738f2","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.6-beta.1.tgz","fileCount":217,"unpackedSize":668211,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfvLX3vJHD7hkcNCGShDN1DTmSnh79ajEb/ypUNNZ7/wIgemH7zKyU5C5KuMDRMM92OWs3YtUMTLv5+Rw+K+PzXzw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic/H9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr22w//RrV+KLpPkf+dkN4YKrLQee8QZAdG5MDBFjvebnIWxPb2dmU9\r\n0dmePW7Y4YlYk3Q3cIOe7U8NWrIg2VOdV32SI7Y9FBOi39H8a8EHnZDry3XK\r\nBZZ1/NazaZfPTrGhUFet/iI+6SX16VOVIc6d9jd/3baEuL0vh1Ltouby2UGj\r\n8h7mHbla8MMcBfTT6e/xOYPRk2l0ee1idlydaQdcW3e8yrAH4EJY3fM+0L4K\r\nh8gMwQEnDgYeitQdEjR1nr/fuQrqHa5mM5OxBcF3tnZrsSosat9pMNagvGz2\r\n/axSb+Cx6l+Y7+P/+C8HXPKIAp/12MGNbiaV3li4UD7/cN1dGj1W9hL5LVG+\r\npILPFxFNTLx2vFcavizjrjGhuA82qlTCdt8/g7mtf73s/H0FeDTApGeHZjUU\r\nieLvQ7fvy9lT6dudGSnGVByXC2OS+E2IEX6oWk1+HbRoRtxoKqzwn3MUiVIt\r\n2tg5rDzLYcH4OYwcuthVJRaxFxzuHTYoQpVW7PD4xN8RseEIubmqVGtssCvo\r\nzTFeoASyesTnXZfIqX1T42LG7bDnUAuXMI+x3jId/o0i+9/tIXmlXa0XuVuu\r\nelhmqSf5gG2IF5O0iexDzAqcWYyrnOIQhsC9uO8F0THP5YU6QYAPGwIfMzd+\r\nECC3yKqu50+E6Y5S618oBqibIve/m+7tu5w=\r\n=R9h0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.6-beta.1_1651765757693_0.2444188226187396"},"_hasShrinkwrap":false},"1.9.6-beta.2":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.6-beta.2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"87f01cf29927ca80b929899546c2772fa4ac5b0f","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.6-beta.2","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-bvYfgXZDc9QB2g/RwTJYeNQZmtIViD8xDUAzXr2Z1pU7L44p+wKbpljfWAk5b3mewcwfR9b9DJc2vR+MH94itw==","shasum":"14af0fa0e427f558380950acb5fefea70157beea","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.6-beta.2.tgz","fileCount":217,"unpackedSize":668225,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHBmhpToU/zA3ZJF9hyCDsiZqugHe1xG6Xd0m+wEDUZFAiATDLcMe3VNQJxr0jSkQsMfzRcdKXQn0Ci+SAmZJo4VqA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic/dYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2ahAAna+R/fwHJd14cDpkaGEKh8wmhVGEWbsMMaCNiAGPJy3BYNZL\r\n8cP8Ffmy4HpJ/gBIHK4Agj1miJEx+ZZXkutdVJKZYRufTJlm7G8QDLHejoxR\r\nNhA0ZE3sVPEjCi3bxVI4D0r/zfMRWsNAlMzrIFY9NXKPAtotQ1vuPo8+PRYx\r\nuKXgGR40KGK4uhLmfHHg8B1dXn/8kHa0JH80ACkZGg8zDJY2B98LeonCSuWu\r\nLxQrrPm2XxDNaVIIdqrgIzZITwIuD4gUZiVYMq2zPytVHh9QsqAWFHhrQXl4\r\np7wf3N4JrqU1S58fkTcNT5NxLQVvCpcPwIZUze/Vsj0+dm7/h4WSJuQoHMCE\r\nqfG7/PPZ0KQ1I2V+M5MJmACIj1jTwEGNmZqIzqFngYnOydxMpwIXP+oudKMS\r\nKGR0uu8CVuFBnqIHVEWP2AQhMqRvv+SKoUBgfwWgR4g3eJktQQxYH1WBZ/BU\r\n8fgIY3uQBZCdeLg3750eOOc4OdHU2uBQdd9kyAxD6EfhrpKCh4TfDkijmLDe\r\nrnJMlI1f7v8lCTKwCCMOeMHMdbLPbi4uwhLLS4kFofZxBYu9R5e4VFmmUyzn\r\nNVKqUW1KSSFwcq/x9QfK3UaAQ6vjCMyDRIYJzChjsudGdW+BZ7KJ4aK4VfPx\r\n2xnRlGcRJYs1xg3ETW5/BCpC3ytxKcDzqM8=\r\n=6bjL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.6-beta.2_1651767128207_0.7498656936106078"},"_hasShrinkwrap":false},"1.9.6":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.6","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","gitHead":"0d4055dda57cb1803ad5ab529af7070b5129061d","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.6","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-QHs5RVydwuolNFq1aqx5BlGmIP/qM1ZCVYAYKe4rWlh/yOE0Heia1kk5t/PIroqTbZmrpjGJv45x9OVqRWlgfw==","shasum":"4fd35ffdcf2cc2777ffafb02f373ab6177cdae51","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.6.tgz","fileCount":217,"unpackedSize":668218,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqymvKqpCW2lYtZh638VjHw/j/cZ46yHtfDFrpQIJWmAiAxjxw5u9JSnc1ObGDCA6zAeOweJYm6ijPulgnmeiqZhA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic/iUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpR0Q//W059Vx6NI5dxqzoHKr8qw6frtrk2/UMPgVepoGJ/DYjcu2Wx\r\nK0AgmUY+3j6hRPHoGmOH6zprTfO9T9cmozuDLlRXFAAMsm2Q6tlF8SFQSR6D\r\n/CvOJ9dLCjoUAhpM470W1Yi5lDRW6UOs1lr8/eOaBgvwcNlbw691CD6fc+Ym\r\nHC5wQI9fvc07BWvpwyuoRhNpG2FJPlNcEb9C6I0TrdhyUmv+zbucUoWqL5hY\r\nDRKup25DTy8wzCTLFVQBIQH1VlPxraKmsJHOH+YPiaxu8lGmvPemdEuACUJ5\r\nzIMpM0gnDcHrhooL6eqUAxkP3ZEOUvB2KhnFeDcEhAIgaU+Czp3tTaBb6rJX\r\ng4LY0i6jQIU1aNtdeaXYjklz5JKSUWfsPLgvsKdntKqRQ+G+Nlz7mGiOCi06\r\nD5N1AaF0jTuCVXPKG3Ra81Bnc+rEG4lfCNZ3iMjynN4nsnYhmlSYAdXyMaDC\r\nRVUGDeP5euigwimWlYEB6yhvXS9Yi9qyoBVYbQjDGWGmSeH6wMZ6DkTi2bTn\r\n8XDIbp/ANxGDOy5m7tzU8TnwXLtHDvUV3yttSE1QxGfXPlbskjS2x6ByNYJ0\r\nvlD1TqvTrZk6q1ZAUXnxe2RsoGOuO6IJHhntuxL/goTBUVfgk6FR/EFPvrjw\r\nqWnlfkkGCzq0dtiSEmpWeD7ZnykLWIiBniU=\r\n=JCC9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.6_1651767444336_0.8626776143919248"},"_hasShrinkwrap":false},"1.9.7":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.7","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","gitHead":"d23028fb8ea05636042f8d894f0c473835885578","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.7","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-U0eosasyTW47oR95i0klmqtV6Q9lRhNuZtPn5a3MQfoWwfJcaSEF77pRupn30g1pZAlsPeqPgbYwC8Qm6HrVBQ==","shasum":"641282d1a1c709b273c41def99141572e1c14088","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.7.tgz","fileCount":217,"unpackedSize":668218,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtKCpgDynzr7u66qRSZ6cYi2i7DmCzurN7/B5D1kjJjwIgQA/n2UxM700INIqn5g2GMToLzNr5lBqIKzqoX/YSfvc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie5yFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3iBAAi2Rw989I9XlzWdcXSy4p5ZQXzlFpNDZwRESnPbjohEeb3eLp\r\n5dG5sjKFf8/eaB35uE0n3nNUDoeq84b1Dy2T7H6UCK7ukHMqAGm33qGmj+qP\r\nOcFNjS5OwnOJKZ3dU5EbvVnJS7cOBNmQjl2gvvz3hMPOpBecN+S7jjsmsDXg\r\nZJW7B99t+u23f8pyrfpuzaNr1BiRm0/UoW3M3tpWlC7P0nn4qsi5QBH7ZrsH\r\n3yf3tmpXc4MYqE+OthcF0LeH+HodDiRYTGcppew97AXglzZsTD8BGRw3qAzn\r\n+/PMnZpqZjSOO6sGbmbQN6vV0ZdoHCNMCwpRrPZHwTPKsbtSu5huDvc4oNT6\r\nSpFwrbSaVmQs3SHNAemKMjGMT81PSCK7uCcevob7/ZFbcoqzNG4o18tiPD60\r\nzIY5Qs9T2/vb1+YaD3MCbppGpHezJVeb1nztn2Mx/x5Yji5fUSPegKjMuzy5\r\nYBQOjNDgu2D9efMT8aNLzFD22HnhpuYnGIy1LGRawwGvMH2GCBE3rZyFzAaq\r\ne7ULa3SDuQQdduONKJBkSW0o/Ab4vmUosfZIzlxab3yaopidBp1KxUIlaELP\r\n1b+/5ITQSSOnJDOqq9ND0oonWSWl0TnRIoEU61i04xzTXKhyf9QZkbVbZ5xs\r\nqldqDKNo8FMPVoAg5HVxjYaYC5siV4XzgGg=\r\n=e2WN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.7_1652268165124_0.03138454707575966"},"_hasShrinkwrap":false},"1.9.8":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.8","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","gitHead":"e89fcee70e66926cadc905de5a2aa6162e8a500d","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.8","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-ZAuFFMTP3s49/8l1x6p257q1D+D0lAFoh9pIpYq6+HWg5Gkz+Jyu9XBHt9c2ENh0XfqC0/KJVY+6osPA06n2XA==","shasum":"423bd885d146fae235c41bbffe79a2fc79e95450","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.8.tgz","fileCount":217,"unpackedSize":668218,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBcZmzlRdGgd/pnWUGrd9UZzegqyTFISYETVV1/iNbTyAiEAiJuVoAYnsKaVxqGD3P5o3F6nIFDoHMXjDgRwzHpQeWA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie5z5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO6w//VAvKtC2BaYm6palfWhee8VB6ZZCvWQ47bn5dezNhPYHrM+gY\r\nsSqViuJOjJMzP4MgrqN4wsnq4ft1mqdz00TKrzaNT8DAxWnS3Q8NZIqE0TYt\r\nbkiRB1G3ajcTxi7eN0TgXryh8qEL0Altt1uYgyhAC0SvwAGv/prPKKxtonDJ\r\nn+/WbFil3Us/l63Rh0CGQPw/Jgms94HXh981s9RQt7u5t3jIeyl+fnutd744\r\nC23bIRIZaPVk39ixNosqevCpsVW4sQnIvyWUwr0nLb0nhIFCnpGAF3duNjwT\r\nf3E/jVZpLi8FgqAYOCrgbqeB0d5a4bGOBmVA+EoE7rdczSREj6U7i8YMLeQu\r\nminMRawziEPkZ4ciPKsIKNs3R0j9gFX+OAAgL+fkuvYNRSwDaXb6AgyQlW2T\r\nMEcUifhQTXxI9qHHP6F1cRO0mC2QSAOm+iBRASAdU15cKwW77xX2Mw8xIZyF\r\nr7zG1YLUKWm/A/yaWsB/pDkfUV7NWBc4yecBvuOVuQ1Zhb73v6IhyoIyMuT/\r\nGBCDpmUgb9qSakbw1j39vfa/48Hnj3TYc1740RTkArlctGA5XRwlvEF2/re2\r\n8M6CVrq1uuN5h+peDB9Y9DeToFr/tBBf3VDVoj9/MdGKyn3/SW8iyl3tuAu3\r\nHt2M75JRqKBS8Vq6bNuz/R9XOvTZOnZZvgg=\r\n=A+oF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.8_1652268281703_0.4460797830932903"},"_hasShrinkwrap":false},"1.9.6-beta.3":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.6-beta.3","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md","gitHead":"feff679ac041d668e55d7681ef993c354fd90978","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.6-beta.3","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-ToxQ98o8Iz1jc++RtAScAvMWvWFMG08EO2i4fAO4LRh41usCXMNgKV7/t/ncWk6IaaltT6tvQygIdaf0DfkieQ==","shasum":"2eefa2e9f03787639b840431b9f9e5c11b2cb40c","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.6-beta.3.tgz","fileCount":217,"unpackedSize":668240,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyjjdCyqYUH7el8lujw6Kd8RoNeSfXdLsuR7Q2SaDBgAIhAOQSm1TocmPxpiT1AcCipoXrTjvj8VyohrQ90DDykxd4"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie568ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCGg/+PiGKa3bzBGkz/oryxLjuZzSy73rcQxmIVZw+UPDDCwVLO9Oj\r\npnJoJOCtrbjVQ0u6vRam1j8JZbir1FeLj3VGHaTehgXXksn4dALLp3oExllP\r\nisyrn/a36nFRwV+gbfhTVY8CcuTWZkBWcexUYgPFcdQmHvhtDjD+XXZ5xYu1\r\nLoyd6IwmEe7cyazRpRnddvRpIUXtMBHA08/t2CWO0+yeC6hE7U0vgSQSIzQ/\r\n4krf3BLbs/i+hu38BwiXRvY/5q/Ecvv4kmq5BV8fe6LzSynch5X92eDknwtQ\r\nYSPu9zr8zedGvOoZUVh2Q1fWy/w4WihbHBAjorNrs/dG605fhir8qlskZd8C\r\ndr0Ak+73JUNkl/xsCAxfW3UApM7+OcpuGvLCidKkcMF8nkGpiogQQbXwA5/6\r\nLocopU/mZ+fDFNNRzhbxpA7Quiv/W9obI5ev8sd6jgIyZM+8JmuOGrJ5z2zI\r\n3c1/NA3Q7cJxkFuFkCA5rtVk9QPMp9ZZu+yNRpGX4tcSHmIsJfnM6VdiPEbk\r\nXYTA0CmDLxzz3OudSVHDgZxbj2exlqosXQmzENGhiBu0VpYq+JmjRlkI7f42\r\n6XZiCJokcrgzD8TaQBCNmKQnuV//I4WdyHVQHGGju75lW0b7HJtjkjR5pX+H\r\nYrwSlEYObC5cJanJXrMTlX5xWg1mKn11yME=\r\n=EZgm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.6-beta.3_1652268732075_0.575479582291673"},"_hasShrinkwrap":false},"1.9.9":{"name":"storefront-data-hooks-jorgemasta","version":"1.9.9","main":"index.js","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist address","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","start":"npm run clean && tsc -w","prepublish":"npm run build","generate":"graphql-codegen -r dotenv/config","generate:definitions":"node src/scripts/generate-definitions.js","release":"release-it"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","lodash.omit":"^4.5.0","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^2.6.2","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@release-it/conventional-changelog":"^5.0.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/lodash.omit":"^4.5.6","@types/node":"^14.14.3","@types/react":"^16.9.53","@typescript-eslint/eslint-plugin":"^4.29.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","graphql":"^15.4.0","next":"^10.0.8","prettier":"^2.3.2","prettier-eslint":"^13.0.0","release-it":"^15.0.0","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"types":"./index.d.ts","gitHead":"d2d9c0497f259428e204a26d23980a074707c4d7","description":" [](https://www.npmjs.org/package/@bigcommerce/s","bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"homepage":"https://github.com/jorgemasta/storefront-demo#readme","_id":"storefront-data-hooks-jorgemasta@1.9.9","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-z68jYTnRcnnRkVnBRQXYKf8dcuAGni/HVxYIgIH/G8Qo5YrYfTKH9R0+3cTxvw2F6nG9Y76/2dNtd75qx+AtBw==","shasum":"5fa2485bed2d8d2788bb433d65fa25a30de431bb","tarball":"https://registry.npmjs.org/storefront-data-hooks-jorgemasta/-/storefront-data-hooks-jorgemasta-1.9.9.tgz","fileCount":217,"unpackedSize":668233,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDV6LzIJyU/FKNPo3SKJ/YJJjPBPcXWloU8k1OPLZVTHAiEAi9p5h0hlRdWNn3drwYK5Edns1mg6J2Bte/aXBmPzNV0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie6EpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS1g/6AzQsATZCWgXuzjWGzFk1KU23lBHZhIZQAiyRPUbWJv+TMPRg\r\n1h/G6rPV4YbOggROkrRN/4Zicd33GQG+rK2h0eqwqTN3ui+Un/Yo+a9X1kUR\r\nFwcexlCuw1U1+wOEnkKqRqe5/CgL/Xz7snOtC1CMITLuGuOvwLpTPyrA44kM\r\nGk5aViSq01ZvlgA4JfWWNhyDwTG9K+S/+jK3ODi2dxI0OIyKxq0uvAtFLf8A\r\nf9yZotVQOoE+q0o6g+KppUAnMvA3bBgSXlSFqeWlf99b+oW9DeTtv6U9vgI+\r\nYl5WG24fdY/rHIjDPxXhT51GE2+4O4hWsbdB/szFIAAsX6ZOLE+4cWKIFzTS\r\nPh5Rohn0GFGuK6gU//jKfHMQvO4w+qepU+aEoW3R0bx8DUrB9Y8Jq0yvzwiP\r\nwgWOweiOFMDo7BP7xEfOHw61P2kGvaRXAcKu5re+ooZmqq6TKZDN3dSUHjXZ\r\nScuRGgx8FnoMeze11+fuiGBInhaz+f9Sl9A042S2dI1+CQSYr48QRFxyX6rs\r\nkDKdW2ZXq6Wy65OOX7ZyaZZPH4ZmZ7GiiX7606ID21DlsitG8Lg6Y1Sfs8+2\r\nN8qbvM3MquDf74wmH/0/LgrafCHVJQOt3TjLx6Hst4mDtubT7oNSL9vzb0LS\r\ntX7i++HCS1PcSvoif29GLzQfwJ5uFgcRKys=\r\n=LYpi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storefront-data-hooks-jorgemasta_1.9.9_1652269353005_0.045948419747529945"},"_hasShrinkwrap":false}},"time":{"created":"2021-02-24T14:51:27.603Z","1.0.2":"2021-02-24T14:51:27.762Z","modified":"2022-05-18T18:45:51.651Z","1.5.4":"2021-08-05T11:42:09.297Z","1.5.5":"2021-08-05T11:46:42.775Z","1.5.6-beta.0":"2021-08-05T11:47:16.406Z","1.5.6-beta.1":"2021-08-05T11:48:47.876Z","1.5.6":"2021-08-05T11:49:25.912Z","1.5.7":"2021-08-05T11:49:49.352Z","1.5.8":"2021-08-05T11:59:28.139Z","1.5.9-beta.0":"2021-08-05T12:05:03.812Z","1.7.1-beta.9":"2022-05-03T11:10:26.739Z","1.7.0":"2022-05-03T11:23:14.135Z","1.7.1-beta.0":"2022-05-03T11:34:09.977Z","1.7.1-beta.10":"2022-05-03T11:44:57.002Z","1.7.1-beta.11":"2022-05-03T11:55:04.221Z","1.7.1-beta.12":"2022-05-03T12:03:06.584Z","1.7.1-beta.13":"2022-05-03T12:12:41.594Z","1.7.1-beta.14":"2022-05-03T13:31:15.982Z","1.7.1-beta.15":"2022-05-03T13:36:47.844Z","1.7.1-beta.16":"2022-05-03T14:08:19.389Z","1.7.1-beta.17":"2022-05-03T14:39:59.173Z","1.7.1-beta.19":"2022-05-03T14:52:35.697Z","1.7.1":"2022-05-03T15:53:18.090Z","1.8.0-beta.0":"2022-05-05T11:50:21.890Z","1.8.0":"2022-05-05T11:59:42.218Z","1.9.0-beta.0":"2022-05-05T12:08:04.457Z","1.9.1-beta.0":"2022-05-05T12:15:01.384Z","1.9.1":"2022-05-05T12:21:22.008Z","1.9.2-beta.0":"2022-05-05T12:22:57.607Z","1.9.2-beta.1":"2022-05-05T14:24:16.956Z","1.9.2":"2022-05-05T14:29:55.907Z","1.9.3-beta.0":"2022-05-05T14:34:14.443Z","1.9.3-beta.1":"2022-05-05T14:39:22.201Z","1.9.3":"2022-05-05T14:51:05.523Z","1.9.4":"2022-05-05T14:56:59.439Z","1.9.3-beta.2":"2022-05-05T14:59:27.469Z","1.9.4-beta.0":"2022-05-05T15:30:35.791Z","1.9.5-beta.0":"2022-05-05T15:32:29.598Z","1.9.6-beta.0":"2022-05-05T15:34:40.629Z","1.9.6-beta.1":"2022-05-05T15:49:17.890Z","1.9.6-beta.2":"2022-05-05T16:12:08.509Z","1.9.6":"2022-05-05T16:17:24.490Z","1.9.7":"2022-05-11T11:22:45.330Z","1.9.8":"2022-05-11T11:24:41.849Z","1.9.6-beta.3":"2022-05-11T11:32:12.252Z","1.9.9":"2022-05-11T11:42:33.220Z"},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"description":" [](https://www.npmjs.org/package/@bigcommerce/s","homepage":"https://github.com/jorgemasta/storefront-demo#readme","repository":{"type":"git","url":"git+https://github.com/jorgemasta/storefront-demo.git"},"bugs":{"url":"https://github.com/jorgemasta/storefront-demo/issues"},"license":"MIT","readme":"\n[](https://www.npmjs.org/package/@bigcommerce/storefront-data-hooks)\n\nTable of Contents\n=================\n\n * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n * [Installation](#installation)\n * [General Usage](#general-usage)\n * [CommerceProvider](#commerceprovider)\n * [useLogin hook](#uselogin-hook)\n * [useLogout](#uselogout)\n * [useCustomer](#usecustomer)\n * [useSignup](#usesignup)\n * [usePrice](#useprice)\n * [Cart Hooks](#cart-hooks)\n * [useCart](#usecart)\n * [useAddItem](#useadditem)\n * [useUpdateItem](#useupdateitem)\n * [useRemoveItem](#useremoveitem)\n * [Wishlist Hooks](#wishlist-hooks)\n * [Product Hooks and API](#product-hooks-and-api)\n * [useSearch](#usesearch)\n * [getAllProducts](#getallproducts)\n * [getProduct](#getproduct)\n * [Customer Addresses Hooks](#customer-addresses-hooks)\n * [useAddresses](#useaddresses)\n * [useAddAddress](#useaddaddress)\n * [useUpdateAddress](#useupdateaddress)\n * [useRemoveAddress](#useremoveaddress)\n * [Checkout](#checkout)\n * [Troubleshooting](#troubleshooting)\n * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add @bigcommerce/storefront-data-hooks\n```\n\nAfter install, the first thing you do is: set your environment variables in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```jsx\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n return (\n \n {children}\n \n )\n}\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```jsx\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n const login = useLogin()\n\n const handleLogin = async () => {\n await login({\n email,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n#### Login SSO\n\nTo authenticate a user using the Customer Login API, it's necessary to point the `useLogin` hook to your own authentication endpoint.\n\n```jsx\nconst login = useLogin({\n options: {\n url: '/api/your-own-authentication'\n },\n})\n```\n\nThat authentication endpoint have to return a `Set-Cookie` header with `SHOP_TOKEN=your_customer_authentication_token`. [See an example.](https://gist.github.com/jorgemasta/c709b63501344970026f3a3e7646cc77)\n\n### useLogout\n\nHook to logout user.\n\n```jsx\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n const logout = useLogout()\n return (\n logout()}>\n Logout\n \n )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```jsx\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n const { data } = useCustomer()\n\n if (!data) {\n return null\n }\n\n return (\n
Hello, {data.firstName}
\n )\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```jsx\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n const signup = useSignup()\n\n const handleSignup = async () => {\n await signup({\n email,\n firstName,\n lastName,\n password,\n })\n }\n\n return (\n \n )\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```jsx\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n const { price, discount, basePrice } = usePrice(\n data && {\n amount: data.cart_amount,\n currencyCode: data.currency.code,\n }\n )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```jsx\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n items.reduce(countItem, count)\n\nconst CartNumber = () => {\n const { data } = useCart()\n const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n return itemsCount > 0 ? {itemsCount} : null\n}\n```\n\n### useAddItem\n\n```jsx\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n const addItem = useAddItem()\n\n const addToCart = async () => {\n await addItem({\n productId,\n variantId,\n })\n }\n\n return \n}\n...\n```\n\n### useUpdateItem\n\n```jsx\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n const [quantity, setQuantity] = useState(item.quantity)\n const updateItem = useUpdateItem(item)\n\n const updateQuantity = async (e) => {\n const val = e.target.value\n await updateItem({ quantity: val })\n }\n\n return (\n \n )\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```jsx\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n const removeItem = useRemoveItem()\n\n const handleRemove = async () => {\n await removeItem({ id: item.id })\n }\n\n return \n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```jsx\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({ productId, variant }) => {\n const addItem = useAddItem()\n const removeItem = useRemoveItem()\n const { data } = useWishlist()\n const { data: customer } = useCustomer()\n const itemInWishlist = data?.items?.find(\n (item) =>\n item.product_id === productId &&\n item.variant_id === variant?.node.entityId\n )\n\n const handleWishlistChange = async (e) => {\n e.preventDefault()\n\n if (!customer) {\n return\n }\n\n if (itemInWishlist) {\n await removeItem({ id: itemInWishlist.id! })\n } else {\n await addItem({\n productId,\n variantId: variant?.node.entityId!,\n })\n }\n }\n\n return (\n \n )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. It also allows pagination.\n\n```jsx\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n const { data } = useSearch({\n search: searchString || '',\n categoryId: category?.entityId,\n brandId: brand?.entityId,\n sort: sortStr || '',\n page: 1\n })\n\n const { products, pagination } = data\n\n return (\n \n {products.map(({ node }) => (\n \n ))}\n \n \n )\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n variables: { field: 'featuredProducts', first: 6 },\n config,\n preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```js\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n variables: { slug },\n config,\n preview,\n})\n```\n\n## Customer Addresses Hooks\n### useAddresses\n\nHook for returning the current users addresses\n\n```javascript\nimport useAddresses from '@bigcommerce/storefront-data-hooks/address/use-addresses'\n\nconst AddressPage = () => {\n const { data } = useAddresses()\n\n return (\n
\n
{JSON.stringify(data?.addresses, null, 2)}
\n
\n )\n}\n\n```\n\n### useAddAddress\n\nHook for adding customer address\n\n```javascript\nimport useAddAddress from '@bigcommerce/storefront-data-hooks/address/use-add-address'\n\nconst AddressPage = () => {\n const addAddress = useAddAddress()\n\n const handleAddAddress = async () => {\n await addAddress({\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useUpdateAddress\n\nHook for updating a customer address\n\n```javascript\nimport useUpdateAddress from '@bigcommerce/storefront-data-hooks/address/use-update-address'\n\nconst AddressPage = () => {\n const updateAddress = useUpdateAddress()\n\n const handleUpdateAddress = async () => {\n await updateAddress({\n id: 4,\n first_name: \"Rod\",\n last_name: \"Hull\",\n address1: \"Waffle Road\",\n city: \"Bristol\",\n state_or_province: \"Bristol\",\n postal_code: \"WAF FLE\",\n country_code: \"GB\",\n phone: \"01234567890\",\n address_type: \"residential\",\n id: 12\n })\n }\n\n return (\n \n )\n}\n\n```\n\n### useRemoveAddress\n\nHook for removing a customers address\n\n```javascript\nimport useRemoveAddress from '@bigcommerce/storefront-data-hooks/address/use-remove-address'\n\nconst AddressPage = () => {\n const removeAddress = useRemoveAddress()\n\n const handleUpdateAddress = async () => {\n await removeAddress({\n id: 4,\n })\n }\n\n return (\n \n )\n}\n\n```\n\n\n## Checkout\n\n> The checkout only works on **production** and with a custom domain\n\nThe recommended method is the [Embedded Checkout](https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial), follow the tutorial to create a channel and a site. Notes:\n\n- The channel should be of type `storefront`\n- The site url must be your production url (e.g: https://mystorefront.com)\n- This package takes care of the cart and redirect links creation\n- Your bigcommerce storefront must be a subdomain of your headless storefront (eg: https://bc.mystorefront.com)\n\n\n\n## Troubleshooting\n\n When I try to create a customer with useSignup, I receive an error but the user is created\n\n The `useSignup` hooks tries to login the user after creating it. Probably you have an error with the login. Checkout that your have your store **Open** since if the store is *Down for Maintenance* the users can't login.\n \n\n Thanks @Strapazzon 🚀\n\n\n## Contributing\n\n### Configuration \n\nYou will need to crate a `.env` file from the `.env.example` with the following keys.\n- BIGCOMMERCE_STOREFRONT_API_TOKEN \n- BIGCOMMERCE_STOREFRONT_API_URL\n\nThe token and url will be crated in your BC Store admin section: Advanced Settings -> API Accounts.\nOnce you have added the `.env` configuration, run:\n\n- `yarn generate` to generate your new schema.\n- `yarn build` to build a new set of compiled files.\n\nLink the package locally to your app with `yarn link` or by using the [YALC](https://www.npmjs.com/package/yalc) tool.\n\n### Pull Requests\n\nPull requests, issues and comments are welcome! See [Contributing](CONTRIBUTING.md) for more details.\n\nMany thanks to all [contributors](https://github.com/bigcommerce/storefront-data-hooks/contributors)!\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md"}