\n
\n Something's Missing…
\n\n "\n {messages[Math.floor(Math.random() * messages.length)]}\n "\n
\n \n\n
\n )\n}\n","import { usecannySsoMutation } from '@brand-console/generated-graphql-hooks'\nimport { Spinner } from '@cart/ui'\nimport React, { useEffect } from 'react'\nimport { createGlobalStyle } from 'styled-components'\n\nconst CustomStyles = createGlobalStyle`\n // Hide the Zendesk Launcher\n #launcher {\n display: none;\n }\n`\n\nexport const Feedback = () => {\n const [error, setError] = React.useState(null)\n const [canny] = usecannySsoMutation()\n\n useEffect(() => {\n const getToken = async () => {\n try {\n const result = await canny()\n const ssoToken = result.data.org_userCannySso\n const params = {\n companyID: '644d2ef8f48c9709174459da',\n redirect: 'https://cart.canny.io/changelog',\n ssoToken,\n }\n const query = new URLSearchParams(params).toString()\n const url = `https://canny.io/api/redirects/sso?${query}`\n window.location.href = url\n } catch (err) {\n setError(err.toString())\n }\n }\n getToken()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return (\n <>\n \n
\n \n
\n \n
\n\n \n \n Oops! we’re experiencing some hiccups on our end
\n\n Please try returning to the previous page. Contact us if this persists.\n
\n\n {error &&
\n {error}
}\n\n
\n )\n}\n","import { useRouter } from '@cart/ui'\nimport { useCartAuth } from '@cartdotcom/auth'\n\nexport const Logout = () => {\n const { onLogout } = useCartAuth()\n const { query } = useRouter()\n\n let returnUrl = window.location.origin\n if (query?.app === 'dfw') {\n returnUrl = process.env.NX_DFW_LOGIN_URL\n }\n\n if (query?.app === 'mcm') {\n returnUrl = `${process.env.NX_MCM_ORIGIN}/login`\n }\n\n onLogout({ returnUrl })\n return null\n}\n","export { Logout } from './Logout'\r\n","import { withAuthenticationRequired } from '@auth0/auth0-react'\nimport { Spinner } from '@cart/ui'\nimport React from 'react'\n\nexport const ProtectedRoute = ({ component, Loading = \n
\n Brand Console Status
\n\n
\n Git Branch
\n{gitInfo.branch}
\n\n
\n Git Tags
\n{gitInfo.tags.join(', ')}
\n\n
\n Git Commit SHA
\n{gitInfo.commit.hash}
\n\n
\n Last Build Time
\n{preval`module.exports = new Date().toLocaleString('en-US', {dateStyle: 'full', timeStyle: 'full', timeZone: 'America/Chicago'})`}
\n\n Business ID: {id}\n
\n {isActive && (\n\n \n \n
\n )\n}\n","export * from './AccountDropdown'\n","/* eslint-disable react/jsx-props-no-spreading */\nimport { solid } from '@fortawesome/fontawesome-svg-core/import.macro'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport ListItemText from '@mui/material/ListItemText'\nimport MenuItem from '@mui/material/MenuItem'\nimport React, { FC, MouseEventHandler, ReactNode, memo, useContext } from 'react'\nimport { Link, UNSAFE_LocationContext } from 'react-router-dom'\nimport tw from 'twin.macro'\n\nexport interface AppItemProps {\n title: string\n Icon: ReactNode\n href: string\n variant?: 'default' | 'discover'\n desc?: string\n handleClick?: MouseEventHandler\n
\n \n \n {\n window.location.href = `${process.env.NX_APP_ORIGIN}/settings/profile?nav=${product}`\n }}\n >\n Manage Account\n \n )}\n
\n \n {formattedName}\n
\n {!userHasNoName && (\n\n {email}\n
\n )}\n\n {isReactRouterAvailable &&\n
\n )}\n {businessList && businessList.length > 0 && (\n - \n
- \n Organization:\n \n
\n
\n )}\n \n
\n \n {businessEntityTerminology}\n
\n\n {isUnifiedAnalytics && businessList.length > 1 && (\n \n {sortedBusinessList.map((business) => (\n
\n \n \n Data from all businesses is available in Unified Analytics. You can filter\n by business within your dashboard views.\n \n
\n )}\n \n
\n {Icon}
\n \n \n {title}\n \n {desc && (\n \n {desc}\n \n )}\n
\n {variant === 'discover' && (\n \n \n \n
\n )\n}\n","import { cartMuiTheme } from '@cart/ui/theme'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport tw, { styled } from 'twin.macro'\n\nexport const StyledIcon = styled(FontAwesomeIcon)(({ color, height }) => [\n !height ? tw`h-6` : `height: ${typeof height === 'number' ? `${height}px` : height};`,\n `color:${color || cartMuiTheme.palette.action.active}`,\n])\n","/* eslint-disable react/jsx-props-no-spreading */\nimport { Badge } from '@cart/ui/atoms/Badge'\nimport { Button } from '@cart/ui/atoms/Button'\nimport { useStoreInitializer } from '@cartdotcom/auth'\nimport { solid } from '@fortawesome/fontawesome-svg-core/import.macro'\nimport React, { FC, useCallback, useEffect, useState } from 'react'\n\nimport { StyledIcon } from './McmNotifications.styles'\nimport { McmNotificationsProps } from './McmNotifications.types'\n\nfunction notificationsLabel(count: number) {\n if (count === 0) {\n return 'no notifications'\n }\n if (count > 99) {\n return 'more than 99 notifications'\n }\n return `${count} notifications`\n}\n\nconst UnreadCountToDisplay = ({ unreadCount }) => {\n const count = unreadCount > 9 ? '9+' : unreadCount\n return \n \n \n \n \n {enabledItems.length > 0 && (\n \n Launch \n \n {enabledItems.map(({ title, icon, link, onClick }) => (\n \n \n )}\n {disabledItems.length > 0 && (\n \n Suggested \n \n {disabledItems.map(({ title, icon, link, onClick }) => (\n \n \n )}\n \n \n More from Cart \n \n {DISCOVER_ITEMS.map(({ title, icon, link, desc }) => (\n \n \n \n \n \n \n
\n \n \n \n
\n {count}
\n}\n\ninterface CustomEventDetail {\n unreadCount: number\n}\n\nexport const McmNotifications: FC\n
\n )\n}\n","import { useReactiveVar } from '@apollo/client'\nimport {\n activeBizVar,\n InstanceType,\n useOrgProductInstanceListQuery,\n} from '@brand-console/generated-graphql-hooks'\nimport { useLayoutStore } from '@brand-console/utilities'\nimport React, { memo, useEffect } from 'react'\n\nimport { Header as HeaderComponent } from './components/Header'\nimport { HeaderProps } from './header.types'\n\nconst HeaderComp = ({ product = null, toggleNav }: HeaderProps) => {\n const activeBiz = useReactiveVar(activeBizVar)\n const { setFulfillmentProvisioned } = useLayoutStore()\n const { data: productInstances } = useOrgProductInstanceListQuery({\n variables: {\n input: {\n businessId: activeBiz?.id,\n },\n },\n skip: !activeBiz?.id,\n })\n\n useEffect(() => {\n const hasFulfillmentProduct = productInstances?.org_productInstanceList?.find(\n (productInstance) => productInstance.instanceType === InstanceType.FULFILLMENT,\n )\n setFulfillmentProvisioned(!!hasFulfillmentProduct)\n }, [productInstances, setFulfillmentProvisioned])\n return \n \n \n
\n \n
\n {getIcon(icon)}
\n \n ) : (\n getIcon(icon)\n )}\n \n {item.title}\n
\n )\n }\n return (\n{menu.title}
}\nChanges
\n
\n )\n}\n","import { ProductType } from '@brand-console/types'\n\nexport interface LeftNavProps {\n open: boolean\n product?: ProductType\n}\n","import React, { memo } from 'react'\n\nimport { LeftNav as LeftNavComponent } from './components/LeftNav/LeftNav'\nimport { LeftNavProps } from './left-nav.types'\n\nexport * from './left-nav.types'\n\nconst LeftNavComp = ({ product = null, open = true }: LeftNavProps) => {\n return (\n \n
\n \n
\n {isMenuExpanded && (\n \n \n \n setShowSearch(false)} onSearch={handleSearch} />\n
\n \n \n \n
\n )}\n \n\n {isExpanded && (\n - \n {nodes.map((node) => {\n return \n })}\n
\n
\n ) : null\n })}\n \n {visibleTenants === 0 && - \n {tenantsList.map((tenant) => {\n const isFiltered = tenant.name.toLowerCase().includes(filter)\n const hasFilteredNodes = tenant.nodes?.filter((node) =>\n node.name.toLowerCase().includes(filter),\n ).length\n\n tenant.nodes?.sort((a, b) =>\n a.name?.trim().toLowerCase().localeCompare(b.name?.trim().toLowerCase()),\n )\n\n // TODO: This is how we identify if a tenant is a Jazz tenant, which allows the tenant to be clicked.\n // Revise this logic when the integration with the Org Service is complete.\n const isJazzTenant = !!tenant.tenantCode\n\n return hasFilteredNodes || isFiltered ? (\n
\n {tenant.name}\n
\n )}\n {tenant.nodes?.map((node) => {\n return isFiltered || node.name.toLowerCase().includes(filter) ? (\n No results found
}\n \n )\n}\n","import { useBreakpoint } from '@cart/ui/hooks/useBreakpoint'\nimport { useKeyPress } from '@cart/ui/hooks/useKeyPress'\nimport { useOnClickOutside } from '@cart/ui/hooks/useOnClickOutside'\nimport { faBuilding } from '@fortawesome/pro-solid-svg-icons/faBuilding'\nimport { faCaretDown } from '@fortawesome/pro-solid-svg-icons/faCaretDown'\nimport { faCircleCheck } from '@fortawesome/pro-solid-svg-icons/faCircleCheck'\nimport { faSearch } from '@fortawesome/pro-solid-svg-icons/faSearch'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React, { ChangeEvent, useRef, useState } from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport tw from 'twin.macro'\n\nimport { SideMenuTenant } from '../../../gql/graphql'\nimport { useUnifiedSidebarStore } from '../../store/unified-sidebar.store'\nimport { TenantOptions } from './TenantInfo.partials'\nimport { StyledTenantInfo } from './TenantInfo.styles'\n\nexport const TenantInfo = () => {\n const [isOpen, setIsOpen] = useState\n {/* Currently selected tenant/child tenant (org/biz) on the sidebar */}\n
\n {shouldShowTenantSwitcher && (\n {currentTenant?.nodes?.[0]?.name}
\n {currentTenant?.name}
\n \n
\n \n \n
\n \n \n {/* Currently selected tenant on the tenant switcher */}\n \n {currentTenant.nodes?.[0] ? currentTenant.nodes[0].name : currentTenant.name}\n \n
\n {jazzRootTenant && (\n \n \n changeTenant(\n {\n businessId: null,\n name: null,\n organizationId: null,\n tenantCode: jazzRootTenant.tenantCode,\n },\n true,\n )\n }\n >\n
\n )}\n \n
\n \n \n {displayUserName}
\n \n\n \n
\n \n \n \n
\n \n 
\n
\n {userMenuItems?.length > 0 && (\n {displayUserName}
\n {/* TODO: Add user email when the service provides it */}\n {/* isabella@hc.com
*/}\n \n
\n )}\n - \n {userMenuItems.map((item) => (\n
- \n
\n \n
\n \n
\n )\n}\n","import { useAuth0 } from '@auth0/auth0-react'\nimport { useBreakpoint } from '@cart/ui/hooks/useBreakpoint'\nimport React, { useEffect, useState } from 'react'\nimport { createGlobalStyle, css } from 'styled-components'\nimport tw from 'twin.macro'\n\nimport { SideMenuTenant } from '../../../gql/graphql'\nimport { useMenuItemData } from '../../hooks/useMenuItemData'\nimport { logError } from '../../logger/logger'\nimport { useUnifiedSidebarStore } from '../../store/unified-sidebar.store'\nimport { Header } from '../header/Header'\nimport { MenuItems } from '../menu-items/Menutems'\nimport { TenantInfo } from '../tenant-info/TenantInfo'\nimport { UserInfo } from '../user-info/UserInfo'\nimport { getTenantByTenantCode } from './UnifiedSidebar.functions'\nimport { UnifiedSidebarSkeleton } from './UnifiedSidebar.partials'\n\ninterface IUnifiedSidebarComponentProps {\n dfwUrl: string\n jazzUrl: string\n mcmUrl: string\n bcUrl: string\n spa: boolean\n unsUrl: string\n authMethod?: string\n}\n\nenum AuthMethods {\n AUTH0 = 'auth0',\n JAZZ = 'jazz',\n}\n\nconst cookies = decodeURIComponent(document.cookie).split(';')\n\nconst jazzUnsOidcTokenCookie = cookies.find((cookie) =>\n cookie.trim().startsWith('jazz_uns_oidc_token='),\n)\nconst jazzUnsOidcToken = jazzUnsOidcTokenCookie?.split('=')[1]\n\nconst CustomStyles = createGlobalStyle`\n @media (display-mode: standalone) {\n [data-cartid=\"app-container\"] {\n padding-top: 3rem;\n }\n }\n`\n\nexport const UnifiedSidebar: React.FC\n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n
\n {children}
\n }\n // eslint-disable-next-line react/jsx-props-no-spreading\n return {children}
\n \n
\n \n
\n \n )}\n {children}
\n {!contentOnly && (\n \n \n
\n )}\n {snackbar && \n
\n )\n}\n","var _path;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nimport { forwardRef } from \"react\";\nvar SvgSelectIcon = function SvgSelectIcon(_ref, ref) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 10,\n height: 7,\n viewBox: \"0 0 10 7\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: ref,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0.882521 0.714355H8.795C9.34239 0.714355 9.61608 1.44283 9.22861 1.86975L5.2739 6.23043C5.03404 6.49471 4.64349 6.49471 4.40362 6.23043L0.448918 1.86975C0.0614436 1.44283 0.335136 0.714355 0.882521 0.714355Z\",\n fill: \"#202124\"\n })));\n};\nvar ForwardRef = /*#__PURE__*/forwardRef(SvgSelectIcon);\nexport { ForwardRef as ReactComponent };\nexport default __webpack_public_path__ + \"select-icon.58aa43c39ae68fe57c26af9feb852aee.svg\";","import isArray from 'lodash/isArray'\nimport isEqual from 'lodash/isEqual'\nimport isObject from 'lodash/isObject'\nimport transform from 'lodash/transform'\nimport React from 'react'\n\nimport SelectIcon from '../assets/icons/select-icon.svg'\nimport {\n ConnectorType,\n DataConnectorMutationVariables,\n DataConnectorsResponse,\n} from '../stores/types/dataConnectorsTypes'\n\nconst indicatorSeparatorStyle = {\n alignSelf: 'stretch',\n backgroundColor: 'unset',\n marginBottom: 8,\n marginTop: 8,\n width: 0,\n}\nlet prevValue = ''\n\nexport const IndicatorSeparator: any = ({ innerProps }: any) => (\n // eslint-disable-next-line react/jsx-props-no-spreading\n \n)\n\nexport const DropdownIndicator = () => \n
\n \n
\n Unable to load page at this time
\n\n Sorry for the inconvenience. A technical issue on our end is preventing this page from\n loading right now. We’re working to fix the situation as quickly as possible.\n
\n\n 
\n
\n \n
\n \n \n {data.list.map((item: any, index: number) => (\n {item} \n ))}\n \n )}\n
\n {data.generalTitle[0]}
\n0 && tw`whitespace-nowrap`]}>\n {data.text[0]}\n
\n {data.list.length > 0 && (\n\n handleButtonClick(data.link, data.isLocal)}\n variant=\"outlined\"\n tw=\"ml-auto mr-0 bg-white hover:bg-monochrome-200\"\n >\n {data.linkText}\n \n
\n {data.generalTitle[1]}
\n{data.text[1]}
\n \n {text}\n
\n \n )\n }\n\n return (\n \n )\n}\n\nButtonSetup.defaultProps = {\n connectorName: null,\n setShow: null,\n}\n","import { Card, CardContent, Carousel, CarouselItem, StatusBadge, useBreakpoint } from '@cart/ui'\nimport React from 'react'\n\nimport { useDataConnectorsData } from '../../hooks'\nimport { ButtonSetup } from './MyConnectorsModal/components/Modal/ButtonSetup'\n\nexport const MyConnectorsCarousel = ({\n setShow,\n mostPopularConnectorsList,\n packageTier,\n packageDataConnectorsList,\n}) => {\n const isMedium = useBreakpoint('md')\n\n const { dataConnectorsData } = useDataConnectorsData()\n const mostPopularDataConnectors = mostPopularConnectorsList\n .map(({ title }) => dataConnectorsData.find(({ connectorName }) => connectorName === title))\n .filter((item) => !!item)\n\n const cardButton = (name, button) => {\n if (button) {\n if (\n name === 'google-adwords' ||\n name === 'google-analytics' ||\n name === 'google-search-console'\n ) {\n return \n
\n )\n }\n }\n\n const upgradeButton = (name, button) => {\n if (button) {\n return (\n \n
\n )\n }\n }\n\n const mostPopularCards = mostPopularDataConnectors.map(\n ({ title, icon, name, description, button, connectorName }) => (\n \n
\n \n 
\n
\n {!button ? {title}
\n{description || 'no description provided'}
\n {packageTier === 'Free Trial'\n ? packageDataConnectorsList?.includes(connectorName)\n ? cardButton(name, button)\n : upgradeButton(name, button)\n : cardButton(name, button)}\nMost Popular
\n\n \n {mostPopularCards?.map((card) => (\n {card} \n ))}\n \n
\n \n )\n}\n","import { DeprecatedButton, DeprecatedDialog } from '@cart/ui'\nimport React from 'react'\n\ntype Props = {\n isOpen: boolean\n setIsOpen: (val: boolean) => void\n deleteCallback: () => void\n title: string\n describe: string\n width?: number\n height?: number\n}\n\nexport const DeleteModal = ({\n isOpen,\n setIsOpen,\n deleteCallback,\n title,\n describe,\n width,\n height,\n}: Props) => {\n return (\n {describe}
\n\n \n updateActionConnector({\n variables: {\n action: 'sync',\n dataConnectorType: dataConnector.dataConnectorType,\n dataConnectorId: Number(dataConnector.id),\n organizationId: activeOrg?.id.toString(),\n },\n }),\n },\n {\n label: 'Reset',\n onClick: () =>\n updateActionConnector({\n variables: {\n action: 'reset',\n dataConnectorType: dataConnector.dataConnectorType,\n dataConnectorId: Number(dataConnector.id),\n organizationId: activeOrg?.id.toString(),\n },\n }),\n },\n {\n label: '',\n icon: Delete,\n onClick: () => setShowDeleteModal(true),\n },\n ],\n ]}\n >\n \n updateActionConnector({\n variables: {\n action: 'delete',\n dataConnectorType: dataConnector.dataConnectorType,\n dataConnectorId: Number(dataConnector.id),\n organizationId: activeOrg?.id.toString(),\n },\n })\n }\n title=\"Please confirm\"\n describe=\"Are you sure you want to delete this Data Connector?\"\n width={639}\n />\n
\n )\n}\n\nexport const StatusCell = ({ value }) => {\n return \n
\n )\n }\n return (\n \n onChange(event.target.value)}\n id={id}\n noBorder={noBorder}\n placeholder={placeholder}\n value={value}\n searchIcon={\n path]:fill-monochrome-600\"\n onClick={() => onSearchIconClick && onSearchIconClick()}\n />\n }\n trailingIcon={\n
\n }\n onFocus={() => {\n setCloseIcon(true)\n setFocusInput(true)\n }}\n onBlur={() => {\n setFocusInput(false)\n }}\n search\n onKeyPress={(event: any) => {\n onChange(event.target.value)\n if (event.key === 'Enter' && onSearchIconClick) {\n onSearchIconClick()\n }\n }}\n />\n \n )\n}\n","import { DeprecatedButton, DeprecatedChip, Dropdown, DropdownItem, useBreakpoint } from '@cart/ui'\nimport React, { useMemo, useState } from 'react'\nimport tw from 'twin.macro'\n\nimport { SearchInput } from '../../components/atoms/SearchInput/SearchInput'\n\nexport const MyConnectorsFilter = ({ data, setValue, values }) => {\n const [mobileFilter, openMobileFilter] = useState(false)\n const isMedium = useBreakpoint('md')\n const business = useMemo(\n () =>\n values.business.map((value) => {\n return {\n value,\n title: data.business.find((item) => item.value === value).title,\n }\n }),\n [values.business, data.business],\n )\n const status = useMemo(\n () =>\n values.status.map((value) => {\n return {\n value,\n title: data.status.find((item) => item.value === value).title,\n }\n }),\n [values.status, data.status],\n )\n const category = useMemo(\n () =>\n values.category.map((value) => {\n return {\n value,\n title: data.category.find((item) => item.value === value).title,\n }\n }),\n [values.category, data.category],\n )\n\n const dropdownItems = useMemo(\n () => [\n {\n id: 'business',\n actions: data.business,\n placeholder: 'Business',\n },\n {\n id: 'status',\n actions: data.status,\n placeholder: 'Status',\n },\n\n {\n id: 'category',\n actions: data.category,\n placeholder: 'Category',\n },\n ],\n [data],\n )\n return (\n <>\n \n {closeIcon && (\n path]:fill-monochrome-600\"\n onClick={() => {\n removeValue()\n }}\n />\n )}\n {filter && (\n openMobileFilter(!mobileFilter)}\n css={[\n tw`flex h-full cursor-pointer items-center justify-center border-monochrome-500 border-l-2 w-[43px] md:hidden`,\n focusInput && tw`border-primary-700`,\n ]}\n >\n path]:fill-monochrome-600\"\n style={mobileFilter && { fill: '#0a8aee' }}\n />\n {actionsActive && actionsActive.length > 0 && !mobileFilter && (\n path]:fill-primary-700\"\n />\n )}\n
\n )}\n \n {dropdownItems.map((dropdown) => (\n 0\n ? values[dropdown.id].map((value) => {\n return {\n value,\n text: dropdown.actions.find((item) => item.value === value).title,\n selected: true,\n }\n })\n : []\n }\n >\n {dropdown.actions?.map((item) => (\n
\n )}\n \n \n {business.length > 0 && (\n {\n setValue('business', [])\n setValue('status', [])\n setValue('category', [])\n setValue('search', '')\n }}\n size=\"small\"\n />\n )}\n
\n \n )\n}\n","import { DeprecatedBadge, DeprecatedCard, DeprecatedCheckbox } from '@cart/ui'\nimport { formatDistanceToNow } from 'date-fns'\nimport React, { useState } from 'react'\nimport tw from 'twin.macro'\n\nimport { dataStatusColor } from '../../helpers/data'\nimport { DataConnectorIcon } from '../settings/DataConnectors/components/DataConnectorSection/DataConnectorSection.partials'\nimport { ActionsButton, ActionsHeaderButton } from './MyConnectors.partials'\n\nconst dataConnectorIsChecked = (connector, state) => {\n return Boolean(state.find((dataConnector) => dataConnector.id === connector.id))\n}\n\nexport const MyConnectorsMobile = ({ data, updateActionConnector }) => {\n const [selectedConnectors, setSelectedConnectors] = useState([])\n const CardTitle = ({ dataConnector, onChange, checked }) => {\n const { title, business } = dataConnector\n return (\n \n {business.map(({ value, title }) => (\n \n setValue(\n 'business',\n values.business.filter((item) => item !== value),\n )\n }\n className=\"mr-2\"\n />\n ))}\n
\n )}\n {status.length > 0 && (\n \n {status.map(({ title, value }) => (\n \n setValue(\n 'status',\n values.status.filter((item) => item !== value),\n )\n }\n />\n ))}\n
\n )}\n {category.length > 0 && (\n \n {category.map(({ title, value }) => (\n \n setValue(\n 'category',\n values.category.filter((item) => item !== value),\n )\n }\n />\n ))}\n
\n )}\n {(values.status.length > 0 || values.category.length > 0 || values.business.length > 0) && (\n \n
\n )\n }\n\n let ALL_CHECKED: boolean | undefined\n if (selectedConnectors.length === 0) {\n ALL_CHECKED = false\n } else if (selectedConnectors.length === data.length) {\n ALL_CHECKED = true\n }\n\n const checkHandler = (clickedConnector) => {\n if (dataConnectorIsChecked(clickedConnector, selectedConnectors)) {\n setSelectedConnectors((prevState) =>\n prevState.filter((dataConnector) => dataConnector.id !== clickedConnector.id),\n )\n } else {\n setSelectedConnectors((prevState) => [...prevState, clickedConnector])\n }\n }\n\n const checkAllHandler = () => {\n if (selectedConnectors.length === data.length) {\n setSelectedConnectors([])\n } else {\n setSelectedConnectors(data)\n }\n }\n\n const dataConnectorCards = data?.map((dataConnector) => {\n return (\n \n
\n \n
\n {business.name}
\n \n
\n \n
\n \n )\n })\n\n return (\n <>\n \n
\n Status
\n \n
\n \n
\n Last Updated
\n \n {formatDistanceToNow(new Date(dataConnector.lastUpdated), { addSuffix: true })}\n
\n \n
\n Category
\n \n {dataConnector.categories\n .map((category) => category.title)\n .sort()\n .join(', ')}\n
\n \n
\n {dataConnectorCards}\n \n )\n}\n","import * as Yup from 'yup'\n\nconst regexFields = {\n accountId: /^([0-9]){5,30}$/,\n apikey: '',\n apiKey: '',\n customerId: /^([0-9-]){5,19}$/,\n loginCustomerId: /^([0-9-]){5,19}$/,\n siteUrls: /^(ftp|http|https):\\/\\/[^ \"]+$/,\n startDate: /\\d{4}-\\d{2}-\\d{2}/,\n username: '',\n viewId: /^([0-9]){5,15}$/,\n propertyId: /^([0-9]){5,15}$/,\n}\n\nconst validateFieldCommon = {\n startDate: Yup.string()\n .matches(regexFields.startDate, 'Please enter correct start date in form yyyy-mm-dd')\n .required('Please enter start date'),\n viewId: Yup.string()\n .matches(regexFields.viewId, 'Please enter correct view ID')\n .required('Please enter view ID'),\n propertyId: Yup.string()\n .matches(regexFields.propertyId, 'Please enter correct property ID')\n .required('Please enter property ID'),\n accountId: Yup.string()\n .matches(regexFields.accountId, 'Please enter correct account ID')\n .required('Please enter account ID'),\n customerId: Yup.string()\n .matches(regexFields.customerId, 'Please enter correct customer ID')\n .required('Please enter customer ID'),\n loginCustomerId: Yup.string().matches(\n regexFields.loginCustomerId,\n 'Please enter correct login customer ID',\n ),\n shop: Yup.string().required('Please enter a Shopify store name'),\n apikey: Yup.string().required('Please enter API key'),\n apiKey: Yup.string().required('Please enter API key'),\n username: Yup.string().required('Please enter your username'),\n siteUrls: Yup.string()\n .matches(regexFields.siteUrls, 'Please enter correct url')\n .required('Please enter url'),\n profileId: Yup.array().required('Please enter your profile IDs seperated by commas'),\n}\n\nconst createValidate = (fields) => {\n const validate = fields.reduce((acc: Record{message}
\n}\n\nErrorsMessage.defaultProps = {\n message: null,\n}\n","import { styled } from 'twin.macro'\n\ntype StylesType = {\n navBar?: boolean\n}\n\nexport const TrackVertical = styled.div\n Set up a connector by searching for your data source.\n setSearchString(value)}\n id=\"searchSetUpModal\"\n placeholder=\"Search by name...\"\n value={searchString}\n />\n \n
\n ),\n )}\n \n \n \n \n {dataConnectorsData\n ?.filter(\n (i) =>\n (i.title.toLowerCase().includes(searchString.toLowerCase()) ||\n i.description?.toLowerCase().includes(searchString.toLowerCase())) &&\n i.button &&\n dataConnectorsCard &&\n !dataConnectorsCard[i.connectorName],\n )\n .map(({ title, icon, name, connectorName }) =>\n packageTier === 'FreeTrial' &&\n packageDataConnectorsList?.includes(connectorName) ? (\n dispatch(selectConnector(name))}\n role=\"presentation\"\n >\n {(\n
\n ) : (\n \n
\n {title}
\n {getCategory(connectorName)}
\n \n {(\n
\n \n \n
\n {title}
\n {getCategory(connectorName)}
\n \n {dataConnectorsData\n ?.filter(\n (i) =>\n (i.title.toLowerCase().includes(searchString.toLowerCase()) ||\n i.description?.toLowerCase().includes(searchString.toLowerCase())) &&\n i.button &&\n dataConnectorsCard &&\n !dataConnectorsCard[i.connectorName],\n )\n .map(({ title, icon, name, connectorName }) => (\n dispatch(selectConnector(name))}\n role=\"presentation\"\n >\n {(\n
\n ))}\n \n \n \n
\n {title}
\n {getCategory(connectorName)}
\n \n Set up a connector by searching for your data source.\n setSearchString(value)}\n id=\"searchSetUpModal\"\n placeholder=\"Search by name...\"\n value={searchString}\n />\n
\n \n \n {dataConnectorsData\n ?.filter(\n (i) =>\n (i.title.toLowerCase().includes(searchString.toLowerCase()) ||\n i.description?.toLowerCase().includes(searchString.toLowerCase())) &&\n i.button &&\n dataConnectorsCard &&\n !dataConnectorsCard[i.connectorName],\n )\n .map(({ title, icon, name, connectorName }) => (\n dispatch(selectConnector(name))}\n role=\"presentation\"\n >\n {(\n
\n ))}\n \n \n
\n {title}
\n {getCategory(connectorName)}
\n \n {dataConnectorsData\n ?.filter(\n (i) =>\n (i.title.toLowerCase().includes(searchString.toLowerCase()) ||\n i.description?.toLowerCase().includes(searchString.toLowerCase())) &&\n i.button &&\n dataConnectorsCard &&\n !dataConnectorsCard[i.connectorName],\n )\n .map(({ title, icon, name, connectorName }) => (\n dispatch(selectConnector(name))}\n role=\"presentation\"\n >\n {(\n
\n ))}\n \n \n \n
\n {title}
\n {getCategory(connectorName)}
\n \n \n \n \n
\n )\n }\n return (\n \n
\n My Connectors
\n\n
\n )\n }\n\n if (user?.data.attributes.flags.marketing_analytics_flag) {\n return (\n \n \n \n \n\n
\n )\n }\n\n return (\n My Connectors
\n\n
\n )\n}\n","import { useReactiveVar } from '@apollo/client'\nimport {\n activeOrgVar,\n useUADataConnectorsListQuery,\n useUAOrganizationDataQuery,\n} from '@brand-console/generated-graphql-hooks'\nimport { Button, Card, CardContent, StatusBadge } from '@cart/ui'\nimport React from 'react'\n\nimport { upgradeResponse } from '../../../../../../helpers/functions'\nimport { ButtonSetup } from '../../../../../MyConnectors/MyConnectorsModal/components/Modal/ButtonSetup'\n\ntype Props = {\n setShow: React.Dispatch\n
\n )\n }\n }\n const upgradeButton = (name, button) => {\n if (button) {\n return (\n \n
\n )\n }\n }\n if (packageTier === 'FreeTrial') {\n return (\n <>\n {filteredSet?.some(({ connectorName }) =>\n packageDataConnectorsList?.includes(connectorName),\n ) && Available During Free Trial
}\n\n {orgData &&\n filteredSet?.map(({ title, icon, name, description, button, connectorName }) => {\n return (\n dataConnectorsList &&\n !dataConnectorsList.ua_dataConnectorsList?.find(\n (card) => card.dataConnectorType === connectorName,\n ) &&\n connectorName !== 'StorefrontDataConnector' &&\n packageDataConnectorsList?.includes(connectorName) && (\n \n \n \n \n )\n )\n })}\n
\n \n
\n \n \n
\n {!button ? (\n {title}
\n{description || 'no description provided'}
\n {cardButton(name, button)}\nAvailable In Paid Plans
\n\n
\n Upgrade to connect to other sources.
\n\n Upgrade to one of our Unified Analytics Paid Plans to gain access to our full suite\n of data connectors. Connect to all your marketing and sales platforms to unlock\n deeper insights and scale your business! Fulfillment data sources available upon\n request for specific partners.\n
\n\n \n
\n \n {orgData &&\n filteredSet?.map(\n ({ title, icon, name, description, button, connectorName }) =>\n dataConnectorsList &&\n !dataConnectorsList.ua_dataConnectorsList?.find(\n (card) => card.dataConnectorType === connectorName,\n ) &&\n connectorName !== 'StorefrontDataConnector' &&\n !packageDataConnectorsList?.includes(connectorName) && (\n \n \n \n \n ),\n )}\n
\n \n )\n }\n\n if (filteredSet && filteredSet.length > 0) {\n return (\n \n
\n \n \n
\n {!button ? (\n {title}
\n{description || 'no description provided'}
\n {upgradeButton(name, button)}\n\n {orgData &&\n filteredSet?.map(\n ({ title, icon, name, description, button, connectorName }) =>\n dataConnectorsList &&\n !dataConnectorsList.ua_dataConnectorsList?.find(\n (card) => card.dataConnectorType === connectorName,\n ) &&\n connectorName !== 'StorefrontDataConnector' && (\n \n \n \n \n ),\n )}\n
\n )\n }\n\n if (filteredSet && filteredSet.length === 0) {\n return (\n \n
\n \n \n
\n {!button ? (\n {title}
\n{description || 'no description provided'}
\n {cardButton(name, button)}\n\n
\n )\n }\n}\n","import { useReactiveVar } from '@apollo/client'\nimport { activeOrgVar, useUADataConnectorsListQuery } from '@brand-console/generated-graphql-hooks'\nimport { Button, Card, CardContent, StatusBadge } from '@cart/ui'\nimport React, { useMemo } from 'react'\n\nimport { dataConnectorsData, dataConnectorsFields, dataStatusColor } from '../../../helpers/data'\nimport { ButtonSetup } from '../../MyConnectors/MyConnectorsModal/components/Modal/ButtonSetup'\n\ntype IncompleteConnectorsProps = {\n setShow: React.DispatchNo matching results
\nNo connectors match your search or filter criteria
\nIncomplete
\n\n
\n \n
\n \n title === dc.title).icon}\n style={{\n width: 35,\n marginRight: 15,\n }}\n />\n
\n {dc.title}
\n{dc.business.name}
\n\n {dc.status && (\n\n
\n )}\n \n setChosenAndShowDeleteModal(dc)}\n tw=\"ml-2\"\n >\n Remove\n \n
\n \n \n \n
\n ) : (\n All Connectors
\n\n onCategorySelect(category)}\n onClick={() => onCategorySelect(category)}\n css={[\n tw`block w-full px-4 py-3 text-left text-monochrome-700 [border-radius:0.5rem] hover:(bg-monochrome-50 text-monochrome-900)`,\n category === selectedCategory &&\n tw`bg-monochrome-200 text-primary-700 hover:bg-monochrome-200`,\n ]}\n >\n {category}\n \n ),\n )}\n
\n \n Categories\n
\n {dataConnectorCategories.map(\n (category) =>\n category && (\n\n {\n onSearchIconClick(e)\n setSearchString(e)\n }}\n placeholder=\"Search by name...\"\n id=\"searchAllConnectors\"\n onSearchIconClick={(value: string | undefined) =>\n onSearchIconClick(value === undefined ? searchString : value)\n }\n value={searchString}\n />\n
\n \n
\n )}\n {/* Needed for potential Incomplete connector deletion */}\n \n \n {alertProps.map((alertProp) => (\n dispatch(closeAlert(alertProp.id))}\n show\n showIcon\n />\n ))}\n {isAuthenticated && tokenInStore && \n
\n )\n }\n\n return null\n}\n","// common\nimport { createSlice, PayloadAction } from '@reduxjs/toolkit'\n\n// types\nimport { ChoicesTitleType } from '../types/emailReportsTypes'\n\n// Define a type for the slice state\n\n// @ts-ignore\nconst timeZones = Intl.supportedValuesOf('timeZone')\ninterface EmailReportsStateType {\n activeTimePeriod: 'daily' | 'weekly' | 'monthly'\n chooseTimePeriod: {\n everyDay: boolean\n someDay: boolean\n anyDayOfMonth: boolean\n specificDayOfMonth: boolean\n chooseWeekDay: string[]\n }\n checkedSendReport: boolean\n weekDays: {\n value: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n title: string\n }[]\n radioButtons: { value: 'daily' | 'weekly' | 'monthly'; title: string }[]\n choosingChoices: ChoicesTitleType | null\n filterBy: {\n subject: boolean | null\n business: boolean | null\n emailSchedule: boolean | null\n recipients: boolean | null\n reportsIncluded: boolean | null\n createdBy: boolean | null\n }\n actionsActive: {\n business: string | null\n createdBy: string | null\n }\n activeSearch: string\n selectedReports: string[]\n timeOptions: { value: string; title: string }[]\n byAccount: { value: string; title: string }[]\n timeZoneOptions: { value: string; title: string }[]\n}\n\n// Define the initial state using type\nconst initialState: EmailReportsStateType = {\n activeTimePeriod: 'daily',\n chooseTimePeriod: {\n everyDay: true,\n someDay: false,\n anyDayOfMonth: true,\n specificDayOfMonth: false,\n chooseWeekDay: [],\n },\n checkedSendReport: false,\n choosingChoices: null,\n filterBy: {\n subject: null,\n business: null,\n emailSchedule: null,\n recipients: null,\n reportsIncluded: null,\n createdBy: null,\n },\n actionsActive: {\n business: 'default',\n createdBy: 'default',\n },\n activeSearch: '',\n selectedReports: [],\n timeOptions: [\n { value: '24', title: '12AM' },\n { value: '1', title: '1AM' },\n { value: '2', title: '2AM' },\n { value: '3', title: '3AM' },\n { value: '4', title: '4AM' },\n { value: '5', title: '5AM' },\n { value: '6', title: '6AM' },\n { value: '7', title: '7AM' },\n { value: '8', title: '8AM' },\n { value: '9', title: '9AM' },\n { value: '10', title: '10AM' },\n { value: '11', title: '11AM' },\n { value: '12', title: '12PM' },\n { value: '12', title: '1PM' },\n { value: '14', title: '2PM' },\n { value: '15', title: '3PM' },\n { value: '16', title: '4PM' },\n { value: '17', title: '5PM' },\n { value: '18', title: '6PM' },\n { value: '19', title: '7PM' },\n { value: '20', title: '8PM' },\n { value: '21', title: '9PM' },\n { value: '22', title: '10PM' },\n { value: '23', title: '11PM' },\n ],\n weekDays: [\n { value: 'sun', title: 'Sunday' },\n { value: 'mon', title: 'Monday' },\n { value: 'tue', title: 'Tuesday' },\n { value: 'wed', title: 'Wednesday' },\n { value: 'thu', title: 'Thursday' },\n { value: 'fri', title: 'Friday' },\n { value: 'sat', title: 'Saturday' },\n ],\n timeZoneOptions: timeZones.map((zone) => {\n return { value: zone, title: zone }\n }),\n radioButtons: [\n { value: 'daily', title: 'Daily' },\n { value: 'weekly', title: 'Weekly' },\n { value: 'monthly', title: 'Monthly' },\n ],\n byAccount: [\n { value: '1', title: '1st' },\n { value: '2', title: '2nd' },\n { value: '3', title: '3rd' },\n { value: 'last', title: 'last' },\n ],\n}\n\nexport const emailReportsSlice = createSlice({\n name: 'emailReports',\n initialState,\n reducers: {\n setInitialTimePeriod: (state) => {\n state.chooseTimePeriod = initialState.chooseTimePeriod\n },\n setActiveTimePeriod: (state, action: PayloadAction<'daily' | 'weekly' | 'monthly'>) => {\n state.activeTimePeriod = action.payload\n },\n setTimePeriod: (state, action) => {\n state.chooseTimePeriod = {\n ...state.chooseTimePeriod,\n [action.payload.field]: action.payload.value,\n }\n },\n setChoicesKeys: (state, action: PayloadActionConfirm your phone number
\n\n A product expert will contact you to help you set up your account.\n
\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n\n \n \n \n \n \n \n \n \n \n
\n Contact Us
\n\n \n {countryCodes.map((country) => {\n return (\n \n
\n \n
\n within 24 hrs',\n merchant: 'Reply
within a few hrs',\n agency: 'Reply
within 10 mins',\n enterprise: 'Reply
within 1 min',\n },\n {\n item: 'Contact options',\n shop: 'Email',\n merchant: 'Email,
Live Chat',\n agency: 'Email,
Live Chat,
Phone',\n enterprise: 'Email,
Live Chat,
Phone',\n },\n {\n item: 'DataFeedWatch Academy',\n shop: true,\n merchant: true,\n agency: true,\n enterprise: true,\n },\n {\n item: 'Onboarding - live session',\n shop: undefined,\n merchant: 1,\n agency: 'Unlimited',\n enterprise: 'Unlimited',\n },\n {\n item: 'Marketplace',\n shop: undefined,\n merchant: true,\n agency: true,\n enterprise: true,\n },\n {\n item: 'DFW - Analytics',\n shop: undefined,\n merchant: true,\n agency: true,\n enterprise: true,\n },\n {\n item: 'Multiple automatic daily updates',\n shop: undefined,\n merchant: true,\n agency: true,\n enterprise: true,\n },\n {\n item: 'Dedicated account manager',\n shop: undefined,\n merchant: undefined,\n agency: true,\n enterprise: true,\n },\n {\n item: '',\n shop: 'Shop',\n merchant: 'Merchant',\n agency: 'Agency',\n enterprise: 'Enterprise',\n },\n]\n","import { steps } from './FeedMarketingTrialRoute.data'\nimport {\n IDataFeedWatchPricingPlanDetails,\n IPriceTable,\n Plans,\n} from './FeedMarketingTrialRoute.types'\n\nexport const getClosestStep = (value) => {\n let closest = steps[0]\n steps.forEach((step) => {\n if (value >= step) {\n closest = step\n }\n })\n return closest\n}\n\nexport const rangeLabelTemplate = (step: string) => {\n const value: string | number = steps[+step]\n const valueAsNumber = parseInt(value as string, 10)\n switch (true) {\n case value === 'ABOVE':\n return `> 100k SKUs`\n case valueAsNumber >= 1000 && valueAsNumber <= 100000:\n return `${Math.round((value as number) / 1000)}k SKUs`\n case valueAsNumber < 1000:\n return `< 1k SKUs`\n default:\n return value?.toString()\n }\n}\n\nexport const getActivePlanMinSKUs = (activePlan: Plans, priceTable: IPriceTable) => {\n let minSKUs\n const map = new Map(Object.entries(priceTable))\n map.forEach((value, key) => {\n if (!minSKUs && value.plan === activePlan) {\n minSKUs = key\n }\n })\n return minSKUs\n}\n\nexport const getActivePlanPricePoint = (activePlan: Plans, priceTable: IPriceTable) => {\n let currentStep\n const map = new Map(Object.entries(priceTable))\n map.forEach((value, key) => {\n if (!currentStep && value.plan === activePlan) {\n currentStep = key\n }\n })\n // eslint-disable-next-line eqeqeq\n return steps.findIndex((step) => step == currentStep)\n}\n\nexport const getTierPrice = (\n numberOfProducts,\n monthlyPlanData: IDataFeedWatchPricingPlanDetails,\n type: 'monthly' | 'yearly',\n) => {\n const {\n additional_extra_products_price: additionalPrice,\n base_price: basePrice,\n base_products: baseProducts,\n } = monthlyPlanData\n if (typeof basePrice === 'string' || typeof baseProducts === 'string') return basePrice\n if (numberOfProducts === baseProducts) {\n return type === 'monthly' ? basePrice : parseInt(((basePrice as number) / 12).toFixed(), 10)\n }\n const total = (basePrice as number) + ((numberOfProducts - baseProducts) * additionalPrice) / 1000\n const totalY =\n (basePrice as number) / 12 + ((numberOfProducts - baseProducts) * additionalPrice) / 1000\n return type === 'monthly' ? total : Math.round(totalY)\n}\n","import { createContext, useContext } from 'react'\nimport { useAccountConfirmForm } from '../hooks/useAccountConfirmForm'\nimport { AccountConfirmFormContextValue } from './AccountConfirmFormProvider.types'\n\nexport const AccountConfirmFormContext = createContext
\n
\n \n )\n}\n","import { logger } from '@brand-console/utilities'\nimport Typography from '@mui/material/Typography'\nimport { UseFormReturn } from 'react-hook-form'\nimport { Dispatch, SetStateAction } from 'react'\n\nexport interface IAccountConfirmData {\n firstName: string\n lastName: string\n phone: string\n businessName: string\n orgName?: string\n}\n\nexport enum ErrorStep {\n UpdateUser,\n UpdateBiz,\n}\n\n\nexport interface AccountConfirmFormProps {\n headerProps?: React.ComponentProps\n
\n \n
\n \n
\n \n startFreeTrial(Plans[id.toUpperCase()])}\n >\n {buttonText}\n \n
\n )\n}\n\nexport const PlanCell = ({\n activePlan,\n id,\n startFreeTrial,\n value,\n buttonText = 'Start free trial',\n}) => {\n if (typeof value === 'boolean' && value) {\n return (\n {id}
\n{priceText}
\n\n
\n )\n }\n if (['Shop', 'Merchant', 'Agency', 'Enterprise'].includes(value)) {\n const buttonVariant = activePlan === id ? 'contained' : 'outlined'\n return (\n {DOMSanitizer(addNumericalCommas(value))}
\n}\n\nexport const SelectedPlan = ({ currency, priceDisplay, selectedPlan, setShow }) => {\n const log = logger.setLogger(logger.LoggerNames.FEED_MARKETING)\n const { pathname } = useRouter()\n const isSmall = useBreakpoint('sm')\n const { email, firstName, lastName, phone } = useCartAuth()\n const { currentBusiness, currentOrganization } = useCurrentContext()\n const methods = useForm({ mode: 'onChange' })\n const formData = useAccountConfirmForm({ methods, log })\n const {\n formState: { isValid, isDirty },\n handleSubmit,\n } = methods\n const { submitForm: submitAccountForm, shouldShowForm } = formData\n\n const [error, setError] = useState\n
\n )\n }\n\n if (selectedPlan && showFreeTrial) {\n const priceDisplay = getCurrentPrice(selectedPlan)\n return (\n Could not load page
\n{error}
\n\n \n {((!isSmall && activePlan === 'Shop') || isSmall) && (\n \n {\n if (activePlan !== 'Shop') {\n unstable_batchedUpdates(() => {\n setStep(getActivePlanPricePoint(Plans.SHOP, priceTable))\n setActivePlan(Plans.SHOP)\n setPriceObject(priceTable[1000])\n })\n }\n }}\n >\n \n \n {typeof shopPrice === 'number' && currency}\n {typeof shopPrice === 'number' ? shopPrice : 'Custom'}\n \n 1k products included \n \n \n \n )}\n {((!isSmall && activePlan === 'Merchant') || isSmall) && (\n \n {\n if (activePlan !== 'Merchant') {\n unstable_batchedUpdates(() => {\n setActivePlan(Plans.MERCHANT)\n setStep(getActivePlanPricePoint(Plans.MERCHANT, priceTable))\n setPriceObject(priceTable[5000])\n })\n }\n }}\n >\n \n \n {typeof merchantPrice === 'number' && currency}\n {typeof merchantPrice === 'number' ? merchantPrice : 'Custom'}\n \n 5k products included \n \n \n \n )}\n {((!isSmall && activePlan === 'Agency') || isSmall) && (\n \n {\n if (activePlan !== 'Agency') {\n unstable_batchedUpdates(() => {\n setActivePlan(Plans.AGENCY)\n setStep(getActivePlanPricePoint(Plans.AGENCY, priceTable))\n setPriceObject(priceTable[30000])\n })\n }\n }}\n >\n \n \n {typeof agencyPrice === 'number' && currency}\n {typeof agencyPrice === 'number' ? agencyPrice : 'Custom'}\n \n 30k products included \n \n \n \n )}\n {((!isSmall && activePlan === Plans.ENTERPRISE) || isSmall) && (\n \n {\n if (activePlan !== Plans.ENTERPRISE) {\n unstable_batchedUpdates(() => {\n setActivePlan(Plans.ENTERPRISE)\n setStep(getActivePlanPricePoint(Plans.ENTERPRISE, priceTable))\n setPriceObject({\n plan: Plans.ENTERPRISE,\n priceMonthContract: {},\n priceYearContract: {},\n })\n })\n }\n }}\n >\n \n \n {typeof enterprisePrice === 'number' && currency}\n {typeof enterprisePrice === 'number' ? enterprisePrice : 'Custom'}\n \n Unlimited products included \n \n \n \n )}\n \n \n \n Compare Plans\n {!showComparisonTable && (\n <>\n
\n \n )}\n \n {showComparisonTable && (\n \n
\n Choose a plan to start your free trial
\n\n Your subscription can be scaled up or down at any time\n
\n\n setSubscriptionType('monthly')}\n >\n Monthly\n \n or\n setSubscriptionType('yearly')}\n >\n Yearly\n \n
\n \n
\n Shop
\n\n startFreeTrial(Plans.SHOP)}\n >\n Start free trial\n \n
\n Merchant
\n\n startFreeTrial(Plans.MERCHANT)}\n >\n Start free trial\n \n
\n Agency
\n\n startFreeTrial(Plans.AGENCY)}\n >\n Start free trial\n \n
\n Enterprise
\n\n \n Contact Us\n \n
\n \n Compare Plans\n {!showComparisonTable && (\n <>\n
\n \n
\n
\n {!hideButton && \n
}\n \n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n \n \n \n \n \n \n \n
\n )\n}\n","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport { useAuth0 } from '@auth0/auth0-react'\nimport { Services } from '@brand-console/types'\nimport { getHubspotCookie, hubspotFormSubmit, logger } from '@brand-console/utilities'\nimport { useCartAuth, useCurrentContext } from '@cartdotcom/auth'\nimport { Breadcrumbs } from '@cart/ui/atoms/Breadcrumbs'\nimport { Alert } from '@cart/ui/molecules/Alert'\n\nimport React, { ReactElement, useEffect, useState } from 'react'\nimport TagManager from 'react-gtm-module'\n\nimport { TrialFormProps } from '../../components/TrialForm'\nimport { useAccountConfirmContext } from '../../components/AccountConfirmForm'\nimport { MarketplaceManagementRouteDialog } from './components/MarketplaceManagementRoute.dialog'\nimport { MarketplaceManagementRouteForm } from './components/MarketplaceManagementRoute.form'\nimport { MCMFormData, MCMModalState } from './MarketplaceManagementRoute.types'\nimport { getErrorBody, getErrorHeader } from '@brand-console/utilities/errors'\n\nconst serviceInterestHubspotMapping = {\n full: 'Full Service',\n listing: 'Listing',\n repricing: 'Repricing',\n}\n\n// TODO: once we have metadata on selleractive being provisioned only show modal if they havent done it yet, otherwise SSO into selleractive instead\nexport const MarketplaceManagementRoute = (): ReactElement => {\n const [isSubmitting, setIsSubmitting] = useState(false)\n const log = logger.setLogger(logger.LoggerNames.MARKETPLACE_SERVICES)\n const { getAccessTokenSilently } = useAuth0()\n const { email, auth0Id } = useCartAuth()\n const { currentBusiness, currentOrganization } = useCurrentContext()\n\n useEffect(() => {\n TagManager.dataLayer({\n dataLayer: {\n event: 'pageview',\n route: 'MCM',\n },\n })\n }, [])\n\n const [showFailureAlert, setShowFailureAlert] = useState(false)\n const [failureAlertMessage, setFailureAlertMessage] = useState('Something went wrong.')\n const [createTrialErrorMessage, setCreateTrialErrorMessage] = useState('Something went wrong.')\n const [errorScope, setErrorScope] = useState\n \n \n \n \n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n \n \n \n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n \n \n
\n \n A {Services.MARKETPLACE_MANAGEMENT} account with {email} already exists.\n
\nAn account rep will contact you about merging these two accounts.
\n \n )\n\n return getErrorBody(createTrialErrorMessage, errorScope, {\n name: getValues('businessName'),\n })\n }\n\n return (\n <>\n\n
\n \n )\n}\n","import { useReactiveVar } from '@apollo/client'\nimport { activeBizVar } from '@brand-console/generated-graphql-hooks'\nimport { Spinner, useAppContext } from '@cart/ui'\nimport React, { useEffect } from 'react'\n\nimport { MarketplaceManagementRoute } from '../../routes/MarketplaceManagementRoute/MarketplaceManagementRoute'\nimport { AccountConfirmFormProvider } from '../AccountConfirmForm/store/AccountConfirmFormProvider'\n\nexport const MarketplaceManagement = () => {\n const { mcmEnabled, mcmIsLoading } = useAppContext()\n const activeBusiness = useReactiveVar(activeBizVar)\n\n useEffect(() => {\n if (mcmEnabled) {\n window.location.href = `${process.env.NX_MCM_SSO_URL}?businessId=${activeBusiness.id}`\n }\n }, [activeBusiness?.id, mcmEnabled])\n\n if (mcmIsLoading) {\n return \n
\n {showFailureAlert && (\n \n
\n \n
\n \n setShowFailureAlert(false)}>\n {failureAlertMessage}\n \n
\n )}\n \n {(() => {\n switch (state) {\n case CreateStoreState.SUCCESS:\n return (\n
\n )\n}\n","export { CreateStore } from './CreateStore'\n","import { useAuth0 } from '@auth0/auth0-react'\nimport { logger } from '@brand-console/utilities'\nimport { useCartAuth, useCurrentContext } from '@cartdotcom/auth'\n\nexport enum StorefrontErrorTypes {\n STORE_NAME_TAKEN,\n STORE_NAME_FORBIDDEN,\n EMAIL_ALREADY_ASSOCIATED,\n UNKNOWN,\n}\nexport const useStorefrontApi = () => {\n const { getAccessTokenSilently } = useAuth0()\n const { auth0Id, email, fullName } = useCartAuth()\n const { currentBusiness } = useCurrentContext()\n const log = logger.setLogger(logger.LoggerNames.STOREFRONT)\n\n const headers = async () => {\n return {\n 'Content-Type': 'application/json',\n 'x-cartid-businessid': currentBusiness.id.toString(),\n 'x-cartid-email': email,\n 'x-cartid-sub': auth0Id,\n Accept: 'application/json',\n Authorization: `Bearer ${await getAccessTokenSilently()}`,\n }\n }\n\n const processErrors = (errors) => {\n // TODO: This error handling logic needs to be refactored.\n errors.forEach((element: { code: number; message: string }) => {\n let statusCode = ''\n const statusCodeMatchArray = element.message.match(/\\s\\d+(\\\\r\\\\n)/g)\n if (statusCodeMatchArray !== null) {\n statusCode = statusCodeMatchArray[0].trim()\n }\n if (element.code === 0 && statusCodeMatchArray === null) {\n throw new Error(`${element.message} (ERR#${element.code})`)\n }\n if (element.code === 1001) {\n throw new Error(\n `Your email, ${email}, is already associated to an online store account. Soon you will be able to attach that account here as well, but until then, please log out and create a CartID with a different email address. (ERR#${element.code})`,\n )\n } else if (element.code === 0 && statusCode === '1027') {\n throw new Error(\n `Your email, ${email}, is already associated as a user of an online store account. Soon you will be able to attach that account here as well. (ERR#${element.code})`,\n )\n } else if (element.code === 1000) {\n throw new Error(`An unknown server error has occurred. (ERR#${element.code})`)\n }\n })\n throw new Error(errors.map((element: { message: string }) => element.message).join('\\n'))\n }\n\n const callProvisioningAPI = async (storeName: string) => {\n try {\n const provisionResponse = await fetch(`${process.env.NX_PROVISION_TRIAL_API_URL}`, {\n method: 'POST',\n headers: await headers(),\n body: JSON.stringify({\n email,\n siteName: storeName,\n name: fullName,\n trialType: 'CartDotCom',\n ipAddress: '127.0.0.1',\n }),\n })\n\n let provisionResponseJSON\n\n if (provisionResponse.ok) {\n provisionResponseJSON = await provisionResponse.json()\n } else {\n try {\n const respStr = await provisionResponse.text()\n provisionResponseJSON = JSON.parse(respStr)\n } catch (exception) {\n throw new Error(await provisionResponse.text())\n }\n }\n\n if (provisionResponseJSON.success) {\n return { success: true }\n }\n processErrors(provisionResponseJSON.errors)\n } catch (error) {\n return { success: false, message: error.message }\n }\n\n return { success: false }\n }\n\n const validateStoreName = async (\n storeName: string,\n ): Promise<{\n success\n errors?:\n {\n errorMessage?: string\n code?: number\n fieldId?: string\n errorType?: StorefrontErrorTypes\n }[]\n }> => {\n try {\n // Call trialValidation API.\n const validateResponse = await fetch(`${process.env.NX_TRIAL_VALIDATE_API_URL}`, {\n method: 'POST',\n headers: await headers(),\n body: JSON.stringify({\n email,\n siteName: storeName,\n }),\n })\n\n const validateResponseJSON = await validateResponse.json()\n\n if (validateResponseJSON.success) {\n return { success: true }\n }\n const errors = validateResponseJSON.errors.map(\n (element: { code: number; message: string }) => {\n let errorMessage = `An error has occurred. ${element.message}`\n const { code } = element\n let fieldId\n const statusCodeMatchArray = element.message.match(/\\s\\d+(\\\\r\\\\n)/g)\n const statusCode =\n statusCodeMatchArray !== null ? statusCodeMatchArray[0].trim() : undefined\n let errorType = null\n\n if (element.code === 1001 || (element.code === 0 && statusCode === '1027')) {\n errorMessage = `Your email, ${email}, is already associated to an storefront account. Please contact support to merge accounts.`\n errorType = StorefrontErrorTypes.EMAIL_ALREADY_ASSOCIATED\n } else if (element.code === 1005 || element.code === 1007 || element.code === 1008) {\n fieldId = 'storeName'\n errorMessage = 'This name is already taken.'\n errorType = StorefrontErrorTypes.STORE_NAME_TAKEN\n } else if (element.code === 1004) {\n fieldId = 'storeName'\n errorMessage = \"Sorry, you can't use that store name.\"\n errorType = StorefrontErrorTypes.STORE_NAME_FORBIDDEN\n }\n return { success: false, errorMessage, code, fieldId, errorType }\n },\n )\n log.error(\n validateResponseJSON.errors\n .map((element: { message: string }) => element.message)\n .join('\\n'),\n validateResponseJSON,\n )\n return { success: false, errors }\n } catch (error) {\n log.error('Storefront Error: validateStoreNameOnServer', error)\n }\n return {\n success: false,\n errors: [\n {\n errorMessage: 'Oops! Something went wrong. Please try again later.',\n errorType: StorefrontErrorTypes.UNKNOWN,\n },\n ],\n }\n }\n\n return { callProvisioningAPI, validateStoreName }\n}\n","import { Alert, AlertTitle, Button, Input } from '@cart/ui'\nimport React from 'react'\nimport { UseFormReturn } from 'react-hook-form'\nimport tw from 'twin.macro'\n\nexport const businessError = 'businessError'\n\nexport const Form = () => {\n return (\n <>\n \n
\n )\n case CreateStoreState.FAILURE:\n return (\n Your online store is ready!
\n\n To add products and configure your store, you will be taken to our powerful online\n store platform.\n
\n\n Onward in your ecommerce journey!
\n We will be with you each step of the way.\n
\n
\n )\n case CreateStoreState.PROVISIONING:\n default:\n return (\n Something went wrong when provisioning your store.
\n{errorMessage}\n \n A Cart.com representative has been alerted\n
\n and will be in touch with you soon.\n
\n
\n )\n }\n })()}\n Creating your new store
\n\n Your new store is being created with Cart.com's powerful, feature-rich\n ecommerce online store software!\n
\n{provisioningRandomMessage}
\n\n
\n \n A great store needs a great name! Your online store's name will also be the subdomain\n you'll use. Don't worry, this can be changed later in the settings.\n
\n\n \n clearErrors('businessError')}\n >\n Build My Store\n \n \n \n
\n \n \n
\n \n
\n )\n}\n","export { Storefront } from './Storefront'\n","import { Spinner } from '@cart/ui'\nimport { solid } from '@fortawesome/fontawesome-svg-core/import.macro'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React, { lazy, Suspense } from 'react'\nimport { createGlobalStyle } from 'styled-components'\nimport { useIsCsr } from '@cartdotcom/auth/useIsCsr'\n\nconst CustomStyles = createGlobalStyle`\n #cart-settings {\n padding: 0 !important;\n }\n #cart-settings-breadcumbs {\n display: none;\n }\n`\n\nconst AdminToolsApp = lazy(() => import('./AdminToolsLazy'))\n\nexport const AdminTools = () => {\n const isCsr = useIsCsr()\n if (isCsr === null) return - \n {sites.map(({ id, name, sharedDomain }) => (\n
- \n
\n
\n \n )\n }\n\n return (\n \n
\n \n Sorry, but you don't have access to this page.\n
\nIf you think this is a mistake, please reach out to your administrator.
\n\n \n
\n )\n}\n","import { Input } from '@cart/ui/atoms/Input'\nimport { FC } from 'react'\n\nimport { quantityPattern, requiredRule } from '../helpers'\n\nexport interface QuantityInputProps {\n id?: string\n label?: string\n index?: number\n required?: boolean\n}\nexport const QuantityInput: FCEach line should be a single ASIN. Do not use commas or spaces.\n
Up to 50 ASINs can be specified.\n \n)\n\nexport const ASINSearch = () => {\n const isSmall = useBreakpoint('sm')\n\n const generateUrl = (data: { asins: string }) => {\n const asins = data.asins.split(/\\r?\\n/)\n return `https://www.amazon.com/s/?k=${asins.reduce(\n (acc, asin, index) => `${acc}${index === 0 ? '' : '%7C+'}${asin}`,\n )}&ref=nb_sb_noss`\n }\n\n return (\n
\n Brand is case sensitive.\n \n)\nexport const TwoStepViaBrand = () => {\n const generateUrl = (data) => {\n return `https://www.amazon.com/s/?url=search-alias%3Daps&field-keywords=${data.keywords}&field-brand=${data.brand}`\n }\n\n return (\n
\n Seller Id must match exactly.\n \n)\nexport const TwoStepViaSeller = () => {\n const generateUrl = (data) => {\n return `https://www.amazon.com/s/?url=search-alias%3Daps&field-keywords=${data.keywords}&me=${data.sellerId}`\n }\n\n return (\n
\n
\n Amazon URL Builder
\n\n Create links for your products that boost your Amazon listing on search engines like\n Google.\n
\n\n \n {ROUTES.map((route) => (\n
\n
\n \n \n \n \n \n
\n \n
\n
\n \n \n {url[value] || \"Your URL will show here once it's generated\"}\n \n
\n \n
\n \n
\n {title}
\n \n
\n {description}
\n \n {integrations?.map((Integration, i) => {\n return
\n \n {buttonText || 'Get started'}\n
\n \n \n {cards.map(({ ...props }) => (\n \n {hiddenCards && hiddenCards.length > 0 && (\n \n \n {hiddenCards?.map(({ ...props }) => (\n \n \n )}\n
\n )}\n \n )\n}\n","import { Alert, AlertTitle, Button, CardContent, Dialog, Link } from '@cart/ui'\nimport DialogActions from '@mui/material/DialogActions'\nimport React, { FC, useState } from 'react'\nimport tw from 'twin.macro'\n\nimport {\n AccountConfirmFormContext,\n AccountConfirmForm,\n useAccountConfirmContext,\n useAccountConfirmForm,\n AccountConfirmFormProvider,\n} from '../AccountConfirmForm'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { logger } from '@brand-console/utilities'\nimport { useCartAuth, useCurrentContext } from '@cartdotcom/auth'\n\nexport type IncompleteProfileAlertProps = { onComplete?: () => void }\nexport const IncompleteProfileAlert: FCApps and Services
\n\n setCollapsed(!collapsed)}\n tw=\"font-semibold normal-case\"\n >\n {collapsed ? 'Show more' : 'Show less'}\n \n
\n \n \n \n \n \n
\n)\n","import { useDfwNavigation, useLayoutStore, useMcmNavigation, useRptNavigation, useSfNavigation } from '@brand-console/utilities'\nimport {\n FeedMarketingIcon,\n FulfillmentIcon,\n MarketplaceManagementIcon,\n StorefrontIcon,\n UnifiedAnalyticsIcon,\n useAppContext,\n useRouter,\n} from '@cart/ui'\nimport { solid } from '@fortawesome/fontawesome-svg-core/import.macro'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React from 'react'\n\nimport { Shortcut } from './Shortcut'\n\nexport const Shortcuts = () => {\n // using context instead of the org service because the BusinessServices object does not yet get updated for all services\n const { mcmEnabled, unifiedAnalyticsProvisioned, sfAccount, dfwAccount } = useAppContext()\n const { navigate } = useRouter()\n const { fulfillmentProvisioned } = useLayoutStore()\n const mcmNavigation = useMcmNavigation()\n const sfNavigation = useSfNavigation(sfAccount)\n const dfwNavigation = useDfwNavigation()\n const rptNavigation = useRptNavigation()\n\n return (\n <>\n \n
\n {icon}
\n Shortcuts
\n\n\n {mcmEnabled && (\n
\n \n )\n}\n","import { ReactElement } from 'react'\n\nimport { AppsAndServices } from '../../components/AppsAndServices'\nimport { IncompleteProfileAlert } from '../../components/IncompleteProfileAlert/IncompleteProfileAlert'\nimport { Shortcuts } from '../../components/Shortcuts/Shortcuts'\n\nexport const Homepage = (): ReactElement => {\n return (\n \n \n \n \n \n
\n )\n}\n","import {\n activeBizVar,\n activeOrgVar,\n useCreateOrganizationMutation,\n} from '@brand-console/generated-graphql-hooks'\nimport {\n localStorageHelper,\n LocalStorageKeys,\n} from '@brand-console/utilities'\nimport { Spinner, useDefaultInfo, useRouter } from '@cart/ui'\nimport { useCurrentContext } from '@cartdotcom/auth'\nimport React, { useEffect, useRef } from 'react'\n\nconst CreateOrganizationAutomated = () => {\n const { organization: defaultOrg, business: defaultBiz } = useDefaultInfo()\n const [createOrganization] = useCreateOrganizationMutation()\n const hasCalledMutation = useRef(false)\n const { pathname, navigate, location } = useRouter()\n const { setNewOrganization } = useCurrentContext()\n\n useEffect(() => {\n const changeContext = async (org) => {\n await setNewOrganization(org)\n }\n if (defaultBiz.name && defaultOrg.name && !hasCalledMutation.current) {\n createOrganization({\n variables: {\n createOrganizationInput: {\n name: defaultOrg.name,\n businessName: defaultBiz.name,\n },\n },\n onCompleted: (data) => {\n const onlyOrg = data.org_organizationCreate\n const onlyBusiness = data.org_organizationCreate.businesses[0]\n activeBizVar(onlyBusiness)\n const org = {\n businessEntityTerminology: onlyOrg.businessEntityTerminology,\n businesses: [onlyBusiness],\n createdAt: onlyOrg.createdAt,\n id: onlyOrg.id,\n name: onlyOrg.name,\n roleName: onlyOrg.roleName,\n }\n activeOrgVar(org)\n localStorageHelper.set(LocalStorageKeys.BUSINESS, onlyBusiness)\n changeContext(org)\n navigate(`${pathname}${location.search}`)\n },\n })\n hasCalledMutation.current = true\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return \n {alertMessage && (\n setAlertMessage(undefined)}\n >\n {alertMessage.message}\n \n )}\n {pendingInvites && pendingInvites.length !== 0 && (\n
\n \n {(error || errorMessage) && (\n <>\n \n
\n )}\n \n {pendingInvites.length} Pending {Pluralize('Invite', pendingInvites.length)}\n
\n\n {pendingInvites?.length > 0 && (\n
\n \n You have been invited to join the following{' '}\n {Pluralize(\n 'organization',\n Object.keys(groupBy(pendingInvites, 'organizationName')).length,\n )}\n :\n
\n )}\n {pendingInvites.map((invite) => {\n const { businessName, inviteToken, organizationName, inviteStatus } = invite\n return (\n\n {organizationName} {businessName && `- ${businessName}`} ({inviteStatus})\n {\n setAlertMessage(undefined)\n setInviteOrgBusinessName(\n `${organizationName} ${businessName ? `- ${businessName}` : ''}`,\n )\n consumeInviteFunction({\n variables: {\n consumeInviteUserInput: {\n inviteToken,\n },\n },\n })\n }}\n >\n Accept\n \n
\n )\n })}\n Organizations
\n {organizations.length > 0 && (\n\n Select an organization to manage your products and services.\n
\n )}\n\n {organizations.map((organization) => {\n return (\n \n handleOrgSelect({ organization, shouldRedirect: false, shouldSetContext: true })\n }\n key={organization.id}\n cardContentProps={{ style: tw`p-0` }}\n variant=\"outlined\"\n >\n \n {organization.name}\n
\n \n )\n })}\n \n {errorMessage || 'Something went wrong.'}\n
\n\n {error && {JSON.stringify(error)}}\n
\n \n
\n \n )}\n \n
\n \n \n )\n}\n","import { Services } from '@brand-console/types'\nimport {\n CustomerEngagementIcon,\n DataScienceIcon,\n FeedMarketingIcon,\n FulfillmentIcon,\n GrowthMarketingIcon,\n MarketplaceManagementIcon,\n MarketplaceServicesIcon,\n StorefrontIcon,\n UnifiedAnalyticsIcon,\n} from '@cart/ui'\nimport React from 'react'\nimport slugster from 'slugster'\n\nimport { CardType, PageURL } from './Recommendations.types'\n\nexport const cardContent: CardType[] = [\n {\n title: Services.STOREFRONT,\n description: 'Build your online store with the best tools and services.',\n image: \n {showFailureAlert && (\n \n \n \n
\n Organization
\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n\n
\n \n
\n \n {card.image}\n {card.title}\n
\n \n navigate(card.page)}\n variant=\"contained\"\n size=\"small\"\n css={[\n {\n ':hover': tw`text-white`,\n },\n ]}\n >\n {card.action}\n \n
\n {card.description}
\n \n
\n \n
\n Success!
\nA Cart.com representative will be in touch with you soon!
\n \nWhat stage is your business in? *
\n How can we help?
\n