tabbit

Wed Jan 19 2022
Copied to clipboard! Copy reply
// try `1


import React from "react";
import styled from "styled-components";
import { graphql } from "gatsby";
import { PageTemplateWrapper } from "@resourcehub/resourcehub-components";
import configGenerator from "@resourcehub/resourcehub-configuration";
import beautify from "json-beautify";

const ProductBoxesContainer = styled.div`
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
`;

const PriceBox = styled.div`
    border: 1px solid gray;
    margin: 10px;
    padding: 10px;
    height: 400px;
    // width: 300px;
`;

const Page = ({ data }) => {
    const { pagesGQL, productsGQL, site } = data;

    console.log(pagesGQL);
    const page = {};
    const products = [];

    // Create Products array with Objects like { sku: ..., msrp: ...}
    for (const product of productsGQL.edges) {
        for (const language of product.node.data.Languages) {
            const productObject = {
                sku: [product.node.data.Sku],
                msrp: product.node.data.Msrp,
                id: language.data.Id,
                language: language.data.Language,
                lvl: product.node.data.ShortName,
                // TODO - use name_es, name_pt, etc - based on locale
                name: product.node.data.Name,
                metadata: product.node.data.Metadata,
                code: null,
                price: null,
                cart: null,
                languages: product.node.data.Languages
            };
            products.push(productObject);
        }
    }



    // Price and promo loop. In this loop we also reach out to find the related product. The link is that
    // PROMOS column names match the products table ShortName column . We can then use this to find the
    // product out of the products array by looking for a product where product shortname === promos column name
    // the right product in the products array with it where column name === product.lvl
    const filteredProducts = [];
    for (const node of pagesGQL.edges) {
        const pageData = node.node.data;
        const promoNodes = pageData.PromoNode;
        page.id = pageData.ID;
        page.expirationdate = pageData.Expiration_Date;
        page.expirationdatespanish = pageData.Spanish_Expiration_Date;
        page.productfilter = pageData.Product_Filter;
        page.fullprice = pageData.Full_Price;
        //page.xpay = pageData.XPay;
        page.ribbontext = pageData.Ribbon_Text;
        page.mastheadText = pageData.Masthead_Text;
        page.templates = pageData.Templates;
        // We want to filter products that only shown in Produt_Filter, so file isn't 10k lines long
        const filtered = products.filter((obj) => pageData.Product_Filter.includes(obj.lvl));

        // TODO this may be a bug. check for pages that have no value in the PromoNode column
        //if (!promoNodes) break;
        //console.log("filtered -------");
        //console.log(filtered);
        for (const product of products) {
            // Find this product in the result from the Products query, where info for this product is.
            // GraphQL formatted the keys here with _ instead of -, and if key is a number, prefixed with _
            // So if key is like "_6_hs", we make it "6-hs"

            const productLink = filtered.filter((p) => {
                return product.lvl === p.lvl;
            });


           if (productLink.length) {
            for (const product of productLink) {

                // Find this product inside promoNodes. In promoNodes object, the product names
                // have - replaced with _, and if it starts with a number, it's prefixed with _.
                // ie, "6-mo" would be "_6_mo". So we must format the name here to find it in promoNodes
                let promoNodeProductName = product.lvl.replace("-", "_");
                if (Number.isInteger(parseInt(product.lvl[0]))) {
                    promoNodeProductName = promoNodeProductName.replace(/(.)/, "_$1");
                }
                //console.log(promoNodes[0].data[promoNodeProductName]);

                product.price = promoNodes[0].data[promoNodeProductName][0].data.Price;
                product.code = promoNodes[0].data[promoNodeProductName][0].data.Promocode;
                product.cart = generateCartLink(product.metadata, product.sku, product.id, product.code);
                // // We don't need this anymore. Delete it so it doesn't write to file
                delete product.languages;
                filteredProducts.push(product);
            }
        }
        }
    }

    page.products = filteredProducts;
    console.log(page);

    function generateCartLink(metadata, sku, lang, pc = "") {
        const ENV = "prod";
        let basecart = {
            en: {
                url: `https://secure.${
                    ENV === "staging" ? "stg." : ""
                }rosettastone.com/us_en_store_view/checkout/cart/add/`
            },
            es: {
                url: `https://secure.${
                    ENV === "staging" ? "stg." : ""
                }rosettastone.com/hispanic_store_view/checkout/cart/add/`
            },
            pt: {
                url: `https://secure.${
                    ENV === "staging" ? "stg." : ""
                }rosettastone.com/us_en_store_view/checkout/cart/add/`
            },
            hs: {
                url: `https://secure.${
                    ENV === "staging" ? "stg." : ""
                }rosettastone.com/us_en_store_view/checkout/cart/add/`
            },
            ko: {
                url: `https://secure.${
                    ENV === "staging" ? "stg." : ""
                }rosettastone.com/us_en_store_view/checkout/cart/add/`
            }
        };

        basecart = basecart["en"].url;

        metadata = JSON.parse(metadata);

        // Format ["123, 456"] into [123, 456]
        sku = sku[0].split(",").map((s) => parseInt(s.trim()));

        //lang = lang.toLowerCase();
        let isUnlimited = false;
        if (metadata.hasOwnProperty("languages")) {
            const value = metadata.languages.trim().toLowerCase();
            if (value === "unlimited" || value === "single") {
                isUnlimited = value === "unlimited";
            } else {
                throw new Error(`---- unknown value for product metadata 'languages': ${metadata.languages}`);
            }
        }

        let isPlus = false;
        if (metadata.hasOwnProperty("plus")) {
            if (typeof metadata.plus === "boolean") {
                isPlus = metadata.plus;
                if (isPlus && sku.length !== 2) {
                    throw new Error(sku);
                }
            } else {
                throw new Error(`---- unknown value for product metadata 'plus': ${metadata.plus}`);
            }
        }

        if (!isPlus && sku.length !== 1) {
            throw new Error(`---- non 'plus' products must have 1 sku`);
        }

        pc = pc ? "/?pc=" + pc : "";

        if (isUnlimited) {
            lang = "all";
        }

        let cartLink;

        if (isPlus) {
            cartLink = `${basecart}sku/${sku[0]}/category_id/${lang}/related_sku/${sku[1]}${pc}`;
        } else if (isUnlimited && metadata.type === "coach") {
            // Unlimited Coaching sku has no category_id in the cart link
            cartLink = `${basecart}sku/${sku[0]}/`;
        } else {
            cartLink = `${basecart}sku/${sku[0]}/category_id/${lang}${pc}`;
        }
        return cartLink;
    }

    const config = configGenerator({
        market: site.siteMetadata.market,
        site: site.siteMetadata.site,
        locale: site.siteMetadata.lang,
        page: "test-airtable"
    });
    return (
        <PageTemplateWrapper config={config}>
            <pre>
                {pagesGQL.edges.map((p, index) => (
                    <div style={{ border: "1px solid black", margin: "0 0 15px 0" }} key={`price-${index}`}>
                        {beautify(p.node.data, null, 2, 100)}
                    </div>
                ))}
            </pre>
        </PageTemplateWrapper>
    );
};
export default Page;

export const pageQuery = graphql`
    query {
        site {
            ...SiteFragment
        }
        pagesGQL: allAirtable(filter: { table: { eq: "PAGES" }, data: { ID: { eq: "curso" } } }) {
            edges {
                node {
                    id
                    data {
                        Expiration_Date
                        Spanish_Expiration_Date
                        Full_Price
                        Templates
                        Gift
                        ID
                        Product_Filter
                        Full_Price

                        Ribbon_Text
                        Masthead_Text
                        PromoNode {
                            data {
                                lifetime {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                lifetime_u {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                lifetimeplus_u {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                lifetimeplus_u_lite {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _36 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _30 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _27 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _24 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _24_u {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _18 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _15 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _13 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _12 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _12_u {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _8 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _6 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _3 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _1 {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                familypack_hs {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                lifetime_hs_s {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                lifetime_hs {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _24_hs {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _12_hs {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _6_hs {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                                _3_hs {
                                    data {
                                        Price
                                        Promocode
                                    }
                                }
                            }
                        }
                        Masthead_Image {
                            filename
                            id
                            url
                        }
                        Masthead_Text
                        Mobile_Masthead_Image {
                            filename
                            id
                            url
                        }
                    }
                    table
                    rowIndex
                    recordId
                }
            }
        }
        productsGQL: allAirtable(filter: { table: { eq: "PRODUCTS" } }) {
            edges {
                node {
                    id
                    data {
                        Sku
                        Msrp
                        ShortName
                        Name
                        Name_es
                        Name_pt
                        Name_ko
                        Type
                        Metadata
                        Languages {
                            data {
                                Id
                                Language
                            }
                        }
                    }
                }
            }
        }
    }
`;