(\n \n )}\n />\n);\n\n// GraphQL\nconst componentQuery = graphql`\n query ValuePropsIntermissionComponentQuery {\n productsMobileImages: allContentfulAsset(\n filter: { contentful_id: { eq: \"01LkK17xCCWIRDXVhorPZA\" } }\n ) {\n nodes {\n node_locale\n description\n fluid(maxWidth: 304, quality: 100) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n }\n productsDesktopImages: allContentfulAsset(\n filter: { contentful_id: { eq: \"zDJLLVtyioMaIanMitVfn\" } }\n ) {\n nodes {\n node_locale\n description\n fluid(maxWidth: 643, quality: 100) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n }\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { Color, Font, rem, responsive, rgba } from \"../../utils/style\";\nimport NameMap from \"../../utils/nameMap\";\nimport metrics from \"../../utils/metrics\";\n\n// Components\nimport Img from \"gatsby-image\";\nimport SupplementFacts from \"../product/SupplementFacts\";\nimport QuantityPicker from \"../global/QuantityPicker\";\nimport Text from \"../Text\";\n\n// Styled Elements\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n\n ${responsive.sm`\n flex-direction: row;\n `}\n`;\n\nconst Title = styled.h4`\n font-size: ${rem(14)};\n font-weight: 500;\n line-height: ${rem(24)};\n margin-bottom: 10px;\n\n em {\n ${Font.dutch};\n }\n\n ${responsive.sm`\n font-size: ${rem(20)};\n font-weight: 500;\n line-height: ${rem(30)};\n margin-bottom: 0;\n `}\n`;\n\nconst InfoContainer = styled.div`\n display: flex;\n flex-direction: row;\n\n ${responsive.sm`\n flex-direction: column;\n width: calc(100% - 144px);\n `}\n`;\n\nconst ProductImage = styled.div`\n height: 56px;\n width: 56px;\n min-width: 56px;\n margin-right: 16px;\n margin-top: 2px;\n overflow: hidden;\n\n background-color: ${Color.ritualYellow};\n\n ${responsive.sm`\n height: 120px;\n width: 120px;\n min-width: 120px;\n margin-right: 24px;\n margin-top: 0;\n `}\n`;\n\nconst DescriptionContainer = styled.div`\n display: flex;\n flex-direction: column;\n\n ${responsive.sm`\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-top: 10px;\n margin-bottom: 16px;\n `}\n`;\n\nconst Description = styled.p`\n color: ${rgba(Color.ritualBlue, 0.56)};\n font-size: ${rem(12)};\n font-weight: 300;\n line-height: ${rem(18)};\n margin-bottom: 4px;\n text-align: left;\n\n ${responsive.sm`\n font-size: ${rem(14)};\n line-height: ${rem(20)};\n margin-bottom: 0;\n `}\n\n ${responsive.md`\n font-size: ${rem(16)};\n line-height: ${rem(22)};\n `}\n`;\n\nconst SupplementFactsButton = styled.button`\n width: fit-content;\n color: ${Color.ritualBlue};\n font-size: ${rem(12)};\n font-weight: 500;\n letter-spacing: 0px;\n line-height: ${rem(18)};\n padding: 0;\n\n border: none;\n border-bottom: 2px solid ${Color.ritualBlue};\n background: none;\n\n transition: opacity 0.2s;\n\n &:hover {\n opacity: 0.56;\n }\n\n ${responsive.sm`\n font-size: ${rem(14)};\n line-height: ${rem(24)};\n `}\n\n ${responsive.md`\n font-size: ${rem(16)};\n line-height: ${rem(26)};\n `}\n`;\n\nexport default class ProductResult extends React.Component {\n constructor(props) {\n super(props);\n\n this.factsPopup = React.createRef();\n }\n\n handlePopup() {\n const name = this.props.product.name.childMarkdownRemark.rawMarkdownBody;\n\n if (this.factsPopup) {\n this.factsPopup.current.open();\n\n metrics.track(\"Modal Viewed\", {\n title: \"Supplement Facts\",\n location: \"Product result\",\n name,\n });\n }\n }\n\n onQuantityChange(e) {\n const quantity = Number(e.target.value);\n this.props.onQuantityChange(this.props.planId, quantity);\n }\n\n renderOption() {\n const {\n showSupplementFacts = true,\n showQuantityPicker = false,\n productQuantity,\n maxQuantity,\n totalQuantity,\n planId,\n } = this.props;\n\n return (\n <>\n {showSupplementFacts && (\n \n \n \n )}\n {!showSupplementFacts && showQuantityPicker && (\n \n )}\n \n );\n }\n\n render() {\n const { product } = this.props;\n\n const productName = NameMap({\n name: product.name.childMarkdownRemark.rawMarkdownBody,\n });\n\n const productImage = product?.heroFeaturedImages?.[0];\n\n return (\n \n \n
\n
\n \n {productImage && (\n \n )}\n \n \n {product.headerDescription}\n {this.renderOption()}\n \n \n
\n
\n {productImage && (\n \n )}\n \n
\n \n \n {this.renderOption()}\n \n {product.headerDescription}\n \n
\n \n \n \n \n
\n \n );\n }\n\n renderValueProp(valueProp) {\n let Icon = Icons[valueProp.icon];\n return (\n \n \n \n
\n {valueProp.copy}
\n \n );\n }\n\n render() {\n const { discount } = this.props;\n const { isProcessing, planIdAndQuantityArray } = this.state;\n\n const isFinalResults = this._isFinalResults();\n const multiItem = this._getTotalQuantity() > 1;\n\n const bundle = this._getBundle();\n\n const total =\n bundle.reduce((total, product) => {\n const amount = product?.amount || 0;\n return total + amount;\n }, 0) / 100;\n\n const discountData = getDiscountData(total);\n\n const banner = multiItem\n ? discountData.amountOff\n ? intl.t(\n \"build-bundle.slides.results.multi-bundle.unlock\",\n \"You unlocked a {off} bundle discount\",\n { off: intl.formatCurrency(discountData.amountOff, { round: true }) },\n )\n : intl.t(\n \"build-bundle.slides.results.multi-bundle.unlock-percent\",\n \"You unlocked a {off}% bundle discount\",\n { off: discountData.percentOff },\n )\n : intl.t(\n \"build-bundle.slides.results.single-bundle.banner\",\n \"Add another to save {copy}\",\n { copy: discountData.sentenceCopy },\n );\n\n const heading = isFinalResults\n ? intl.t(\n \"build-bundle.slides.results.multi-bundle.heading\",\n \"Getting key nutrients you need should be easy, so we help make it that way.\",\n )\n : intl.t(\n \"build-bundle.slides.results.single-bundle.heading-new\",\n \"Nice. Here's what we recommend for you. Now, let’s find a Ritual for the rest of your household.\",\n );\n\n const ctaHtml = isFinalResults\n ? multiItem\n ? `${intl.t(\n \"build-bundle.slides.results.multi-item.cta\",\n \"Add to Cart — {copy}\",\n { copy: intl.formatCurrency(discountData.discountPrice, { round: true }) },\n )} ${intl.formatCurrency(total, { round: true })}
`\n : `${intl.t(\n \"build-bundle.slides.results.single-item.cta\",\n \"Add to Cart — {copy}\",\n { copy: intl.formatCurrency(total, { round: true }) },\n )}
`\n : `${intl.t(\n \"build-bundle.slides.results.single-bundle.cta\",\n \"Keep Going — {copy}\",\n { copy: discountData.titleCopy },\n )}
`;\n\n const valueProps = intl.unformattedTranslation(\n \"build-bundle.slides.results.valueProps\",\n );\n\n return (\n \n {discount && {banner}}\n \n {heading}
\n \n\n \n {planIdAndQuantityArray &&\n planIdAndQuantityArray.map((obj, i) => {\n const { planId, quantity } = obj;\n const product = getContentfulProductForPlan(planId);\n return (\n \n );\n })}\n \n\n \n \n \n\n {!isFinalResults && this.renderFinishAddToCart()}\n\n \n {valueProps.map(valueProp => {\n return this.renderValueProp(valueProp);\n })}\n \n \n );\n }\n}\n\nexport default connect(null, {\n dispatchAddProductsToCart: addProductsToCart,\n})(Results);\n","import React from \"react\";\nimport styled from \"styled-components\";\n\n// Services\nimport intl from \"../../services/intl\";\n\n// Utils\nimport { Color, rem, responsive } from \"../../utils/style\";\nimport { Icons } from \"../../utils/svg\";\nimport { ProductSKU } from \"../../utils/product\";\n\n// Components\nimport QuizDropdown from \"./QuizDropdown\";\nimport QuizInput from \"./QuizInput\";\nimport NoProductMessage from \"./NoProductMessage\";\n\n// Styled Elements\nconst HouseholdMemberWrapper = styled.div.attrs({\n className: \"d-flex align-items-center justify-content-center flex-column\",\n})`\n z-index: ${p => 10 + p.index};\n margin-bottom: 30px;\n\n ${responsive.sm`\n margin-bottom: 40px;\n `}\n\n &:last-of-type {\n margin-bottom: 24px;\n\n ${responsive.sm`\n margin-bottom: 32px;\n `}\n }\n`;\n\nconst MemberTitle = styled.h2`\n position: relative;\n font-size: ${rem(12)};\n line-height: ${rem(20)};\n letter-spacing: 0.8px;\n font-weight: 500;\n text-transform: uppercase;\n color: ${Color.lessFadedBlue};\n text-align: center !important;\n\n width: 100%;\n margin-bottom: 16px;\n\n ${responsive.sm`\n font-size: ${rem(16)};\n line-height: ${rem(26)};\n letter-spacing: 1px;\n `};\n`;\n\nconst RemoveButton = styled.button`\n position: absolute;\n top: 0;\n right: 0;\n\n padding: 0;\n margin: 0;\n border: none;\n appearance: none;\n\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n\n opacity: 0.24;\n transition: opacity 0.2s;\n\n &:hover {\n opacity: 1;\n }\n\n ${responsive.sm`\n top: -3px;\n `};\n\n svg {\n width: 24px;\n height: 24px;\n\n ${responsive.sm`\n width: 32px;\n height: 32px;\n `};\n }\n\n [data-whatintent=\"mouse\"] & {\n outline: none;\n }\n`;\n\nconst numberToWords = {\n 1: \"First\",\n 2: \"Second\",\n 3: \"Third\",\n 4: \"Fourth\",\n 5: \"Fifth\",\n 6: \"Sixth\",\n};\n\nconst productOptions = {\n over50: [\n {\n value: \"over50disabled\",\n title: intl.t(\"build-bundle.slides.household.interested\", \"Interested In\"),\n disabled: true,\n },\n {\n value: ProductSKU.EFW60,\n title: intl.t(\"build-bundle.slides.household.EFW60\", \"Daily nutrient support\"),\n },\n {\n value: ProductSKU.E50PLUS60,\n title: intl.t(\n \"build-bundle.slides.household.E50PLUS60\",\n \"Post-menopause nutrient support\",\n ),\n },\n ],\n under50: [\n {\n value: \"under50disabled\",\n title: intl.t(\"build-bundle.slides.household.interested\", \"Interested In\"),\n disabled: true,\n },\n {\n value: ProductSKU.EFW60,\n title: intl.t(\"build-bundle.slides.household.EFW60\", \"Daily nutrient support\"),\n },\n {\n value: ProductSKU.EPRE60,\n title: intl.t(\n \"build-bundle.slides.household.EPRE60\",\n \"Prenatal nutrient support\",\n ),\n },\n {\n value: ProductSKU.EPOST60,\n title: intl.t(\n \"build-bundle.slides.household.EPOST60\",\n \"Postnatal nutrient support\",\n ),\n },\n ],\n};\n\nexport default class HouseholdMember extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n showSecondaryDropdown: false,\n under: false,\n over: false,\n };\n\n this.timeout = null;\n this.debounce = null;\n }\n\n componentDidMount() {\n const {\n user: { age, gender },\n } = this.props;\n\n if (age || gender) {\n const showSecondaryDropdown = this._getSecondaryState(gender, age);\n\n this.setState(\n {\n showSecondaryDropdown,\n },\n () => {\n this._checkDisabledState();\n },\n );\n }\n }\n\n componentWillUnmount() {\n if (this.debounce) {\n clearTimeout(this.debounce);\n }\n if (this.timeout) {\n clearTimeout(this.timeout);\n }\n }\n\n removeUser(index, e) {\n e.preventDefault();\n this.props.removeUser(index);\n }\n\n handleGenderChange(value) {\n const {\n userIndex,\n user: { age },\n } = this.props;\n\n const showSecondaryDropdown = this._getSecondaryState(value, age);\n\n this.setState({\n showSecondaryDropdown,\n });\n\n this.props.onGenderChange(value, userIndex);\n\n const product = this._checkProductLogic(value, age);\n this.props.onProductChange(product, userIndex);\n }\n\n handleAgeChange(value) {\n if (this.debounce) {\n clearTimeout(this.debounce);\n }\n\n const age = Number(value);\n\n const {\n user: { gender },\n userIndex,\n } = this.props;\n\n const showSecondaryDropdown = this._getSecondaryState(gender, age);\n\n this.setState({\n showSecondaryDropdown,\n under: false,\n over: false,\n });\n\n this.props.onAgeChange(age, userIndex);\n\n if (!showSecondaryDropdown) {\n // If no secondary dropdown, get corresponding product\n const product = this._checkProductLogic(gender, age);\n this.props.onProductChange(product, userIndex);\n } else {\n // If the age updates the secondary, we clear it to reduce product add errors\n // where they may have been under 50, then changed to over 50\n this.props.onProductChange(undefined, userIndex);\n }\n }\n\n _getSecondaryState(gender, age) {\n // Only show secondary dropdown for 18-50 and 50+\n return gender === \"Female\" && age >= 18 && age < 100;\n }\n\n _checkProductLogic(gender, age) {\n if (gender === \"Male\") {\n const ageNumber = Number(age);\n\n if (ageNumber >= 4 && ageNumber < 13) {\n return ProductSKU.EFKIDS90;\n }\n\n if (ageNumber >= 13 && ageNumber < 18) {\n return ProductSKU.EFTB60;\n }\n\n if (ageNumber >= 18 && ageNumber < 50) {\n return ProductSKU.EFM60;\n }\n\n if (ageNumber >= 50 && ageNumber < 100) {\n return ProductSKU.EFM50PLUS60;\n }\n } else if (gender === \"Female\") {\n const ageNumber = Number(age);\n\n if (ageNumber >= 4 && ageNumber < 13) {\n return ProductSKU.EFKIDS90;\n }\n\n if (ageNumber >= 13 && ageNumber < 18) {\n return ProductSKU.EFTG60;\n }\n // Ages 18-50 and 50+ are determined by secondary dropdown\n }\n\n return undefined;\n }\n\n handleProductChange(value) {\n this.props.onProductChange(value, this.props.userIndex);\n }\n\n renderProductDropdown() {\n const { user } = this.props;\n\n const over50 = user.age >= 50;\n const options = over50 ? productOptions.over50 : productOptions.under50;\n\n const title =\n options.find(o => o.value === user.product)?.title ||\n intl.t(\"build-bundle.slides.household.interested\", \"Interested In\");\n\n let currentProductOption = {\n title,\n value: user.product,\n disabled:\n title === intl.t(\"build-bundle.slides.household.interested\", \"Interested In\"),\n };\n\n return (\n \n );\n }\n\n onFieldChange(callback, value) {\n callback(value);\n\n // Check on next tick, once new props have been updated\n this.timeout = setTimeout(() => {\n this._checkDisabledState();\n }, 0);\n }\n\n _checkDisabledState() {\n const underAgeThreshold = 4;\n\n const { user, userIndex } = this.props;\n const { age, gender, product } = user;\n\n const showSecondaryDropdown = this._getSecondaryState(gender, age);\n\n let disabled = !gender || !age;\n\n if (showSecondaryDropdown && !product) {\n disabled = true;\n }\n\n this.props.updateDisabledState(userIndex - 1, disabled);\n\n // Keep the input enabled, but delay showing the over/under messages.\n this.debounce = setTimeout(() => {\n this.setState({\n under: age && age !== \"\" && age < underAgeThreshold,\n over: age && age !== \"\" && age > 100,\n });\n }, 800);\n }\n\n render() {\n const { canRemove = true, user, userIndex } = this.props;\n const { showSecondaryDropdown, over, under } = this.state;\n\n const currentGenderOption = {\n value: user.gender,\n title: user.gender,\n };\n\n return (\n \n \n {numberToWords[userIndex]} Person\n {canRemove && (\n \n \n \n )}\n \n \n \n {showSecondaryDropdown && this.renderProductDropdown()}\n\n \n \n );\n }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { Color, rem, responsive } from \"../../../utils/style\";\nimport { getBundleCartLimit } from \"../../../utils/bundle\";\nimport metrics from \"../../../utils/metrics\";\n\n// Components\nimport YellowArrow from \"../YellowArrow\";\nimport HouseholdMember from \"../HouseholdMember\";\nimport QuizAlternateButton from \"../QuizAlternateButton\";\nimport NonBinaryLink from \"../NonBinaryLink\";\nimport Text from \"../../Text\";\n\n// Styled Elements\nconst Wrapper = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 56px 24px;\n\n ${responsive.sm`\n padding: 80px 24px;\n `};\n`;\n\nconst Title = styled.h1`\n color: ${Color.ritualBlue};\n font-weight: 500;\n font-size: ${rem(26)};\n line-height: ${rem(36)};\n letter-spacing: -0.3px;\n text-align: center !important;\n margin: 0 0 24px;\n max-width: 256px;\n\n ${responsive.sm`\n font-size: ${rem(48)};\n line-height: ${rem(54)};\n letter-spacing: -1.4px;\n margin-bottom: 32px;\n max-width: 430px;\n `};\n`;\n\nconst Form = styled.form`\n width: 100%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n ${responsive.sm`\n max-width: 370px;\n `};\n`;\n\nconst ArrowWrapper = styled.div.attrs({\n className:\n \"d-flex align-items-center justify-content-center flex-direction-column\",\n})`\n position: relative;\n`;\n\nconst Arrow = styled(YellowArrow)`\n position: absolute;\n bottom: 1px;\n left: 30px;\n transform: rotate(28deg);\n\n ${responsive.sm`\n left: 32px;\n bottom: 1px;\n transform: rotate(61deg);\n `};\n`;\n\nconst InputWrapper = styled.div`\n width: 100%;\n`;\n\nconst AddAnotherPerson = styled.button`\n display: block;\n appearance: none;\n border: 0;\n padding: 0;\n margin: 0 auto 40px;\n border-bottom: 2px solid ${Color.ritualBlue};\n background: none;\n\n text-align: center;\n color: ${Color.ritualBlue};\n font-size: ${rem(14)};\n line-height: ${rem(24)};\n font-weight: 500;\n\n ${responsive.sm`\n font-size: ${rem(16)};\n line-height: ${rem(26)};\n margin-bottom: 48px;\n `};\n\n [data-whatintent=\"mouse\"] &:focus,\n [data-whatintent=\"touch\"] &:focus {\n outline: none;\n }\n`;\n\nexport default class HouseholdBuilderSlide extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n disabledStates: [],\n };\n\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n componentDidMount() {\n const { addHouseholdMember, userInput } = this.props;\n\n // Add first household member if they do not exist\n if (userInput.length < 2) {\n addHouseholdMember();\n }\n }\n\n handleSubmit(e) {\n e.preventDefault();\n\n const { slide, userInput } = this.props;\n\n let answer = { ...slide.answers[0] };\n\n // Exclude first user\n const householdUsers = userInput.slice(1);\n const newProducts = householdUsers.map(\n user => user.product && user.product,\n );\n\n const ages = householdUsers.map(user => user.age);\n const genders = householdUsers.map(user => user.gender);\n\n metrics.track(\"Quiz Personal Info Entered\", {\n location: slide.slideName,\n gender: genders.toString(),\n age: ages.toString(),\n });\n\n metrics.track(\"Quiz CTA Clicked\", {\n title: \"Continue\",\n location: slide.slideName,\n numberInHousehold: newProducts.length,\n });\n\n answer.sku = newProducts;\n this.props.nextSlide(answer);\n }\n\n updateDisabledState(index, value) {\n const disabledStates = [...this.state.disabledStates];\n disabledStates[index] = value;\n\n this.setState({\n disabledStates,\n });\n }\n\n addAnotherPerson(e) {\n e.preventDefault();\n\n // Add disabled state for newly added household member\n let disabledStates = [...this.state.disabledStates];\n disabledStates.push(true);\n\n this.setState({\n disabledStates,\n });\n\n this.props.addHouseholdMember();\n }\n\n removeUser(index) {\n // Add disabled state for newly added household member\n let disabledStates = [...this.state.disabledStates];\n disabledStates.splice(1, index - 1);\n\n this.setState({\n disabledStates,\n });\n\n this.props.removeHouseholdMember(index);\n }\n\n render() {\n const { disabledStates } = this.state;\n const { userInput } = this.props;\n\n const householdUsers = userInput.slice(1);\n\n const cartLimit = getBundleCartLimit();\n const canAddAnother = userInput.length < cartLimit;\n\n const disabled =\n !disabledStates.length || disabledStates.some(state => !!state);\n\n return (\n \n \n \n <Text\n id=\"build-bundle.slides.household.title\"\n defaultMessage=\"Tell us about your household\"\n />\n \n \n \n \n\n \n \n );\n }\n}\n","// Slides\nimport { kidsSlides } from \"./default\";\n\n/*\n\nStructure of a slide:\n\n {\n // Required\n slideName: String, // Used as a slide ID, should be unique\n\n // Required\n componentName: String, // Represents which slide component to use on build-a-bundle.js\n\n // Optional (required for Intermission slide)\n componentContent: Object = { // Used for Intermission slide content\n smallHeader: String, // Eyebrow copy for slide \n title: String, // Title copy\n copy: String, // Body copy\n imageName: String, // References image from map in Intermission.js\n imageIngredient: String, // Ingredient name copy\n imageSource: String, // Ingredient source copy\n },\n\n // Required\n answers: Array = [ // Used to render buttons and trigger next route\n {\n copy: String, // Copy for button\n sku: String, // If SKU property exists, will add product to bundle when moving to next slide\n nextSlide: Object = {\n firstRun: String, // On first loop of quiz, go here (looks at slideName)\n onwards: String, // Subsequent loops, go here\n },\n },\n ],\n },\n\n When using age slide, `answer` array is now an object:\n\n answers: Object = {\n Male: Object = {\n under50: Object = {\n sku: String,\n nextSlide: Object = {\n firstRun: String,\n onwards: String,\n },\n },\n over50: Object ={\n sku: String,\n nextSlide: Object = {\n firstRun: String,\n onwards: String,\n },\n },\n },\n Female: Object = {\n under50: Object = {\n sku: String,\n nextSlide: Object = {\n firstRun: String,\n onwards: String,\n },\n },\n over50: Object = {\n sku: String,\n nextSlide: Object = {\n firstRun: String,\n onwards: String,\n },\n },\n },\n }\n\n*/\n\nexport default {\n v1Kids: kidsSlides,\n};\n","/* eslint-disable */\nexport const kidsSlides = [\n {\n slideName: \"intro\",\n componentName: \"IntroSlide\",\n componentContent: {\n title: \"build-bundle.slides.intro.title\",\n copy: \"build-bundle.slides.intro.copy\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intro.button\",\n nextSlide: {\n firstRun: \"age-gender\",\n },\n },\n ],\n },\n {\n slideName: \"age-gender\",\n componentName: \"AgeGenderSlide\",\n answers: {\n Male: {\n under50: {\n nextSlide: {\n firstRun: \"intermission-3.3\",\n },\n },\n over50: {\n nextSlide: {\n firstRun: \"intermission-3.4\",\n },\n },\n },\n Female: {\n under50: {\n nextSlide: {\n firstRun: \"intermission-3.1\",\n },\n },\n over50: {\n nextSlide: {\n firstRun: \"intermission-3.2\",\n },\n },\n },\n },\n },\n {\n slideName: \"intermission-3.1\",\n componentName: \"IntermissionSlide\",\n componentContent: {\n smallHeader: \"build-bundle.slides.intermission-3.1.smallHeader\",\n title: \"build-bundle.slides.intermission-3.1.title\",\n copy: {\n Female: {\n under50: \"build-bundle.slides.intermission-3.1.female-under-50\",\n over50: \"build-bundle.slides.intermission-3.1.female-over-50\",\n },\n },\n imageName: \"iron\",\n imageIngredient: \"build-bundle.slides.intermission-3.1.imageIngredient\",\n imageSource: \"build-bundle.slides.intermission-3.1.imageSource\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-3.1.button\",\n nextSlide: {\n firstRun: \"prenatal\",\n },\n },\n {\n copy: \"build-bundle.slides.intermission-3.1.button\",\n sku: \"EFTG60\",\n nextSlide: {\n firstRun: \"results\",\n },\n },\n ],\n },\n {\n slideName: \"intermission-3.2\",\n componentName: \"IntermissionSlide\",\n componentContent: {\n smallHeader: \"build-bundle.slides.intermission-3.2.smallHeader\",\n title: \"build-bundle.slides.intermission-3.2.title\",\n copy: \"build-bundle.slides.intermission-3.2.copy\",\n imageName: \"vitaminB12\",\n imageIngredient: \"build-bundle.slides.intermission-3.2.imageIngredient\",\n imageSource: \"build-bundle.slides.intermission-3.2.imageSource\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-3.2.button\",\n nextSlide: {\n firstRun: \"postmenopausal\",\n },\n },\n ],\n },\n {\n slideName: \"intermission-3.3\",\n componentName: \"IntermissionSlide\",\n componentContent: {\n smallHeader: \"build-bundle.slides.intermission-3.3.smallHeader\",\n title: \"build-bundle.slides.intermission-3.3.title\",\n copy: {\n Male: {\n under50: \"build-bundle.slides.intermission-3.3.male-under-50\",\n over50: \"build-bundle.slides.intermission-3.3.male-under-50\",\n },\n },\n imageName: \"vitaminA\",\n imageIngredient: \"build-bundle.slides.intermission-3.3.imageIngredient\",\n imageSource: \"build-bundle.slides.intermission-3.3.imageSource\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-3.3.button\",\n sku: \"EFM60\",\n nextSlide: {\n firstRun: \"results\",\n },\n },\n {\n copy: \"build-bundle.slides.intermission-3.3.button\",\n sku: \"EFTB60\",\n nextSlide: {\n firstRun: \"results\",\n },\n },\n ],\n },\n {\n slideName: \"intermission-3.4\",\n componentName: \"IntermissionSlide\",\n componentContent: {\n smallHeader: \"build-bundle.slides.intermission-3.4.smallHeader\",\n title: \"build-bundle.slides.intermission-3.4.title\",\n copy: \"build-bundle.slides.intermission-3.4.copy\",\n imageName: \"magnesium\",\n imageIngredient: \"build-bundle.slides.intermission-3.4.imageIngredient\",\n imageSource: \"build-bundle.slides.intermission-3.4.imageSource\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-3.4.button\",\n sku: \"EFM50PLUS60\",\n nextSlide: {\n firstRun: \"results\",\n },\n },\n ],\n },\n {\n slideName: \"prenatal\",\n componentName: \"PrenatalSlide\",\n answers: [\n {\n copy: \"build-bundle.slides.prenatal.answer-1\",\n nextSlide: {\n firstRun: \"intermission-4.1.2\",\n },\n },\n {\n copy: \"build-bundle.slides.prenatal.answer-2\",\n nextSlide: {\n firstRun: \"intermission-4.1.1\",\n },\n },\n {\n copy: \"build-bundle.slides.prenatal.answer-3\",\n nextSlide: {\n firstRun: \"intermission-4.1.3\",\n },\n },\n ],\n },\n {\n slideName: \"intermission-4.1.1\",\n componentName: \"IntermissionSlide\",\n componentContent: {\n smallHeader: \"build-bundle.slides.intermission-4.1.1.smallHeader\",\n title: \"build-bundle.slides.intermission-4.1.1.title\",\n copy: \"build-bundle.slides.intermission-4.1.1.copy\",\n imageName: \"folate\",\n imageIngredient: \"build-bundle.slides.intermission-4.1.1.imageIngredient\",\n imageSource: \"build-bundle.slides.intermission-4.1.1.imageSource\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-4.1.1.button\",\n sku: \"EPRE60\",\n nextSlide: {\n firstRun: \"results\",\n },\n },\n ],\n },\n {\n slideName: \"intermission-4.1.2\",\n componentName: \"IntermissionSlide\",\n componentContent: {\n smallHeader: \"build-bundle.slides.intermission-4.1.2.smallHeader\",\n title: \"build-bundle.slides.intermission-4.1.2.title\",\n copy: \"build-bundle.slides.intermission-4.1.2.copy\",\n imageName: \"folate\",\n imageIngredient: \"build-bundle.slides.intermission-4.1.2.imageIngredient\",\n imageSource: \"build-bundle.slides.intermission-4.1.2.imageSource\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-4.1.2.button\",\n sku: \"EFW60\",\n nextSlide: {\n firstRun: \"results\",\n },\n },\n ],\n },\n {\n slideName: \"intermission-4.1.3\",\n componentName: \"IntermissionSlide\",\n componentContent: {\n smallHeader: \"build-bundle.slides.intermission-4.1.3.smallHeader\",\n title: \"build-bundle.slides.intermission-4.1.3.title\",\n copy: \"build-bundle.slides.intermission-4.1.3.copy\",\n imageName: \"omega3\",\n imageIngredient: \"build-bundle.slides.intermission-4.1.3.imageIngredient\",\n imageSource: \"build-bundle.slides.intermission-4.1.3.imageSource\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-4.1.3.button\",\n sku: \"EPOST60\",\n nextSlide: {\n firstRun: \"results\",\n },\n },\n ],\n },\n {\n slideName: \"intermission-7.1.2\",\n componentName: \"IntermissionSlide\",\n componentContent: {\n smallHeader: \"build-bundle.slides.intermission-7.1.2.smallHeader\",\n title: \"build-bundle.slides.intermission-7.1.2.title\",\n copy: \"build-bundle.slides.intermission-7.1.2.copy\",\n imageName: \"omega3\",\n imageIngredient: \"build-bundle.slides.intermission-7.1.2.imageIngredient\",\n imageSource: \"build-bundle.slides.intermission-7.1.2.imageSource\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-7.1.2.button\",\n sku: \"EFW60\",\n nextSlide: {\n firstRun: \"results\",\n },\n },\n ],\n },\n {\n slideName: \"postmenopausal\",\n componentName: \"PostmenopausalSlide\",\n answers: [\n {\n copy: \"build-bundle.slides.postmenopausal.answer-1\",\n nextSlide: {\n firstRun: \"intermission-4.2.2\",\n },\n },\n {\n copy: \"build-bundle.slides.postmenopausal.answer-2\",\n nextSlide: {\n firstRun: \"intermission-4.2.1\",\n },\n },\n ],\n },\n {\n slideName: \"intermission-4.2.1\",\n componentName: \"IntermissionSlide\",\n componentContent: {\n smallHeader: \"build-bundle.slides.intermission-4.2.1.smallHeader\",\n title: \"build-bundle.slides.intermission-4.2.1.title\",\n copy: \"build-bundle.slides.intermission-4.2.1.copy\",\n imageName: \"iron\",\n imageIngredient: \"build-bundle.slides.intermission-4.2.1.imageIngredient\",\n imageSource: \"build-bundle.slides.intermission-4.2.1.imageSource\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-4.2.1.button\",\n sku: \"E50PLUS60\",\n nextSlide: {\n firstRun: \"results\",\n },\n },\n ],\n },\n {\n slideName: \"intermission-4.2.2\",\n componentName: \"IntermissionSlide\",\n componentContent: {\n smallHeader: \"build-bundle.slides.intermission-4.2.2.smallHeader\",\n title: \"build-bundle.slides.intermission-4.2.2.title\",\n copy: \"build-bundle.slides.intermission-4.2.2.copy\",\n imageName: \"vitaminB12\",\n imageIngredient: \"build-bundle.slides.intermission-4.2.2.imageIngredient\",\n imageSource: \"build-bundle.slides.intermission-4.2.2.imageSource\",\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-4.2.2.button\",\n sku: \"EFW60\",\n nextSlide: {\n firstRun: \"results\",\n },\n },\n ],\n },\n {\n slideName: \"results\",\n componentName: \"Results\",\n answers: [\n {\n nextSlide: {\n firstRun: \"household\",\n },\n },\n ],\n },\n {\n slideName: \"household\",\n componentName: \"HouseholdBuilderSlide\",\n answers: [\n {\n nextSlide: {\n firstRun: \"intermission-ProductDifference\",\n },\n },\n ],\n },\n {\n slideName: \"intermission-ProductDifference\",\n componentName: \"ValuePropsIntermission\",\n componentContent: {\n smallHeader:\n \"build-bundle.slides.intermission-ProductDifference.smallHeader\",\n title: \"build-bundle.slides.intermission-ProductDifference.title\",\n valueProps: [\n {\n svg: \"Gene\",\n heading:\n \"build-bundle.slides.intermission-ProductDifference.props.gene.heading\",\n subheading:\n \"build-bundle.slides.intermission-ProductDifference.props.gene.subheading\",\n },\n {\n svg: \"Traceable\",\n heading:\n \"build-bundle.slides.intermission-ProductDifference.props.traceable.heading\",\n subheading:\n \"build-bundle.slides.intermission-ProductDifference.props.traceable.subheading\",\n },\n {\n svg: \"Vegan\",\n heading:\n \"build-bundle.slides.intermission-ProductDifference.props.vegan.heading\",\n subheading:\n \"build-bundle.slides.intermission-ProductDifference.props.vegan.subheading\",\n },\n {\n svg: \"Nonausea\",\n heading:\n \"build-bundle.slides.intermission-ProductDifference.props.nonausea.heading\",\n subheading:\n \"build-bundle.slides.intermission-ProductDifference.props.nonausea.subheading\",\n },\n ],\n },\n answers: [\n {\n copy: \"build-bundle.slides.intermission-ProductDifference.button\",\n nextSlide: {\n firstRun: \"final-results\",\n },\n },\n ],\n },\n {\n slideName: \"final-results\",\n componentName: \"Results\",\n },\n];\n","import React from \"react\";\n\n// Services\nimport { navigate } from \"../../services/navigation\";\nimport intl from \"../../services/intl\";\n\n// Utils\nimport metrics from \"../../utils/metrics\";\n\n// Components\nimport Navigation from \"./Navigation\";\nimport SlideContainer from \"./SlideContainer\";\nimport Disclaimer from \"./Disclaimer\";\nimport AbandonmentModal from \"./AbandonmentModal\";\n\n// Slide Components\nimport Intro from \"./slides/Intro\";\nimport TakeVitamins from \"./slides/TakeVitamins\";\nimport ProductSelectionSlide from \"./slides/ProductSelectionSlide\";\nimport AgeGenderSlide from \"./slides/AgeGender\";\nimport Intermission from \"./slides/Intermission\";\nimport ValuePropsIntermission from \"./slides/ValuePropsIntermission\";\nimport Results from \"./slides/Results\";\nimport HouseholdBuilderSlide from \"./slides/HouseholdBuilderSlide\";\n\n// Data\nimport slideData from \"../../data/bundle-builder/slides\";\n\n// Map of slide components\nconst components = {\n IntroSlide: Intro,\n TakeVitamins: TakeVitamins,\n AgeGenderSlide: AgeGenderSlide,\n PrenatalSlide: ProductSelectionSlide,\n PostmenopausalSlide: ProductSelectionSlide,\n IntermissionSlide: Intermission,\n Results: Results,\n HouseholdBuilderSlide: HouseholdBuilderSlide,\n ValuePropsIntermission: ValuePropsIntermission,\n};\n\nexport default class BundleLoopFlow extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n abandonmentModalClosePath: null,\n showDisclaimer: true,\n transition: false,\n // Slide Logic State\n slides: slideData?.v1Kids,\n currentSlide: slideData?.v1Kids?.[0],\n slideHistory: [],\n /* User Input\n First item in the array is always the initial user,\n every item following the first item is every user added\n from the Household Builder slide\n */\n userInput: [\n {\n age: undefined,\n gender: undefined,\n product: undefined,\n },\n ],\n // Results\n resultsBundle: [],\n };\n\n this.timeout = null;\n }\n\n componentWillUnmount() {\n if (this.timeout) {\n clearTimeout(this.timeout);\n }\n }\n\n setDisclaimerState(shouldShow) {\n this.setState({\n showDisclaimer: shouldShow,\n });\n }\n\n updateResultsBundle(bundle) {\n this.setState({\n resultsBundle: bundle,\n });\n }\n\n // Slide Logic\n nextSlide(answer) {\n const { userInput, currentSlide } = this.state;\n // Handles which slide to show next\n let nextSlide = answer.nextSlide.firstRun;\n\n // If answer has SKU associated, we add the product\n // to newly created bundle. The Results slide will handle\n // displaying array of products in the bundle.\n if (answer.sku) {\n this._handleSlideSku(answer.sku);\n }\n\n // If a QuizButton is clicked (not a QuizAlternateButton) we trigger this\n // CTA.\n if (answer.copy) {\n metrics.track(\"Quiz CTA Clicked\", {\n title: intl.t(answer.copy),\n location: currentSlide.slideName,\n });\n }\n\n // Handles changing currently viewed slide\n this._goToSlide(nextSlide);\n }\n\n _handleSlideSku(sku) {\n // If single SKU as string\n if (typeof sku === \"string\") {\n this.onProductChange(sku, 0);\n }\n }\n\n _goToSlide(nextSlideName) {\n // Get slide object based on slideName\n const slide = this.state.slides.find(\n slide => slide.slideName === nextSlideName,\n );\n\n // Add slideName to list of slide history\n let slideHistory = [...this.state.slideHistory];\n slideHistory.push(this.state.currentSlide.slideName);\n\n window.scrollTo(0, 0);\n this._transition({\n currentSlide: slide,\n slideHistory,\n });\n }\n\n _transition(state) {\n this.setState({\n transition: true,\n });\n\n this.timeout = setTimeout(() => {\n this.setState({\n transition: false,\n ...state,\n });\n }, 600);\n }\n\n _getCompletionPercent() {\n const { slides, currentSlide } = this.state;\n\n // Give the 1-based index of our current slide and the first results slide.\n const index =\n slides.findIndex(s => s.slideName === currentSlide.slideName) + 1;\n const firstResultsIndex =\n slides.findIndex(s => s.slideName === \"results\") + 1;\n\n // If it's first slide, or the currentSlide does not existing in the array\n // (should not happen), return 0.\n if (index === 1) return 0;\n\n // Determines how far we've progressed through the first section of the\n // builder by checking our current index again the index of the first\n // results slide. If this index is equal to (or great than) the index of\n // the results slide, we know we've completed the first half of the quiz.\n const firstSectionLength = firstResultsIndex;\n const firstSectionPercent = Math.min(index / firstSectionLength, 1);\n\n // Determines how far we've progressed through the second section of the\n // builder by checking how many steps past the first results slide we've\n // moved against how many total slides exist past the first results slide.\n const offsetIndex = index - firstResultsIndex;\n const secondSectionLength = slides.length - firstResultsIndex;\n const secondSectionPercent = Math.max(offsetIndex / secondSectionLength, 0);\n\n // The first half and the second half should each be treated as 50% of the\n // builder progress.\n return (firstSectionPercent * 0.5 + secondSectionPercent * 0.5) * 100;\n }\n\n goToPreviousSlide() {\n const slideHistory = this.state.slideHistory;\n\n // Get last slide and remove from history\n const lastSlideName = slideHistory.pop();\n const lastSlide = this.state.slides.find(\n slide => slide.slideName === lastSlideName,\n );\n\n this._transition({\n currentSlide: lastSlide,\n slideHistory,\n });\n }\n\n addHouseholdMember() {\n // Adds new member to household, undefined values ready for user input\n let userInput = [...this.state.userInput];\n userInput.push({\n age: undefined,\n gender: undefined,\n product: undefined,\n });\n\n this.setState({\n userInput,\n });\n }\n\n removeHouseholdMember(index) {\n let userInput = [...this.state.userInput];\n userInput.splice(index, 1);\n\n this.setState({\n userInput,\n });\n }\n\n onAgeChange(inputAge, index = 0) {\n this._onChange(index, \"age\", inputAge);\n }\n\n onGenderChange(inputGender, index = 0) {\n this._onChange(index, \"gender\", inputGender);\n }\n\n onProductChange(inputProduct, index = 0) {\n this._onChange(index, \"product\", inputProduct);\n }\n\n _onChange(index, field, value) {\n let userInput = [...this.state.userInput];\n userInput[index][field] = value;\n\n this.setState({\n userInput,\n });\n }\n\n onClose(path, e) {\n e.preventDefault();\n\n if (!this._hasUnsavedChanges()) {\n navigate(path);\n return;\n }\n\n this.setState({\n abandonmentModalClosePath: path,\n });\n }\n\n _hasUnsavedChanges() {\n return !!this.state.resultsBundle.length;\n }\n\n onModalClose() {\n this.setState({\n abandonmentModalClosePath: null,\n });\n }\n\n render() {\n const {\n abandonmentModalClosePath,\n showDisclaimer,\n // Slide State\n currentSlide,\n slides,\n transition,\n // User input\n userInput,\n // Results\n resultsBundle,\n } = this.state;\n const { data, discount } = this.props;\n\n if (!currentSlide || !slides) return null;\n\n const completionPercent = this._getCompletionPercent();\n\n // Select slide component to show based on currentSlide `componentName` value\n const SelectedComponent = components[currentSlide.componentName];\n\n const slideProps = {\n // Slide State\n slide: currentSlide,\n nextSlide: this.nextSlide.bind(this),\n // User input\n userInput,\n age: userInput[0].age,\n gender: userInput[0].gender,\n onAgeChange: this.onAgeChange.bind(this),\n onGenderChange: this.onGenderChange.bind(this),\n onProductChange: this.onProductChange.bind(this),\n addHouseholdMember: this.addHouseholdMember.bind(this),\n removeHouseholdMember: this.removeHouseholdMember.bind(this),\n updateResultsBundle: this.updateResultsBundle.bind(this),\n // Bundle details\n data,\n discount,\n };\n\n return (\n <>\n \n \n \n \n {showDisclaimer && }\n \n \n );\n }\n}\n","import React from \"react\";\nimport { graphql } from \"gatsby\";\n\n// Components\nimport BundleHouseholdFlow from \"../../components/buildBundle/BundleHouseholdFlow\";\n\nexport default class BuildABundlePage extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n discount: 10,\n };\n }\n\n render() {\n const { data } = this.props;\n const { discount } = this.state;\n\n const props = {\n data,\n discount,\n };\n\n return ;\n }\n}\n\nexport const query = graphql`\n query BuildABundleQuery($locale: String!) {\n allProduct {\n nodes {\n id\n name\n sku\n }\n }\n allPlan {\n nodes {\n id\n product_id\n amount\n }\n }\n backgroundImage: contentfulAsset(\n node_locale: { eq: $locale }\n contentful_id: { eq: \"3bVbTPVG81x6cnbnwWc9iP\" }\n ) {\n description\n fluid(maxWidth: 1286, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n allContentfulProduct(filter: { node_locale: { eq: $locale } }) {\n nodes {\n name {\n childMarkdownRemark {\n rawMarkdownBody\n }\n }\n headerDescription\n sku\n supplementFacts {\n servingSize\n servingsPerContainer\n labels {\n dv\n }\n nutrients {\n label\n dosage\n dv\n }\n ingredients {\n label\n dosage\n dv\n }\n notations {\n label\n }\n otherIngredients\n notationReferences\n attributions {\n label\n }\n simpleIngredients {\n name\n dosage\n }\n }\n heroFeaturedImages {\n title\n fluid(maxWidth: 120, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n description\n }\n }\n }\n }\n`;\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport { Font, Color, rem, media } from \"../../utils/style\";\nimport { Icons } from \"../../utils/svg\";\nimport { lockScroll } from \"../../utils/lockScroll\";\nimport Text from \"../Text\";\n\nconst OpenAnimation = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\n\nconst PopupWrapper = styled.div.attrs({ className: \"ajs_supplement-facts\" })`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.8);\n z-index: 9999;\n animation: ${OpenAnimation} 0.2s ease-in-out 0s normal forwards;\n display: ${p => (p.open ? \"flex\" : \"none\")};\n flex-direction: column;\n justify-content: flex-start;\n backdrop-filter: blur(10px);\n`;\n\nconst CloseWrapper = styled.div.attrs({\n className: \"ajs_supplement-facts_close-wrapper\",\n})`\n min-height: 72px;\n\n ${media.mobile`\n min-height: 48px;\n `};\n`;\n\nconst CloseButton = styled.span.attrs({\n className: \"ajs_supplement-facts_close-wrapper_button\",\n})`\n display: block;\n width: 48px;\n height: 48px;\n cursor: pointer;\n position: absolute;\n top: 12px;\n right: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n ${media.mobile`\n top: 0;\n right: 0;\n `};\n\n &:hover {\n svg {\n opacity: 0.56;\n }\n }\n\n span {\n position: relative;\n width: 16px;\n height: 16px;\n }\n\n svg {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: opacity 200ms ease-in-out;\n color: ${Color.ritualBlue};\n\n g {\n fill: currentColor;\n }\n }\n`;\n\nconst TableWrapper = styled.div.attrs({\n className: \"ajs_supplement-facts_table-wrapper\",\n})`\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 100%;\n height: calc(100% - 72px);\n\n ${media.mobile`\n height: calc(100% - 48px);\n `}\n\n & > div {\n position: relative;\n background-color: ${Color.white};\n box-sizing: border-box !important;\n max-height: calc(100vh - 40px - 72px);\n overflow: auto;\n padding: 20px;\n box-shadow: 0 0 2px rgba(${Color.ritualBlue},0.56);\n\n ${media.mobile`\n padding: 0;\n width: 100%;\n max-height: 100%;\n `}\n }\n\n table {\n table-layout: fixed;\n width: 650px;\n text-align: left;\n background-color: ${Color.white};\n\n ${media.tablet`\n width: 560px;\n `}\n\n ${media.mobile`\n width: calc(100% - 24px);\n margin: 12px;\n margin-bottom: calc(12px + env(safe-area-inset-bottom));\n `}\n\n thead {\n border: 1px solid ${Color.ritualBlue};\n\n tr {\n th {\n &:first-child {\n width: 50%;\n }\n }\n }\n }\n\n thead,\n tbody {\n\n tr {\n &.outline {\n border: 1px solid ${Color.ritualBlue};\n }\n\n &.no-top {\n border-top: none;\n }\n\n &.no-bottom {\n border-bottom: none;\n }\n }\n\n tr,\n td,\n th {\n ${Font.circular}\n font-size: ${rem(14)};\n line-height: ${rem(18)};\n font-weight: 500;\n text-align: left;\n padding: 4px 6px;\n word-break: break-word;\n\n ${media.mobile`\n font-size: ${rem(12)};\n line-height: ${rem(16)};\n padding: 2px 4px;\n `}\n\n &.title {\n font-size: ${rem(36)};\n line-height: ${rem(40)};\n font-weight: 700;\n }\n\n &.small {\n font-size: ${rem(12)};\n line-height: ${rem(16)};\n }\n\n &.attribution {\n font-weight: 300;\n font-size: ${rem(10)};\n line-height: ${rem(12)};\n }\n\n &.last {\n font-weight: 300;\n border: none !important;\n font-size: ${rem(12)};\n line-height: ${rem(16)};\n }\n\n span {\n display: block;\n font-size: ${rem(12)};\n line-height: ${rem(16)};\n padding-left: 16px;\n font-weight: 300;\n\n &.indent {\n display: inline;\n }\n\n &.light {\n display: inline;\n padding: 0;\n margin: 0;\n }\n\n ${media.mobile`\n padding-left: 8px;\n `}\n }\n }\n\n td + td,\n th {\n text-align: center;\n }\n }\n\n thead {\n tr {\n &.bottom-line,\n &:last-child {\n td,\n th {\n border-bottom: 18px solid ${Color.ritualBlue};\n }\n }\n }\n }\n\n tbody {\n tr {\n\n &:first-child {\n td,\n th {\n font-weight: 500;\n }\n }\n\n &.bottom-line {\n td,\n th {\n border-bottom: 9px solid ${Color.ritualBlue};\n }\n }\n\n &:first-child {\n td,\n th {\n border-bottom: 4px solid ${Color.ritualBlue};\n }\n }\n }\n }\n }\n`;\n\nexport default class SupplementFacts extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n open: false,\n };\n this.handleEscDown = this.handleEscDown.bind(this);\n }\n\n componentDidMount() {\n window.addEventListener(\"keydown\", this.handleEscDown);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"keydown\", this.handleEscDown);\n }\n\n handleEscDown(e) {\n if (e.keyCode === 27) {\n this.close();\n }\n }\n\n open() {\n this.setState({\n open: true,\n });\n }\n\n close() {\n this.setState({\n open: false,\n });\n }\n\n renderTable() {\n let { supplementFacts } = this.props;\n\n if (!supplementFacts) return null;\n\n return this.generateTable(supplementFacts);\n }\n\n generateTable(data) {\n return (\n {\n e.stopPropagation();\n }}\n >\n \n \n | \n | \n | \n
\n \n | \n \n | \n
\n \n | \n {\" \"}\n {data.servingSize}\n | \n
\n \n | \n {\" \"}\n {data.servingsPerContainer}\n | \n
\n \n \n \n | \n \n \n | \n {data?.labels?.dv || \"% DV\"} | \n
\n {// Generate Nutrients\n this.generateIngredientRow(data.nutrients, \"nutrients\")}\n {// Generate Ingredients\n this.generateIngredientRow(data.ingredients, \"ingredients\")}\n {// Generate Notations\n data.notations &&\n data.notations.map((notation, i, array) => {\n let className = \"outline\";\n if (i + 1 === array.length) {\n className += \" no-top\";\n }\n if (array.length > 1 && i + 1 < array.length) {\n className += \" no-bottom\";\n }\n return (\n \n | \n {notation.label}\n | \n
\n );\n })}\n {data.otherIngredients && (\n \n | \n {\" \"}\n {data.otherIngredients}\n | \n
\n )}\n {data.notationReferences && (\n \n \n
\n )}\n {// Generate Notations\n data.attributions &&\n data.attributions.map((attribution, i, array) => {\n return (\n \n | \n {attribution.label}\n | \n
\n );\n })}\n \n \n );\n }\n\n generateIngredientRow(data, key) {\n if (!data) return null;\n\n return data.map((item, i, array) => {\n let className = \"outline\";\n if (i + 1 === array.length) {\n className += \" bottom-line\";\n }\n return (\n \n | \n {item.dosage} | \n {item.dv} | \n
\n );\n });\n }\n\n render() {\n let { open } = this.state;\n\n if (this.tableElementWrapper) {\n lockScroll(open, this.tableElementWrapper);\n }\n\n return (\n \n \n \n \n \n \n \n \n\n \n (this.tableElementWrapper = r)}>\n {this.renderTable()}\n
\n \n \n );\n }\n}\n","'use strict';\nvar $ = require('../internals/export');\nvar $findIndex = require('../internals/array-iteration').findIndex;\nvar addToUnscopables = require('../internals/add-to-unscopables');\nvar arrayMethodUsesToLength = require('../internals/array-method-uses-to-length');\n\nvar FIND_INDEX = 'findIndex';\nvar SKIPS_HOLES = true;\n\nvar USES_TO_LENGTH = arrayMethodUsesToLength(FIND_INDEX);\n\n// Shouldn't skip holes\nif (FIND_INDEX in []) Array(1)[FIND_INDEX](function () { SKIPS_HOLES = false; });\n\n// `Array.prototype.findIndex` method\n// https://tc39.github.io/ecma262/#sec-array.prototype.findindex\n$({ target: 'Array', proto: true, forced: SKIPS_HOLES || !USES_TO_LENGTH }, {\n findIndex: function findIndex(callbackfn /* , that = undefined */) {\n return $findIndex(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined);\n }\n});\n\n// https://tc39.github.io/ecma262/#sec-array.prototype-@@unscopables\naddToUnscopables(FIND_INDEX);\n"],"sourceRoot":""}