\n {(prices.devicePrice !== undefined) &&\n
\n \n {businessName} {prices.deviceName}:\n ${prices.devicePrice}\n
\n }\n {(prices.planPrice !== undefined) &&\n \n {threeMonthDiscount ? '3-Month Membership' : 'Membership'}:\n ${prices.planPrice}\n
\n }\n {prices.adminAccessPrice !== undefined &&\n \n Admin access:\n ${prices.adminAccessPrice}\n
\n }\n {(promoCode || threeMonthDiscount) &&\n \n \n
\n }\n \n \n Total: ${prices.total.toFixed(2)}\n
\n {threeMonthDiscount && \n \n -${threeMonthDiscount} (100% membership savings)\n \n
}\n {promoCode && \n \n -$
}\n \n Total Today:\n $
\n \n {plan.centerBanner &&\n
\n );\n};\n\nPlanChoice.propTypes = {\n plan: PropTypes.object.isRequired,\n onSelected: PropTypes.func.isRequired,\n isSelected: PropTypes.bool.isRequired\n};\n","import React from \"react\";\nimport * as PropTypes from \"prop-types\";\n\nexport const ScaleFeature = ({icon, title, description}) => (\n \n {plan.centerBanner}\n
\n }\n onSelected(plan)}>\n
\n \n {plan.displayName}\n
\n\n \n {`$${plan.price}/${plan.frequencyType}`}\n
\n\n\n {plan.tagLine1 &&\n \n ![\"star\"](\"/img/buyNow/shapa-scale/star.svg\")
\n
\n }\n \n {plan.tagLine1}
\n\n 
\n
\n);\n\nScaleFeature.propTypes = {\n icon: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n};\n\n","import * as PropTypes from 'prop-types';\nimport React, {useContext, useEffect, useState} from \"react\";\nimport { buyNowContext } from \"../BuyNow\";\nimport PromoAmount from \"./PromoAmount\";\nimport {PROMO_TYPES} from \"../../utils/promoCode\";\nimport { applyPromoCode } from \"../../utils/pricingHelper\";\n\nconst PromoCode = ({ disableEntry, hideDecimalIfWhole, className, specialButtonColor }) => {\n const { lineItems, purchaseFlow, promoCode, setPromoCode, PURCHASE_STAGES, purchaseStage, promotional, urlPromoCode, referralCode } = useContext(buyNowContext);\n\n const [promoCodeText, setPromoCodeText] = useState(\"\");\n const [errorMessage, setErrorMessage] = useState(null);\n\n const apply = (promoCodeTextOverride, displayErrors = true, referralCode = null) => {\n setErrorMessage(null);\n applyPromoCode(promoCodeTextOverride || promoCodeText, purchaseFlow, lineItems, referralCode)\n .then(validPromoCode => setPromoCode(validPromoCode))\n .catch(error => {\n if (displayErrors) {\n setErrorMessage(error);\n setPromoCode(null);\n }\n });\n };\n\n useEffect(() => {\n // A referral code takes precedence over anything. Users get a discount when using a referral code via a special promo code.\n if (referralCode)\n apply('REFERRAL_CODE_DISCOUNT', false, referralCode);\n // Per conversation with Clayton, a promo code in the URL query string takes precedence over an active promotion.\n else if (urlPromoCode)\n apply(urlPromoCode, false);\n else if (promotional && purchaseFlow === promotional.purchaseFlow)\n apply(promotional.promoCode.code, false);\n }, [lineItems]);\n\n // Render nothing if there are no line items.\n if (!lineItems.length)\n return null;\n\n // If the user hasn't entered a promo code yet, and we have disabled the entry of a promo code, render nothing.\n if (!promoCode && disableEntry)\n return null;\n\n const scrollTop = ()=> {\n if(purchaseStage !== PURCHASE_STAGES.PRODUCT_SELECTION)\n {\n window.scrollTo(0, 0)\n }\n };\n\n const promoCodeAppliedMessage = promoCode && promoCode.appliedMessage && promoCode.appliedMessage.trim().length > 0 ? promoCode.appliedMessage : \"Promo code applied!\";\n\n return (\n \n \n {title}{' '}\n \n {description}\n
\n\n {promoCode ?\n purchaseStage === PURCHASE_STAGES.PRODUCT_SELECTION ?\n \n apply()}\n >\n Apply\n \n {errorMessage &&\n \n }\n
\n \n \n {promoCodeAppliedMessage}\n \n
\n :\n \n
\n :\n \n
\n \n
\n Promo code
\n{promoCode.promoCodeText}
\n\n \n { // For a 'sub delay' promo type, we'll show a generic \"Applied!\" message since this produces no monetary discount, just extra free days for your subscription.\n promoCode.promoType === PROMO_TYPES.SUB_DELAY ?\n \"Applied!\"\n :\n - $ \n }\n \n
\n \n setPromoCodeText(event.target.value)}\n />\n
\n \n {errorMessage}\n
\n }\n\n \n
\n );\n}\n","import clsx from \"clsx\";\r\nimport {Pagination} from \"swiper\";\r\nimport React, {useContext, useMemo, useState} from \"react\";\r\nimport {Swiper, SwiperSlide} from \"swiper/react\";\r\n\r\nimport {buyNowContext} from \"../BuyNow\";\r\nimport PriceView from \"../common/PriceView\";\r\nimport {PlanChoice} from \"./shapa-wp/PlanChoiceNew\";\r\nimport {ScaleFeature} from \"./shapa-wp/ScaleFeature\";\r\nimport {PLAN_NAMES, PRODUCT_CATEGORIES} from \"../../../../constants\";\r\nimport PromoCode from \"../common/PromoCode\";\r\nimport LineItem from \"../../utils/LineItem\";\r\nimport { FreeScaleOffer } from \"../common/FreeScaleOffer\";\r\n\r\nconst FeatureContent = [{\r\n icon: \"/img/buyNow/shapa-scale/motivating-missions.svg\",\r\n featureTitle: \"Motivating missions\",\r\n featureDescription: \"personalized toward your health & wellness goals\"\r\n}, {\r\n icon: \"/img/buyNow/shapa-scale/shapa-scale.svg\",\r\n featureTitle: \"Anxiety-free measurements\",\r\n featureDescription: \"that eliminate distractions, enabling a clear vision to achieve your goals\"\r\n}, {\r\n icon: \"/img/buyNow/shapa-scale/mindful-monitoring.svg\",\r\n featureTitle: \"Mindful monitoring\",\r\n featureDescription: \"of daily activity and eating habits for enhanced mental and physical well-being\"\r\n},];\r\nconst ProductImages = [\"/img/buyNow/shapa-scale/product-image-1.jpg\", \"/img/buyNow/shapa-scale/product-image-2.jpg\", \"/img/buyNow/shapa-scale/product-image-3.jpg\"];\r\n\r\nconst AsSeenLogos = [\"/img/buyNow/shapa-scale/as-seen-1.svg\", \"/img/buyNow/shapa-scale/as-seen-2.svg\", \"/img/buyNow/shapa-scale/as-seen-3.svg\",];\r\n\r\nconst bellowHeroLogos = [{\r\n icon: \"/img/buyNow/shapa-scale/lifetime-warranty-badge.svg\", line1: \"Lifetime\", line2: \"Warranty\", style: \"d-flex\"\r\n}, {\r\n icon: \"/img/buyNow/shapa-scale/money.svg\", line1: \"30 Day Money\", line2: \"Back Guarantee\", style: \"d-flex\"\r\n}, {\r\n icon: \"/img/buyNow/shapa-scale/shipping-truck.svg\",\r\n line1: \"Free Shipping\",\r\n line2: \"Across USA\",\r\n style: \"d-none d-lg-flex\"\r\n}, {\r\n icon: \"/img/buyNow/shapa-scale/fsa-card.svg\",\r\n line1: \"FSA Eligible\",\r\n line2: \"Please contact us at \\nhsa@shapa.me to purchase \\nusing your HSA account.\",\r\n style: \"d-none d-lg-flex\",\r\n subTextStyle: \"badge-sub-txt\"\r\n},];\r\n\r\nconst ShapaProductSelection = () => {\r\n const {\r\n lineItems,\r\n planProducts,\r\n scaleProducts,\r\n PURCHASE_STAGES,\r\n removeLineItems,\r\n setLineItems,\r\n setPurchaseStage,\r\n setLineItemsByCategory,\r\n } = useContext(buyNowContext);\r\n\r\n const { selectedScale, selectedPlan, yearlyPlan } = useMemo(() => {\r\n const scaleLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.SCALE);\r\n const planLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.MEMBERSHIP);\r\n const yearlyPlan = planProducts.find(plan => plan.name === PLAN_NAMES.YEARLY);\r\n const selectedScale = scaleLineItem ? scaleLineItem.product : null;\r\n const selectedPlan = planLineItem ? planLineItem.product : null;\r\n\r\n return { selectedScale, selectedPlan, yearlyPlan };\r\n }, [lineItems, planProducts]);\r\n const [alreadyHasScale, setAlreadyHasScale] = useState(!selectedScale);\r\n const [selectedProductImage, setSelectedProductImage] = useState(ProductImages[0]);\r\n\r\n const proceedToShippingHandle = () => {\r\n setPurchaseStage(PURCHASE_STAGES.SHIPPING);\r\n };\r\n\r\n const onCheckingAlreadyHaveScale = (event) => {\r\n setAlreadyHasScale(event.target.checked);\r\n\r\n // If the user already has a scale, we'll remove all line items and they can choose a plan.\r\n // If the user does not already have a scale, we need to explicitly set the scale/plan, because as of now, there are no choices for the user.\r\n const lineItems = [];\r\n if (!event.target.checked) {\r\n lineItems.push(new LineItem({product: scaleProducts[0], quantity: 1}));\r\n lineItems.push(new LineItem({product: planProducts.find(p => p.default), quantity: 1}));\r\n }\r\n\r\n setLineItems(lineItems);\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {ProductImages.map((logo) => (\r\n ))}\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n {ProductImages\r\n .filter((image) => (image !== selectedProductImage))\r\n .map((image) => (
\r\n \r\n {\r\n setSelectedProductImage(image)\r\n }}/>\r\n
))}\r\n \r\n AS SEEN ON:\r\n
\r\n \r\n {AsSeenLogos.map((logo) => ())}\r\n
\r\n \r\n \r\n \r\n ADD TO CART\r\n \r\n
\r\n \r\n \r\n {planProducts.filter(plan => !plan.isDelayedMonthlyPlan).map((plan) => {\r\n return (\r\n {\r\n if (plan !== selectedPlan) {\r\n setLineItemsByCategory([{product: plan, quantity: 1}]);\r\n }\r\n }}\r\n />\r\n )\r\n })}\r\n
\r\n \r\n ![\"starts\"](\"/img/buyNow/shapa-scale/starts.svg\"/)
\r\n Over 2,500 reviews\r\n
\r\n \r\n Over 2,500 reviews\r\n Numberless Scale
\r\n\r\n \r\n Over 2,500 reviews\r\n
\r\n\r\n \r\n Over 2,500 reviews\r\n We help you develop good habits, track your health, and stay\r\n motivated without the\r\n anxiety of a\r\n traditional scale. Our numberless system helps you stay focused on developing healthy habits that\r\n naturally guide you to the body you've always wanted.
\r\n\r\n\r\n {FeatureContent.map(({icon, featureTitle, featureDescription}) => (\r\n ))}\r\n
\r\n\r\n \r\n
\r\n $99
\r\n\r\n onCheckingAlreadyHaveScale(event)}\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n ![\"gift\"\r\n](\"/img/buyNow/shapa-scale/gift.svg\"/)
\r\n
\r\n \r\n \r\n Enjoy your first 3 months on us.\r\n
\r\n\r\n After 3 months, members will be billed ${yearlyPlan.price} annually for their membership. Members can alternatively opt\r\n\t\t\t\t\t\t\t\tinto a monthly or lifetime subscription. Active membership is required for uninterrupted product access\r\n\t\t\t\t\t\t\t\tper member.\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
))}\r\n \r\n
\r\n \r\n {line1}\r\n
\r\n\r\n {line2}\r\n
\r\n\n {\n props.onHovered(props.device)\n trackingScripts.facebook(isProduction, FACEBOOK_EVENTS.VIEW_CONTENT_SCALE, fbTrackingScaleObject, \"trackCustom\");\n }}\n onMouseOut={() => props.onHovered(null)}\n onClick={() => {\n props.onSelected(props.device);\n trackingScripts.facebook(isProduction, FACEBOOK_EVENTS.VIEW_CONTENT_SCALE, fbTrackingScaleObject, \"trackCustom\");\n }}\n >\n {deviceName}\n \n\n {/* In some cases, we may want to display sub-text under the device option (ex. for refurbished MyClearStep scales, we may say 'Color may vary'. */}\n {subText &&\n
\n );\n};\n\nDeviceChoice.propTypes = {\n device: PropTypes.object.isRequired,\n onSelected: PropTypes.func.isRequired,\n isClicked: PropTypes.bool.isRequired,\n selectedDevice: PropTypes.object\n};\n\nDeviceChoice.defaultProps = {\n selectedDevice: null\n};\n\nexport default DeviceChoice;\n","import React from 'react';\nimport * as PropTypes from 'prop-types';\nimport DeviceChoice from \"./DeviceChoice\";\n\nconst DeviceChoices = (props) => {\n return (\n \n {/* We only want the subtext to show when the device is selected. To keep the UI layout consistent, we'll render a blank space when the device isn't selected. */}\n {props.selectedDevice && props.selectedDevice.id === props.device.id ? subText : NON_BREAKING_SPACE}\n
\n }\n \n {\n props.devices.map(device =>\n props.onHovered(device)}\n onSelected={device => props.onDeviceSelected(device)}\n isClicked={props.selectedDevice ? props.selectedDevice.id === device.id : false}\n />\n )\n }\n\n
\n );\n};\n\nDeviceChoices.propTypes = {\n devices: PropTypes.array.isRequired,\n onHovered: PropTypes.func.isRequired,\n onDeviceSelected: PropTypes.func.isRequired,\n selectedDevice: PropTypes.object\n};\n\nexport default DeviceChoices;","import _ from \"lodash\";\r\nimport * as PropTypes from 'prop-types';\r\nimport React, { useContext, useState } from \"react\";\r\nimport promoCodesApi from \"../../../../api/promoCodesApi\";\r\nimport { buyNowContext } from \"../BuyNow\";\r\nimport PromoAmount from \"./PromoAmount\";\r\n\r\nconst ReferralCode = ({ disableEntry, hideDecimalIfWhole, className }) => {\r\n const { referralCode, referralCodeValid } = useContext(buyNowContext);\r\n\r\n return (\r\n \r\n
\r\n }\r\n \r\n \r\n {`Referral code ${referralCode} applied.`}\r\n \r\n
\r\n \n {(isClinicianPage ? clinicianIcons : otherPagesIcons).map((icons) => {\n return (
)\n })}\n
\n )\n};\n","import React, { useContext, useState } from \"react\";\n\nimport ProductPreview from \"./ProductPreview\";\nimport PriceView from \"../common/PriceView\";\nimport DeviceChoices from \"./DeviceChoices\";\nimport PromoCode from \"../common/PromoCode\";\nimport TotalPrice from \"../common/TotalPrice\";\nimport ReferralCode from \"../common/ReferralCode\";\nimport { buyNowContext, shippingMethods } from \"../BuyNow\";\nimport { DEVICE_TYPES } from \"../../../../constants\";\nimport { GuaranteesIcons } from \"../common/GuaranteesIcons\";\n\n/**\n * This product selection component can be used for multiple purchase flows. There is no text specific to ClearStep / Shapa unless it is explicitly coded per the current purchase flow.\n */\nconst GeneralAddonSelection = () => {\n const {\n appInfo,\n lineItems,\n PURCHASE_STAGES,\n bpDeviceProducts,\n setPurchaseStage,\n shippingStageState,\n setShippingStageState,\n setLineItemsByCategory,\n } = useContext(buyNowContext);\n\n const businessName = appInfo.name;\n const URLS = {\n \"Shapa\": 'https://www.myshapa.com/orders/buy-now',\n \"MyClearStep\": 'https://store.myclearstep.com/orders/buy-now',\n };\n\n const deviceLineItem = lineItems.find(li => [DEVICE_TYPES.BP_DEVICE].includes(li.product.deviceType));\n const selectedDevice = deviceLineItem ? deviceLineItem.product : null;\n const isActiveCheckoutSection = selectedDevice;\n const isAdolescentBPDevice = selectedDevice?.name.includes(\"Adolescent\");\n\n const [previewedDevice, setPreviewedDevice] = useState();\n\n const proceedToShipping = () => {\n setPurchaseStage(PURCHASE_STAGES.SHIPPING);\n };\n\n return (\n )\n })}\n \n
\n );\n};\n\nexport default GeneralAddonSelection;\n","import React from \"react\";\r\nimport * as PropTypes from \"prop-types\";\r\n\r\n/**\r\n * Return a string representing the price of a product.\r\n */\r\nconst ProductPrice = ({ product, quantity, priceOverride, hideDecimalIfWhole }) => {\r\n let result;\r\n\r\n if (product)\r\n result = (priceOverride === null ? product.price : priceOverride) * quantity || 0;\r\n else\r\n result = 0;\r\n\r\n if (hideDecimalIfWhole && result % 1 === 0)\r\n result = String(result);\r\n else\r\n result = result.toFixed(2);\r\n\r\n return result;\r\n};\r\n\r\nProductPrice.propTypes = {\r\n hideDecimalIfWhole: PropTypes.bool,\r\n product: PropTypes.object,\r\n quantity: PropTypes.number,\r\n priceOverride: PropTypes.number\r\n};\r\n\r\nProductPrice.defaultProps = {\r\n hideDecimalIfWhole: false,\r\n quantity: 1,\r\n priceOverride: null,\r\n product: { price: 0 }\r\n};\r\n\r\nexport default ProductPrice;","import clsx from \"clsx\";\nimport React, { useContext } from \"react\";\nimport * as PropTypes from \"prop-types\";\nimport { buyNowContext } from \"../BuyNow\";\nimport trackingScripts from \"../../utils/trackingScripts\";\nimport { createPlanObject, FACEBOOK_EVENTS } from \"../../utils/facebookHelper\";\nimport ProductPrice from \"../common/ProductPrice\";\nimport { useViewport } from \"../../utils/custom_hooks\";\nimport {PLAN_NAMES} from \"../../../../constants\";\n\nconst PlanChoice = (props) => {\n const { isProduction, promotional } = useContext(buyNowContext);\n const fbTrackingPlanObject = createPlanObject(props.plan);\n const { isSMView } = useViewport();\n\n const immediatePlan = () => {\n return (\n \n
\n \n {`${businessName} Blood Pressure Monitor`}\n
\n\n
\n \n
\n \n
\n\n \n \n \n \n\n \n setPreviewedDevice(device)}\n onDeviceSelected={device => {\n const lineItemUpdates = [];\n\n // If a scale doesn't have shipping options available, make sure our state reflects 'standard' shipping.\n if (!device.shippingOptionsAvailable)\n setShippingStageState({...shippingStageState, shippingMethod: shippingMethods.standard});\n\n lineItemUpdates.push({ product: device, quantity: 1 });\n setLineItemsByCategory(lineItemUpdates);\n }}\n />\n \n \n
\n \n {`Your ${businessName} purchase includes:`}\n
\n\n\n
\n - \n
- \n \n
\n {`${businessName}${isAdolescentBPDevice ? \" adolescent\" : \"\"} blood pressure monitor`}\n
\n \n\n {isAdolescentBPDevice &&\n <>\n - \n \n
\n {\"Designed for Adolescents (ages 8-19)\"}\n
\n \n\n - \n \n
\n {\"Medical-grade, FDA-approved\"}\n
\n \n \n }\n\n - \n \n
\n {`Access to ${businessName} app (available in iOS and Android)`}\n
\n \n \n - \n \n
\n {`Connection with your team so they can track progress securely through the ${businessName} admin portal`}\n
\n \n
\n
\n\n \n\n \n {`${businessName} blood pressure monitor:`}\n
\n\n\n {`The ${businessName} blood pressure monitor serves as an add-on for ${businessName} clients that already have a ${businessName} scale and active membership. If you do not already have an active membership or scale, please purchase `}\n here.\n
\n \n \n \n \n
\n \n
\n\n \n ${
\n\n \n\n
\n \n
\n\n Subtotal
\n${
\n\n \n\n \n
\n \n Sales tax and shipping will be calculated at checkout\n
\n\n
\n )\n };\n\n // Displays a \"delayed monthly\" plan with a focus on the effective monthly price.\n const delayedMonthlyPlanMonthlyFocus = () => {\n return (\n \n
\n\n {props.plan.displayName}
\n\n {\n props.plan.name === PLAN_NAMES.YEARLY &&\nSAVE 20%
\n }\n\n {\n props.plan.name === PLAN_NAMES.THREE_YEAR &&\nSAVE 30%
\n }\n\n $
\n
\n\n {\n props.plan.tagLine1 &&\n $
\n {props.plan.tagLine1}
\n }\n\n {\n props.plan.tagLine2 &&\n{props.plan.tagLine2}
\n }\n\n {props.plan.centerBanner &&\n\n
\n }\n \n {props.plan.centerBanner}\n
\n \n
\n );\n };\n\n // Displays a \"delayed monthly\" plan with a focus on the total price of the initial membership.\n const delayedMonthlyPlanTotalFocus = () => {\n const discountedPromoPrice = props.plan.promotionalEnabledForPlan && promotional.promoCode.promoType === \"f\" ? props.plan.price - promotional.promoCode.amount : null;\n\n return (\n \n
\n\n\n {props.plan.displayName}
\n\n {\n props.plan.tagLine1 &&\n{props.plan.tagLine1}
\n }\n\n {\n props.plan.tagLine2 &&\n{props.plan.tagLine2}
\n }\n\n \n $
\n\n
\n\n {props.plan.centerBanner &&\n Amounts to
\n\n\n $
\n\n per month
\n\n
\n }\n\n \n {props.plan.centerBanner}\n
\n \n
\n );\n };\n\n // We have slightly different formatting for different types of plans.\n const buttonContent = props.plan.isDelayedMonthlyPlan ? delayedMonthlyPlanTotalFocus() : immediatePlan();\n\n return (\n \n
\n\n {/* Show the discounted promo price if applicable. */}\n {discountedPromoPrice &&\n \n
\n\n {/* Show a promo icon if the plan is covered by the promo as long as we have enough room to display the icon. */}\n {props.plan.promotionalEnabledForPlan && promotional.planIconImage && !isSMView &&\n {props.plan.displayName}
\n {\n props.plan.tagLine1 &&\n{props.plan.tagLine1Monthly}
\n }\n\n \n $
\n
\n }\n\n {/* If there is a discounted promo price, we'll display the original plan price with strikethrough text. */}\n \n $
\n \n \n $
\n
\n\n {props.plan.centerBanner &&\n \n $
\n \n
\n }\n \n {props.plan.centerBanner}\n
\n \n {\n props.plans.map(plan =>\n props.onPlanSelected(plan)}\n isClicked={props.selectedPlan ? props.selectedPlan.id === plan.id : false}\n />\n )\n }\n
\n );\n};\n\nPlanChoices.propTypes = {\n plans: PropTypes.array.isRequired,\n onPlanSelected: PropTypes.func.isRequired,\n selectedPlan: PropTypes.object\n};\n\nexport default PlanChoices;","import * as PropTypes from 'prop-types';\r\nimport React, {useState} from \"react\";\r\n\r\nconst RangeSelector = ({ value, minVal, maxVal, onChange, buttonStyle, buttonClass, textStyle, textClass, containerClass, containerStyle, onMinBound, onMaxBound }) => {\r\n function attemptChange(newValue) {\r\n if (minVal !== null && newValue < minVal) {\r\n onMinBound();\r\n return;\r\n }\r\n\r\n if (maxVal !== null && newValue > maxVal) {\r\n onMaxBound();\r\n return;\r\n }\r\n\r\n onChange(newValue);\r\n }\r\n\r\n return (\r\n \r\n \r\n {value}\r\n \r\n
\r\n );\r\n};\r\n\r\nRangeSelector.propTypes = {\r\n value: PropTypes.number,\r\n minVal: PropTypes.number,\r\n maxVal: PropTypes.number,\r\n onChange: PropTypes.func,\r\n buttonStyle: PropTypes.object,\r\n buttonClass: PropTypes.string,\r\n textStyle: PropTypes.object,\r\n textClass: PropTypes.string,\r\n containerStyle: PropTypes.object,\r\n containerClass: PropTypes.string,\r\n onMinBound: PropTypes.func,\r\n onMaxBound: PropTypes.func\r\n};\r\n\r\nRangeSelector.defaultProps = {\r\n initialVal: 1,\r\n minVal: null,\r\n maxVal: null,\r\n onChange: null,\r\n buttonStyle: { border: \"none\", borderRadius: \"5px\", width: \"35px\", background: \"rgb(239, 239, 239)\" },\r\n buttonClass: \"\",\r\n textStyle: undefined,\r\n textClass: \"\",\r\n containerStyle: undefined,\r\n containerClass: \"\",\r\n onMinBound: () => { },\r\n onMaxBound: () => { }\r\n};\r\n\r\nexport default RangeSelector;\r\n","import * as PropTypes from 'prop-types';\r\nimport React, { useContext } from \"react\";\r\nimport { buyNowContext } from \"../BuyNow\";\r\nimport RangeSelector from \"./RangeSelector\";\r\n\r\nconst QuantitySelector = ({ quantityValue, onChange, minVal, maxVal, readOnly, buttonStyle, buttonClass, textStyle, textClass, containerStyle, containerClass, onMinBound, onMaxBound }) => {\r\n const { quantitiesEnabled } = useContext(buyNowContext);\r\n\r\n if (!quantitiesEnabled)\r\n return null;\r\n\r\n if (readOnly)\r\n return {quantityValue}
\r\n\r\n return (\r\n Regular\n
\n Due to COVID-19 there may be delays in delivery\n
{shippingStageState.shippingMethod.label}
\n }\n}\n\n/**\n * Get the formatted next charge date given the plan and optional promo code.\n * @param {Object} plan\n * @param {PromoCode} [promoCode]\n * @returns {*}\n */\nexport const formattedNextChargeDate = (plan, promoCode) => {\n const resultMoment = moment(plan.nextChargeDate);\n\n if (promoCode && promoCode.promoType === PROMO_TYPES.SUB_DELAY)\n resultMoment.add(promoCode.amount, \"days\");\n\n return resultMoment.format(\"MMMM D, YYYY\");\n};\n\n/**\n * Determines if PayPal can be used for an order with the given line items.\n * @param {LineItem[]} lineItems\n * @returns {Boolean}\n */\nexport const isPayPalSupported = lineItems => {\n let numMembershipProducts = 0;\n\n lineItems.forEach(lineItem => {\n if (lineItem.product.category === PRODUCT_CATEGORIES.MEMBERSHIP)\n numMembershipProducts += lineItem.quantity;\n });\n\n // PayPal can't be used when we need to create multiple subscriptions.\n return numMembershipProducts <= 1;\n};","import React, {useContext} from \"react\";\r\nimport * as PropTypes from \"prop-types\";\r\nimport { buyNowContext } from \"../BuyNow\";\r\nimport {formattedNextChargeDate} from \"../../utils/orderHelper\";\r\nimport {PRODUCT_CATEGORIES} from \"../../../../constants\";\r\n\r\n/**\r\n * Return a string representing the recurring plan price.\r\n */\r\nconst RecurringPlanPrice = ({ hideDecimalIfWhole }) => {\r\n const { lineItems, plansConfiguration } = useContext(buyNowContext);\r\n\r\n const planLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.MEMBERSHIP);\r\n const selectedPlan = planLineItem ? planLineItem.product : null;\r\n\r\n if (!selectedPlan)\r\n return \"\";\r\n\r\n let result;\r\n\r\n if (selectedPlan.monthsDelayed)\r\n result = plansConfiguration.delayedMonthlyPrice;\r\n else\r\n result = selectedPlan.price;\r\n\r\n // Factor in the quantity.\r\n result *= planLineItem.quantity;\r\n\r\n if (hideDecimalIfWhole && result % 1 === 0)\r\n result = String(result);\r\n else\r\n result = result.toFixed(2);\r\n\r\n return result;\r\n};\r\n\r\nRecurringPlanPrice.propTypes = {\r\n hideDecimalIfWhole: PropTypes.bool\r\n};\r\n\r\nRecurringPlanPrice.defaultProps = {\r\n hideDecimalIfWhole: false\r\n};\r\n\r\nexport default RecurringPlanPrice;","import _ from \"lodash\";\r\nimport React, { useContext, useState } from \"react\";\r\n\r\nimport PlanChoices from \"./PlanChoices\";\r\nimport ProductPreview from \"./ProductPreview\";\r\nimport DeviceChoices from \"./DeviceChoices\";\r\nimport PromoCode from \"../common/PromoCode\";\r\nimport PriceView from \"../common/PriceView\";\r\nimport TotalPrice from \"../common/TotalPrice\";\r\nimport ReferralCode from \"../common/ReferralCode\";\r\nimport QuantitySelector from \"../common/QuantitySelector\";\r\nimport { buyNowContext, shippingMethods } from \"../BuyNow\";\r\nimport RecurringPlanPrice from \"../common/RecurringPlanPrice\";\r\nimport { formattedNextChargeDate } from \"../../utils/orderHelper\";\r\nimport {DEVICE_TYPES, PRODUCT_CATEGORIES, PURCHASE_FLOWS} from \"../../../../constants\";\r\nimport { GuaranteesIcons } from \"../common/GuaranteesIcons\";\r\n\r\n/**\r\n * This product selection component can be used for multiple purchase flows. There is no text specific to ClearStep / Shapa unless it is explicitly coded per the current purchase flow.\r\n */\r\nconst GeneralProductSelection = () => {\r\n const {\r\n promoCode,\r\n appInfo,\r\n PURCHASE_STAGES,\r\n selectedPlanId,\r\n setPurchaseStage,\r\n shippingStageState,\r\n setShippingStageState,\r\n scaleBpBundleProducts,\r\n scaleProducts,\r\n planProducts,\r\n quantitiesEnabled,\r\n removeLineItems,\r\n setLineItemsByCategory,\r\n lineItems,\r\n purchaseFlow\r\n } = useContext(buyNowContext);\r\n\r\n const businessName = appInfo.name;\r\n\r\n const deviceLineItem = lineItems.find(li => [DEVICE_TYPES.SCALE, DEVICE_TYPES.SCALE_BP_BUNDLE].includes(li.product.deviceType));\r\n const planLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.MEMBERSHIP);\r\n const selectedDevice = deviceLineItem ? deviceLineItem.product : null;\r\n const selectedPlan = planLineItem ? planLineItem.product : null;\r\n const isSelectedDeviceBundle = selectedDevice ? selectedDevice.deviceType === DEVICE_TYPES.SCALE_BP_BUNDLE : false;\r\n\r\n const [previewedDevice, setPreviewedDevice] = useState();\r\n const [alreadyHasDevice, setAlreadyHasDevice] = useState(false);\r\n const [quantity, setQuantity] = useState(planLineItem ? planLineItem.quantity : 1);\r\n const isActiveDeviceChoice = !alreadyHasDevice;\r\n const isActiveMemberShipSection = alreadyHasDevice || selectedDevice;\r\n const isActiveCheckoutSection = (alreadyHasDevice || selectedDevice) && selectedPlan;\r\n const isAdolescentBPDevice = selectedDevice?.name.includes(\"Adolescent\");\r\n\r\n const onAlreadyHasDevice = event => {\r\n setAlreadyHasDevice(event.target.checked);\r\n\r\n // When this option is either checked or unchecked, let's clear the selected scale and reset the promo code.\r\n removeLineItems(deviceLineItem);\r\n };\r\n\r\n const totalPriceDetailsContent = () => {\r\n if (!isActiveMemberShipSection) {\r\n return `Please select a ${businessName} scale and a plan`;\r\n }\r\n else if (!isActiveCheckoutSection) {\r\n return \"Please select a plan\";\r\n }\r\n else if (selectedPlan?.recurringPlan) {\r\n return (\r\n \r\n {`Your next payment will start on ${formattedNextChargeDate(selectedPlan, promoCode)} at $`}\r\n \r\n {\r\n
\r\n );\r\n};\r\n\r\nexport default GeneralProductSelection;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst Subtotal = ({ style, className, lineItem, defaultPrice }) => {\r\n let priceDisplay;\r\n\r\n if (lineItem) {\r\n priceDisplay = (\r\n \r\n
\r\n \r\n {`${businessName} numberless scale with monthly plan`}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n setPreviewedDevice(device)}\r\n onDeviceSelected={device => {\r\n const lineItemUpdates = [];\r\n\r\n // If a scale doesn't have shipping options available, make sure our state reflects 'standard' shipping.\r\n if (!device.shippingOptionsAvailable)\r\n setShippingStageState({...shippingStageState, shippingMethod: shippingMethods.standard});\r\n\r\n lineItemUpdates.push({ product: device, quantity });\r\n\r\n // Upon selecting a device, let's select the default plan.\r\n // If a plan is selected from elsewhere, we'll use that.\r\n if (!selectedPlan) {\r\n if (selectedPlanId) {\r\n const indexOfSelectedPlan = planProducts.findIndex((plan) => plan.id === parseInt(selectedPlanId));\r\n lineItemUpdates.push({ product: planProducts[indexOfSelectedPlan], quantity });\r\n } else\r\n lineItemUpdates.push({ product: planProducts.find(p => p.default), quantity });\r\n }\r\n\r\n setLineItemsByCategory(lineItemUpdates);\r\n }}\r\n />\r\n \r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n {`Going truly numberless. Your ${businessName} purchase includes:`}\r\n
\r\n\r\n\r\n
\r\n - \r\n
- \r\n \r\n
\r\n {`${businessName} ${selectedDevice?.deviceType === DEVICE_TYPES.SCALE_BP_BUNDLE ? `numberless scale and${isAdolescentBPDevice ? \" adolescent\" : \"\"} blood pressure monitor` : \"numberless scale\"}`}\r\n
\r\n \r\n - \r\n \r\n
\r\n {\"Medical-grade, FDA-approved\"}\r\n
\r\n \r\n {isAdolescentBPDevice &&\r\n - \r\n \r\n
\r\n {\"Designed for Adolescents (ages 8-19)\"}\r\n
\r\n \r\n }\r\n - \r\n \r\n
\r\n {`Access to ${businessName} app (available in iOS and Android)`}\r\n
\r\n \r\n - \r\n \r\n
\r\n {`Connection with your team so they can track progress securely through the ${businessName} admin portal`}\r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n\r\n \r\n {`${businessName} products`}\r\n
\r\n\r\nFeel secure when stepping on the scale without the anxiety of seeing numbers or having to rely on others.
\r\n {\r\n purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_END_USER && isSelectedDeviceBundle\r\n ? * Scale color may vary between black and oak\r\n : null\r\n }\r\n \r\n onAlreadyHasDevice(event)}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n
\r\n\r\n \r\n \r\n { setLineItemsByCategory([{ product: plan, quantity }]); }}\r\n />\r\n\r\n {!_.isEmpty(selectedPlan) && selectedPlan.recurringPlan &&\r\n \r\n\r\n
\r\n\r\n {quantitiesEnabled &&\r\n
\r\n\r\n Monthly plan
\r\n\r\n \r\n A monthly plan connects you to your treatment team through our 100% HIPAA-compliant platform with strong encryption.\r\n \r\n\r\n\r\n \r\n {\"Starting today, you will automatically be charged $\"}\r\n {
\r\n }\r\n \r\n\r\n {quantitiesEnabled &&\r\n
\r\n {\r\n setQuantity(val);\r\n\r\n const lineItemUpdates = [];\r\n if (selectedDevice) lineItemUpdates.push({ product: selectedDevice, quantity: val });\r\n if (selectedPlan) lineItemUpdates.push({ product: selectedPlan, quantity: val });\r\n\r\n setLineItemsByCategory(lineItemUpdates);\r\n }}/>\r\n
\r\n }\r\n\r\n Quantity
\r\n\r\n ${
\r\n
\r\n \r\n
\r\n\r\n Subtotal
\r\n${
\r\n \r\n {totalPriceDetailsContent()}\r\n
\r\n\r\n \r\n\r\n\r\n
\r\n \r\n Sales tax and shipping will be calculated at checkout\r\n
\r\n{`$${lineItem.price}`}
\r\n {lineItem.quantityDiscount > 0 &&\r\n \r\n {`You saved $${lineItem.quantityDiscount * lineItem.quantity}!`}\r\n
\r\n }\r\n {`$${Math.round(defaultPrice)}`}
;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nSubtotal.defaultProps = {\r\n style: null,\r\n className: \"\",\r\n lineItem: null\r\n};\r\n\r\nSubtotal.propTypes = {\r\n style: PropTypes.object,\r\n className: PropTypes.string,\r\n lineItem: PropTypes.object,\r\n defaultPrice: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired\r\n};\r\n\r\nexport default Subtotal;","import clsx from \"clsx\";\nimport React from \"react\";\n\nexport const PurchaseSubscriptionAcknowledgement = ({ setIsPurchaseSubscriptionAcknowledged, className }) => {\n return (\n Subtotal
\r\n {priceDisplay}\r\n\n { setIsPurchaseSubscriptionAcknowledged(event.target.checked) } }\n />\n \n
\n )\n}\n","import React from \"react\";\r\nimport * as PropTypes from \"prop-types\";\r\n\r\nconst PlanChoicesDropdown = (props) => {\r\n const options = [];\r\n\r\n if (props.placeholder)\r\n options.push()\r\n\r\n for (let i = 0; i < props.plans.length; i += 1) {\r\n const plan = props.plans[i];\r\n options.push();\r\n }\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nPlanChoicesDropdown.defaultProps = {\r\n selectClassName: \"\",\r\n optionClassName: \"\",\r\n placeholder: null\r\n};\r\n\r\nPlanChoicesDropdown.propTypes = {\r\n plans: PropTypes.array.isRequired,\r\n onPlanSelected: PropTypes.func.isRequired,\r\n selectedPlan: PropTypes.object,\r\n defaultValue: PropTypes.number,\r\n selectClassName: PropTypes.string,\r\n optionClassName: PropTypes.string,\r\n placeholder: PropTypes.string\r\n};\r\n\r\nexport default PlanChoicesDropdown;","import React, {useContext, useState} from \"react\";\n\nimport {buyNowContext} from \"../BuyNow\";\nimport QuantitySelector from \"./QuantitySelector\";\nimport Subtotal from \"../product_selection/Subtotal\";\nimport {PRODUCT_CATEGORIES} from \"../../../../constants\";\n\nexport const AdminAccessQuantity = () => {\n const {\n lineItems,\n removeLineItems,\n quantitiesEnabled,\n adminAccessProducts,\n setLineItemsByCategory,\n } = useContext(buyNowContext);\n\n const adminAccessProduct = adminAccessProducts.find(p => p.category === PRODUCT_CATEGORIES.ADMIN_ACCESS);\n const adminAccessLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.ADMIN_ACCESS);\n const [adminAccessQuantity, setAdminAccessQuantity] = useState(adminAccessLineItem ? adminAccessLineItem.quantity : 0);\n\n return (\n \n \n
\n );\n};\n","import React, { useContext, useMemo, useState } from \"react\";\r\nimport ProductPreview from \"./ProductPreview\";\r\nimport DeviceChoices from \"./DeviceChoices\";\r\nimport PromoCode from \"../common/PromoCode\";\r\nimport PriceView from \"../common/PriceView\";\r\nimport TotalPrice from \"../common/TotalPrice\";\r\nimport ReferralCode from \"../common/ReferralCode\";\r\nimport QuantitySelector from \"../common/QuantitySelector\";\r\nimport { buyNowContext, shippingMethods } from \"../BuyNow\";\r\nimport {DEVICE_TYPES, PRODUCT_CATEGORIES, PURCHASE_FLOWS} from \"../../../../constants\";\r\nimport Subtotal from \"./Subtotal\";\r\nimport { PurchaseSubscriptionAcknowledgement } from \"../common/PurchaseSubscriptionAcknowledgement\";\r\nimport PlanChoicesDropdown from \"./PlanChoicesDropdown\";\r\nimport { GuaranteesIcons } from \"../common/GuaranteesIcons\";\r\nimport {AdminAccessQuantity} from \"../common/AdminAccessQuantity\";\r\n\r\n/**\r\n * This product selection component can be used for multiple clinician purchase flows. There is no text specific to ClearStep / Shapa unless it is explicitly coded per the current purchase flow.\r\n */\r\nconst ClinicianProductSelection = () => {\r\n const {\r\n PURCHASE_STAGES,\r\n setPurchaseStage,\r\n shippingStageState,\r\n setShippingStageState,\r\n scaleBpBundleProducts,\r\n scaleProducts,\r\n adminAccessProducts,\r\n planProducts,\r\n quantitiesEnabled,\r\n lineItems,\r\n removeLineItems,\r\n setLineItemsByCategory,\r\n appInfo,\r\n purchaseFlow\r\n } = useContext(buyNowContext);\r\n\r\n const businessName = appInfo.name;\r\n const supportEmail = appInfo.supportEmail;\r\n const clientPurchaseURL = appInfo.clientPurchaseURL;\r\n\r\n const deviceLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.SCALE);\r\n const adminAccessLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.ADMIN_ACCESS);\r\n const planLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.MEMBERSHIP);\r\n const selectedPlan = planLineItem ? planLineItem.product : null;\r\n\r\n // The on-site version of the page is mostly the same, but geared for clinicians that see their clients on-site.\r\n const isCliniciansOnSite = window.location.pathname.includes(\"on-site\");\r\n\r\n const [selectedDevice, setSelectedDevice] = useState(deviceLineItem ? deviceLineItem.product : null);\r\n const [previewedDevice, setPreviewedDevice] = useState(null);\r\n const [isPurchaseSubscriptionAcknowledged, setIsPurchaseSubscriptionAcknowledged] = useState(false);\r\n const [deviceProductsEnabled, setDeviceProductsEnabled] = useState(!!deviceLineItem || isCliniciansOnSite);\r\n const [deviceQuantity, setDeviceQuantity] = useState(deviceLineItem ? deviceLineItem.quantity : 0);\r\n const [deviceQtyExceeded, setDeviceQtyExceeded] = useState(false);\r\n\r\n const licensesAreOnSiteOnly = planProducts.some(p => p.subscriptionType.includes(\"CS_SITE_LICENSE_ON_SITE_ONLY_LEVEL\"));\r\n\r\n // The admin access product is required unless the user is already a registered clinician.\r\n const isActiveCheckoutSection = useMemo(() => (\r\n deviceProductsEnabled ? ((isPurchaseSubscriptionAcknowledged || planLineItem) && (deviceLineItem || planLineItem)) : adminAccessLineItem\r\n ), [deviceProductsEnabled, isPurchaseSubscriptionAcknowledged, deviceLineItem, adminAccessLineItem, planLineItem]);\r\n\r\n const isSelectedDeviceBundle = useMemo(() => {\r\n return selectedDevice ? selectedDevice.deviceType === DEVICE_TYPES.SCALE_BP_BUNDLE : false;\r\n }, [selectedDevice]);\r\n\r\n const onToggleDeviceProducts = (event) => {\r\n setDeviceProductsEnabled(event.target.checked);\r\n\r\n // When this option is either checked or unchecked, let's clear the product line items.\r\n removeLineItems([deviceLineItem, planLineItem]);\r\n setDeviceQuantity(0);\r\n setSelectedDevice(null);\r\n setIsPurchaseSubscriptionAcknowledged(false);\r\n };\r\n\r\n const proceedToShipping = () => {\r\n setPurchaseStage(PURCHASE_STAGES.SHIPPING);\r\n };\r\n\r\n const checkoutSection = (\r\n \n {quantitiesEnabled &&\n <>\n {\n setAdminAccessQuantity(val);\n\n if (val)\n setLineItemsByCategory([{product: adminAccessProduct, quantity: val}]);\n else\n removeLineItems(adminAccessLineItem);\n }}\n />\n \n }\n
\n\n Quantity
\n\r\n
\r\n \r\n ${
\r\n
\r\n What you pay today
\r\n${
\r\n \r\n \r\n Proceed to checkout\r\n \r\n
\r\n \r\n
\r\n \r\n Sales tax and shipping will be calculated at checkout\r\n
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default ClinicianProductSelection;\r\n","import _ from \"lodash\";\r\nimport React, {useContext, useState} from \"react\";\r\n\r\nimport ProductPreview from \"./ProductPreview\";\r\nimport PriceView from \"../common/PriceView\";\r\nimport DeviceChoices from \"./DeviceChoices\";\r\nimport PromoCode from \"../common/PromoCode\";\r\nimport TotalPrice from \"../common/TotalPrice\";\r\nimport ReferralCode from \"../common/ReferralCode\";\r\nimport { buyNowContext, shippingMethods } from \"../BuyNow\";\r\nimport RecurringPlanPrice from \"../common/RecurringPlanPrice\";\r\nimport { formattedNextChargeDate } from \"../../utils/orderHelper\";\r\nimport {DEVICE_TYPES, PRODUCT_CATEGORIES} from \"../../../../constants\";\r\nimport PlanChoices from \"./PlanChoices\";\r\nimport { GuaranteesIcons } from \"../common/GuaranteesIcons\";\r\nimport {AdminAccessQuantity} from \"../common/AdminAccessQuantity\";\r\n\r\n/**\r\n * This product selection component is specific to parents using the ClearStep program for their child.\r\n */\r\nconst ClearStepParentProductSelection = () => {\r\n const {\r\n promoCode,\r\n PURCHASE_STAGES,\r\n selectedPlanId,\r\n setPurchaseStage,\r\n shippingStageState,\r\n setShippingStageState,\r\n scaleBpBundleProducts,\r\n adminAccessProducts,\r\n scaleProducts,\r\n planProducts,\r\n removeLineItems,\r\n setLineItemsByCategory,\r\n lineItems,\r\n appInfo\r\n } = useContext(buyNowContext);\r\n\r\n const deviceLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.SCALE);\r\n const planLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.MEMBERSHIP);\r\n const adminAccessLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.ADMIN_ACCESS);\r\n const selectedDevice = deviceLineItem ? deviceLineItem.product : null;\r\n const selectedPlan = planLineItem ? planLineItem.product : null;\r\n const isSelectedDeviceBundle = selectedDevice ? selectedDevice.deviceType === DEVICE_TYPES.SCALE_BP_BUNDLE : false;\r\n\r\n const businessName = appInfo.name;\r\n const isAdolescentBPDevice = selectedDevice?.name.includes(\"Adolescent\");\r\n\r\n const [previewedDevice, setPreviewedDevice] = useState();\r\n const [alreadyHasProducts, setAlreadyHasProducts] = useState(false);\r\n const [quantity, setQuantity] = useState(planLineItem ? planLineItem.quantity : 1);\r\n const isActiveDeviceChoice = !alreadyHasProducts;\r\n const isActiveMemberShipSection = selectedDevice && !alreadyHasProducts;\r\n const isActiveCheckoutSection = (adminAccessLineItem|| selectedDevice || selectedPlan) &&\r\n (alreadyHasProducts || selectedDevice) &&\r\n (alreadyHasProducts || selectedPlan);\r\n\r\n const onAlreadyHasDevice = event => {\r\n setAlreadyHasProducts(event.target.checked);\r\n\r\n // When this option is either checked or unchecked, let's clear the selected products and reset the promo code.\r\n removeLineItems([deviceLineItem, planLineItem]);\r\n };\r\n\r\n const totalPriceDetailsContent = () => {\r\n if (!isActiveMemberShipSection) {\r\n return \"Please select a MyClearStep scale and a plan\";\r\n }\r\n else if (!isActiveCheckoutSection) {\r\n return \"Please select a plan\";\r\n }\r\n else if (selectedPlan?.recurringPlan) {\r\n return (\r\n \r\n {`Your next payment will start on ${formattedNextChargeDate(selectedPlan, promoCode)} at $`}\r\n \r\n {\r\n
\r\n \r\n {`${businessName} portal access`}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n {/* When device products are disabled, place the checkout info below the admin access product. */}\r\n {!deviceProductsEnabled &&\r\n \r\n {`${businessName} portal access`}\r\n
\r\n\r\n \r\n {`A one-time registration fee grants lifetime access to the ${businessName} admin portal.`}\r\n \r\n\r\n\r\n onToggleDeviceProducts(event)}\r\n />\r\n \r\n
\r\n \r\n {checkoutSection}\r\n
\r\n }\r\n \r\n {deviceProductsEnabled && purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_CLINICIAN ? (\r\n \r\n {deviceProductsEnabled &&\r\n \r\n setPreviewedDevice(device)}\r\n onDeviceSelected={device => {\r\n // If a device doesn't have shipping options available, make sure our state reflects 'standard' shipping.\r\n if (!device.shippingOptionsAvailable)\r\n setShippingStageState({...shippingStageState, shippingMethod: shippingMethods.standard});\r\n\r\n setSelectedDevice(device);\r\n\r\n // When a user initially selects a device, the quantity should be 1.\r\n const quantity = Math.max(1, deviceQuantity);\r\n\r\n setDeviceQuantity(quantity);\r\n setLineItemsByCategory([{ product: device, quantity }]);\r\n }}\r\n />\r\n\r\n \r\n }\r\n\r\n
\r\n\r\n {/* When device products are enabled, place the checkout info below the devices. */}\r\n {deviceProductsEnabled &&\r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n Purchasing devices and a group membership allow you to utilize the {businessName} for Admins app within your clinic. You’ll have the ability to generate client accounts and seamlessly capture measurements in person without any effort by your clients.\r\n
\r\n\r\n {deviceProductsEnabled &&\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n {`${businessName} products`}\r\n
\r\n\r\n\r\n \r\n {`${businessName} products can be purchased to provide to your clients or patients in order to capture health data seamlessly from the comfort of their own home.`}\r\n \r\n
\r\n\r\n {\r\n purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_CLINICIAN && isSelectedDeviceBundle\r\n ? * Scale color may vary between black and oak\r\n : null\r\n }\r\n \r\n {quantitiesEnabled &&\r\n
\r\n\r\n \r\n \r\n
\r\n }\r\n\r\n \r\n
\r\n \r\n {\r\n setDeviceQuantity(val);\r\n setDeviceQtyExceeded(false);\r\n\r\n if (val)\r\n setLineItemsByCategory([{ product: selectedDevice, quantity: val }]);\r\n else\r\n removeLineItems(deviceLineItem);\r\n }}\r\n onMaxBound={() => setDeviceQtyExceeded(true)}\r\n />\r\n\r\n {deviceQtyExceeded &&\r\n
\r\n\r\n Quantity
\r\n\r\n For quantity greater than 10, please contact {supportEmail}\r\n
\r\n }\r\n \r\n
\r\n A subscription is required for all numberless scales and bundles. If you are not purchasing a monthly plan, your clients or patients can purchase individual subscriptions here.
\r\n\r\n {\r\n // The user selected the default option, meaning we should remove the plan item until they make a new selection.\r\n if (planId === \"placeholder\" && planLineItem) {\r\n removeLineItems(planLineItem);\r\n return;\r\n }\r\n\r\n const plan = planProducts.find(p => p.id === Number(planId));\r\n if (plan !== selectedPlan)\r\n setLineItemsByCategory([{ product: plan, quantity: 1 }]);\r\n }}\r\n />\r\n\r\n
\r\n \r\n Monthly Plan\r\n
\r\n\r\n \r\n {!licensesAreOnSiteOnly && `A monthly plan allows multiple clients to connect to ${businessName} devices in-office or remotely at a group rate. This is only required for clinicians wanting to capture measurements in-clinic for clients that have not purchased an individual membership. It is not required to access client data.`}\r\n {licensesAreOnSiteOnly && `A monthly plan is designed to support multiple clients on the ${businessName} for Admins app that pairs with MyClearStep scales and blood pressure cuffs to be used in-office. Please select the plan that matches the number of clients you will be capturing measurements for on a monthly basis. These plans can be upgraded/downgraded on a month to month basis.`}\r\n \r\n\r\n\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n If you are interested in a monthly plan for more than 100 clients, please contact us at {supportEmail}.\r\n
\r\n \r\n\r\n {/* When device products are enabled, place the checkout info below the devices. */}\r\n {deviceProductsEnabled &&\r\n
\r\n {checkoutSection}\r\n
\r\n }\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ClearStepParentProductSelection;\r\n","import React, { useContext } from \"react\";\nimport {buyNowContext} from \"../BuyNow\";\nimport {PURCHASE_FLOWS} from \"../../../../constants\";\nimport ShapaProductSelection from \"./ShapaProductSelection\";\nimport GeneralAddonSelection from \"./GeneralAddonSelection\";\nimport GeneralProductSelection from \"./GeneralProductSelection\";\nimport ClinicianProductSelection from \"./ClinicianProductSelection\";\nimport ClearStepParentProductSelection from \"./ClearStepParentProductSelection\";\n\nconst ProductSelection = () => {\n const { purchaseFlow } = useContext(buyNowContext);\n\n if (purchaseFlow === PURCHASE_FLOWS.SHAPA_END_USER)\n return \r\n
\r\n \r\n MyClearStep numberless scale with portal access\r\n
\r\n\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n MyClearStep portal access\r\n
\r\n\r\n \r\n {`A one-time registration fee grants lifetime access to the ${businessName} admin portal.`}\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n setPreviewedDevice(device)}\r\n onDeviceSelected={device => {\r\n const lineItemUpdates = [];\r\n\r\n // If a scale doesn't have shipping options available, make sure our state reflects 'standard' shipping.\r\n if (!device.shippingOptionsAvailable)\r\n setShippingStageState({...shippingStageState, shippingMethod: shippingMethods.standard});\r\n\r\n lineItemUpdates.push({product: device, quantity});\r\n\r\n // Upon selecting a device, let's select the default plan.\r\n // If a plan is selected from elsewhere, we'll use that.\r\n if (!selectedPlan) {\r\n if (selectedPlanId) {\r\n const indexOfSelectedPlan = planProducts.findIndex((plan) => plan.id === parseInt(selectedPlanId));\r\n lineItemUpdates.push({product: planProducts[indexOfSelectedPlan], quantity});\r\n } else\r\n lineItemUpdates.push({product: planProducts.find(p => p.default), quantity});\r\n }\r\n\r\n setLineItemsByCategory(lineItemUpdates);\r\n }}\r\n />\r\n \r\n onAlreadyHasDevice(event)}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n {`Going truly numberless. Your ${businessName} purchase includes:`}\r\n
\r\n\r\n\r\n
\r\n - \r\n
- \r\n \r\n
\r\n {`${businessName} ${selectedDevice?.deviceType === DEVICE_TYPES.SCALE_BP_BUNDLE ? `numberless scale and${isAdolescentBPDevice ? \" adolescent\" : \"\"} blood pressure monitor` : \"numberless scale\"}`}\r\n
\r\n \r\n - \r\n \r\n
\r\n {\"Medical-grade, FDA-approved\"}\r\n
\r\n \r\n {isAdolescentBPDevice &&\r\n - \r\n \r\n
\r\n {\"Designed for Adolescents (ages 8-19)\"}\r\n
\r\n \r\n }\r\n - \r\n \r\n
\r\n {`Access to ${businessName} app (available in iOS and Android)`}\r\n
\r\n \r\n - \r\n \r\n
\r\n {`Connection with your team so they can track progress securely through the ${businessName} admin portal`}\r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n\r\n \r\n MyClearStep products\r\n
\r\n\r\n\r\n \r\n Feel secure when stepping on the scale without the anxiety of seeing numbers or having to rely on others.\r\n \r\n
\r\n\r\n - \r\n
- \r\n \r\n
\r\n {`${businessName} ${selectedDevice?.deviceType === DEVICE_TYPES.SCALE_BP_BUNDLE ? `numberless scale and${isAdolescentBPDevice ? \" adolescent\" : \"\"} blood pressure monitor` : \"numberless scale\"}`}\r\n
\r\n \r\n - \r\n \r\n
\r\n {\"Medical-grade, FDA-approved\"}\r\n
\r\n \r\n {isAdolescentBPDevice &&\r\n - \r\n \r\n
\r\n {\"Designed for Adolescents (ages 8-19)\"}\r\n
\r\n \r\n }\r\n
\r\n \r\n \r\n
\r\n \r\n\r\n
\r\n\r\n \r\n \r\n\r\n
\r\n
\r\n\r\n \r\n \r\n {\r\n setLineItemsByCategory([{product: plan, quantity}]);\r\n }}\r\n />\r\n\r\n {!_.isEmpty(selectedPlan) && selectedPlan.recurringPlan &&\r\n \r\n
\r\n\r\n \r\n Monthly Plan\r\n
\r\n\r\n \r\n A monthly plan connects you to your treatment team through our 100% HIPAA-compliant platform with strong encryption.\r\n \r\n\r\n\r\n \r\n {\"Starting today, you will automatically be charged $\"}\r\n {
\r\n }\r\n \r\n
\r\n \r\n ${
\r\n
\r\n \r\n
\r\n\r\n Subtotal
\r\n${}
\r\n \r\n {totalPriceDetailsContent()}\r\n
\r\n\r\n \r\n\r\n\r\n
\r\n \r\n Sales tax and shipping will be calculated at checkout\r\n
\r\n\n
\n \n
\n \n \n \n }\n
\n \n ![](\"/img/credit_cards.png\")
\n
\n \n\n {billingAddressEnabled &&\n Payment information
\n\n \n
\n\n {paymentStageState.isUsingBillingAddress &&\n \n }\n \n
\n\n {selectedPlan && selectedPlan.recurringPlan &&\n \n
\n \n setPurchaseStage(PURCHASE_STAGES.SHIPPING)}\n >\n Return to shipping\n \n
\n \n \n Next: Review order\n \n
\n \n
\n }\n \n Your subscription will automatically renew unless you cancel\n before {formattedNextChargeDate(selectedPlan, promoCode)}. Your cancellation\n will take effect at the end of your current billing cycle.\n
\n\n {showButton && onError(DEFAULT_ERROR_MESSAGE)}\n shippingPreference=\"NO_SHIPPING\" // Don't allow the user to change their address within PayPal. This would potentially allow them to bypass shipping charges.\n />}\n
\n );\n }\n}\n\nShapaPayPalButton.propTypes = {\n onSuccess: PropTypes.func.isRequired,\n onError: PropTypes.func.isRequired,\n onCancel: PropTypes.func,\n validate: PropTypes.func,\n isProduction: PropTypes.bool.isRequired,\n shippingStageState: PropTypes.object.isRequired,\n promoCode: PropTypes.object,\n giftSenderInformation: PropTypes.object,\n salesTaxRates: PropTypes.array.isRequired,\n referralCode: PropTypes.string,\n portal: PropTypes.string.isRequired,\n purchaseFlow: PropTypes.string.isRequired,\n lineItems: PropTypes.array.isRequired,\n adminReferralTargetCode: PropTypes.string,\n npi: PropTypes.string,\n deferredUserCreate: PropTypes.bool\n};\n\nShapaPayPalButton.defaultProps = {\n promoCode: null,\n referralCode: null,\n validate: () => true,\n onCancel: () => { },\n npi: null\n};\n\nexport default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(ShapaPayPalButton);","import { decamelizeKeys } from 'humps'\n\n/** @enum {MailChimpListIds} */\n/** @typedef {String} MailChimpListIds */\nexport const MAIL_CHIMP_LIST_IDS = {\n SHAPA_SUBSCRIBERS_LIST: \"d12776e447\"\n};\n\n/** @enum {MailChimpTagsList} */\n/** @typedef {String} MailChimpTagsList */\nexport const MAIL_CHIMP_TAGS = {\n ABANDONED_CART_TAG: \"abandoncart\"\n};\n\n\n/** @enum {MailChimpTagsStatus} */\n/** @typedef {String} MailChimpTagsStatus */\nexport const MAIL_CHIMP_TAGS_STATUS = {\n ACTIVE: \"active\",\n INACTIVE: \"inactive\"\n};\n\nexport default {\n /**\n * Save an email address to a given Mailchimp list.\n * @param {String} emailAddress\n * @param {MailChimpListIds} listId\n * @param {MailChimpTagsList} tag\n * @returns {Promise}\n */\n saveEmailAddressToList(emailAddress, listId, tag = null) {\n // Since we are making a request to a non-API JSON action, we need a CSRF token.\n const csrfToken = document.querySelector('[name=csrf-token]').content;\n\n return new Promise((resolve, reject) => {\n $.ajax({\n url: \"/email_collection/save_email_address_to_list\",\n type: \"POST\",\n dataType: \"text\",\n data: decamelizeKeys({\n authenticityToken: csrfToken,\n email: emailAddress,\n listId,\n tag\n }),\n success: response => resolve(response),\n error: response => reject(response.responseText)\n });\n });\n },\n\n /**\n * Remove an email address from a given Mailchimp list.\n * @param {String} emailAddress\n * @param {MailChimpListIds} listId\n * @returns {Promise}\n */\n removeEmailAddressFromList(emailAddress, listId) {\n // Since we are making a request to a non-API JSON action, we need a CSRF token.\n const csrfToken = document.querySelector('[name=csrf-token]').content;\n\n return new Promise((resolve, reject) => {\n $.ajax({\n url: \"/email_collection/remove_user_from_list\",\n type: \"POST\",\n dataType: \"text\",\n data: decamelizeKeys({\n authenticityToken: csrfToken,\n email: emailAddress,\n listId\n }),\n success: response => resolve(response),\n error: response => reject(response.responseText)\n });\n });\n },\n\n /**\n * Update a tag status for the given email address and Mailchimp list.\n * This method allows a developer to add or remove a Mailchimp tag.\n * @param {String} emailAddress\n * @param {MailChimpListIds} listId\n * @param {MailChimpTagsList} tag\n * @param {MailChimpTagsStatus} status\n * @returns {Promise}\n */\n updateUserTag(emailAddress, listId, tag, status = MAIL_CHIMP_TAGS_STATUS.ACTIVE) {\n // Since we are making a request to a non-API JSON action, we need a CSRF token.\n const csrfToken = document.querySelector('[name=csrf-token]').content;\n\n return new Promise((resolve, reject) => {\n $.ajax({\n url: \"/email_collection/update_user_tag\",\n type: \"POST\",\n dataType: \"text\",\n data: decamelizeKeys({\n authenticityToken: csrfToken,\n email: emailAddress,\n listId,\n tag,\n status\n }),\n success: response => resolve(response),\n error: response => reject(response.responseText)\n });\n });\n }\n}","import React, { useContext } from \"react\";\nimport { buyNowContext, recipientType } from \"../BuyNow\";\nimport mailChimpApi, { MAIL_CHIMP_LIST_IDS, MAIL_CHIMP_TAGS } from \"../../../../api/mailChimpApi\";\nimport { PURCHASE_FLOWS } from \"../../../../constants\";\n\nconst GiftForm = ({ validator }) => {\n const { giftSenderInformation, setGiftSenderInformation, purchaseFlow } = useContext(buyNowContext);\n\n return (\n <>\n { giftSenderInformation.isGift &&\n <>\n \n
\n Send gift confirmation email to:
\n\n
\n \n setGiftSenderInformation({...giftSenderInformation, giftConfirmationEmail: recipientType.me})}\n />\n \n
\n \n setGiftSenderInformation({...giftSenderInformation, giftConfirmationEmail: recipientType.recipient})}\n />\n \n
\n \n
\n \n }\n \n );\n};\n\nexport default GiftForm;\n","import {camelizeKeys, decamelizeKeys} from 'humps';\nimport ReactOnRails from \"react-on-rails\";\n\nexport default {\n webLogin(email, password) {\n // Since we are making a request to a non-API JSON action, we need a CSRF token.\n const authenticityToken = ReactOnRails.authenticityToken();\n\n return new Promise((resolve, reject) => {\n $.ajax({\n url: \"/users/log_in_only\",\n type: \"POST\",\n data: decamelizeKeys({ email, password, authenticityToken }),\n success: response => resolve(response),\n error: response => reject(response.responseText)\n });\n });\n },\n\n /**\n * Create a user.\n * @param {Object} userParams - An object that includes fields to populate for the user.\n * @param {?String} licenseKeyText - The license key text representing the license key to which the user should be linked.\n * @param {String} portal - The portal from which the user is creating an account.\n * @returns {Promise} - When successful, returns an object of the user's data. When unsuccessful, the promise will reject with an error message string.\n */\n createUser(userParams, licenseKeyText, portal) {\n return new Promise((resolve, reject) => {\n $.ajax({\n url: \"/api/v1/users\",\n type: \"POST\",\n headers: { APP_TYPE: portal },\n data: decamelizeKeys({ user: userParams, licenseKeyText }),\n success: response => resolve(camelizeKeys(response)),\n error: response => {\n // Simple error messages will be returned as the response text.\n let errorMessage = response.responseText;\n // Complex error messages will be returned as a summary field.\n if (response.responseJSON && response.responseJSON.summary && response.responseJSON.summary.length > 0) {\n errorMessage = response.responseJSON.summary[0];\n }\n else if (response.responseJSON && response.responseJSON.message)\n errorMessage = response.responseJSON.message;\n\n reject(errorMessage);\n }\n });\n });\n },\n\n /**\n * This endpoint will validate whether the given user parameters will successfully create an account or not, without actually creating the account.\n * @param {Object} userParams - An object that includes the user parameters (first name, last name, email, etc).\n * @param {Boolean} deferredUserCreate - If true, this means the user will be creating an account later, and will not be providing a password right now.\n * @returns {Promise} - When successful, the user parameters are valid for account creation. When unsuccessful, the response text will indicate the reason the parameters are invalid (ex. password is too short).\n */\n validateNewParams(userParams, deferredUserCreate) {\n return new Promise((resolve, reject) => {\n $.ajax({\n url: \"/api/v1/users/validate_new_params\",\n type: \"POST\",\n data: decamelizeKeys({ user: userParams, deferredUserCreate }),\n success: response => resolve(camelizeKeys(response)),\n error: response => reject(response.responseJSON)\n });\n });\n },\n\n validateEmail(email) {\n return new Promise((resolve, reject) => {\n $.ajax({\n url: \"/api/v1/users/validate_email\",\n type: \"POST\",\n data: decamelizeKeys({ email }),\n success: response => resolve(camelizeKeys(response)),\n error: response => reject(response.responseJSON)\n });\n });\n }\n};\n","import {camelizeKeys, decamelizeKeys} from \"humps\";\n\nexport default {\n /**\n * This endpoint will validate the given address parameters will to and verify it for shipping..\n * @param {Object} addressParams - An object that includes the address parameters (first name, last name, address, etc).\n * @returns {Promise} - When successful, the address parameters are valid for shipping. When unsuccessful, the response text will indicate the reason the parameters are invalid.\n */\n validateAddress(addressParams) {\n return new Promise((resolve, reject) => {\n $.ajax({\n url: \"/api/v1/address_validation\",\n type: \"POST\",\n data: decamelizeKeys({ address: addressParams }),\n success: response => resolve(camelizeKeys(response)),\n error: response => reject(response.responseJSON)\n });\n });\n }\n};\n","import {camelizeKeys, decamelizeKeys} from \"humps\";\n\nexport default {\n /**\n * This endpoint will validate the given NPI value (registered clinician ID).\n * @param {String} npi - The NPI value.\n * @returns {Promise} - When successful, the NPI is valid and the result will contain clinician information.\n */\n validateNpi(npi) {\n return new Promise((resolve, reject) => {\n $.ajax({\n url: \"/api/v1/npi_validation\",\n type: \"POST\",\n data: decamelizeKeys({ npi }),\n success: response => resolve(camelizeKeys(response)),\n error: response => reject(response.responseJSON)\n });\n });\n }\n};\n","import React, { useContext, useState, useEffect } from \"react\";\nimport { buyNowContext, shippingMethods, recipientType } from \"../BuyNow\";\nimport CountriesPropTypes from \"../../prop-types/CountriesPropTypes\";\nimport ShapaPayPalButton from \"../../utils/ShapaPayPalButton\";\nimport mailChimpApi, { MAIL_CHIMP_LIST_IDS, MAIL_CHIMP_TAGS, MAIL_CHIMP_TAGS_STATUS } from \"../../../../api/mailChimpApi\";\nimport trackingScripts from \"../../utils/trackingScripts\";\nimport { createOrderObject, FACEBOOK_EVENTS } from \"../../utils/facebookHelper\";\nimport GiftForm from \"./GiftForm\";\nimport { PORTALS, PRODUCT_CATEGORIES, PURCHASE_FLOWS } from \"../../../../constants\";\nimport { isPayPalSupported } from \"../../utils/orderHelper\";\nimport usersApi from \"../../../../api/usersApi\";\nimport addressValidationApi from \"../../../../api/addressValidationApi\";\nimport { useSimpleReactValidator } from \"../../utils/useSimpleReactValidator\";\nimport npiValidationApi from \"../../../../api/npiValidationApi\";\nimport organizationsApi from \"../../../../api/organizationsApi\";\n\nconst ShippingStage = ({ countries }) => {\n const validator = useSimpleReactValidator();\n const {\n PURCHASE_STAGES, shippingStageState, setShippingStageState, lineItems, setOrder, setPurchaseStage,\n isProduction, promoCode, referralCode, salesTaxRates, giftSenderInformation, setGiftSenderInformation,\n portal, purchaseFlow, quantitiesEnabled, appInfo,\n adminReferralTargetCode, npi, setNpi, deferredUserCreate, setDeferredUserCreate, CLINICIAN_MODES, clinicianMode\n } = useContext(buyNowContext);\n\n const [emailDomainValidationError, setEmailDomainValidationError] = useState('');\n\n const deviceLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.SCALE);\n const planLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.MEMBERSHIP);\n const adminAccessLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.ADMIN_ACCESS);\n const selectedDevice = deviceLineItem ? deviceLineItem.product : null;\n const selectedPlan = planLineItem ? planLineItem.product : null;\n\n // We offer gifting for orders including a scale product in the Shapa portal.\n const giftingEnabled = portal === PORTALS.SHAPA && deviceLineItem;\n\n // If the user is purchasing an admin access product, we need them to create an account.\n const createAccountEnabled = !!adminAccessLineItem && clinicianMode !== CLINICIAN_MODES.EXISTING_ORGANIZATION;\n\n const { country } = shippingStageState;\n const [errorMessage, setErrorMessage] = useState(null);\n const [paypalErrorMessage, setPaypalErrorMessage] = useState(null);\n const fbTrackingOrderObject = createOrderObject(selectedDevice, selectedPlan);\n\n const isClinician = purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_CLINICIAN || purchaseFlow === PURCHASE_FLOWS.SHAPA_HEALTH_CLINICIAN;\n\n let createAccountInstructions;\n if (purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_PARENT) {\n createAccountInstructions = `You'll use the same email and password below to log in to the Parent Portal to access your child's data${selectedPlan ? ' as well as to manage your billing account' : ''}.`;\n } else {\n createAccountInstructions = `You'll use the same email and password below to log into the ${appInfo.name} portal. Text verification codes will be sent to your phone number to add an extra layer of security to your account.`;\n }\n\n useEffect(() => {\n trackingScripts.hotjar(isProduction, \"/orders/buy-now/shipping_stage\");\n trackingScripts.facebook(isProduction, FACEBOOK_EVENTS.REACT_PAGE_VIEW, { page: \"ShippingStage\" }, \"trackCustom\");\n trackingScripts.facebook(isProduction, FACEBOOK_EVENTS.ADD_TO_CART, fbTrackingOrderObject);\n trackingScripts.sendGoogleAnalyticsEvent(isProduction, \"add_to_cart\", \"ecommerce\", \"Add To Cart\");\n }, []);\n\n /**\n * Validate that the email is correct.\n * This can be called when the email input field loses focus.\n * @param {string} email - The email address to be validated.\n * @param {(error: string) => void} setEmailValidationError - Function to set the email validation error message.\n * @param {() => void} onSuccess - Function to be called when the email validation is successful.\n * @return {Promise\n { setGiftSenderInformation({...giftSenderInformation, message: e.target.value}) }}\n />\n
\n \n \n { setGiftSenderInformation({...giftSenderInformation, name: e.target.value}) }}\n />\n {validator.message('name', giftSenderInformation.name, 'required')}\n
\n \n { setGiftSenderInformation({...giftSenderInformation, email: e.target.value}) }}\n onBlur={() => {\n if (purchaseFlow === PURCHASE_FLOWS.SHAPA_END_USER)\n mailChimpApi.saveEmailAddressToList(giftSenderInformation.email, MAIL_CHIMP_LIST_IDS.SHAPA_SUBSCRIBERS_LIST, MAIL_CHIMP_TAGS.ABANDONED_CART_TAG)\n }}\n />\n {validator.message('giftEmailAddress', giftSenderInformation.email, 'required|email')}\n
\n {emailDomainValidationError}
}\n \n {/* It's possible a scale won't have a shipping option (ex. there is a delay so we don't offer expedited shipping). */}\n {selectedDevice && selectedDevice.shippingOptionsAvailable &&\n
\n );\n};\n\nShippingStage.propTypes = {\n countries: CountriesPropTypes.isRequired\n};\n\nexport default ShippingStage;\n","import { camelizeKeys } from 'humps';\nimport {PRODUCT_CATEGORIES} from \"../constants\";\n\nexport default {\n createOrder(portal, purchaseFlow, shippingInformation, paymentInformation, lineItems, promoCode, clientTotalPrice, referralCode, giftSenderInformation, adminReferralTargetCode, npi, deferredUserCreate) {\n const planLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.MEMBERSHIP);\n const selectedPlan = planLineItem ? planLineItem.product : null;\n\n const order = {\n customer: {\n first_name: shippingInformation.firstName,\n last_name: shippingInformation.lastName,\n email: shippingInformation.email,\n address1: shippingInformation.address1,\n address2: shippingInformation.address2,\n phone: shippingInformation.phone,\n city: shippingInformation.city,\n state: shippingInformation.state,\n country_code: shippingInformation.country.code,\n\n using_billing_address: paymentInformation.isUsingBillingAddress,\n billing_address1: paymentInformation.paymentInputAddress,\n billing_address2: paymentInformation.paymentInputAddress2,\n billing_city: paymentInformation.paymentInputCity,\n billing_state: paymentInformation.paymentInputState,\n billing_zip: paymentInformation.paymentInputZip,\n billing_country_code: paymentInformation.paymentInputCountry.code\n },\n\n cc_name: paymentInformation.nameOnCard,\n cc_number: paymentInformation.creditCardNumber,\n cc_exp_date: paymentInformation.creditCardDate,\n cc_cvc: paymentInformation.cvv,\n cc_zip: shippingInformation.zipCode,\n referrer: localStorage.getItem(\"shapa_referrer\"),\n promo_code_text: promoCode ? promoCode.promoCodeText : \"\",\n referral_code_text: referralCode,\n admin_referral_target_code: adminReferralTargetCode,\n is_arrival_phone_call_requested: shippingInformation.isArrivalPhoneCallRequested,\n\n line_items: lineItems,\n\n shipping_type: shippingInformation.shippingMethod.type.toUpperCase(),\n\n subscription_name: selectedPlan ? selectedPlan.name : null,\n\n // So the server can compare its calculated price to the client's.\n client_total_price: clientTotalPrice,\n\n // This is how we know where the user is purchasing from (ex. SHAPA, CLEARSTEP, etc).\n portal: portal,\n\n // Gives us an even more specific indicator of the current purchase flow than just the portal.\n purchase_flow: purchaseFlow,\n\n // Only applicable for clinicians that enter an NPI value (registered clinician ID).\n npi,\n\n // If true, it means someone is purchasing on behalf of someone else (ex. organization owner), who will be sent an email and create an account later.\n deferred_user_create: deferredUserCreate,\n\n gift_sender_information: giftSenderInformation\n };\n\n return new Promise((resolve, reject) => {\n $.ajax({\n url: \"/api/v1/stripe/create_order\",\n type: \"POST\",\n data: {\n order: order,\n\n // Only applicable for a flow that requires account creation.\n user: {\n first_name: shippingInformation.firstName,\n last_name: shippingInformation.lastName,\n email: shippingInformation.email,\n phone: shippingInformation.phone,\n password: shippingInformation.password,\n password_confirmation: shippingInformation.passwordConfirmation,\n organization_name: shippingInformation.organizationName,\n organization_code: shippingInformation.organizationCode\n }\n },\n success: response => resolve(camelizeKeys(response)),\n error: response => reject(response)\n });\n });\n }\n}\n","import React, {useContext} from \"react\";\n\nimport { buyNowContext } from \"../BuyNow\";\nimport { calcShippingPrice } from \"../../utils/pricingHelper\";\n\n/**\n * Return a string representing the shipping price of the order.\n */\nconst ShippingPrice = () => {\n const { lineItems, shippingStageState } = useContext(buyNowContext);\n const { country, shippingMethod } = shippingStageState;\n\n return calcShippingPrice(lineItems, country, shippingMethod).toFixed(2);\n};\n\nexport default ShippingPrice;","import React, {useContext} from \"react\";\n\nimport { buyNowContext } from \"../BuyNow\";\nimport { calcSalesTax } from \"../../utils/pricingHelper\";\n\n/**\n * Return a string representing the total price of the order.\n */\nconst SalesTaxPrice = () => {\n const { lineItems, promoCode, salesTaxRates, shippingStageState } = useContext(buyNowContext);\n const { state, country } = shippingStageState;\n\n return calcSalesTax(lineItems, state, country, salesTaxRates, promoCode).toFixed(2);\n};\n\nexport default SalesTaxPrice;","import React, {useContext} from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {buyNowContext} from \"../BuyNow\";\r\n\r\nconst LineItemDisplay = ({ lineItem, textClass }) => {\r\n const { quantitiesEnabled } = useContext(buyNowContext);\r\n let description;\r\n const originalUnitPrice = lineItem.product.price;\r\n const discountedUnitPrice = lineItem.unitPrice;\r\n\r\n const formatPrice = price => {\r\n const numericPrice = Number(price);\r\n const roundedPrice = Math.round(numericPrice);\r\n\r\n // The price is something like 99.0\r\n if (numericPrice === roundedPrice)\r\n return roundedPrice;\r\n\r\n // The price is something like 4.99\r\n return numericPrice;\r\n };\r\n\r\n // We want to show a different description of the line item depending on whether quantities are enabled.\r\n // If enabled, we want to show some individual product pricing information.\r\n // If not enabled, we want to show a text description.\r\n if (quantitiesEnabled) {\r\n if (originalUnitPrice - discountedUnitPrice > 1) {\r\n description = \n
\n }\n\n Shipping method
\n\n setShippingStageState({...shippingStageState, shippingMethod: shippingMethods.standard})}\n />\n
\n {\n // Expedited shipping is only available for domestic orders.\n country.code === 'US' &&\n \n \n
\n {`$${standardShippingPrice.toFixed(2)}${quantitiesEnabled ? \"/item\" : \"\"}`}
\n\n setShippingStageState({\n ...shippingStageState,\n shippingMethod: shippingMethods.expedited\n })}\n />\n
\n }\n \n \n
\n {`$${expeditedShippingPrice.toFixed(2)}${quantitiesEnabled ? \"/item\" : \"\"}`}
\n\n {/* If the user is not purchasing a scale, we'll use their shipping information as billing information. */}\n
\n\n {deviceLineItem ? 'Shipping information' : 'Billing information'}
\n\n {giftingEnabled &&\n
\n }\n\n \n \n {errorMessage &&\n
\n\n \n {errorMessage}\n
\n }\n\n {paypalErrorMessage && !errorMessage &&\n\n {paypalErrorMessage}\n
\n }\n\n {/* At this time, we don't support PayPal for orders where the quantity is > 1 */}\n {isPayPalSupported(lineItems) &&\n
\n \n
\n }\n \n \n Next: Payment information\n \n
\n \n { setPurchaseStage(PURCHASE_STAGES.PRODUCT_SELECTION); }}\n >\n Return to products and plan\n \n
\n \r\n {`$${formatPrice(originalUnitPrice)}`}\r\n {`$${formatPrice(discountedUnitPrice)}`}\r\n
;\r\n }\r\n else\r\n description ={`$${formatPrice(originalUnitPrice)}`}
;\r\n }\r\n else {\r\n description ={lineItem.product.lineItemDescription}
;\r\n }\r\n\r\n return (\r\n\r\n
\r\n );\r\n};\r\n\r\nLineItemDisplay.defaultProps = {\r\n textClass: \"\"\r\n};\r\n\r\nLineItemDisplay.propTypes = {\r\n lineItem: PropTypes.object.isRequired,\r\n textClass: PropTypes.string\r\n};\r\n\r\nexport default LineItemDisplay;","import React, {useContext, useEffect, useState} from 'react';\nimport ProductPreview from \"../product_selection/ProductPreview\";\nimport { buyNowContext } from \"../BuyNow\";\nimport stripeApi from \"../../../../api/stripeApi\";\nimport ShippingPrice from \"../common/ShippingPrice\";\nimport SalesTaxPrice from \"../common/SalesTaxPrice\";\nimport TotalPrice from \"../common/TotalPrice\";\nimport PromoCode from \"../common/PromoCode\";\nimport mailChimpApi, { MAIL_CHIMP_LIST_IDS, MAIL_CHIMP_TAGS, MAIL_CHIMP_TAGS_STATUS } from \"../../../../api/mailChimpApi\";\nimport {calcTotalPrice} from \"../../utils/pricingHelper\";\nimport ReferralCode from \"../common/ReferralCode\";\nimport {formattedNextChargeDate} from \"../../utils/orderHelper\";\nimport trackingScripts from \"../../utils/trackingScripts\";\nimport { FACEBOOK_EVENTS } from \"../../utils/facebookHelper\";\nimport {PRODUCT_CATEGORIES, PURCHASE_FLOWS} from \"../../../../constants\";\nimport ProductPrice from \"../common/ProductPrice\";\nimport LineItemDisplay from \"../common/LineItemDisplay\";\n\nconst ReviewStage = () => {\n const {\n PURCHASE_STAGES, setOrder, lineItems, setPurchaseStage, shippingStageState,\n paymentStageState, promoCode, salesTaxRates, referralCode, giftSenderInformation, isProduction,\n portal, scaleProducts, quantitiesEnabled, purchaseFlow, adminReferralTargetCode, npi, deferredUserCreate\n } = useContext(buyNowContext);\n\n const scaleLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.SCALE);\n const adminAccessLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.ADMIN_ACCESS);\n const planLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.MEMBERSHIP);\n\n const { country, state, shippingMethod } = shippingStageState;\n const [errorMessage, setErrorMessage] = useState(null);\n const [isProcessing, setIsProcessing] = useState(false);\n useEffect(() => {\n trackingScripts.hotjar(isProduction, \"/orders/buy-now/review_stage\");\n trackingScripts.facebook(\n isProduction,\n FACEBOOK_EVENTS.REACT_PAGE_VIEW,\n { page: \"ReviewStage\" },\n \"trackCustom\"\n );\n }, []);\n\n const getLastFourCharOfString = (string) => {\n return string.slice(string.length - 4);\n };\n\n const createStripeOrder = () => {\n if (isProcessing)\n return;\n\n setIsProcessing(true);\n\n // Reset the error message while we attempt to create the order.\n setErrorMessage(null);\n\n // Calculate the total price of the order so the client's value can be compared to the server's value.\n const totalPrice = calcTotalPrice(lineItems, country, state, shippingMethod, salesTaxRates, promoCode);\n\n stripeApi.createOrder(portal, purchaseFlow, shippingStageState, paymentStageState, lineItems, promoCode, totalPrice, referralCode, giftSenderInformation, adminReferralTargetCode, npi, deferredUserCreate)\n .then(response => {\n if (response.status === 'PROCESSED') {\n if (response.confirmationToken != null) {\n // When the customer has successfully made a purchase, remove them from Mailchimp as a potential customer.\n if (purchaseFlow === PURCHASE_FLOWS.SHAPA_END_USER) {\n mailChimpApi.updateUserTag(shippingStageState.email, MAIL_CHIMP_LIST_IDS.SHAPA_SUBSCRIBERS_LIST, MAIL_CHIMP_TAGS.ABANDONED_CART_TAG, MAIL_CHIMP_TAGS_STATUS.INACTIVE);\n }\n\n setOrder(response);\n setPurchaseStage(PURCHASE_STAGES.CONFIRMATION);\n } else {\n setErrorMessage('We were unable to process your order. Please contact Shapa customer support.');\n }\n } else if (response.status === 'DECLINED') {\n setErrorMessage('It seems your payment was declined. Please ensure your payment information is correct. We apologize for the inconvenience.');\n } else {\n // Fail-safe error message.\n setErrorMessage('We are currently unable to process your payment. Please try again later.');\n }\n })\n .catch(response => {\n setErrorMessage(response.responseText);\n })\n .finally(() => {\n setIsProcessing(false);\n });\n };\n\n // The primary text class used within the order review.\n const primaryTextClass = \"plan-main-txt fw-bolder text-dark mb-0 pb-0\";\n\n // Decide which product to show in the preview component.\n let previewProduct;\n if (scaleLineItem)\n previewProduct = scaleLineItem.product;\n else if (adminAccessLineItem)\n previewProduct = adminAccessLineItem.product;\n else\n previewProduct = scaleProducts[0];\n\n return (\n \r\n
\r\n {lineItem.product.lineItemName}
\r\n {description}\r\n\r\n {quantitiesEnabled &&
\r\n {lineItem.quantity}
}\r\n\r\n
\r\n ${lineItem.price.toFixed(2)}
\r\nReview your order
\n\n\n
\n\n \n {lineItems.map(lineItem =>
\n\n \n
\n }\n\n \n
\n Shipping
\n\n {quantitiesEnabled &&
\n {scaleLineItem.quantity}
}\n\n
\n ${
\n
\n\n \n
\n Sales tax
\n\n
\n ${
\n
\n \n
\n Total
\n\n
\n \n ${
\n
\n\n \n
\n \n
\n Shipping information
\n\n {scaleLineItem && shippingStageState.shippingMethod.label}\n {scaleLineItem &&
}\n {shippingStageState.firstName} {shippingStageState.lastName}\n
\n {shippingStageState.address1}\n
\n {shippingStageState.address2 && shippingStageState.address2}\n {shippingStageState.address2 &&
}\n {shippingStageState.city}, {shippingStageState.state} {shippingStageState.zipCode}\n
\n
\n setPurchaseStage(PURCHASE_STAGES.SHIPPING)}>Edit
\n\n
\n\n {planLineItem && planLineItem.product.recurringPlan &&\n \n
\n Payment information
\nVisa ending in {getLastFourCharOfString(paymentStageState.creditCardNumber)}
\n{paymentStageState.nameOnCard}
\n {\n paymentStageState.isUsingBillingAddress &&\n {paymentStageState.paymentInputAddress}\n
\n {paymentStageState.paymentInputAddress2 && paymentStageState.paymentInputAddress2}\n {paymentStageState.paymentInputAddress2 &&
}\n {paymentStageState.paymentInputCity}, {paymentStageState.paymentInputState} {paymentStageState.paymentInputZip}\n
\n setPurchaseStage(PURCHASE_STAGES.PAYMENT)}>\n Edit\n \n
\n \n
\n }\n \n Your subscription will automatically renew unless you cancel\n before {formattedNextChargeDate(planLineItem.product, promoCode)}.\n Your cancellation will take effect at the end of your current billing cycle.\n
\n\n setPurchaseStage(PURCHASE_STAGES.PAYMENT)}\n >\n Return to payment\n \n
\n \n createStripeOrder()}\n >\n {isProcessing ? \"Processing...\" : \"Place your order\"}\n
\n \n \n \n Your card will be charged ${
\n
\n {errorMessage}\n
\n
\n\n {planLineItem && planLineItem.product.recurringPlan &&\n Order summary
\n\n {lineItems.map(lineItem =>\n
\n }\n\n \n
\n Shipping
\n{shippingStageState.shippingMethod.timeFrame}
\n\n {quantitiesEnabled &&
\n {scaleLineItem.quantity}
}\n\n
\n ${
\n
\n\n \n
\n Sales tax
\n\n
\n ${
\n
\n \n
\n Total
\n\n
\n ${
\n
\n }\n\n \n \n {`Your subscription will automatically renew unless you cancel before ${formattedNextChargeDate(planLineItem.product, promoCode)}. Your cancellation will take effect at the end of your current billing cycle.`}\n
\n\n
\n \n {\n purchaseStage === PURCHASE_STAGES.SHIPPING && \n }\n {\n purchaseStage === PURCHASE_STAGES.PAYMENT && \n }\n {\n purchaseStage === PURCHASE_STAGES.REVIEW &&
\n {lineItem.product.lineItemName}
;\n };\n\n /**\n * Produce UI to display the description of a line item.\n * @param {LineItem} lineItem\n */\n const lineItemDescription = lineItem => {\n let desc = lineItem.product.lineItemDescription;\n\n // If quantities are enabled, we need to display the quantity of the product rather than a description.\n if (quantitiesEnabled)\n desc = `Qty: ${lineItem.quantity}`;\n\n return{desc}
;\n };\n\n return (\n\n
\n \n
\n \n
\n\n {selectedPlan && selectedPlan.recurringPlan &&\n Order details
\n\n
\n\n {selectedPlan &&\n \n
\n Confirmation number
\n\n {lineItems.map(lineItem => lineItemName(lineItem))}\n\n
\n {order.confirmationToken}
\n\n {lineItems.map(lineItem => lineItemDescription(lineItem))}\n\n
\n }\n\n {scaleExists &&\n \n
\n {`Unique license ${planLineItem.quantity > 1 ? 'keys' : 'key'}`}
\n{licenseKeyMessage}
\n\n {\n order.licenseKeys.map(licenseKey => (\n
\n {licenseKey.key}
\n ))\n }\n\n
\n }\n\n \n
\n {/* Don't show an estimated shipping timeframe if shipping options aren't available for the selected scale. We might not have a good estimate in this case. */}\n {selectedScale && selectedScale.shippingOptionsAvailable &&\n Shipping
\n\n {shippingStageState.firstName} {shippingStageState.lastName}\n
\n {shippingStageState.address1}\n
\n {shippingStageState.city}, {shippingStageState.state} {shippingStageState.zipCode}\n
\n
\n }\n {shippingStageState.shippingMethod.timeFrame}
\n\n
\n \n
\n Payment total
\n{paymentMethodMessage}
\n{paymentStageState.nameOnCard}
\n\n
\n ${
\n
\n }\n \n Your subscription will automatically renew unless you cancel before {formattedNextChargeDate(selectedPlan, promoCode)}. Your cancellation will take effect at the end of your current billing cycle.\n
\n\n {!isLinked &&\n \n { setUserEmail(e.target.value); }}\n />\n\n \n \n }\n\n {isLinked &&\n
\n );\n}\n\nexport default LinkOrderToUser;","import React, {Fragment, useContext} from \"react\";\r\nimport {buyNowContext} from \"../BuyNow\";\r\nimport {PORTALS, PRODUCT_CATEGORIES, PURCHASE_FLOWS} from \"../../../../constants\";\r\nimport LinkOrderToUser from \"./LinkOrderToUser\";\r\n\r\nconst ConfirmationMessage = () => {\r\n const { lineItems, shippingStageState, portal, purchaseFlow, order, deferredUserCreate } = useContext(buyNowContext);\r\n\r\n const planLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.MEMBERSHIP);\r\n const adminAccessLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.ADMIN_ACCESS);\r\n const scaleLineItem = lineItems.find(li => li.product.category === PRODUCT_CATEGORIES.SCALE);\r\n const scaleExists = !!scaleLineItem;\r\n const adminAccessExists = !!adminAccessLineItem;\r\n const planExists = !!planLineItem;\r\n\r\n const shapaMessage = (\r\n \n If you have an existing account, enter your email address to link this order to your account now!\n
\n\n \n Success! This order has been linked to your account.\n
\n }\n\n {errorMessage &&\n \n {errorMessage}\n
\n }\n \r\n
\r\n );\r\n\r\n const generalMessage = (\r\n Thank you for your order
\r\n\r\n\r\n We've emailed you the order confirmation details.\r\n
\r\n\r\n {scaleExists &&\r\n \r\n {`Your order will arrive within ${shippingStageState.shippingMethod.timeFrame}.`}\r\n
\r\n }\r\n\r\n {purchaseFlow !== PURCHASE_FLOWS.SHAPA_BP_ADDON && purchaseFlow !== PURCHASE_FLOWS.CLEARSTEP_BP_ADDON &&\r\n\r\n In order to use Shapa, you’ll need an account. Start personalizing your program while waiting for your Shapa!\r\n
\r\n }\r\n\r\n \r\n
\r\n \r\n }\r\n\r\n
\r\n );\r\n\r\n const generalMessageBehalfOrgOwner = (\r\n Thank you for your order
\r\n\r\n {/* If an existing clinician made a membership-only purchase (ex. site license), let's ask to link to their existing account. */}\r\n {!adminAccessExists && planExists &&\r\n (\r\n purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_CLINICIAN ||\r\n purchaseFlow === PURCHASE_FLOWS.SHAPA_HEALTH_CLINICIAN\r\n ) &&\r\n\r\n
\r\n We've emailed you the order confirmation details.\r\n
\r\n\r\n {scaleExists &&\r\n \r\n {`Your order will arrive within ${shippingStageState.shippingMethod.timeFrame}.`}\r\n
\r\n }\r\n \r\n
\r\n );\r\n\r\n if (portal === PORTALS.SHAPA)\r\n return shapaMessage;\r\n else {\r\n if (deferredUserCreate)\r\n return generalMessageBehalfOrgOwner;\r\n\r\n return generalMessage;\r\n }\r\n};\r\n\r\nexport default ConfirmationMessage;","\r\nimport React, {useContext, useState} from \"react\";\r\nimport usersApi from \"../../../../api/usersApi\";\r\nimport {buyNowContext} from \"../BuyNow\";\r\nimport PropTypes from \"prop-types\";\r\nimport { useSimpleReactValidator } from \"../../utils/useSimpleReactValidator\";\r\nimport {SIGNUP_USER_TYPES} from \"../../../../constants\";\r\n\r\nconst CreateAccountForm = ({ onAccountCreated, appName, signupUserType }) => {\r\n const validator = useSimpleReactValidator();\r\n const { shippingStageState, order, portal } = useContext(buyNowContext);\r\n\r\n const [errorMessage, setErrorMessage] = useState(null);\r\n const [isProcessing, setIsProcessing] = useState(false);\r\n const [licenseKeyText, setLicenseKeyText] = useState(order.licenseKeys[0].key);\r\n const [newUserData, setNewUserData] = useState({\r\n firstName: shippingStageState.firstName,\r\n lastName: shippingStageState.lastName,\r\n email: shippingStageState.email,\r\n phone: shippingStageState.phone,\r\n password: \"\",\r\n passwordConfirmation: \"\",\r\n signupUserType\r\n });\r\n\r\n /**\r\n * A helper method to set a field of the newUserData object.\r\n * @param {Object} e - Event from an input element.\r\n * @param {String} fieldName - Name of the field to update within newUserData.\r\n */\r\n const updateNewUserField = (e, fieldName) => {\r\n const updateObj = {};\r\n updateObj[fieldName] = e.target.value;\r\n setNewUserData({ ...newUserData, ...updateObj })\r\n };\r\n\r\n /**\r\n * Make an API request to create a user from the given state of this component.\r\n */\r\n const createUser = () => {\r\n if (validator.current.allValid()) {\r\n validator.current.hideMessages();\r\n } else {\r\n validator.current.showMessages();\r\n return;\r\n }\r\n\r\n if (isProcessing) {\r\n return;\r\n }\r\n\r\n setIsProcessing(true);\r\n\r\n // Reset the error message while we attempt to create the user.\r\n setErrorMessage(null);\r\n\r\n usersApi.createUser(newUserData, licenseKeyText, portal)\r\n .then(user => {\r\n // Although the user was created, they have not been logged into the website. Do this now.\r\n // Note that we are returning the user in the promise chain, not the response to webLogin().\r\n return usersApi.webLogin(user.email, newUserData.password).then(() => user);\r\n })\r\n .then(user => {\r\n onAccountCreated(user);\r\n })\r\n .catch(responseErrorMessage => {\r\n setErrorMessage(responseErrorMessage);\r\n })\r\n .finally(() => {\r\n setIsProcessing(false);\r\n });\r\n };\r\n\r\n return (\r\n Thank you for your order!
\r\nImportant information has been emailed to {shippingStageState.email}.
\r\n\r\n They have been emailed order confirmation details, and an email with a link to proceed with account creation.\r\n
\r\n \r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nCreateAccountForm.defaultProps = {\r\n onAccountCreated: () => {},\r\n signupUserType: SIGNUP_USER_TYPES.DEFAULT\r\n};\r\n\r\nCreateAccountForm.propTypes = {\r\n onAccountCreated: PropTypes.func,\r\n signupUserType: PropTypes.string,\r\n appName: PropTypes.string.isRequired\r\n}\r\n\r\nexport default CreateAccountForm;","import React, {useState} from \"react\";\r\nimport CreateAccountForm from \"./CreateAccountForm\";\r\nimport PropTypes from \"prop-types\";\r\nimport {SIGNUP_USER_TYPES} from \"../../../../constants\";\r\n\r\nconst CreateClearStepClientAccount = ({ onAccountCreated, appName }) => {\r\n const [signupUserType, setSignupUserType] = useState(null);\r\n\r\n const SignupUserTypeChoice = ({ caption, type }) => (\r\n \r\n );\r\n\r\n return (\r\n \r\n \r\n {isProcessing ? \"Processing...\" : \"Create my account\"}\r\n \r\n\r\n {errorMessage &&\r\n
\r\n \r\n
\r\n {errorMessage}\r\n
\r\n
\r\n\r\n {signupUserType && \r\n Will you be using MyClearStep for yourself or\r\n
\r\n for your child/dependent?\r\n
\r\n\r\n \r\n for your child/dependent?\r\n
\r\n Create an account below to get started.
You will use the same email and password to access the measurement data and manage your billing.\r\n
\r\n Create an account below to get started.
You will use the same email and password to log in to the MyClearStep app.\r\n
\n 
\n }\n
\n );\n\n const postAccountCreation = () => (\n \n
\n\n { // Share-a-Sale tracking pixel.\n isProduction &&\n \n \n {/* The various purchase flows have a slightly different account creation flow. */}\n\n {(purchaseFlow === PURCHASE_FLOWS.SHAPA_END_USER || purchaseFlow === PURCHASE_FLOWS.SHAPA_HEALTH_END_USER) &&\n \n {/* This button will scroll down to the create form when clicked. */}\n \n setUser(userResponse)} appName={businessName}/>\n \n }\n {(purchaseFlow === PURCHASE_FLOWS.SHAPA_BP_ADDON || purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_BP_ADDON) && (\n setUser(userResponse)} appName={businessName}/>}\n {(purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_CLINICIAN || purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_PARENT) &&\n \n }\n
\n \n
\n {confirmationStage === 1 &&\n \n \n
\n {confirmationStage === 1 && \n
}\n {confirmationStage === 2 && }\n Thank you for your order
\nWe've emailed you order confirmation details. Your Shapa will arrive within 5-7 days.
\n\n We have also sent a gift confirmation email that includes important steps to get started and a unique license key that your recipient will need to create an account.\n
\n\n \n Back to home\n \n
\n )}\n {(purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_END_USER) && \n \n Back to home\n \n
\n }\n \n \n\n \n \n }\n\n
\n );\n\n return (\n You are now registered with {businessName}
\n\n {/* Tell the user to download the app unless they have purchased for a child/dependent. */}\n {user.signupUserType !== SIGNUP_USER_TYPES.PARENT &&\nGet started by downloading the {businessName} app!
\n\n \n ![](\"https://www.myshapa.com/img/App_Store_Badge.png\"){kind=icon}
\n ![](\"https://www.myshapa.com/img/Google_Play_Badge.png\"){kind=icon}
\n \n
\n \n
\n Your account details
\n\nFirst Name: {user.firstName}
\n Last Name: {user.lastName}
\n Email: {user.email}
\n {user.phone && Phone: {user.phone}
}\n\n \n {portal === PORTALS.SHAPA &&\n \n Get Started!\n \n }\n\n {(portal === PORTALS.CLEARSTEP || portal === PORTALS.SHAPA_HEALTH) &&\n \n Go to your account\n \n }\n
\n \n
\n );\n}\n\nfunction Option({ title, onClick = () => {}, children }) {\n return (\n \n
\n\n \n {`${businessName} Clinician`}\n
\n\n Welcome to MyClearStep! Please select an option to proceed.\n
\n\n \n\n \n\n \n \n
\n
\n\n
\n );\n}\n\nexport default ChooseModeStage;","import React, {useState, createContext, useEffect} from 'react';\nimport * as PropTypes from 'prop-types';\n\nimport ProductSelection from \"./product_selection/ProductSelection\";\nimport Checkout from \"./checkout/Checkout\";\nimport Confirmation from \"./confirmation/Confirmation\";\n\nimport CountriesPropTypes from \"../prop-types/CountriesPropTypes\";\nimport {PORTALS, PRODUCT_CATEGORIES, PURCHASE_FLOWS} from \"../../../constants\";\nimport LineItem from \"../utils/LineItem\";\nimport ChooseModeStage from \"./choose_mode/ChooseModeStage\";\n\nexport const buyNowContext = createContext(null);\n\nexport const shippingMethods = {\n standard: { type: \"standard\", get label() { return `Regular (${this.timeFrame})`; }, timeFrame: \"5-7 business days\" },\n expedited: { type: \"expedited\", get label() { return `Expedited (${this.timeFrame})`; }, timeFrame: \"2-3 business days\" }\n};\n\nexport const recipientType = {\n me: { type: \"me\"}, recipient: { type: \"recipient\"}\n};\n\n/**\n * This component is a host for the 3 purchase stages (product selection, shipping info, and credit card info).\n */\nconst BuyNow = ({ portal, purchaseFlow, promotional, scaleBpBundleProducts, scaleProducts, bpDeviceProducts, planProducts, adminAccessProducts, countries, salesTaxRates, isProduction, referralCode, referralCodeValid, plansConfiguration, selectedPlanId, urlPromoCode, adminReferralTargetCode, abTestingPage }) => {\n // Some purchase flows may start with an empty order and the user must select which items they want to purchase.\n // Other purchase flows may start with items already selected, meaning the user can modify the selection or just proceed to the next page without making any changes.\n let initialLineItems = [];\n if (purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_END_USER || purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_PARENT || purchaseFlow === PURCHASE_FLOWS.SHAPA_HEALTH_END_USER) {\n initialLineItems = [\n new LineItem({ product: scaleBpBundleProducts[0], quantity: 1 }),\n new LineItem({ product: planProducts[0], quantity: 1 })\n ];\n\n if (purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_PARENT)\n initialLineItems.push(new LineItem({ product: adminAccessProducts[0], quantity: 1 }));\n } else if (purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_CLINICIAN || purchaseFlow === PURCHASE_FLOWS.SHAPA_HEALTH_CLINICIAN) {\n initialLineItems = [\n new LineItem({ product: adminAccessProducts[0], quantity: 1 })\n ];\n } else if (purchaseFlow === PURCHASE_FLOWS.SHAPA_END_USER) {\n let initialSelectedPlan = planProducts.find(p => p.default);\n\n // If there is a selected plan in the query string (ex. the user selected a plan on the homepage), use that instead of the default.\n if (selectedPlanId) {\n const queryStringSelectedPlanIndex = planProducts.findIndex((plan) => plan.id === parseInt(selectedPlanId));\n const queryStringSelectedPlan = planProducts[queryStringSelectedPlanIndex];\n if (queryStringSelectedPlan)\n initialSelectedPlan = queryStringSelectedPlan;\n }\n\n initialLineItems = [\n new LineItem({ product: scaleProducts[0], quantity: 1 }),\n new LineItem({ product: initialSelectedPlan, quantity: 1 }),\n ];\n } else if (purchaseFlow === PURCHASE_FLOWS.SHAPA_BP_ADDON || purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_BP_ADDON) {\n initialLineItems = [\n new LineItem({ product: bpDeviceProducts[0], quantity: 1 }),\n ];\n }\n\n const CLINICIAN_MODES = { NEW_ORGANIZATION: \"NEW_ORGANIZATION\", EXISTING_ORGANIZATION: \"EXISTING_ORGANIZATION\" };\n const PURCHASE_STAGES = { CHOOSE_MODE: \"CHOOSE_MODE\", PRODUCT_SELECTION: \"PRODUCT_SELECTION\", SHIPPING: \"SHIPPING\", PAYMENT: \"PAYMENT\", REVIEW: \"REVIEW\", CONFIRMATION: \"CONFIRMATION\" };\n const INITIAL_PURCHASE_STATE = purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_CLINICIAN || purchaseFlow === PURCHASE_FLOWS.SHAPA_HEALTH_CLINICIAN ? PURCHASE_STAGES.CHOOSE_MODE : PURCHASE_STAGES.PRODUCT_SELECTION;\n const [promoCode, setPromoCode] = useState(null);\n const [totalPrice, setTotalPrice] = useState(0);\n const [purchaseStage, setPurchaseStageDirect] = useState(INITIAL_PURCHASE_STATE);\n const [clinicianMode, setClinicianMode] = useState(CLINICIAN_MODES.NEW_ORGANIZATION);\n const [order, setOrder] = useState(null);\n const [lineItems, setLineItems] = useState(initialLineItems);\n const [npi, setNpi] = useState(null);\n const [deferredUserCreate, setDeferredUserCreate] = useState(false);\n\n const setPurchaseStage = val => {\n setPurchaseStageDirect(val);\n history.pushState({ stage: val }, null, \"\");\n\n // Each time we set the purchase stage, we'll scroll to the top of the window.\n // We've actually had people complain that sometimes they only see the footer and it has been impossible to reproduce for us, even with Guy going to one customer's house to use their phone and computer.\n // I have a suspicion that they have a small screen or window and sometimes get to a purchase stage that is scrolled too far from the previous stage and they don't know they have to scroll up.\n // So, this is very important code. Don't remove unless replacing with a better solution.\n window.scrollTo(0, 0);\n };\n\n /**\n * This method will take an array of line items and for each one, first search for an existing line item of the same product category (ex. device or membership) and device type (ex. scale or BP device)\n * and update the line item if found. If an existing line item isn't found, the given line item will simply be appended.\n * @param {LineItem[]} lineItemUpdates\n */\n const setLineItemsByCategory = lineItemUpdates => {\n const newLineItems = [...lineItems];\n\n lineItemUpdates.forEach(lineItemUpdate => {\n const lineItemObj = new LineItem(lineItemUpdate);\n\n const existingLineItemIndex = newLineItems.findIndex(li => li.product.category === lineItemObj.product.category);\n if (existingLineItemIndex >= 0)\n newLineItems[existingLineItemIndex] = lineItemObj;\n else\n newLineItems.push(lineItemObj);\n });\n\n // Sort line items such that memberships appear after any other products such as scales, BP devices, and admin access.\n newLineItems.sort((a, b) => {\n const aOrder = a.product.category === PRODUCT_CATEGORIES.MEMBERSHIP ? 1 : 0;\n const bOrder = b.product.category === PRODUCT_CATEGORIES.MEMBERSHIP ? 1 : 0;\n return aOrder - bOrder;\n });\n\n // Any time the line items are updated, we should reset the promo code, as we no longer know if the promo code is valid for the new product selections.\n setPromoCode(null);\n\n setLineItems(newLineItems);\n };\n\n const removeLineItems = existingLineItems => {\n setLineItems(lineItems.filter(li => {\n if (Array.isArray(existingLineItems))\n return !existingLineItems.includes(li);\n\n return li !== existingLineItems;\n }));\n\n // Any time the line items are updated, we should reset the promo code, as we no longer know if the promo code is valid for the new product selections.\n setPromoCode(null);\n };\n\n const [shippingStageState, setShippingStageState] = useState({\n firstName: '',\n lastName: '',\n email: '',\n address1: '',\n address2: '',\n phone: '',\n country: countries[\"US\"],\n city: '',\n state: '',\n zipCode: '',\n password: '',\n passwordConfirmation: '',\n organizationName: '',\n organizationCode: '',\n shippingMethod: shippingMethods.standard,\n isArrivalPhoneCallRequested: false\n });\n\n const [paymentStageState, setPaymentStageState] = useState({\n creditCardNumber: '',\n nameOnCard: '',\n creditCardDate: '',\n maskChar: '',\n cvv: '',\n isUsingBillingAddress: false,\n paymentInputAddress: '',\n paymentInputAddress2: '',\n paymentInputCountry: countries[\"US\"],\n paymentInputCity: '',\n paymentInputState: '',\n paymentInputZip: '',\n }\n );\n\n const [giftSenderInformation, setGiftSenderInformation] = useState({\n name: '',\n email: '',\n message: '',\n giftConfirmationEmail: recipientType.me,\n isGift: false,\n }\n );\n\n // This object will give useful information about the app/environment depending on the purchase flow portal.\n let appInfo;\n if (portal === PORTALS.CLEARSTEP)\n appInfo = { name: \"MyClearStep\", supportEmail: 'support@myclearstep.com', clientPurchaseURL: 'https://store.myclearstep.com/orders/buy-now', iosStoreUrl: 'https://apps.apple.com/us/app/clearstep/id1510599421', androidStoreUrl: 'https://play.google.com/store/apps/details?id=com.shapau.android&hl=en_US&gl=US' };\n else if (portal === PORTALS.SHAPA_HEALTH)\n appInfo = { name: \"Shapa\", supportEmail: 'support@shapa.me', clientPurchaseURL: 'https://www.myshapa.com/orders/buy-now', iosStoreUrl: 'https://apps.apple.com/us/app/shapa-inc/id1053767884', androidStoreUrl: 'https://play.google.com/store/apps/details?id=com.shapa.android' };\n else\n appInfo = { name: \"Shapa\", supportEmail: 'support@shapa.me', clientPurchaseURL: 'https://www.myshapa.com/orders/buy-now', iosStoreUrl: 'https://apps.apple.com/us/app/shapa-inc/id1053767884', androidStoreUrl: 'https://play.google.com/store/apps/details?id=com.shapa.android' };\n\n const contextValue = {\n appInfo,\n PURCHASE_STAGES,\n CLINICIAN_MODES,\n promotional,\n totalPrice,\n order,\n setOrder,\n setTotalPrice,\n selectedPlanId,\n purchaseStage,\n scaleBpBundleProducts,\n scaleProducts,\n bpDeviceProducts,\n planProducts,\n adminAccessProducts,\n setPurchaseStage,\n shippingStageState,\n setShippingStageState,\n paymentStageState,\n setPaymentStageState,\n promoCode,\n setPromoCode,\n salesTaxRates,\n isProduction,\n referralCode,\n referralCodeValid,\n plansConfiguration,\n giftSenderInformation,\n setGiftSenderInformation,\n urlPromoCode,\n adminReferralTargetCode,\n abTestingPage,\n quantitiesEnabled: purchaseFlow === PURCHASE_FLOWS.CLEARSTEP_CLINICIAN || purchaseFlow === PURCHASE_FLOWS.SHAPA_HEALTH_CLINICIAN,\n portal,\n purchaseFlow,\n lineItems,\n setLineItemsByCategory,\n setLineItems,\n removeLineItems,\n npi,\n setNpi,\n deferredUserCreate,\n setDeferredUserCreate,\n clinicianMode,\n setClinicianMode\n };\n\n useEffect(() => {\n history.replaceState({ stage: INITIAL_PURCHASE_STATE }, null, \"\");\n }, []);\n\n const renderContent = () => {\n let content = null;\n const navBar = document.getElementById(\"nav-bar\");\n const buyNowContainer= document.getElementById(\"buy-now-container\");\n if (purchaseStage === PURCHASE_STAGES.PRODUCT_SELECTION) {\n const timeoutId = setTimeout(() => { // we need to setTimeout at first to get NavBar values after it gets rendered.\n navBar.style.visibility = \"visible\";\n buyNowContainer.style.marginTop = `${navBar.offsetHeight + navBar.offsetTop}px`;\n clearTimeout(timeoutId);\n }, 200);\n content = {title}
\n {children}\n\n \n
\n\n
\n \n Next\n \n
\n \n \n {renderContent()}\n \n
\n );\n};\n\nBuyNow.propTypes = {\n portal: PropTypes.string.isRequired,\n purchaseFlow: PropTypes.string.isRequired,\n promotional: PropTypes.object,\n scaleBpBundleProducts: PropTypes.array.isRequired,\n scaleProducts: PropTypes.array.isRequired,\n bpDeviceProducts: PropTypes.array.isRequired,\n planProducts: PropTypes.array.isRequired,\n adminAccessProducts: PropTypes.array.isRequired,\n salesTaxRates: PropTypes.array.isRequired,\n isProduction: PropTypes.bool.isRequired,\n countries: CountriesPropTypes.isRequired,\n referralCode: PropTypes.string,\n referralCodeValid: PropTypes.bool.isRequired,\n plansConfiguration: PropTypes.object.isRequired,\n urlPromoCode: PropTypes.string,\n adminReferralTargetCode: PropTypes.string,\n abTestingPage: PropTypes.bool.isRequired\n};\n\n// solution for using hooks in parent component https://github.com/shakacode/react_on_rails/issues/1198#issuecomment-483784251\nexport default BuyNow;\n","import BuyNowErrorBoundary from \"./BuyNowErrorBoundary\";\nimport React from \"react\";\nimport BuyNow from \"./BuyNow\";\n\n/**\n * By using a wrapper for our root component, we can surround all code with an error boundary.\n * For example, our BuyNowErrorBoundary component can capture all unhandled exceptions and log or email them.\n * @param {Object} props\n * @returns {JSX.Element}\n * @constructor\n */\nconst BuyNowWrapper = props => (\n