\n
\n \n
\n \n {t('Add {title} to Your Home Screen?').replace('{title}', title)}\n
\n\n {description(modalType)}\n
\n\n
\n );\n\n const MobileCtxMenuContentRenderer = ({ children }) => ( // eslint-disable-line react/prop-types\n {formTitle}
\n - \n
\n
\n ) : (\n {t('Progress is restarted.')}
\n \n \n {t('Restart')}\n \n )}\n {(!isRestartActive && notCompletedItems.length > 0) && (\n \n {nextButtonText}\n \n )}\n
\n )}\n \n {(isMobile || isTablet) ? (\n translationRenderer(mobileProgressText)({\n renderer1: str => {\n return (\n \n {str.replace('{doneCount}', doneCount).replace('{todoCount}', todoCount)}\n \n );\n }\n })\n ) : (\n translationRenderer(progressText)({\n renderer1: str => {\n return (\n \n {str.replace('{doneCount}', doneCount).replace('{todoCount}', todoCount)}\n \n );\n }\n })\n )}\n
\n \n
\n {(progressRestartable && isRestartActive) && isAppDone && (\n \n {moreItemComponent}\n
\n \n )}\n \n {renderOverflowItems}\n
\n \n )}\n \n );\n};\n\nOverflowableList.defaultProps = {\n moreItemComponent: 'More â–¼',\n wrapperClassName: null,\n itemClassName: null,\n moreItemClassName: null,\n popoverClassName: null,\n onHiddenItemIDListChange: (f: void) => f\n};\n\nexport default OverflowableList;\n","import React, { memo, useCallback } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { shape, bool } from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { Utils } from '@jotforminc/uikit';\nimport PageIcon from '../../Builder/components/HomePage/PageIcon';\nimport { navigationItemClickAction } from '../../../store/actionCreators';\n\nconst PageLink = ({ page, isActive }) => {\n const {\n name, id, pageOrder, showPageIcon, pageIcon\n } = page;\n const pageName = name || t('Page {pageOrder}').replace('{pageOrder}', pageOrder);\n\n const dispatch = useDispatch();\n\n const handleClick = useCallback(() => {\n dispatch(navigationItemClickAction(id));\n }, [id]);\n const handleEnterPressed = useCallback(e => Utils.isPressedKeyEnter(e) && handleClick(), []);\n return (\n \n
\n \n );\n};\n\nProductCartBadge.propTypes = {\n onCartClick: func,\n itemFontColor: string,\n isCartActive: bool\n};\n\nProductCartBadge.defaultProps = {\n onCartClick: f => f,\n itemFontColor: '',\n isCartActive: false\n};\n\nexport default ProductCartBadge;\n","import Styled from 'styled-components';\nimport { darken } from 'polished';\n\nconst ScDonateNowBadge = Styled.div`\n margin-left: ${({ isMultiPage }) => (isMultiPage ? '0px' : 'auto')};\n margin-right: 10px;\n display: flex;\n align-items: center;\n\n .donateNow {\n height: 40px;\n background-color: ${({ itemButtonBgColor }) => itemButtonBgColor};\n border: none;\n border-radius: 4px;\n color: ${({ itemButtonFontColor }) => itemButtonFontColor};\n font-weight: 500;\n font-size: 14px;\n line-height: 16px;\n padding: 0 12px;\n transition: all .3s ease-in-out;\n\n @media screen and (max-width: 480px) {\n display: none;\n }\n\n &:hover {\n ${({ itemButtonBgColor }) => (itemButtonBgColor) && `background: ${darken(0.10, itemButtonBgColor)}`}; \n }\n }\n\n .verticalLine {\n height: 28px;\n width: 2px;\n background-color: #E3E5F5;\n border-radius: 100px;\n margin: 0 32px 0 20px;\n display: ${({ isMultiPage }) => (isMultiPage ? 'inline-block' : 'none')};\n }\n`;\n\nexport default ScDonateNowBadge;\n","import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { t } from '@jotforminc/translation';\nimport { string } from 'prop-types';\nimport SELECTORS from '../../../store/selectors';\nimport * as ACTION_CREATORS from '../../../store/actionCreators';\nimport ScDonateNowBadge from './ScDonateNowBadge';\n\nconst DonateNowBadge = ({ wrapperClass }) => {\n const isMultiPage = useSelector(SELECTORS.getIsMultiPage);\n const donationItemID = useSelector(SELECTORS.getDonationItemID);\n const { itemButtonBgColor, itemButtonFontColor } = useSelector(SELECTORS.getItemWithDefaults(donationItemID));\n const dispatch = useDispatch();\n\n const handleDonateNowClick = () => dispatch(ACTION_CREATORS.showDonationItemAction());\n\n return (\n \n
\n {t('Cart')}\n \n
\n \n \n )}\n />\n );\n};\n\nNavigationPanel.propTypes = {\n pages: arrayOf(shape({})),\n themeProperties: shape({}),\n disableButton: bool,\n scrollDownValue: number\n};\n\nNavigationPanel.defaultProps = {\n pages: [],\n themeProperties: {},\n disableButton: true,\n scrollDownValue: 0\n};\n\nexport default NavigationPanel;\n","import Styled, { css } from 'styled-components';\nimport { FEATURE_NAMES } from '../../constants/features';\nimport { isFeatureEnabled } from '../../utils/features/helper';\n\nexport const ScPortalLoginFlow = Styled.div`\n position: absolute;\n top: 15px;\n right: 15px;\n z-index: 5;\n\n .jNewHeader-avatar {\n padding: 0;\n margin: 0;\n border: none;\n display: block;\n\n .jNewHeader-avatarContainer {\n height: unset;\n\n ${isFeatureEnabled(FEATURE_NAMES.TopBar) ? css`\n .jNewHeader-profile {\n width: 40px;\n height: 40px;\n\n &.empty {\n background-color: #D6D7E7;\n }\n }\n ` : css`\n .jNewHeader-profile {\n &.empty {\n background-color: #D6D7E7;\n }\n }\n `};\n }\n }\n\n .jNewHeader-accountBox {\n right: 0;\n top: 56px;\n\n &::before {\n right: 13px;\n }\n\n &::after {\n right: 18px;\n }\n\n @media screen and (max-width: 480px) {\n width: 300px;\n overflow: unset;\n }\n\n @media screen and (max-width: 375px) {\n width: 94vw;\n }\n\n @media only screen and (max-device-width: 1024px) and (orientation: landscape) {\n overflow: scroll;\n }\n }\n\n .formPage & {\n position: relative;\n top: unset;\n right: unset;\n z-index: 5;\n }\n\n ${isFeatureEnabled(FEATURE_NAMES.TopBar) ? css`\n\n // AppIcon - Pages - AccBox\n .isMultiPage.showNavigationBar.isAccountBox & {\n position: relative;\n min-width: 72px;\n height: 65px;\n top: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n\n .formAccountBox-wrapper { margin: 12.5px 16px; }\n // HamburgerMenu - - AccBox\n @media screen and (max-width: 480px) {\n position: absolute;\n top: 0;\n right: 0;\n }\n }\n\n .isPaymentApp.showNavigationBar.isAccountBox & {\n position: relative;\n min-width: 72px;\n height: 65px;\n top: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n\n .formAccountBox-wrapper { margin: 12.5px 16px; }\n\n @media screen and (max-width: 480px) {\n position: absolute;\n top: 0;\n right: 0;\n }\n }\n\n ` : css`\n .isMultiPage.isProgressOn.isAccountBox & {\n position: relative;\n min-width: 45px;\n height: 45px;\n top: unset;\n right: unset;\n }\n\n .isProgressOn.isAccountBox & {\n position: relative;\n min-width: 45px;\n height: 45px;\n top: unset;\n right: unset;\n }\n `};\n\n ${isFeatureEnabled(FEATURE_NAMES.ProductList) && css`\n .isGreeting, .isLoginWelcomeText {\n display: none;\n }\n .formAccountBox-tooltip {\n border: 1px solid #c8ceed;\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);\n margin-top: 15px;\n\n &:before {\n border-radius: 4px 0 0;\n border: 1px solid #c8ceed;\n border-width: 1px 0 0 1px;\n top: -7px;\n box-shadow: none;\n }\n }\n .formAccountBox-line {\n &.leftAligned {\n text-align: left;\n }\n &.forUserInfo {\n color: #6F76A7;\n border-color: #E3E5F5;\n }\n &.forLogout {\n border-color: #F3F3FE;\n }\n }\n .formAccountBox-logout, .formAccountBox-titleSmall {\n color: #6F76A7;\n }\n .formAccountBox-loginButton {\n width: 100%;\n text-transform: none;\n height: 48px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: .5em 1em;\n border-radius: 4px;\n cursor: pointer;\n border: 0;\n font-size: 1em;\n line-height: 1.5;\n font-weight: 500;\n font-family: inherit;\n color: #fff;\n background-color: #0A1551;\n }\n .formAccountBox-titleSmall {\n font-size: 12px;\n font-weight: 400;\n margin-bottom: 8px;\n line-height: 26px;\n }\n .formAccountBox-signupLine {\n color: #0A1551;\n margin-top: 8px;\n font-weight: 400;\n\n button span {\n padding: 0 4px;\n }\n }\n .formAccountBox-signupLine, .formAccountBox-signupLink {\n font-size: 14px;\n line-height: 26px;\n }\n .formAccountBox-signupLink {\n color: #0099ff;\n font-weight: 500;\n margin-left: 4px;\n }\n .formAccountBox-signupLink, .formAccountBox-footerButton {\n background-color: transparent;\n border: none;\n padding: 0;\n }\n .formAccountBox-footerButton {\n text-align: left;\n }\n `};\n\n .formAccountBox-wrapper {\n top: 0;\n right: 0;\n\n .avatarBox {\n border: 2px solid #fff;\n ${isFeatureEnabled(FEATURE_NAMES.TopBar) ? css`\n ` : css`\n width: 44px;\n height: 44px;\n `};\n }\n\n .formAccountBox-tooltip {\n .formAccountBox-line.forUserInfo {\n cursor: default;\n }\n\n .formAccountBox-line.forLogout {\n cursor: pointer;\n }\n }\n }\n`;\n","import React, { useCallback } from 'react';\nimport { navigate } from '@reach/router';\nimport { string } from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport styled from 'styled-components';\nimport { useDispatch } from 'react-redux';\nimport { trackEventAction } from '../../store/actionCreators';\n\nconst ScAccountBoxLinkRenderer = styled.div`\n cursor: pointer;\n`;\n\nconst AccountBoxLinkRenderer = ({ text, url }) => {\n const dispatch = useDispatch();\n\n const handleOnClick = useCallback(() => {\n if (url && url.includes('previousDonations')) {\n dispatch(trackEventAction({ action: 'previousDonationButtonClickedAtAccountBox' }));\n }\n navigate(url);\n }, [url]);\n\n return (\n \n
\n \n {logoURL && 
}\n {appName}\n
\n \n
\n \n {pages.map(page => (\n
\n \n
\n );\n};\n\nGuestShoppingAccountBox.propTypes = {\n onAccountBoxScreen: func.isRequired\n};\n\nexport default GuestShoppingAccountBox;\n","import React from 'react';\nimport { func } from 'prop-types';\nimport { Button, Flex } from '@jotforminc/magnet';\nimport { t } from '@jotforminc/translation';\nimport { useSelector } from 'react-redux';\nimport SELECTORS from '../../store/selectors';\n\nfunction ContinueAsFlow({ onContinueAs, onUseDifferentAccount }) {\n const currentUser = useSelector(SELECTORS.getUser);\n const {\n name,\n username,\n email,\n avatarUrl\n } = currentUser;\n const userName = name || username;\n\n return (\n \n onAccountBoxScreen('loginOptions')}\n size='large'\n fullWidth\n >\n {t('Log in')}\n \n
\n {t(`Login in to track your ${isDonationApp ? 'donations' : 'orders'}`)}
\n\n {t('New customer?')}\n
\n onAccountBoxScreen('signupOptions')}\n className='h-8 pl-0 color-navy-700'\n >\n {t('Profile')}\n \n onAccountBoxScreen('signupOptions')}\n className='h-8 pl-0 color-navy-700'\n >\n {t(`Previous ${isDonationApp ? 'Donations' : 'Orders'}`)}\n \n
\n \n \n \n \n \n {t('Continue as {userName} ', { userName })}\n \n
\n );\n}\n\nContinueAsFlow.propTypes = {\n onContinueAs: func,\n onUseDifferentAccount: func\n};\n\nContinueAsFlow.defaultProps = {\n onContinueAs: f => f,\n onUseDifferentAccount: f => f\n};\n\nexport default ContinueAsFlow;\n","import React, {\n useCallback, useEffect, useMemo,\n useState\n} from 'react';\nimport { INITIATOR_TYPES } from '@jotforminc/constants';\nimport { bool, func } from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { handleCustomNavigation } from '@jotforminc/utils';\nimport { getAPIURL } from '@jotforminc/request-layer';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\nimport { AccountBox as CommonAccountBoxWrapper, FormUserAccountBox } from '@jotforminc/account-box';\nimport { LoginFlow } from '@jotforminc/login-flow';\n\nimport { ScPortalLoginFlow } from '../PortalLoginFlow/scPortalLoginFlow';\nimport { generateAppURL } from '../../utils/navigation';\nimport { isInJotformKiosk } from '../../utils';\nimport * as ACTION_CREATORS from '../../store/actionCreators';\nimport AccountBoxLinkRenderer from './AccountBoxLinkRenderer';\nimport SELECTORS from '../../store/selectors';\nimport GuestShoppingAccountBox from './GuestShoppingAccountBox';\nimport { UI_PROPS } from '../../constants';\nimport ContinueAsFlow from './ContinueAsFlow';\n\nconst PortalAccountBox = ({ isPreview, loginable, onAccountBoxToggle }) => {\n const dispatch = useDispatch();\n const isDonationApp = useSelector(SELECTORS.getIsDonationApp);\n const isPaymentApp = useSelector(SELECTORS.getIsPaymentApp);\n const isAccountBoxOpen = useSelector(SELECTORS.selectAccountBoxStatus);\n const setAccountBoxOpen = val => dispatch(ACTION_CREATORS.setAccountBoxStatus(val));\n const user = useSelector(SELECTORS.getUser);\n const { showContinueAs } = user;\n\n const handleToolTipToggle = useCallback(isTooltipOpen => setAccountBoxOpen(isTooltipOpen), []);\n\n const initialScreen = useSelector(SELECTORS.getAccountBoxScreen);\n\n const handleAccountBoxScreen = useCallback(screen => dispatch(ACTION_CREATORS.setUIProp(UI_PROPS.activeAccountBoxScreen, screen)), []);\n\n const [continueAsDismissed, setContinueAsDismissed] = useState(false);\n\n useEffect(() => {\n onAccountBoxToggle(isAccountBoxOpen);\n if (isPaymentApp && !isAccountBoxOpen) handleAccountBoxScreen('');\n if (!isAccountBoxOpen) setContinueAsDismissed(false);\n }, [isAccountBoxOpen, isPaymentApp]);\n\n const isUserLoggedIn = useMemo(() => user.USER_TYPE && !!user.email && user.username !== 'guest_apiDemo', [user]);\n\n const handleLogout = useCallback(() => {\n const backTo = generateAppURL({ forLogout: true });\n let origin = 'https://www.jotform.com';\n if (window.isDevelopment) {\n origin = window.location.origin;\n } else if (isEnterprise()) {\n origin = `https://${window.companyDomain}`;\n }\n\n // TODO HANDLE ALL NAVIGATIONS!!\n handleCustomNavigation(`${origin}/logout.php?backTo=${backTo}`, '_self', true);\n }, []);\n\n const handleLogAction = useCallback(({ target: actionName }) => dispatch(ACTION_CREATORS.trackEventAction({ action: 'appLoginFlow', target: { act: actionName } })), []);\n\n const additionalPropsForShopping = useMemo(() => {\n const accountBoxAdditionalLinks = isPaymentApp ? [{\n text: `Previous ${isDonationApp ? 'Donations' : 'Orders'}`,\n url: generateAppURL({ pageID: isDonationApp ? 'previousDonations' : 'previousOrders', absolutePath: false }),\n LinkRenderer: AccountBoxLinkRenderer\n }] : [];\n\n return {\n additionalLinks: {\n append: true,\n links: accountBoxAdditionalLinks\n },\n allowMyForms: !isPaymentApp\n };\n }, [isPaymentApp]);\n\n const LoggedInUserAccountBox = useCallback(() => {\n const {\n avatarUrl, name, email, USER_TYPE: userType\n } = user;\n return (\n {userName}
\n{email}
\n\n {t('Use a different account?')}\n
\n
\n )\n )\n }\n \n \n dispatch(ACTION_CREATORS.userChangeAction(changedUser))}\n apiURL={apiURL}\n navigationWrapper={}\n shouldCallNavigate={false}\n additionalScreens={{ epilogue: <> }}\n includeConfirm={true}\n mode='default'\n showLogoOnSignupOptions={false}\n appName=\"portal-apps\"\n greetingMessage={greetingMessage}\n initiator={INITIATOR_TYPES.INBOX}\n buttonNames={{\n google: 'apps-accountbox-google-login',\n facebook: 'apps-accountbox-facebook-login',\n apple: 'apps-accountbox-apple-login',\n emailLogin: 'apps-accountbox-standart-login-button',\n emailSignup: 'apps-accountbox-header-createmyaccount'\n }}\n initialScreen={initialScreen}\n />\n
\n \n \n
\n )}\n />\n \n )}\n {isShoppingApp && !isFastCheckout && (\n \n \n {t('More')}\n \n \n \n \n
\n \n
\n );\n};\n\nPublicList.propTypes = {\n id: string.isRequired,\n presentationItemID: string.isRequired\n};\n\nexport default PublicList;\n","import styled, { css } from 'styled-components';\nimport { CARD_ACTION_VALUES } from '../../Builder/components/HomePage/RightPanel/constants';\n\nexport const ScImageField = styled.div`\n cursor: ${({ buttonRole }) => ((!!buttonRole && buttonRole !== CARD_ACTION_VALUES.NONE) ? 'pointer' : 'auto')};\n .imageElementImg{\n width: ${({ width }) => width}px;\n ${({ width, height }) => css` aspect-ratio: ${width}/${height}; `}\n }\n`;\n","import React, { memo } from 'react';\nimport { func, string } from 'prop-types';\nimport { useDispatch } from 'react-redux';\nimport { IconImageFilled } from '@jotforminc/svg-icons';\nimport Image from '../../../components/Image';\nimport ActionHelper from '../../../utils/ActionsHelper';\nimport { ITEM_TYPES } from '../../../constants/itemTypes';\nimport { ScImageField } from './ScImageField';\nimport { isYes } from '../../../utils';\n\nconst ImageField = ({ onFormViewClick, ...props }) => {\n const {\n imageURL, altText, id, buttonRole, buttonValue, width, height, shrink\n } = props;\n const dispatch = useDispatch();\n const ImageActionHelper = ActionHelper.createComponent(ITEM_TYPES.IMAGE);\n\n const handleClick = () => {\n ImageActionHelper.dispatchAction(\n buttonRole,\n {\n id,\n buttonRole,\n value: buttonValue,\n onFormViewClick,\n dispatch\n }\n );\n };\n\n return (\n \n \n {\n Array(5).fill(null).map(() => \n
\n )\n }\n \n \n \n \n \n
\n \n )\n : items.length\n ? items.map((itemProps => {\n const {\n id: itemID,\n type,\n shrink,\n embeddedForm,\n clientID\n } = itemProps;\n const emptyItem = useItemDefaults(itemProps.type, appVersion);\n const itemPropsWithDefaults = { ...emptyItem, ...itemProps };\n const decorationProps = {\n ...itemPropsWithDefaults,\n ...designatedItemProps,\n itemTextAlignment: overrideTextAlignmentIfNecessary(itemPropsWithDefaults)\n };\n\n const componentProps = getItemProps(decorationProps, emptyItem, isAppLoginable, isUserLoggedIn, progressManualRestartDate);\n const dsItemProps = dsDetailPageData?.[itemID] ?? {};\n const clippedItemProps = clipPropsWrtCharLimits({ ...componentProps, ...dsItemProps });\n\n return (\n {t('You don\\'t currently have any items.')}
\n }\n \n test\n
\n \n );\n};\n\nAppFooter.propTypes = {\n appFooterTextAlignment: string,\n appFooterBgColor: string,\n appFontColor: string,\n appFontFamily: string\n};\n\nAppFooter.defaultProps = {\n appFooterTextAlignment: '',\n appFooterBgColor: '',\n appFontColor: '',\n appFontFamily: ''\n};\n\nexport default AppFooter;\n","import React from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useSelector } from 'react-redux';\nimport SELECTORS from '../../store/selectors';\n\nexport const Styles = createGlobalStyle`\n .page {\n ${({ appBgColor, appBgColorEnd }) => (appBgColor === appBgColorEnd || appBgColor === '') && `background-color: ${appBgColor};`}\n ${({ appBgColor, appBgColorEnd }) => (appBgColor && appBgColorEnd) && `background: linear-gradient(${appBgColor}, ${appBgColorEnd});`}\n ${({ appBgURL }) => appBgURL && `background: url(\"${appBgURL}\") no-repeat center / cover;`}\n ${({ hasBrandingFooter }) => hasBrandingFooter && 'margin-bottom: 48px;'}\n }\n`;\n\nexport default () => {\n const { appBgColor, appBgColorEnd, appBgURL } = useSelector(SELECTORS.getAppBgProperties);\n const hasBrandingFooter = useSelector(SELECTORS.getHasBrandingFooter);\n\n return (\n \n \n \n \n \n {appStageBody}\n \n )}\n />\n \n \n
\n \n );\n};\n\nexport default memo(AppPreview);\n\nAppPreview.propTypes = {\n pageID: string,\n appID: string,\n showTopBar: bool,\n isListDetailPage: bool\n};\n\nAppPreview.defaultProps = {\n pageID: 'homepage',\n appID: '',\n showTopBar: true,\n isListDetailPage: false\n};\n","import React, { memo } from 'react';\nimport { func } from 'prop-types';\nimport { Location, Router } from '@reach/router';\nimport { renderable } from '../../constants/propTypes';\n\n// Reach router's ref blocker to prevent focus:\n// https://github.com/reach/router/blob/d2c9ad06715c9d48c2d16f55f7cd889b626d2521/src/index.js#L342\nconst Comp = props => ;\n\nconst AppRouter = ({ children, onLocationChange }) => {\n return (\n \n {appStageBody}\n
\n \n {t('Checkout')}\n
\n {isAppLoginable ? (\n \n
\n ) : (\n \n dispatch(ACTIONS.navigateToAction({ to: DESTINATION_TYPES.SPECIAL_PAGE, pageID: 'checkout' }))}\n >\n {t('Order Now')}\n {`${getFormattedPrice(cartTotal)}`}\n \n
\n \n \n \n \n {children}\n \n \n \n
\n );\n};\n\nPageRenderer.propTypes = {\n children: node.isRequired\n};\n\nexport default PageRenderer;\n","import styled from 'styled-components';\n\nconst ScCompleteScreen = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n @media screen and (max-width: 480px){\n margin-top: 118px\n }\n @media screen and (min-width: 766px){\n padding-top: 20px;\n }\n\n h2 {\n margin: 20px 0;\n font-size: 18px;\n font-weight: 500;\n }\n\n > .completeScreen-text {\n max-width: 320px;\n font-size: 16px;\n color: #6F76A7;\n text-align: center;\n @media screen and (min-width: 766px) {\n max-width: 480px;\n }\n }\n\n .hr {\n background: #DFDFFF;\n width: 100%;\n height: 1px;\n margin: 20px 0px;\n }\n\n .checkIcon {\n width: 48px;\n height: 48px;\n color: #78BB07;\n }\n\n .completeScreen-btn {\n margin: 20px 0 24px 0;\n min-width: 270px;\n font-weight: 500;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: .5em 1em;\n border-radius: 4px;\n cursor: pointer;\n text-transform: capitalize;\n border: 0;\n font-size: 1em;\n line-height: 1.5;\n font-family: inherit;\n color: #fff;\n background-color: #0A1551;\n }\n\n span.button {\n color: #0099FF;\n font-size: 14px;\n cursor: pointer;\n }\n\n ${({ isDonationApp }) => (isDonationApp ? `\n .completeScreen-price {\n color: #0099FF;\n }\n\n .completeScreen-contBtn {\n margin: 30px 0 24px 0;\n min-width: 270px;\n font-weight: 400;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: .5em 1em;\n border-radius: 4px;\n cursor: pointer;\n text-transform: capitalize;\n border: 0;\n font-size: 14px;\n line-height: 1.5;\n font-family: inherit;\n color: #fff;\n background-color: #0099FF;\n height: 40px;\n }\n\n .line {\n border: 1px solid #DFDFFF;\n width: 130%;\n height: 1px;\n margin: 20px 0 0 0;\n }\n\n h2.share {\n margin: 30px 0 16px 0;\n font-size: 16px;\n font-weight: 700;\n }\n\n .completeScreen-social {\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n display: block;\n width: 22px;\n height: 22px;\n }\n\n a:nth-child(2) {\n margin: 0 8px;\n }\n\n .completeScreen-copyLinkBtn {\n margin-left: 13px;\n min-width: 90px;\n font-weight: 500;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 8px;\n border-radius: 32px;\n cursor: pointer;\n text-transform: capitalize;\n border: 0;\n font-size: 14px;\n font-family: inherit;\n color: #0A1551;\n background-color: #DADEF3;\n height: 32px;\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n span {\n margin-left: 4px;\n }\n }\n }\n ` : '')};\n\n`;\n\nexport default ScCompleteScreen;\n","import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { t } from '@jotforminc/translation';\nimport { IconCheckCircleFilled } from '@jotforminc/svg-icons';\nimport { Button } from '@jotforminc/magnet';\nimport SELECTORS from '../../../store/selectors';\nimport { DESTINATION_TYPES } from '../../../constants/navigation';\nimport { navigateToAction } from '../../../store/actionCreators';\nimport ScCompleteScreen from './ScCompleteScreen';\n\nconst StoreCompleteScreen = () => {\n const isAppLoginable = useSelector(SELECTORS.selectIsAppLoginable);\n\n const dispatch = useDispatch();\n\n const handleContinueShopping = () => {\n dispatch(navigateToAction({ to: DESTINATION_TYPES.PAGE, pageID: 'homepage' }));\n };\n\n const handleGoToPreviousOrders = () => {\n dispatch(navigateToAction({ to: DESTINATION_TYPES.SPECIAL_PAGE, pageID: 'previousOrders' }));\n };\n\n return (\n \n {t('We\\'ve received your order!')}\n\n
\n {t('We sent a confirmation mail.')}\n {\n isAppLoginable && (\n <>\n \n {t('Track and edit your order')}\n\n {t('Thanks for your support!')}\n
\n \n {translationRenderer('Your donation of [1[price]] will make a big difference.')({\n renderer1: () => {getFormattedPrice(lastOrderAmount)}\n })}\n \n \n {t('Continue to Homepage')}\n {isFeatureEnabled(FEATURE_NAMES.ShareOptions) && (\n\n
\n )}\n {t('Spread Goodness & Share Your Support')}
\n\n {socialMediaOptions.map(option => {\n return (\n handleShareButtonClick(option)}\n size=\"small\"\n variant=\"filled\"\n colorStyle=\"teams\"\n startIcon={option.icon}\n rounded={true}\n className=\"ml-2\"\n />\n );\n })}\n {(isMobileOrTablet) ? (\n true && (\n \n {t('More')}\n \n )\n ) : (\n \n {!isCopied &&
\n \n {isCheckoutFormCompleted ?
\n \n
\n );\n case isFavorite:\n return (\n \n
\n )}\n \n
\n );\n });\n};\n\nCartItemList.propTypes = {\n itemID: string,\n formID: string,\n products: arrayOf(shape({})),\n isFavorite: bool\n};\n\nCartItemList.defaultProps = {\n itemID: '',\n formID: '',\n products: [],\n isFavorite: false\n};\n\nexport default CartItemList;\n","import React from 'react';\nimport CartItemList from './CartItemList';\n\nconst Carts = ({ productLists, isFavorite }) => {\n const isMultiProductList = !isFavorite && productLists.length > 1;\n\n return productLists.map(({\n id, formID, cartProducts, title\n }) => (\n \n {isMultiProductList &&
\n ));\n};\n\nexport default Carts;\n","import Styled from 'styled-components';\n\nconst ScEmptyCart = Styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n top: 64px;\n\n .empty-favIcon-wrapper {\n width: 104px;\n height: 104px;\n\n span {\n &:after {\n content: '';\n position: absolute;\n z-index: -1;\n bottom: -6px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-top: 16px solid #0A1551;\n border-left: 16px solid transparent;\n border-right: 16px solid transparent;\n }\n }\n\n svg {\n width: 52px;\n }\n }\n\n .empty-cart-text {\n margin-top: 34px;\n max-width: 300px;\n text-align: center;\n line-height: 22px;\n\n span {\n display:inline;\n &:after {\n content: ' ';\n display: block;\n }\n }\n }\n`;\n\nexport default ScEmptyCart;\n","import Styled from 'styled-components';\n\nconst ScOrderNowButton = Styled.div`\n display: flex;\n align-items: center;\n width: 100%;\n border-top: 1px solid #DFDFFF;\n padding: 36px 24px;\n\n &.orderNowButton {\n padding: 26px 24px;\n }\n\n .productsInfo {\n font-size: 20px;\n color: #0A1551;\n font-weight: 700;\n line-height: 1;\n margin-right: auto;\n\n .formattedPrice {\n margin-left: 0.75em;\n }\n\n .itemCount {\n font-size: 14px;\n font-weight: 400;\n color: #6F76A7;\n text-align: left;\n margin-top: 8px;\n\n }\n }\n .orderBtn {\n font-size: 16px;\n width: 196px;\n height: 45px;\n background: #0A1551;\n border-radius: 4px;\n align-items: center;\n color: #FFFFFF;\n border: none;\n cursor: pointer;\n\n span {\n margin-left: 8px;\n color: #fff;\n }\n }\n`;\n\nexport default ScOrderNowButton;\n","import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Button } from '@jotforminc/magnet';\nimport { t } from '@jotforminc/translation';\nimport SELECTORS from '../../../store/selectors';\nimport { navigateToAction } from '../../../store/actionCreators';\nimport { DESTINATION_TYPES } from '../../../constants/navigation';\nimport { useFormattedPrice } from '../../../utils/hooks';\nimport ScOrderNowForScreen from './ScOrderNowForScreen';\n\nconst OrderNowForScreen = () => {\n const dispatch = useDispatch();\n const cartTotal = useSelector(SELECTORS.getCartTotal);\n const cartProductItem = useSelector(SELECTORS.getCartProductItemCount);\n\n const getFormattedPrice = useFormattedPrice();\n\n const openCheckoutPage = () => dispatch(navigateToAction({ to: DESTINATION_TYPES.SPECIAL_PAGE, pageID: 'checkout' }));\n\n return (\n {title}
}\n\n
\n \n {t('Total')}\n {cartTotal ? getFormattedPrice(cartTotal) : t('Free')}\n
\n \n {cartProductItem}\n {' '}\n {cartProductItem > 1 ? t('Items') : t('Item')}\n
\n \n \n {t('Due to changes in products, some products have been removed from your cart.')}\n \n
\n )}\n {!hasAnyCartProduct ? (\n \n 0\n
\n \n {capitalizeFirstLetter(t('your cart is empty'))}\n \n \n \n {t('Start Shopping')}\n \n
\n \n
\n \n 0\n
\n \n {capitalizeFirstLetter(t(\"you haven't favorited any product yet\"))}\n \n \n \n {t('Start Shopping')}\n \n
\n \n
\n );\n};\n\nexport default Favorites;\n","import Styled, { css } from 'styled-components';\nimport { mainFontColor } from '../../../styles/colors';\n\nexport const ScProductCart = Styled.div`\n display: flex;\n justify-content: center;\n background-color: #f3f3fe;\n width: 100%;\n position: fixed;\n bottom: 0;\n top: 65px;\n\n .productCart-container {\n max-width: 674px;\n width: 100%;\n ${({\n hasBrandingFooter, isPaymentOverQuota\n }) => {\n switch (true) {\n case (isPaymentOverQuota):\n return css`\n height: 385px;\n `;\n case (hasBrandingFooter):\n return css`\n height: calc(100vh - 165px);\n `;\n case (!hasBrandingFooter):\n return css`\n height: calc(100vh - 115px);\n `;\n default:\n return css`\n height: calc(100vh - 115px);\n `;\n }\n }}\n box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);\n border-radius: 6px;\n background-color: #ffffff;\n z-index: 12;\n position: relative;\n margin-top: 50px;\n\n .productCart-title {\n text-align: left;\n margin: 24px 25px 0;\n\n h3 {\n font-size: 20px;\n }\n }\n .cart-tabButtonContainer {\n background-color: #E3E5F5;\n width: calc(100% - 48px);\n margin: 24px 24px 8px 24px;\n display: flex;\n align-items: center;\n border-radius: 4px;\n height: 44px;\n padding: 2px;\n }\n .cart-tabButton {\n height: calc(100% - 2px);\n width: calc(100% - 2px);\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin: 1px;\n padding: 2px;\n }\n [data-isactive=\"true\"] {\n background-color: #ffffff;\n border: 1px solid rgba(0, 0, 0, 0.04);\n border-radius: 4px;\n transition: background-color ease .3s;\n box-shadow: 0px 3px 1px 0px #0000000A;\n box-shadow: 0px 3px 8px 0px #0000001F;\n }\n .cartContainer {\n display: flex;\n width: 100%;\n height: ${({ hasBrandingFooter }) => (hasBrandingFooter ? 'calc(100vh - 378px);' : 'calc(100vh - 328px);')};\n flex-direction: column;\n background-color: #ffffff;\n overflow-y: scroll;\n padding-bottom: 24px;\n }\n [data-tabid=\"Fav\"] > .cartContainer {\n height: ${({ hasBrandingFooter }) => (hasBrandingFooter ? 'calc(100vh - 290px);' : 'calc(100vh - 240px);')};\n }\n [data-activetab=\"Cart\"] {\n position: relative;\n }\n .orderNowButton {\n position: sticky;\n bottom: 0;\n background-color: #ffffff;\n z-index: 1;\n }\n\n .productList-title {\n background-color: #E3E5F5;\n text-transform: capitalize;\n color: ${mainFontColor};\n margin: 30px 24px 30px 24px;\n border-radius: 4px;\n text-align: left;\n padding: 3px 14px;\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n }\n }\n\n @media screen and (max-width: 480px) {\n .productCart {\n &-container {\n margin-top: 0;\n ${({\n hasBrandingFooter, isPaymentOverQuota\n }) => {\n switch (true) {\n case (isPaymentOverQuota):\n return css`\n height: 370px;\n `;\n case (hasBrandingFooter):\n return css`\n height: calc(100% - 50px);\n `;\n case (!hasBrandingFooter):\n return css`\n height: 100%;\n `;\n default:\n return css`\n height: 100%;\n `;\n }\n }}\n .cart {\n &-tabButtonContainer {\n height: 35px;\n border-radius: 9px;\n font-size: 14px;\n }\n\n &-tabButton {\n border-radius: 8px;\n }\n }\n\n .cartContainer {\n height: ${({ hasBrandingFooter }) => (hasBrandingFooter ? 'calc(100vh - 275px);' : 'calc(100vh - 225px)')};\n }\n }\n\n &-title {\n display: none;\n }\n }\n .productCart-container .orderNowButton {\n bottom: ${({ hasBrandingFooter }) => (hasBrandingFooter ? '50px;' : '0')};\n }\n .productCart-container [data-tabid=\"Fav\"] > .cartContainer {\n height: calc(100vh - 158px);\n }\n }\n`;\n","import Styled from 'styled-components';\nimport { mainFontColor } from '../../styles/colors';\n\nexport const ScStoreUnavailable = Styled.div`\n border: 1px solid #D3DCEF;\n color: ${mainFontColor};\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 24px 25px 0;\n border-radius: 4px;\n text-align: center;\n\n svg {\n width: 116px;\n height: 96px;\n margin-top: 51px;\n }\n\n .storeUnavailable-title {\n margin-top: 12px;\n font-size: 32px;\n font-weight: 700;\n }\n\n .storeUnavailable-desc {\n margin-top: 12px;\n line-height: 36px;\n font-size: 17px;\n margin-bottom: 32px;\n }\n `;\n","import React from 'react';\nimport { t } from '@jotforminc/translation';\nimport BackSoon from '../../assets/backsoon.svg';\nimport { ScStoreUnavailable } from './ScStoreUnavailable';\n\nconst StoreUnavailable = () => (\n {t('This store is currently unavailable.')}
\n{t('Please try again later.')}
\n \n }\n TabButtonContainer={props => }\n TabButton={TabButton}\n TabContainer={props => }\n list={getTabListContants()}\n TabListContainer={props => }\n >\n \n \n \n \n \n )}\n
\n \n
\n {isPaymentOverQuota ? (\n {t('Your Cart')}
\n{subscriptionPromptTitle || fallbackTitle}
\n{subscriptionPromptContent || fallbackContent}
\n \n{`${t('Cart')} (${cartProductsCount})`}
}\n >\n