Create or sign into your Good George Account to get started.
\n \n\n \n How does it work?\n
\n \n )\n}\n\nexport default SignIn;\n","import React from 'react';\nimport Media from \"./Media\";\nimport styles from './Welcomer.module.scss';\n\nconst Welcomer = ({ logo, customer }) => {\n\n if(!customer) {\n return <>\n }\n\n return (\n \n \n
\n \n \n What can I get?\n \n \n
\n \n \n Terms & conditions\n \n \n
\n \n \n
\n )\n}\n\nexport default Welcomer;\n","import React from 'react';\nimport { motion } from \"framer-motion\";\nimport { useHistory } from \"react-router-dom\";\nimport { onDragEnd } from \"../resources/utils\";\n\nimport Media from \"../components/Media\";\nimport Welcomer from \"../components/Welcomer\";\n\nimport styles from './How.module.scss';\n\nconst variants = {\n enter: {\n x: -1000,\n opacity: 0\n },\n center: {\n zIndex: 1,\n x: 0,\n opacity: 1\n },\n exit: {\n zIndex: 0,\n x: 1000,\n opacity: 0\n }\n};\n\nconst How = ({ config, customer }) => {\n let history = useHistory();\n return (\n \n { customer.name && Hi, {customer.name}!}\n You have { customer.points.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\") } points.\n
\n { history.goBack(); }} className={styles.breadcrumb}>\n \n How does it work?\n
\n \n {\n config.infoCards.map(x => {\n return (\n \n \n )\n })\n }\n
\n \n )\n}\n\nexport default How;\n","import React from 'react';\nimport { motion } from \"framer-motion\";\nimport { useHistory } from \"react-router-dom\";\nimport { onDragEnd } from \"../resources/utils\";\n\nimport Welcomer from \"../components/Welcomer\";\n\nimport styles from './Terms.module.scss';\n\nconst variants = {\n enter: {\n x: -1000,\n opacity: 0\n },\n center: {\n zIndex: 1,\n x: 0,\n opacity: 1\n },\n exit: {\n zIndex: 0,\n x: 1000,\n opacity: 0\n }\n};\n\nconst Terms = ({ config, customer }) => {\n let history = useHistory();\n return (\n \n \n {x.title}\n
\n { decodeURIComponent(x.description) }\n { history.goBack(); }} className={styles.breadcrumb}>\n \n Terms & conditions\n
\n \n {\n config.termsCards.map(x => {\n return (\n \n \n )\n })\n }\n
\n \n )\n}\n\nexport default Terms;\n","import React from 'react';\nimport {\n Link,\n} from \"react-router-dom\";\n\nimport styles from './ProductBannerCard.module.scss';\n\nimport Media from \"./Media\";\n\nconst ProductBannerCard = ({ image, title, points, id, buttonText, buttonColour, buttonTextColour, textColour }) => {\n return (\n \n { x.title }
\n{ decodeURIComponent(x.description) }
\n\n
\n \n )\n}\n\nexport default ProductBannerCard;\n","import React from 'react';\nimport {\n Link,\n} from \"react-router-dom\";\n\nimport styles from './ProductCard.module.scss';\n\nimport Media from \"./Media\";\n\nconst ProductCard = ({ image, title, points, id }) => {\n return (\n \n { title }
\n { +points === 0 ? Free : {points.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")} points }\n \n\n
\n { title }
\n { +points === 0 ? Free : {points.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")} points }\n\n \n
\n \n )\n}\n\nexport default ProductCard;\n","import React from 'react';\nimport { hex2rgba } from \"../resources/utils\";\n\nimport styles from './TierCard.module.scss';\n\nimport Media from \"./Media\";\n\nconst TierCard = ({ image, title, id, perks, accent }) => {\n return (\n \n \n
\n )\n}\n\nexport default TierCard;\n","import React from 'react';\nimport { motion } from \"framer-motion\";\nimport { useHistory } from \"react-router-dom\";\nimport { onDragEnd } from \"../resources/utils\";\nimport {\n Link,\n} from \"react-router-dom\";\n\nimport ProductBannerCard from \"../components/ProductBannerCard\";\nimport ProductCard from \"../components/ProductCard\";\nimport TierCard from \"../components/TierCard\";\nimport Welcomer from \"../components/Welcomer\";\n\nimport styles from './What.module.scss';\n\nconst variants = {\n enter: {\n x: -1000,\n opacity: 0\n },\n center: {\n zIndex: 1,\n x: 0,\n opacity: 1\n },\n exit: {\n zIndex: 0,\n x: 1000,\n opacity: 0\n }\n};\n\nconst What = ({ config, rewards, tiers, customer }) => {\n let history = useHistory();\n return (\n \n { title &&
\n { title }
}\n {\n perks.map((x, i) => {\n return (\n\n
\n )\n })\n }\n \n \n
\n {x}\n { history.goBack(); }} className={styles.breadcrumb}>\n \n What can I get?\n
\n Earn George Rewards points to upgrade your tier and spend on rewards.\n \n Featured rewards\n {\n config.rewardsFeatured.map(x => {\n let rewardCard = config.rewards.find(z => z.id === x.id);\n let rewardObj = rewards.find(z => z.id === x.id);\n if(rewardCard && rewardObj) {\n if(x.banner) {\n return
\n \n George Rewards tiers\n {\n config.tiers.map(x => {\n return
\n \n )\n}\n\nexport default What;\n","export default __webpack_public_path__ + \"static/media/logo.4841e863.svg\";","import React from 'react';\nimport { motion } from \"framer-motion\"\nimport logo from '../resources/logo.svg';\n\nimport styles from './Loading.module.scss';\n\nconst Loading = () => {\n return (\n \n \n 
\n \n
\n )\n}\n\nexport default Loading;\n","import React, { useState } from 'react';\nimport { motion } from \"framer-motion\";\nimport {\n Link,\n} from \"react-router-dom\";\nimport { finishAccount } from \"../resources/utils\";\n\nimport Media from \"../components/Media\";\nimport Loading from \"../components/Loading\";\n\nimport styles from './Enable.module.scss';\n\nconst variants = {\n enter: {\n x: 1000,\n opacity: 0\n },\n center: {\n zIndex: 1,\n x: 0,\n opacity: 1\n },\n exit: {\n zIndex: 0,\n x: -1000,\n opacity: 0\n }\n};\n\nconst inputVariants = {\n normal: {\n x: 0,\n boxShadow: \"0px 4px 20px rgba(29, 29, 30, 0.1)\"\n },\n hasError: {\n x: [-10, 0, 10, 0, -5, 0, 5, 0],\n boxShadow: \"0px 2px 10px rgba(252, 78, 106, 0.6)\"\n }\n}\n\nconst Enable = ({ config, id, callback = () => {} }) => {\n const [dob, setDob] = useState('');\n const [error, setError] = useState(false);\n const [loading, setLoading] = useState(false);\n\n if(loading) {\n return (\n \n
\n Add your birthday to enable your account.
\n\n \n How does it work?\n
\n \n )\n}\n\nexport default Enable;\n","import React from 'react';\nimport { motion } from \"framer-motion\";\nimport { Link, useHistory } from \"react-router-dom\";\nimport { onDragEnd, getGoal, checkConditions } from \"../resources/utils\";\nimport copy from 'copy-to-clipboard';\n\nimport styles from './Account.module.scss';\n\nimport ProductBannerCard from \"../components/ProductBannerCard\";\nimport ProductCard from \"../components/ProductCard\";\nimport TierCard from \"../components/TierCard\";\nimport Welcomer from \"../components/Welcomer\";\n\nconst variants = {\n enter: {\n x: 1000,\n opacity: 0\n },\n center: {\n zIndex: 1,\n x: 0,\n opacity: 1\n },\n exit: {\n zIndex: 0,\n x: -1000,\n opacity: 0\n }\n};\n\nconst Account = ({ config, customer, rewards, tiers }) => {\n let history = useHistory();\n\n // console.log(config);\n\n let tierRewards = customer ? [ ...customer.tiers ].reduce((result, tierId) => {\n let newResult = [ ...result ];\n let tier = config.tiers.find(x => x.id === tierId);\n if(tier && tier.rewards) {\n for (var i = 0; i < tier.rewards.length; i++) {\n let loopId = tier.rewards[i];\n let reward = rewards.find(x => x.id === loopId);\n let rewardIndex = newResult.findIndex(x => x.id === loopId);\n if(reward && rewardIndex === -1 && reward.discount.__typename !== 'SystemDiscount') {\n if(checkConditions(reward.conditions, customer)) {\n newResult.push(reward);\n }\n }\n }\n }\n return newResult;\n }, []) : [];\n\n let tiersReversed = [ ...config.tiers ].reverse();\n let highestTier = tiersReversed.find(x => ( tiers.some(z => z.id === x.id) && customer.tiers.includes(x.id))); // Find our highest tier the customer has, checking that it's a valid tier as well.\n let nextTierIndex = tiersReversed.findIndex((o, i) => ((i+1 !== tiersReversed.length) && tiersReversed[i+1] && tiersReversed[i+1].id === highestTier.id) );\n\n let highestTierData = tiers.find(x => x.id === highestTier.id);\n let nextTierData = (nextTierIndex !== -1) ? tiers.find(x => x.id === tiersReversed[nextTierIndex].id) : null;\n\n\n let goalData = nextTierData ? getGoal(highestTierData.conditions, nextTierData.conditions) : null;\n let goalPercentComplete = null;\n let goalField = null;\n let goalProgress = null;\n if(goalData && goalData.field === 'lifetimePoints') {\n goalPercentComplete = (+customer.lifetimePoints - goalData.oldTarget) / (goalData.newTarget - goalData.oldTarget) * 100;\n goalField = 'Points';\n goalProgress = +customer.lifetimePoints;\n }\n if(goalData && goalData.field === 'points') {\n goalPercentComplete = (+customer.points - goalData.oldTarget) / (goalData.newTarget - goalData.oldTarget) * 100;\n goalField = 'Points';\n goalProgress = +customer.points;\n }\n if(goalData && goalData.field === 'lifetimeSpend') {\n goalPercentComplete = (+customer.lifetimeSpend - goalData.oldTarget) / (goalData.newTarget - goalData.oldTarget) * 100;\n goalField = 'Spend';\n goalProgress = +customer.lifetimeSpend;\n }\n if(goalData && goalData.field === 'lifetimeOrders') {\n goalPercentComplete = (+customer.lifetimeOrders - goalData.oldTarget) / (goalData.newTarget - goalData.oldTarget) * 100;\n goalField = 'Orders';\n goalProgress = +customer.lifetimeOrders;\n }\n return (\n \n \n
\n \n \n What can I get?\n \n \n
\n \n \n Terms & conditions\n \n \n
\n \n \n {\n highestTier &&\n
\n {\n (goalPercentComplete !== null && goalField !== null) &&\n \n
\n }\n \n
\n To upgrade to { tiersReversed[nextTierIndex].name }
\n \n Tier Benefits\n \n \n \n
\n \n
\n \n
\n \n { goalProgress }\n {`${goalField} earned`}\n
\n \n { goalData.newTarget }\n {`${goalField} needed`}\n
\n \n Featured rewards\n {\n config.accountFeatured.map(x => {\n let rewardCard = config.rewards.find(z => z.id === x.id);\n let rewardObj = rewards.find(z => z.id === x.id);\n if(rewardCard && rewardObj) {\n if(x.banner) {\n return
\n\n {/*\n Tier Rewards section\n */}\n\n {\n (tierRewards && tierRewards.length !== 0) &&\n \n Tier rewards\n {\n tierRewards.map(x => {\n let rewardCard = config.rewards.find(z => z.id === x.id);\n let rewardObj = x;\n if(rewardCard && rewardObj) {\n if(x.banner) {\n return
\n }\n\n {/*\n Referral section\n */}\n {\n (customer && customer.referral) &&\n \n Refer your friends\n {\n copy(customer.referral);\n }}>\n { customer.referral }\n \n \n {\n (navigator && navigator.share) &&\n \n }\n
\n }\n\n Give a friend $5 off their first purchase and earn 50 points with this code:
\n\n \n How does it work?\n
\n \n )\n}\n\nexport default Account;\n","import React from 'react';\nimport { motion } from \"framer-motion\";\nimport { useHistory } from \"react-router-dom\";\nimport { onDragEnd, getGoal, checkConditions } from \"../resources/utils\";\n\nimport styles from './Tiers.module.scss';\n\nimport TierCard from \"../components/TierCard\";\nimport ProductBannerCard from \"../components/ProductBannerCard\";\nimport ProductCard from \"../components/ProductCard\";\nimport Welcomer from \"../components/Welcomer\";\n\nconst variants = {\n enter: {\n x: -1000,\n opacity: 0\n },\n center: {\n zIndex: 1,\n x: 0,\n opacity: 1\n },\n exit: {\n zIndex: 0,\n x: 1000,\n opacity: 0\n }\n};\n\nconst Tiers = ({ config, customer, rewards, tiers }) => {\n let history = useHistory();\n\n let tierRewards = customer ? [ ...customer.tiers ].reduce((result, tierId) => {\n let newResult = [ ...result ];\n let tier = config.tiers.find(x => x.id === tierId);\n if(tier && tier.rewards) {\n for (var i = 0; i < tier.rewards.length; i++) {\n let loopId = tier.rewards[i];\n let reward = rewards.find(x => x.id === loopId);\n let rewardIndex = newResult.findIndex(x => x.id === loopId);\n if(reward && rewardIndex === -1 && reward.discount.__typename !== 'SystemDiscount') {\n if(checkConditions(reward.conditions, customer)) {\n newResult.push(reward);\n }\n }\n }\n }\n return newResult;\n }, []) : [];\n\n let tiersReversed = [ ...config.tiers ].reverse();\n let highestTier = tiersReversed.find(x => ( tiers.some(z => z.id === x.id) && customer.tiers.includes(x.id))); // Find our highest tier the customer has, checking that it's a valid tier as well.\n let nextTierIndex = tiersReversed.findIndex((o, i) => ((i+1 !== tiersReversed.length) && tiersReversed[i+1] && tiersReversed[i+1].id === highestTier.id) );\n\n let highestTierData = tiers.find(x => x.id === highestTier.id);\n let nextTierData = (nextTierIndex !== -1) ? tiers.find(x => x.id === tiersReversed[nextTierIndex].id) : null;\n\n\n let goalData = nextTierData ? getGoal(highestTierData.conditions, nextTierData.conditions) : null;\n let goalPercentComplete = null;\n let goalField = null;\n let goalProgress = null;\n if(goalData && goalData.field === 'lifetimePoints') {\n goalPercentComplete = (+customer.lifetimePoints - goalData.oldTarget) / (goalData.newTarget - goalData.oldTarget) * 100;\n goalField = 'Points';\n goalProgress = +customer.lifetimePoints;\n }\n if(goalData && goalData.field === 'points') {\n goalPercentComplete = (+customer.points - goalData.oldTarget) / (goalData.newTarget - goalData.oldTarget) * 100;\n goalField = 'Points';\n goalProgress = +customer.points;\n }\n if(goalData && goalData.field === 'lifetimeSpend') {\n goalPercentComplete = (+customer.lifetimeSpend - goalData.oldTarget) / (goalData.newTarget - goalData.oldTarget) * 100;\n goalField = 'Spend';\n goalProgress = +customer.lifetimeSpend;\n }\n if(goalData && goalData.field === 'lifetimeOrders') {\n goalPercentComplete = (+customer.lifetimeOrders - goalData.oldTarget) / (goalData.newTarget - goalData.oldTarget) * 100;\n goalField = 'Orders';\n goalProgress = +customer.lifetimeOrders;\n }\n\n return (\n \n \n
\n \n \n What can I get?\n \n \n
\n \n {\n /*\n Don't need settings right now, birthday is always set\n */\n\n /*\n \n Account settings\n \n \n
\n \n */\n }\n \n Your activity\n \n \n
\n \n \n Terms & conditions\n \n \n
\n \n { history.goBack(); }} className={styles.breadcrumb}>\n \n Benefits\n
\n\n \n {\n highestTier &&\n
\n\n {/*\n Tier Rewards section\n */}\n\n {\n (tierRewards && tierRewards.length !== 0) &&\n \n Tier rewards\n {\n tierRewards.map(x => {\n let rewardCard = config.rewards.find(z => z.id === x.id);\n let rewardObj = x;\n if(rewardCard && rewardObj) {\n if(x.banner) {\n return
\n }\n\n {\n (goalPercentComplete !== null && goalField !== null) &&\n \n
\n }\n \n
\n To upgrade to { tiersReversed[nextTierIndex].name }
\n \n
\n \n
\n \n
\n \n { goalProgress }\n {`${goalField} earned`}\n
\n \n { goalData.newTarget }\n {`${goalField} needed`}\n
\n \n George Rewards tiers\n {\n config.tiers.map(x => {\n return
\n \n )\n}\n\nexport default Tiers;\n","import React from 'react';\nimport { motion } from \"framer-motion\";\nimport { useHistory } from \"react-router-dom\";\nimport { onDragEnd } from \"../resources/utils\";\n\nimport styles from './Rewards.module.scss';\n\nimport ProductBannerCard from \"../components/ProductBannerCard\";\nimport ProductCard from \"../components/ProductCard\";\nimport Welcomer from \"../components/Welcomer\";\n\nconst variants = {\n enter: {\n x: -1000,\n opacity: 0\n },\n center: {\n zIndex: 1,\n x: 0,\n opacity: 1\n },\n exit: {\n zIndex: 0,\n x: 1000,\n opacity: 0\n }\n};\n\nconst Rewards = ({ config, rewards, customer }) => {\n let history = useHistory();\n return (\n { history.goBack(); }} className={styles.breadcrumb}>\n \n Rewards\n
\n {\n config.rewardsCollection.map(x => {\n let rewardCard = config.rewards.find(z => z.id === x.id);\n let rewardObj = rewards.find(z => z.id === x.id);\n if(rewardCard && rewardObj) {\n if(x.banner) {\n return { history.goBack(); }} className={styles.breadcrumb}>\n \n { rewardCard && rewardCard.title ? rewardCard.title : 'Reward'}\n
\n Something went wrong when opening this reward, please try reloading the page.\n \n )\n }\n\n return (\n \n
\n }\n { history.goBack(); }} className={styles.breadcrumb}>\n \n { rewardCard.title }\n
\n\n \n
\n\n {\n (customer && customer.accountEnabled) &&\n Redeem\n }\n\n \n { rewardData.points === 0 ? FREE : { rewardData.points } points }\n
\n { decodeURIComponent(rewardCard.description) }
\n{ decodeURIComponent(rewardCard.longDescription) }
\n }\n\n {\n (rewardCard.related && rewardCard.related.length !== 0) &&\n\n You may also like\n {\n rewardCard.related.map(x => {\n let rewardCard = config.rewards.find(z => z.id === x);\n let rewardObj = rewards.find(z => z.id === x);\n if(rewardCard && rewardObj) {\n if(x.banner) {\n return
\n }\n \n )\n}\n\nexport default Reward;\n","import React, {Component} from 'react';\nimport { getActivity } from \"../resources/utils\";\nimport { motion } from \"framer-motion\";\n\nimport styles from './ActivityList.module.scss';\n\nimport Loading from \"./Loading\";\n\nclass ActivityList extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: null,\n };\n }\n\n async componentDidMount() {\n if(this.props.id) {\n this.setState({ data: await getActivity(this.props.id)});\n }\n }\n\n async componentDidUpdate(prevProps) {\n if(this.props.id !== prevProps.id) {\n this.setState({ data: null }, async() => {\n this.setState({ data: await getActivity(this.props.id)});\n });\n }\n }\n\n render() {\n const { data } = this.state;\n // console.log(data);\n const { id } = this.props;\n if(!data) {\n return (\n \n
\n )\n }\n return (\n \n {\n [ ...data ].reverse().map(x => {\n return (\n \n {x.reason}\n Event date: {new Date(x.created).toLocaleTimeString([], {year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute:'2-digit'})}\n Points change: {x.points}\n {\n (x.details && x.details.length !== 0) &&\n \n )\n })\n }\n
\n );\n }\n}\n\nexport default ActivityList;\n","import React from 'react';\nimport { motion } from \"framer-motion\";\nimport { useHistory } from \"react-router-dom\";\nimport { onDragEnd } from \"../resources/utils\";\n\nimport ActivityList from \"../components/ActivityList\";\nimport Welcomer from \"../components/Welcomer\";\n\nimport styles from './Activity.module.scss';\n\nconst variants = {\n enter: {\n x: -1000,\n opacity: 0\n },\n center: {\n zIndex: 1,\n x: 0,\n opacity: 1\n },\n exit: {\n zIndex: 0,\n x: 1000,\n opacity: 0\n }\n};\n\nconst Activity = ({ config, customer }) => {\n let history = useHistory();\n return (\n \n Details:\n {\n x.details.map((z,i) => {z})\n }\n
\n }\n { history.goBack(); }} className={styles.breadcrumb}>\n \n Your activity\n
\n {\n customer && customer.accountEnabled &&\n Offer redeemed!
\n{ rewardData.discount.instructions }
\n }\n\n {\n (rewardData.addAction && rewardData.addAction.length !== 0) &&\n {\n await addToCart(null, rewardData.addAction, rewardData.checkoutOnAddAction);\n toggleLoading(true);\n }} className={styles.button}>{ rewardData.checkoutOnAddAction ? 'Go to checkout' : 'Add to cart'}
\n }\n My account\n \n )\n }\n\n if(code) {\n return (\n Offer redeemed!
\nUse this code at the checkout:
\n {\n await addToCart(code, rewardData.addAction, rewardData.checkoutOnAddAction);\n toggleLoading(true);\n }} className={styles.button}>{ rewardData.checkoutOnAddAction ? 'Go to checkout' : 'Add to cart'}
\n }\n My account\n \n )\n }\n\n if(!rewardData || !rewardCard || !customer) {\n return (\n { history.goBack(); }} className={styles.breadcrumb}>\n \n { rewardCard && rewardCard.title ? rewardCard.title : 'Reward'}\n
\n Something went wrong when opening this reward, please try reloading the page.\n \n )\n }\n\n if(!validConditions) {\n return (\n { history.goBack(); }} className={styles.breadcrumb}>\n \n Redeem offer?\n
\n\n \n
\n \n { rewardCard.title }\n
\n You do not meet the conditions to be able to redeem this offer.
\n { history.goBack(); }} className={styles.buttonSub}>Go back
\n \n )\n }\n\n if(customer.points < rewardData.points) {\n return (\n { history.goBack(); }} className={styles.breadcrumb}>\n \n Redeem offer?\n
\n\n \n
\n \n { rewardCard.title }\n
\n You are {rewardData.points - customer.points} points off being able to redeem this reward.
\n { history.goBack(); }} className={styles.buttonSub}>Go back
\n \n \n How can I earn points?\n
\n \n )\n }\n\n\n\n return (\n \n \n
\n \n { history.goBack(); }} className={styles.breadcrumb}>\n \n Redeem offer?\n
\n\n \n
\n\n \n { rewardCard.title }\n {\n +rewardData.points === 0 ?\n
\n You are about to redeem this free reward. Please review the additional details below before redeeming.
\n :\n{rewardData.points} points will be deducted from your rewards balance. George Rewards points cannot be refunded.
\n }\n{ decodeURIComponent(rewardCard.longDescription) }
\n }\n {\n toggleLoading(true);\n let newCode = await redeemReward(customer.id, rewardID);\n if(newCode) {\n setCode(newCode);\n toggleLoading(false);\n }\n }} className={styles.button}>Redeem
\n { history.goBack(); }} className={styles.buttonSub}>Cancel
\n \n )\n}\n\nexport default Confirm;\n","import React from 'react';\n\nimport styles from './Header.module.scss';\n\nconst Header = () => {\n return (\n {\n window.parent.postMessage({\n ggl: true,\n topic: \"CLOSE\"\n }, \"*\");\n }} className={styles.close}>\n \n
\n )\n}\n\nexport default Header;\n","import React from 'react';\nimport {\n useHistory,\n useLocation\n} from \"react-router-dom\";\nimport { motion } from \"framer-motion\";\n\nimport styles from './Footer.module.scss';\n\nconst Footer = () => {\n const location = useLocation();\n let history = useHistory();\n return (\n \n { history.push('/') }} className={styles.link}>\n \n Account\n \n { history.push('/rewards') }} className={styles.link}>\n \n Rewards\n \n { history.push('/tiers') }} className={styles.link}>\n \n Benefits\n \n
\n )\n}\n\nexport default Footer;\n","import React, { Component } from 'react';\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n useLocation,\n useRouteMatch\n} from \"react-router-dom\";\nimport axios from \"axios\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { GQL } from \"./resources/utils\";\n\n// screens\nimport Onboard from \"./screens/Onboard\";\nimport SignIn from \"./screens/SignIn\";\nimport How from \"./screens/How\";\nimport Terms from \"./screens/Terms\";\nimport What from \"./screens/What\";\nimport Enable from \"./screens/Enable\";\nimport Account from \"./screens/Account\";\nimport Tiers from \"./screens/Tiers\";\nimport Rewards from \"./screens/Rewards\";\nimport Reward from \"./screens/Reward\";\nimport Activity from \"./screens/Activity\";\nimport Confirm from \"./screens/Confirm\";\n\n// Components\nimport Loading from \"./components/Loading\";\nimport Header from \"./components/Header\";\nimport Footer from \"./components/Footer\";\n\nimport styles from './App.module.scss';\n\nclass App extends Component {\n constructor(props) {\n super(props);\n this.state = {\n config: null,\n loading: true,\n onboardsToShow: [],\n rewards: [],\n tiers: [],\n customer: null,\n };\n }\n\n getCustomer = async(id, name = null) => {\n let result = await GQL(`\n {\n getCustomer(id: \"${id}\") {\n id\n points\n lifetimePoints\n referral\n lifetimeSpend\n lifetimeOrders\n birthday\n accountEnabled\n tiers\n tags\n }\n }\n `);\n if(result && result.data && result.data.data) {\n this.setState({ customer: {\n ...result.data.data.getCustomer,\n id: id,\n name: name,\n } });\n }\n }\n\n onMessage = async(e) => {\n if(e && e.data && e.data.customer_id) {\n this.getCustomer(e.data.customer_id, e.data.customer_name)\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener('message', this.onMessage);\n }\n\n async componentDidMount() {\n window.addEventListener('message', this.onMessage);\n\n if(!this.state.config) {\n let configRaw = await axios.get('https://gg-loyalty-configs.s3-us-west-2.amazonaws.com/good-george-brewing-myshopify-com.js');\n let config = configRaw && configRaw.data ? configRaw.data : null;\n\n let appData = await GQL(`\n {\n getRewards {\n id\n points\n conditions\n addAction {\n id\n quantity\n }\n checkoutOnAddAction\n discount {\n __typename\n ... on UntrackedDiscount {\n instructions\n }\n }\n }\n getTiers {\n id\n conditions\n }\n }\n `);\n let rewards = appData && appData.data && appData.data.data && appData.data.data.getRewards ? appData.data.data.getRewards : [];\n let tiers = appData && appData.data && appData.data.data && appData.data.data.getRewards ? appData.data.data.getTiers : [];\n\n if(config) {\n let viewed_onboards = null;\n try {\n viewed_onboards = localStorage.getItem('ggl@onboards');\n } catch(e) {\n console.log(e);\n }\n let voArr = viewed_onboards ? viewed_onboards.split(',') : [];\n let onboardsToShow = config.onboards.filter(x => !voArr.includes(x.id));\n this.setState({ config, loading: false, onboardsToShow, rewards, tiers });\n }\n }\n\n // manually set the customer for testing, comment out when you don't need it.\n // this.getCustomer(\"3821913768073\", \"Mitchell\");\n }\n\n renderRoot = () => {\n const { config, onboardsToShow, customer, rewards, tiers } = this.state;\n if(onboardsToShow.length) {\n return \n
\n )\n }\n\n /*\n\n / = account/signin/onboards managed by state/props.\n /activity\n /rewards\n /rewardId\n /buy?\n /tiers\n\n */\n\n\n return (\n \n \n \n
\n );\n }\n}\n\nconst AnimatedSwitch = ({ state, renderRoot }) => {\n const { config, rewards, tiers, customer } = state;\n const location = useLocation();\n return (\n