\n {buttons}\n
\n )\n}\n\nexport function getPlanName(props:PlanCardProps): string {\n let prefix = \"\"\n if (props.planType === PlanType.Monthly) {\n if (props.productType === ProductType.BB2) {\n prefix = \"Classic \"\n }\n else if (props.productType === ProductType.BB3) {\n prefix = \"BB3 \"\n }\n else if (props.productType === ProductType.BB4) {\n prefix = \"BB4 \"\n } \n }\n return `${prefix}${props.planName}`\n}\n\nexport default function PlansOverview (\n { selectedCategory, categories, isLoading, excludeFreeTier=false, \n onProductSelected, onPurchaseClicked, homePage = false }:Props\n) : ReactElement {\n const dispatch = useDispatch()\n const saleData = useSelector(currentSaleData)\n const userPlans = useSelector(getUserPlans)\n\n\n useLayoutEffect(()=>{dispatch(fetchSale())}, [dispatch])\n\n // TODO: this function is reused in at least InlinePlans.tsx so the filter array should be a shared variable somewhere instead of copy-pasted\n const allCardProps = generatePlanCardProps(saleData.discountInfo, saleData.saleAssets)\n const cardProps:PlanCardProps[] = allCardProps[selectedCategory]\n\n // if there's only one plan, it might be nice to force it to be featured so the screen seems more alive\n // if (cardProps.length === 1) {\n // cardProps[0].featured = true\n // }\n const atLeastOneSale = cardProps.findIndex(props => props.discountedCost !== undefined) !== -1\n return (\n <>\n {/* { selectedCategory ===ProductCategory.BB3 ? null\n :\n \n } */}\n \n
\n \n )\n}\n","export enum BB_PAYMENT_PROVIDER_NAMES {\n STRIPE = \"stripe\",\n ADMIN = \"admin\",\n XSOLLA = \"xsolla\",\n}","import React, { ReactElement, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nimport { faAngleUp } from \"@fortawesome/free-solid-svg-icons/faAngleUp\";\nimport { faAngleDown } from \"@fortawesome/free-solid-svg-icons/faAngleDown\";\n\nimport PlanFAQ from \"../helpers/planFAQ\"\n// import styles from \"../../styles/plans/Plans.module.scss\"\n\nimport simplePlanStyles from \"../../styles/plans/SimplifiedPlansOverview.module.scss\"\n\nimport { faqTextForProductName } from \"../../pages/Home\";\n\nimport { \n ProductCategory, \n} from \"../../reducers/models\"\n\nfunction getFAQContent (state: Boolean, productCategory: ProductCategory): ReactElement {\n if (!state) {\n return <>;\n }\n\n return (\n \n
\n {renderProductButtons(selectedCategory, categories, onProductSelected)}\n \n Choose the {PRODUCT_CATEGORY_NAME[selectedCategory]} plan\n that's right for you!\n
\n{PRODUCT_SUBHEADING[selectedCategory]} {PRODUCT_SUBSUBHEADING[selectedCategory]}
\n\n {cardProps.map(props => \n {\n const lowerCaseProduct = props.productType.toLowerCase() as keyof bb.model.account.IPlans;\n\n // disable the button if the user is on the plan already\n let disabledButton = false;\n if(userPlans){\n const userPlanName = userPlans[lowerCaseProduct]?.plan?.name\n userPlanName && userPlanName === props.planName ? disabledButton = true : disabledButton = false\n }\n\n return (\n {\n onPurchaseClicked(PLANS_JSON[props.planId])\n }\n }\n disableButton={disabledButton}\n />\n )}\n )}\n
\n \n \n { categories.includes(ProductCategory.Monthly) ? \n
\n : null }\n
\n Click Here for no commitment monthly plans starting at $9.99
\n : null }\n \n
\n \n Frequently Asked Questions\n
\n \n {\n setOpenBB2State(!openBB2State);\n }}\n >\n
\n {getFAQContent(openBB2State, ProductCategory.BB2)}\n Buildbox Classic
\n {\n {\n setOpenBB3State(!openBB3State);\n }}\n >\n
\n {getFAQContent(openBB3State, ProductCategory.BB3)}\n \n Buildbox 3
\n {\n {\n setOpenBB4State(!openBB4State);\n }}\n >\n
\n {getFAQContent(openBB4State, ProductCategory.BB4)}\n \n \n );\n}","import React, { ReactElement, useEffect, useState } from \"react\"\nimport { \n PlanType,\n ProductCategory,\n stringToProductCategory, \n} from \"../../reducers/models\"\nimport PlansOverview from \"./PlansOverview\"\n//import SimplifiedPlansOverview from \"./SimplifiedPlansOverview\"\n//import PlanFAQ from \"../helpers/planFAQ\"\nimport CardSection from \"../../components/home/CardSection\";\nimport { cardSectionForProductName } from \"../../pages/Home\";\nimport { addPlanToCart } from \"../../actions/cart\";\nimport { isMobileDevice } from \"../../utils/browserUtils\";\nimport { \n redirectToDownloads,\n redirectToThankYouPage \n} from \"../../utils/routes\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport currentUserInfo from \"../../selectors/currentUserInfo\";\nimport PromotionalBanner from \"../../components/PromotionalBanner\";\nimport currentSaleContext from \"../../selectors/currentSaleContext\";\nimport classnames from \"classnames\";\nimport { useHistory } from \"react-router-dom\";\nimport { getPlanProvider } from \"../../selectors/currentAccountSelector\";\nimport { fetchAccountData, fetchPlanProvider } from \"../../actions/account\";\nimport { BB_PAYMENT_PROVIDER_NAMES } from \"../../constants/account\";\nimport styles from \"../../styles/plans/Plans.module.scss\"\n\nimport MultiFAQ from \"./MultiFAQ\"\nimport stylesSimplified from \"../../styles/plans/SimplifiedPlansOverview.module.scss\"\nimport { fetchSale } from \"../../actions/sale\";\n\n/*\n * Set up the product category (AKA the bb2,bb3,soundbox,etc. buttons) order and initially selected\n * based off of things like the URL path and optional env vars\n */\nconst DEFAULT_CATEGORY_ORDER = [\n ProductCategory.BB4,\n ProductCategory.BB2,\n ProductCategory.BB3,\n //ProductCategory.Monthly, // monthly plans default disabled 8/24\n ProductCategory.Soundbox,\n ProductCategory.BBBundle\n]\n\nconst CATEGORY_ORDER:ProductCategory[] = process.env.REACT_APP_PRODUCT_CATEGORY_ORDER !== undefined?\n process.env.REACT_APP_PRODUCT_CATEGORY_ORDER\n .split(\",\")\n .map(str => str.trim())\n .map(stringToProductCategory)\n .filter(category => category != null) as ProductCategory[]\n :\n DEFAULT_CATEGORY_ORDER\n\nconst PATH_NAME_PRODUCT_MAP = {\n \"monthly\": ProductCategory.Monthly,\n \"bb4\": ProductCategory.BB4,\n \"bb3\": ProductCategory.BB3,\n \"bb2\": ProductCategory.BB2,\n \"classic\": ProductCategory.BB2,\n \"bundle\": ProductCategory.BBBundle,\n \"soundbox\": ProductCategory.Soundbox\n}\n\nfunction getInitialCategory():ProductCategory {\n const lastPath = window.location.pathname.split(\"/\").pop()\n const categoryFromPath:ProductCategory|undefined = PATH_NAME_PRODUCT_MAP[lastPath as keyof typeof PATH_NAME_PRODUCT_MAP]\n return categoryFromPath !== undefined? categoryFromPath : CATEGORY_ORDER[0]\n}\n\nexport default function Plans(props: any): ReactElement {\n const { homePage } = props\n const dispatch = useDispatch()\n const currentUser = useSelector(currentUserInfo)\n const saleContext = useSelector(currentSaleContext)\n const [selectedCategory, setSelectedCategory] = useStateBuildbox 4
\n {\n {!homePage &&
\n )\n}\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"buttonShared\":\"NewHome_buttonShared__1IMvL\",\"buttonVerticalGradientOrangeYellow\":\"NewHome_buttonVerticalGradientOrangeYellow__fYRI2\",\"buttonVerticalGradientOrange\":\"NewHome_buttonVerticalGradientOrange__3Gxvg\",\"buttonNewBB4Home\":\"NewHome_buttonNewBB4Home__2Ovbm\",\"buttonReglarDarkGrey\":\"NewHome_buttonReglarDarkGrey__1J9AV\",\"buttonReglarGrey\":\"NewHome_buttonReglarGrey__ZdYYz\",\"buttonGradientOrange\":\"NewHome_buttonGradientOrange__ImYT_\",\"buttonRegularYellow\":\"NewHome_buttonRegularYellow__2Wjky\",\"buttonRegularOrange\":\"NewHome_buttonRegularOrange__2DNiD\",\"buttonGhost\":\"NewHome_buttonGhost__2dd3B\",\"buttonGhostDisabled\":\"NewHome_buttonGhostDisabled__1WxZ6\",\"buttonGhostGreen\":\"NewHome_buttonGhostGreen__RuW6F\",\"buttonGhostGradientOrange\":\"NewHome_buttonGhostGradientOrange__2Sp0H\",\"buttonGhostOrange\":\"NewHome_buttonGhostOrange__1fRKm\",\"buttonGhostDarkBlue\":\"NewHome_buttonGhostDarkBlue__3JJZp\",\"buttonGhostBlue\":\"NewHome_buttonGhostBlue__5ELMU\",\"buttonGhostGrey\":\"NewHome_buttonGhostGrey__2ymht\",\"buttonDisabled\":\"NewHome_buttonDisabled__3XJTp\",\"clientLoginText\":\"NewHome_clientLoginText__bH9ny\",\"returnToSignIn\":\"NewHome_returnToSignIn__1MMRq\",\"error\":\"NewHome_error__3lYlV\",\"link\":\"NewHome_link__3HwcO\",\"arrow\":\"NewHome_arrow__3y6uc\",\"signOut\":\"NewHome_signOut__2i6xf\",\"signOutText\":\"NewHome_signOutText__24Ecx\",\"button\":\"NewHome_button__3uqsG\",\"container\":\"NewHome_container__i4hM-\",\"shop\":\"NewHome_shop__AixR_\",\"buttonWrapper\":\"NewHome_buttonWrapper__2BpFT\"};","export default (state: { sale: { saleContext: bb.model.sale.ISaleContext } }) =>\n state.sale.saleContext;\n","import unsupportedIterableToArray from \"./unsupportedIterableToArray\";\nexport default function _createForOfIteratorHelper(o) {\n if (typeof Symbol === \"undefined\" || o[Symbol.iterator] == null) {\n if (Array.isArray(o) || (o = unsupportedIterableToArray(o))) {\n var i = 0;\n\n var F = function F() {};\n\n return {\n s: F,\n n: function n() {\n if (i >= o.length) return {\n done: true\n };\n return {\n done: false,\n value: o[i++]\n };\n },\n e: function e(_e) {\n throw _e;\n },\n f: F\n };\n }\n\n throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n }\n\n var it,\n normalCompletion = true,\n didErr = false,\n err;\n return {\n s: function s() {\n it = o[Symbol.iterator]();\n },\n n: function n() {\n var step = it.next();\n normalCompletion = step.done;\n return step;\n },\n e: function e(_e2) {\n didErr = true;\n err = _e2;\n },\n f: function f() {\n try {\n if (!normalCompletion && it[\"return\"] != null) it[\"return\"]();\n } finally {\n if (didErr) throw err;\n }\n }\n };\n}","// extracted by mini-css-extract-plugin\nmodule.exports = {\"cardItem\":\"CardItem_cardItem__2l5OQ\",\"info\":\"CardItem_info__19PYG\",\"text\":\"CardItem_text__29moO\",\"cardTitle\":\"CardItem_cardTitle__3LZwh\",\"link\":\"CardItem_link__2QTDZ\",\"cardWrapper\":\"CardItem_cardWrapper__3RkDl\",\"fade-img\":\"CardItem_fade-img__2j-ei\",\"img\":\"CardItem_img__2E1PR\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"cardSection\":\"CardSection_cardSection__WvxSY\",\"shapesBg\":\"CardSection_shapesBg__2obK_\",\"BB2\":\"CardSection_BB2__gh1zb\",\"BB3\":\"CardSection_BB3__1X8WL\",\"Soundbox\":\"CardSection_Soundbox__1_Hb7\",\"container\":\"CardSection_container__1UPTD\",\"wrapper\":\"CardSection_wrapper__3t-Uj\",\"items\":\"CardSection_items__37ICM\"};","import React from \"react\";\nimport styles from \"../../styles/home/CardItem.module.scss\";\nimport homeStyles from \"../../styles/home/NewHome.module.scss\";\n\nfunction CardItem({\n imgLink,\n img,\n alt,\n text,\n button,\n buttonCTA,\n title,\n lightText,\n}) {\n return (\n <>\n \n {/*
\n \n \n {text}\n \n {button && (\n \n \n \n )}\n
\n {topLine}
\n\n
\n \n );\n};\n\nexport default CardSection;\n","export const getAccountSubscription = (state: {\n account: { subscriptions: bb.model.account.ICurrentPlan };\n}) => {\n return state.account.subscriptions;\n};\n\nexport const getAccountBilling = (state: {\n account: { currentPlan: bb.model.account.ICurrentPlan };\n}) => {\n console.log(\"account\", state.account);\n return state.account.currentPlan.billingInfo;\n};\n\nexport const getAccountInvoices = (state: {\n account: { invoices: bb.model.account.IInvoice };\n}) => {\n return state.account.invoices;\n};\n\nexport const getUpcomingInvoice = (state: {\n account: { upcomingInvoice: bb.model.account.IUpcomingInvoice | null};\n}) => {\n return state.account.upcomingInvoice\n}\n\nexport const getBundleSubscritpion = (state: {\n account: { bundleScription: boolean };\n}) => {\n return state.account.bundleScription;\n}\n\nexport const getEligibleRenewal = (state: {\n account : { eligibleRenewal: bb.model.account.IEligibleRenewal};\n}) => {\n return state.account.eligibleRenewal;\n}\n\nexport const getPlanProvider = (state: {\n account: { planProviders: bb.model.account.IUserPlanProviders };\n }) => {\n return state.account.planProviders;\n}\n\nexport const getUserPlans = (state: {\n account: { plans: bb.model.account.IPlans };\n}) => {\n return state.account.plans;\n}","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar prefix = 'fas';\nvar iconName = 'spinner';\nvar width = 512;\nvar height = 512;\nvar aliases = [];\nvar unicode = 'f110';\nvar svgPathData = 'M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z';\n\nexports.definition = {\n prefix: prefix,\n iconName: iconName,\n icon: [\n width,\n height,\n aliases,\n unicode,\n svgPathData\n ]};\n\nexports.faSpinner = exports.definition;\nexports.prefix = prefix;\nexports.iconName = iconName;\nexports.width = width;\nexports.height = height;\nexports.ligatures = aliases;\nexports.unicode = unicode;\nexports.svgPathData = svgPathData;\nexports.aliases = aliases;","import React from \"react\";\nimport { faSpinner } from \"@fortawesome/free-solid-svg-icons/faSpinner\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport styles from \"../../styles/GenericLoader.module.scss\";\n\nexport default function GenericLoader() {\n return (\n \n
\n - \n {cardItems.map((item, i) => (\n
\n
\n );\n}\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"loader\":\"GenericLoader_loader__1Kk5q\",\"loadingIcon\":\"GenericLoader_loadingIcon__1C_Fg\"};","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar prefix = 'fas';\nvar iconName = 'minus';\nvar width = 448;\nvar height = 512;\nvar aliases = [8211,8722,10134,\"subtract\"];\nvar unicode = 'f068';\nvar svgPathData = 'M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z';\n\nexports.definition = {\n prefix: prefix,\n iconName: iconName,\n icon: [\n width,\n height,\n aliases,\n unicode,\n svgPathData\n ]};\n\nexports.faMinus = exports.definition;\nexports.prefix = prefix;\nexports.iconName = iconName;\nexports.width = width;\nexports.height = height;\nexports.ligatures = aliases;\nexports.unicode = unicode;\nexports.svgPathData = svgPathData;\nexports.aliases = aliases;","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar prefix = 'fas';\nvar iconName = 'plus';\nvar width = 448;\nvar height = 512;\nvar aliases = [10133,61543,\"add\"];\nvar unicode = '2b';\nvar svgPathData = 'M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z';\n\nexports.definition = {\n prefix: prefix,\n iconName: iconName,\n icon: [\n width,\n height,\n aliases,\n unicode,\n svgPathData\n ]};\n\nexports.faPlus = exports.definition;\nexports.prefix = prefix;\nexports.iconName = iconName;\nexports.width = width;\nexports.height = height;\nexports.ligatures = aliases;\nexports.unicode = unicode;\nexports.svgPathData = svgPathData;\nexports.aliases = aliases;"],"sourceRoot":""}