{"version":3,"file":"component---src-pages-products-js-4e23175aca552c0deda4.js","mappings":"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","sources":["webpack://BownbeeCanada/./src/components/productsLayout.js","webpack://BownbeeCanada/./src/pages/products.js"],"sourcesContent":["import React from 'react'\nimport { StaticImage } from 'gatsby-plugin-image'\nimport {Helmet} from 'react-helmet'\n\nconst productsLayout = ( {children} ) => {\n    return(\n        <>\n            <Helmet>\n                <meta charSet=\"utf-8\" />\n                <title>Products | Bownbee Canada</title>\n                <meta name=\"description\" content=\"Ethinic wear, Indian ethinic wear, Indian Kids clothing, Indian traditional cloths, Festival clothing, Girls dresses, Indian girls dresses, Indian boys cloths, Kurta pijama, Salvar for girls, Punbabi girls dresses, Navrati dresses for kids, Indian Traditional wear, Indian accessories Girls, Bownbee, Bownbeecanada, Bownbeeca\" />\n                <meta name=\"keywords\" content=\"BownBee Canada offers wide range of Indian traditional wear and accessories collection for Boys and Girls.\" />\n            \n                <link rel=\"canonical\" href=\"https://www.bownbee.ca/products\" />\n            </Helmet>\n            <div className=\"breadcrumb h-8 bg-gray-100 grid justify-items-center content-center\">Products\n            </div>\n            <div className=\"promo hidden sm:m-8 grid justify-items-center content-center\">\n            <StaticImage \n                src=\"../images/promo.png\" \n                alt=\"promotion\"\n                placeholder=\"blurred\"\n            />\n            </div>\n            {children}\n        </>\n    )\n\n}\n\nexport default productsLayout","import React, {useState} from \"react\"\nimport { graphql, Link } from \"gatsby\"\nimport ProductsList from \"../components/productsLayout\"\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\"\n\n\nconst ProductPage = ({ data }) =>  {\n    const productsFilter = data.allMarkdownRemark.edges\n    const csvItems = data.allProductsCsv.edges\n    const [colorFilter,setColorFilter] = useState(null)\n    const [ageFilter, setAgeFilter] = useState(null)\n\n    const resetFilters = () => {\n        setColorFilter(null);\n        setAgeFilter(null);\n    }\n\n    if (colorFilter == null && ageFilter == null) {\n        return ( \n            <ProductsList>\n            <div className=\"products-list grid grid-cols-1 justify-items-center sm:grid-cols-5 gap-0 sm:gap-4 p-2 sm:p-8\">\n                <aside className=\"grid-cols-2 sm:grid-cols-1 col-start-1\">\n                FILTER BY:\n                <div className=\"colorFilter w-40\">\n                    <h1 className=\"underline mb-2 text-lg mt-5\">COLOR</h1>\n                    {productsFilter.map(({node})=> {\n                        const productColors = node.frontmatter.productColors\n                        \n                        return(\n                            <>\n                                {productColors.map(color=> {\n                                    return(\n                                        <p className=\"cursor-pointer\" onClick={()=>setColorFilter(color)}><span className={`bg-${color}-400 h-4 w-4 inline-block mt-0 ml-0 mb-0 mr-2`}></span>{color}</p>)\n                                })}\n                            </>\n                        )\n                    })}\n                    </div>\n                    <div className=\"ageFilter\">\n                    <h1 className=\"mt-5 underline text-lg mb-2\">AGE</h1>\n                    {productsFilter.map(({node})=> {\n                        const age = node.frontmatter.age\n                        \n                        return(\n                            <>\n                                {age.map(age=> {\n                                    return(\n                                        <p className=\"cursor-pointer\" onClick={()=>setAgeFilter(age)}>{age}</p>)\n                                })}\n                            </>\n                        )\n                    })}\n                    </div>\n            </aside>\n            <main className=\"col-start-1 sm:col-start-2 col-end-6\">\n            <h1 className=\"text-4xl font-bold mb-8\">Products</h1>\n            <div className=\"product-list grid grid-cols-1 justify-items-center sm:justify-items-start sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8\">\n            {csvItems.map( ({node} ) => {\n                        const productImageFluidCsv = getImage(node.productImage)\n                        let discountedRate\n                        let finalPrice\n                        let discount = node.discount\n                        const price = node.price\n                        if(discount){\n                            discountedRate = price - ((price * discount)/100)\n                            finalPrice = discountedRate.toFixed(2)\n                        }\n                            return(\n        \n                                <Link\n                                        key={node.id}\n                                        //TODO -- Change the URL as per your Environment\n                                        to={`https://bownbee.ca/${node.productCategory}/${node.fields.slug}`}\n                                        \n                                        >\n                                    <div className=\"product\">\n                                        <GatsbyImage image={productImageFluidCsv} alt=\"pimage\" />\n                                        <h1>{node.name}</h1>\n                                        <p className={`price text-black pb-2 text-lg`}>$ {node.discountedPrice} <span className=\" text-red-500 line-through\">$ {node.price}</span><span className=\"text-lg bg-green-600 text-white p-1 ml-2 hidden\">{discount}% OFF</span></p>\n                                        <p className={`price pb-2 text-lg ${discount ? 'hidden' : 'hidden'}`}>$ {node.price} </p>\n                                        \n                                    </div>  \n                                </Link>\n                            )\n                        \n                    })}\n                </div>\n            </main>\n            </div>\n            </ProductsList>\n            )\n    }else{\n\n        return ( \n            <ProductsList>\n            <div className=\"products-list grid grid-cols-1 justify-items-center sm:grid-cols-5 gap-0 sm:gap-4 p-2 sm:p-8\">\n                <aside className=\"grid-cols-2 sm:grid-cols-1 col-start-1\">\n                FILTER BY:\n                <div className=\"colorFilter w-40\">\n                    <h1 className=\"underline mb-2 text-lg mt-5\">COLOR</h1>\n                    {productsFilter.map(({node})=> {\n                        const productColors = node.frontmatter.productColors\n                        \n                        return(\n                            <>\n                                {productColors.map(color=> {\n                                    return(\n                                        <p className=\"cursor-pointer\" onClick={()=>setColorFilter(color)}><span className={`bg-${color}-400 h-4 w-4 inline-block mt-0 ml-0 mb-0 mr-2`}></span>{color}</p>)\n                                })}\n                            </>\n                        )\n                    })}\n                    </div>\n                    <div className=\"ageFilter\">\n                    <h1 className=\"mt-5 underline text-lg mb-2\">AGE</h1>\n                    {productsFilter.map(({node})=> {\n                        const age = node.frontmatter.age\n                        \n                        return(\n                            <>\n                                {age.map(age=> {\n                                    return(\n                                        <p className=\"cursor-pointer\" onClick={()=>setAgeFilter(age)}>{age}</p>)\n                                })}\n                            </>\n                        )\n                    })}\n                    </div>\n            </aside>\n           \n            <main className=\"col-start-1 sm:col-start-2 col-end-6\">\n                <h1 className=\"text-4xl font-bold mb-8\">Products\n                    <span className=\"ml-10 text-sm\">Filter: \n                        \n                        <span className=\"bg-gray-100 p-1 pl-3 pr-3 rounded-xl\" onClick={()=> (setColorFilter(null))}>{colorFilter}</span> \n                        <span className=\"bg-gray-100 p-1 pl-3 pr-3 rounded-xl\" onClick={()=> (setAgeFilter(null))}>{ageFilter}</span> <span className=\"bg-gray-100 p-1 pl-3 pr-3 rounded-xl cursor-pointer\" onClick= {() => resetFilters()}>RESET</span>\n                    </span>\n                </h1>\n                <div className=\"product-list grid grid-cols-1 justify-items-center sm:grid-cols-4 gap-4 mb-8\">\n                    {csvItems.map( ({node} ) => {\n                        const productImageFluidCsv = getImage(node.productImage)\n                        let discountedRate\n                        let finalPrice\n                        let discount = node.discount\n                        const price = node.price\n                        if(discount){\n                            discountedRate = price - ((price * discount)/100)\n                            finalPrice = discountedRate.toFixed(2)\n                        }\n                        if (node.colors == colorFilter) {\n                            return(\n        \n                                <Link\n                                        key={node.id}\n                                        to={node.fields.slug}\n                                        \n                                        >\n                                    <div className=\"product\">\n                                        <GatsbyImage image={productImageFluidCsv} alt=\"pimage\" />\n                                        <h1>{node.name}</h1>\n                                        <p>{node.price}</p>\n                                        <p className={`price text-black pb-2 text-lg`}>$ {node.discountedPrice} <span className=\" text-red-500 line-through\">$ {node.price}</span><span className=\"text-lg bg-green-600 text-white p-1 ml-2 hidden\">{discount}% OFF</span></p>\n                                        <p className={`price pb-2 text-lg ${discount ? 'hidden' : 'hidden'}`}>$ {node.price} </p>\n                                        \n                                    </div>  \n                                </Link>\n                            )\n                        }\n                        if(ageFilter){\n                        \n                            const sizes = node.sizes\n                            const filter = ageFilter.replace(' to ','-')\n                            if(sizes.includes(filter)){\n                                return(\n            \n                                    <Link\n                                            key={node.id}\n                                            to={node.fields.slug}\n                                            \n                                            >\n                                        <div className=\"product\">\n                                            <GatsbyImage image={productImageFluidCsv} alt=\"pimage\" />\n                                            <h1>{node.name}</h1>\n                                            <p className={`price text-black pb-2 text-lg`}>$ {node.discountedPrice} <span className=\" text-red-500 line-through\">$ {node.price}</span><span className=\"text-lg bg-green-600 text-white p-1 ml-2 hidden\">{discount}% OFF</span></p>\n                                            <p className={`price pb-2 text-lg ${discount ? 'hidden' : 'hidden'}`}>$ {node.price} </p>\n                                            \n                                        </div>  \n                                    </Link>\n                                )\n                            }\n                            }\n                        \n                    })}\n                    \n                    \n                </div>\n            </main>\n            </div>\n            </ProductsList>\n            )\n    }\n\n  \n}\n\nexport default ProductPage\n\nexport const ProductPageQuery = graphql`\n    query MyQuery {\n        allMarkdownRemark {\n            edges {\n                node {\n                    frontmatter {\n                        productColors\n                        age\n                        }\n                    }\n                }\n            }   \n        allProductsCsv(filter: {type: {eq: \"variable\"}}) {\n            edges {\n              node {\n                id\n                name\n                productCategory\n                sizes\n                sku\n                stock\n                instock\n                description\n                colors\n                templateKey\n                price\n                discountedPrice\n                discount\n                fields{\n                    slug\n                }\n                productImage {\n                  id\n                  childImageSharp {\n                    gatsbyImageData(placeholder: BLURRED)\n                  }\n                }\n              }\n            }\n        }\n    }\n`"],"names":["children","charSet","name","content","rel","href","className","S","src","alt","placeholder","data","productsFilter","allMarkdownRemark","edges","csvItems","allProductsCsv","useState","colorFilter","setColorFilter","ageFilter","setAgeFilter","map","productColors","node","frontmatter","color","onClick","age","productImageFluidCsv","getImage","productImage","discount","price","toFixed","Link","key","id","to","productCategory","fields","slug","G","image","discountedPrice","colors","sizes","filter","replace","includes"],"sourceRoot":""}