\n )}\n \n {showDisclaimer ? (\n pCloud International AG | 74 Zugerstrasse Str, 6340 Baar, Switzerland\n ) : null}\n \n {/* */}\n {__(\"secure_ssl_payment_short\")}\n \n \n );\n};\n\nexport default PaypalTemplate;\n\nconst Wrapper = styled.div`\n position: relative;\n min-height: 255px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n`;\n\nconst paypalImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + (window.devicePixelRatio > 1.5 ? 'images/paypal@2x.png' : 'images/paypal.png');\nconst PaypalIcon = styled.div`\n width: 160px;\n height: 160px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n display: inline-block;\n background-image: url(${paypalImg});\n`;\n\nconst ButtonWrapper = styled.div`\n margin-top: -7px;\n position: relative;\n z-index: 0;\n\n #paypal-button {\n line-height: 1;\n z-index: 0;\n position: relative;\n overflow: hidden;\n border-radius: 7px;\n height: 45px;\n }\n`;\n\nconst SecureText = styled.div`\n /* font-family: \"Roboto\", sans-serif; */\n font-size: 13px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n text-align: center;\n color: #999999;\n margin: 6px 0;\n`;\n\nconst secureIconImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + (window.devicePixelRatio > 1.5 ? 'images/easter2020/secure@2x.png' : 'images/easter2020/secure.png');\nconst SecureIcon = styled.div`\n display: inline-block;\n width: 21px;\n height: 21px;\n background-repeat: no-repeat;\n background-size: 21px 21px;\n background-position: center;\n background-image: url(${secureIconImg});\n position: relative;\n top: 5px;\n margin-right: 10px;\n`;\n\nconst ExistingEmail = styled.div`\n position: absolute;\n bottom: 15px;\n left: 0px;\n display: inline-block;\n color: #888;\n font-size: 12px;\n min-height: 12px;\n line-height: 12px;\n /* font-family: \"Roboto\", sans-serif; */\n font-weight: bold;\n width: 100%;\n text-align: center;\n`;\n\nconst Logout = styled.span`\n margin-left: 8px;\n color: ${({ color }) => (color && COLORS[color] ? COLORS[color].mainColor : \"#17bed0\")};\n font-weight: bold;\n cursor: pointer;\n`;\n\nconst PaypalError = styled(Error)`\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nconst DisclaimerText = styled(SecureText)`\n font-size: 10px;\n margin-top: 16px;\n`;\n\nconst Link = styled.a`\n cursor: pointer;\n text-decoration: none;\n font-weight: bold;\n`;\n\nconst AnimationContainer = styled.div`\n background-image: inherit;\n background-color: inherit;\n\n .fading-enter,\n .fade-appear {\n opacity: 1;\n }\n .fading-exit {\n opacity: 0;\n }\n .fading-enter-active,\n .fade-appear-active {\n opacity: 1;\n }\n .fading-exit-active {\n opacity: 0;\n }\n .fading-enter-active,\n .fade-appear-active,\n .fading-exit-active {\n transition: all 400ms ease-in-out;\n }\n`;\n\nconst LoaderWrapper = styled.div`\n position: absolute;\n /* min-height: 400px; */\n // height: calc(100% - 130px);\n min-height: 400px;\n width: 100%;\n left: 0px;\n background-image: inherit;\n background-color: inherit;\n z-index: 1;\n\n .loading-icon_svg__color-path {\n fill: ${({ color }) => (color && COLORS[color] ? (COLORS[color].loadingIconColor ? COLORS[color].loadingIconColor : COLORS[color].mainColor) : \"#17bed0\")};\n }\n`;\n","//@flow\n\nimport React, { useState, useEffect, useRef } from \"react\";\n\nimport { SubscriptionUpdate } from \"../../lib/payments\";\nimport { PlanIDType, ColorType, Userinfo } from \"../../lib/types/dataTypes.components\";\n\nimport PaypalTemplate from \"./PaypalTemplate\";\n// import PaymentConfirmationModal from \"../Modals/PaymentConfirmationModal\";\nimport usePrevious from \"@pcloud/web-utilities/dist/hooks/usePrevious\";\n\nimport { getUserTtrafficCount } from \"@pcloud/web-utilities/dist/plans/utils.plans\";\nimport { ADDITIONAL_TRAFFIC_ID, CUSTOM4TB_PLAN_ID } from \"@pcloud/web-utilities/dist/plans/constants.plans\";\n\ntype PaypalBoxType = {\n auth: string,\n user: Userinfo,\n planId: PlanIDType | Array,\n period: \"month\" | \"year\" | \"lifetime\",\n userPaymentSource: {\n email: string\n },\n afterPaymentActions: () => void,\n discount?: string,\n color?: ColorType,\n onPaymentProcessing?: () => void,\n afterPaymentProcessing?: () => void,\n showDisclaimer: boolean,\n isBusinessTrial: boolean,\n paypalButtonLabel: string,\n getCurrentStorageCount: () => number,\n RenderTemplate: any,\n payButtonClicked?: boolean,\n isMobile?: boolean,\n hidePaypalButton?: boolean,\n setDisabledPlanOptions: () => void,\n setDisabledButton: () => void,\n removePaypalPaymentSource: () => void,\n theme?: string,\n traffic: string | number,\n onPaymentErrorMessageChange: (newErrorMessage: string) => void,\n downgrade?: boolean\n};\n\nconst PaypalBox = ({\n auth,\n user = null, // Business accounts doesn't pass this param. \n planId = [],\n period,\n discount,\n userPaymentSource,\n afterPaymentActions,\n color = \"cyan\",\n onPaymentProcessing = () => {},\n afterPaymentProcessing = () => {},\n showDisclaimer,\n isBusinessTrial = false,\n paypalButtonLabel = \"\",\n RenderTemplate = PaypalTemplate,\n setExternalButtonLoading = () => {},\n payButtonClicked,\n checkCurrentSubscription = () => {},\n isMobile = false,\n hidePaypalButton = false,\n setDisabledPlanOptions = () => {},\n setDisabledButton = () => {},\n removePaypalPaymentSource = () => {},\n theme,\n traffic,\n subscribeForUserInfoChange = () => {},\n abbortUserInfoChangeSubscribe = () => {},\n stopUserDiff = () => {},\n onPaymentErrorMessageChange = (newErrorMessage) => null,\n downgrade = false\n}: PaypalBoxType) => {\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [paypalLoading, setPaypalLoading] = useState(true);\n const [paymentLoading, setPaymentLoading] = useState(false);\n const [paypalEmail, setPaypalEmail] = useState();\n const [showConfirmationModal, setShowConfirmationModal] = useState(false);\n\n const payments = useRef({value: null});\n const prevIsMobile = usePrevious(isMobile);\n\n const [fireAfterPaymentActions, setFireAfterPaymentActions] = useState(null);\n\n useEffect(() => {\n const params = {\n provider: \"paypal\",\n period: period,\n userAuth: auth,\n products: planId,\n billingAddress: {},\n traffic: planId.indexOf(ADDITIONAL_TRAFFIC_ID) !== -1 ? (parseInt(traffic) || (user && getUserTtrafficCount(user, true)) || 0) : 0,\n downgrade: downgrade,\n isBusinessTrial: isBusinessTrial,\n toggleLoader: togglePaymentLoader,\n showPaymentError,\n showBadInput: () => {},\n onBraintreeCreatePayment: subscribeForUserInfoChange\n };\n\n if (user?.lastsubscription?.status === \"active\" && user.lastsubscription?.products.indexOf(CUSTOM4TB_PLAN_ID) !== -1 && period !== \"lifetime\") {\n if (user?.planparams?.traffic) {\n params.traffic += user.planparams.traffic\n }\n\n if (user?.planparams?.storage) {\n params.storage = user.planparams.storage\n }\n }\n\n if (discount) {\n params.discountcode = discount;\n }\n\n payments.current.value = new SubscriptionUpdate(params);\n }, []);\n\n useEffect(() => {\n if (!payments.current.value) {\n return;\n }\n\n if (discount) {\n payments.current.value.paymentInfo.discountcode = discount;\n } else {\n delete payments.current.value.paymentInfo.discountcode;\n }\n }, [discount, payments.current.value]);\n\n useEffect(() => {\n setDisabledButton(paymentLoading || paypalLoading);\n setDisabledPlanOptions(paymentLoading || paypalLoading);\n }, [paymentLoading, paypalLoading]); //[paymentLoading, paypalLoading]\n\n // We use this hook to fire afterPaymentActions in the context of last rendered component values. \n // Otherwise planId refers to the initially loaded value.\n useEffect(() => {\n if (fireAfterPaymentActions === null) {\n // Initially called.\n return;\n }\n\n const {res, successCallback, errorCallback, skipApiUpdate} = fireAfterPaymentActions;\n afterPaymentActions(res, successCallback, errorCallback, skipApiUpdate);\n }, [fireAfterPaymentActions]);\n\n useEffect(() => {\n if (!payments.current.value || paypalEmail || hidePaypalButton || isMobile === prevIsMobile) {\n return;\n }\n\n renderPaypalButton();\n }, [isMobile, paypalEmail, hidePaypalButton, payments.current.value]);\n\n useEffect(() => {\n if (!payments.current.value) {\n return;\n }\n\n payments.current.value.paymentInfo.products = planId.join(\",\");\n payments.current.value.paymentInfo.traffic = planId.indexOf(ADDITIONAL_TRAFFIC_ID) !== -1 ? (traffic || (user && getUserTtrafficCount(user, true)) || 0) : 0;\n\n }, [planId, payments.current.value]);\n\n useEffect(() => {\n onPaymentErrorMessageChange(errorMessage);\n }, [errorMessage]);\n\n useEffect(() => {\n if (payButtonClicked) {\n handleSubmit();\n }\n }, [payButtonClicked]); // [payButtonClicked]\n\n useEffect(() => {\n if (userPaymentSource && userPaymentSource.email) {\n setPaypalEmail(userPaymentSource.email);\n setPaypalLoading(false);\n }\n }, [userPaymentSource]); //[userPaymentSource]\n\n const renderPaypalButton = () => {\n setPaypalLoading(true);\n setExternalButtonLoading(true);\n\n payments.current.value.getTokenBraintree({\n refresh: false,\n label: paypalButtonLabel,\n showPaymentConfirmationModal: checkCurrentSubscription(),\n callback: (res, successCallback, errorCallback, skipApiUpdate) => setFireAfterPaymentActions({res, successCallback, errorCallback, skipApiUpdate}),\n onReady: () => {\n setPaypalLoading(false);\n setExternalButtonLoading(false);\n }\n });\n }\n\n const handlePaypalLogout = () => {\n setPaypalEmail(\"\");\n setErrorMessage(\"\");\n removePaypalPaymentSource();\n renderPaypalButton();\n };\n\n const handleSubmit = () => {\n if (paypalLoading) {\n return;\n }\n\n setErrorMessage(\"\");\n\n if (paypalEmail) {\n togglePaymentLoader(\"show\");\n\n if (isBusinessTrial) {\n afterPaymentActions();\n } else {\n subscribeForUserInfoChange();\n payments.current.value.createBraintreePayment({\n refresh: false,\n callback: afterPaymentActions,\n showPaymentConfirmationModal: checkCurrentSubscription()\n });\n }\n } else {\n subscribeForUserInfoChange();\n if (payments.current.value.checkout) {\n togglePaymentLoader(\"show\");\n payments.current.value.checkout.paypal.initAuthFlow();\n }\n }\n };\n\n const handleModalClose = () => {\n setShowConfirmationModal(false);\n };\n\n const togglePaymentLoader = (action: \"show\" | \"hide\") => {\n let isLoading = action === \"show\";\n setPaymentLoading(action === \"show\");\n setPaypalLoading(action === \"show\");\n isLoading ? onPaymentProcessing() : afterPaymentProcessing();\n };\n\n const showPaymentError = message => {\n setPaypalLoading(false);\n setErrorMessage(message);\n abbortUserInfoChangeSubscribe();\n stopUserDiff();\n };\n\n return (\n \n \n \n );\n};\n\nexport default PaypalBox;\n","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgCheckIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 14 10\"\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n className: \"check-icon_svg__st0\",\n d: \"M.4 5.4c-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0l3.1 3.2 5.9-6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1l-6.9 7c-.6.6-1.5.6-2.1 0L.4 5.4z\"\n })));\n}\nexport default SvgCheckIcon;","import styled, { css } from \"styled-components\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\n\nexport const textGradientCSS = css`\n background: var(--text-gradient);\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n width: fit-content;\n`;\n\nexport const sectionTitleCSS = css`\n font-size: 36px;\n font-weight: 700;\n letter-spacing: -0.36px;\n`;\n\nexport const baseButtonCSS = css`\n border-radius: var(--button-border-radius);\n height: 48px;\n line-height: 48px;\n font-size: 15px;\n font-weight: 700;\n box-sizing: border-box;\n display: block;\n text-align: center;\n border: none;\n text-decoration: none;\n cursor: pointer;\n padding: 0 var(--spacing-md);\n`;\n\n/* ===== Plans.js ===== */\nexport const LoadingAlign = styled.div`\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n margin: 0px auto;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n z-index: 1;\n border: solid 1px #f0f0f0;\n background-color: #fcfcfc;\n border-radius: 17px;\n transition: all 400ms ease-in-out;\n\n @media (max-width: 768px) {\n border-radius: 0px;\n }\n`;\n\nexport const RelativeContainer = styled.div`\n position: relative;\n width: 100%;\n margin: 0 auto;\n`;\n\nexport const PlansContainerWrapper = styled.div`\n --old-price-color: var(--color-gray);\n --button-family-background: url(\"${(typeof cdnPath !== 'undefined' ? cdnPath : '/')}images/cyan-vector.svg\") right 18px center no-repeat, linear-gradient(#fff, #fff) padding-box, var(--family-gradient) border-box;\n --button-plan-action-background: url(\"${(typeof cdnPath !== 'undefined' ? cdnPath : '/')}images/white-vector.svg\") right 18px center no-repeat var(--button-color);\n --pricing-page-content-width: 1180px;\n --pricing-page-content-offset: calc(var(--spacing-lg) * 2);\n\n @media (max-width: 360px) {\n --pricing-page-content-offset: calc(var(--spacing-sm) * 2);\n }\n\n\n display: flex;\n flex-direction: column;\n background: ${({background}) => background ? background : `var(--surface-primary)`};\n align-items: center;\n box-sizing: border-box;\n text-align: left;\n`;\n\nexport const PlansContainerWrapperVer0 = styled.div`\n --pricing-page-content-width: 1180px;\n --pricing-page-content-offset: 40px;\n \n @media (max-width: 360px) {\n --pricing-page-content-offset: 20px;\n }\n`;\n\nexport const PlansPageTitle = styled.div`\n padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);\n background: background: ${({background}) => background ? background : `linear-gradient(180deg, #FFF 2.16%, var(--surface-primary) 100%)`};\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n\n .headline-wrapper {\n max-width: var(--pricing-page-content-width);\n width: calc(100% - var(--pricing-page-content-offset));\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n text-align: center;\n margin-bottom: var(--spacing-sm);\n }\n\n @media (max-width: 768px) {\n padding-bottom: var(--spacing-md);\n }\n\n .title {\n font-size: 42px;\n font-weight: 600;\n letter-spacing: -0.42px;\n ${textGradientCSS}\n\n @media (max-width: 768px) {\n font-size: 36px;\n letter-spacing: -0.36px;\n }\n }\n\n .sub-title {\n font-size: 20px;\n font-weight: 400;\n color: var(--color-base-black);\n\n @media (max-width: 768px) {\n font-size: 18px;\n line-height: 24px;\n }\n }\n`;\n\nexport const PlansWrapper = styled.div`\n max-width: var(--pricing-page-content-width);\n width: calc(100% - var(--pricing-page-content-offset));\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const PlansWrapperVer0 = styled.div`\n max-width: var(--pricing-page-content-width);\n width: calc(100% - var(--pricing-page-content-offset));\n box-sizing: border-box;\n margin: 0 auto;\n`;\n\nexport const PeriodsWrapper = styled.div`\n margin-bottom: var(--spaces-6);\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n\n @media (max-width: 1030px) {\n margin-bottom: var(--spacing-lg);\n }\n\n .periods-toggle {\n margin-bottom: 0px;\n }\n`;\n\nexport const PeriodsWrapperVer0 = styled.div`\n margin-top: 50px;\n margin-bottom: 30px;\n\n .periods-toggle {\n margin-bottom: 0px;\n }\n\n @media (max-width: 768px) {\n margin-top: 20px;\n margin-bottom: 20px;\n }\n`;\n\nexport const PlanBoxesWrapper = styled.div`\n display: flex;\n gap: var(--spacing-lg);\n width: 100%;\n margin: 0 auto;\n justify-content: center;\n\n @media (max-width: 1030px) {\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-md);\n }\n\n .plan-action-button {\n ${baseButtonCSS}\n background: var(--button-plan-action-background);\n width: 100%;\n color: #FFF;\n\n span > span {\n display: none;\n }\n }\n`;\n\nexport const PlanBoxesWrapperVer0 = styled.div`\n display: flex;\n gap: 26px;\n width: 100%;\n margin: 0 auto;\n justify-content: center;\n\n @media (max-width: 1030px) {\n flex-direction: column;\n align-items: center;\n justify-content: center;\n } \n`;\n\nexport const LoaderWrapper = styled.div`\n position: relative;\n display: inline-block;\n width: 64px;\n height: 64px;\n position: relative;\n\n .loading-icon_svg__color-path {\n fill: #17bed0;\n }\n`;\n\nexport const LoadingPlansText = styled.div`\n font-size: 15px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.2;\n letter-spacing: normal;\n text-align: center;\n color: #000;\n margin-top: 10px;\n`;\n\nexport const ArrowBoxWrapper = styled.div`\n margin: 0 auto var(--spacing-md) auto;\n text-align: center;\n\n &.random_girl {\n @media (max-width: 1150px) {\n display: none;\n }\n \n position: absolute;\n bottom: -241px;\n right: 0px;\n\n .best_valued {\n margin-left: var(--spacing-sm);\n }\n }\n`;\n\nexport const ArrowBoxWrapperVer0 = styled.div`\n margin: 0 auto 10px auto;\n text-align: center;\n\n &.random_girl {\n @media (max-width: 1150px) {\n display: none;\n }\n \n position: absolute;\n bottom: -241px;\n right: 0px;\n\n .best_valued {\n margin-left: 5px;\n }\n }\n`;\n\nexport const ArrowCompare = styled.img`\n position: relative;\n top: 9px;\n margin: 0px 13px;\n max-width: 100%;\n`;\n\nexport const ArrowBoxBestValued = styled.span`\n font-family: 'Marck Script',cursive;\n font-size: 20px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: 1.2;\n letter-spacing: normal;\n text-align: right;\n color: #999999;\n`;\n\nexport const PeriodsDisclaimer = styled.div`\n color: #999999;\n font-size: 14px;\n line-height: 16px;\n text-align: center;\n margin-top: 11px;\n opacity: ${({ show }) => show ? 1 : 0};\n transition: opacity 250ms ease-in-out;\n`;\n\nexport const PaymentPartner = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 12px;\n border: 0.5px solid var(--box-border);\n background: #FFF;\n box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.02);\n padding: var(--spacing-lg) var(--spacing-xl);\n gap: var(--spacing-xl);\n width: var(--pricing-page-content-width);\n max-width: calc(100% - var(--pricing-page-content-offset));\n box-sizing: border-box;\n margin-bottom: var(--spacing-lg);\n\n @media (max-width: 768px) {\n margin-top: var(--spacing-md);\n padding: var(--spacing-xl);\n flex-direction: column;\n border-radius: 24px;\n box-shadow: 5px 7px 25px 0px rgba(0, 0, 0, 0.05);\n gap: var(--spacing-md);\n }\n\n .payment-partner-text-container {\n font-size: 17px;\n font-weight: 400;\n letter-spacing: -0.17px;\n margin: 0;\n }\n`;\n\nexport const PaymentPartnerVer0 = styled.div`\n background: #fff;\n border: 1px solid #eee;\n text-align: center;\n font-size: 14px;\n padding: 13px 20px;\n margin: 10px auto;\n width: 100%;\n max-width: 826px;\n box-sizing: border-box;\n border-radius: 7px;\n\n &:last-of-type {\n margin: 10px auto 40px;\n }\n\n display: flex;\n align-items: center;\n\n @media (max-width: 768px) {\n flex-direction: column;\n justify-content: center;\n }\n`;\n\nexport const GogoLogo = styled.div`\n height: 55px;\n width: 200px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 200px 55px;\n background-image: url(\"${(typeof cdnPath !== 'undefined' ? cdnPath : '/')}images/plans/gogo-mini.png\");\n flex-shrink: 0;\n`;\n\nexport const GogoLogoVer0 = styled.div`\n display: inline-block;\n height: 55px;\n width: 200px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 200px 55px;\n background-image: url(\"${(typeof cdnPath !== 'undefined' ? cdnPath : '/')}images/plans/gogo-mini.png\");\n flex-shrink: 0;\n\n @media (max-width: 768px) {\n margin: 0 auto 10px auto;\n }\n`;\n\nexport const JapaneseCertification = styled.div`\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-bottom: var(--spacing-2xl);\n width: var(--pricing-page-content-width);\n max-width: calc(100% - var(--pricing-page-content-offset));\n box-sizing: border-box;\n font-size: 15px;\n font-weight: 400;\n letter-spacing: -0.15px;\n gap: var(--spacing-sm);\n \n @media (max-width: 768px) {\n font-size: 13px;\n letter-spacing: -0.13px;\n align-items: flex-start;\n }\n`;\n\nexport const JapaneseCertificationVer0 = styled.div`\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.4;\n letter-spacing: normal;\n color: #707070;\n margin: 30px auto;\n box-sizing: border-box;\n max-width: 826px;\n display: flex;\n gap: 4px;\n \n @media (max-width: 768px) {\n padding: 0px 20px;\n }\n`;\n\nexport const JapaneseCloudAwardContainer = styled.div`\n width: var(--pricing-page-content-width);\n max-width: calc(100% - var(--pricing-page-content-offset));\n margin-top: var(--spacing-2xl);\n margin-bottom: var(--spacing-lg);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-md);\n`;\n\nexport const JapaneseCloudAwardContainerVer0 = styled.div`\n border-bottom: 1px solid #E4E4E4;\n padding: 47px 15px 72px 15px;\n`;\n\nexport const JapaneseCloudAwardContainerTitle = styled.div`\n color: var(--color-base-black);\n font-size: 32px;\n font-weight: 700;\n`;\n\nexport const JapaneseCloudAwardContainerTitleVer0 = styled.h2`\n color: #2C2C2C;\n font-family: Roboto;\n font-size: 28px;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n text-align: center;\n margin-bottom: 12px;\n letter-spacing: normal;\n`;\n\nexport const ReadMoreToggle = styled.span`\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n color: var(--text-link);\n font-size: 15px;\n font-weight: 400;\n line-height: 20px; \n cursor: pointer;\n`;\n\nexport const ReadMoreToggleVer0 = styled.span`\n color: #17BED0;\n text-align: center;\n font-family: Roboto;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n text-decoration-line: underline;\n margin: 0 auto;\n display: block;\n cursor: pointer;\n`;\n\nexport const JapaneseCertificationDescription = styled.div`\n color: var(--color-base-black);\n font-size: 15px;\n font-weight: 400;\n line-height: 20px; \n`;\n\nexport const JapaneseCertificationDescriptionVer0 = styled.div`\n color: #707070;\n text-align: center;\n font-family: Roboto;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 12px;\n max-width: 830px;\n margin: 0 auto 12px auto;\n`;\n\nexport const CertificatesWrapper = styled.div`\n display: grid;\n grid-template-columns: 1fr 1fr;\n column-gap: var(--spacing-lg);\n margin-top: var(--spacing-lg);\n\n @media (max-width: 768px) {\n max-width: 570px;\n }\n`;\n\nexport const CertificatesWrapperVer0 = styled.div`\n display: flex;\n gap: 40px;\n margin: 72px auto 0 auto;\n justify-content: center;\n flex-wrap: wrap;\n @media (max-width: 768px) {\n max-width: 570px;\n }\n`;\n\nexport const CertificateImage = styled.img`\n cursor: pointer;\n width: 100%;\n border-radius: 12px;\n box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.02);\n`;\n\nexport const CertificateImageVer0 = styled.img`\n cursor: pointer;\n width: 570px;\n border-radius: 12px;\n @media (max-width: 768px) {\n width: 100%;\n }\n`;\n\n/* ===== PlanBox.js ===== */\nexport const PlanBoxOuterWrapper = styled.div`\n background-color: #ffffff;\n border: 0.5px solid var(--box-border);\n box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.02);\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : \"0px\")};\n width: 100%;\n max-width: var(--plan-box-max-width);\n box-sizing: border-box;\n transition: box-shadow 200ms ease-in-out;\n\n overflow: ${(props) => (props.showBestPriceByRandomGirl ? \"unset\" : \"hidden\")};\n @media (max-width: 1150px) {\n overflow: hidden;\n }\n\n &:hover {\n box-shadow: ${({ disabled }) => {\n return disabled ? \"none\" : \"0px 2px 14px -6px rgba(0,0,0,0.44)\";\n }};\n cursor: ${({ disabled }) => {\n return disabled ? \"default\" : \"pointer\";\n }};\n \n div {\n cursor: ${({ disabled }) => {\n return disabled ? \"default\" : \"pointer\";\n }};\n }\n }\n\n &:last-of-type {\n .box-title {\n color: var(--color-success);\n }\n\n .plans-feature svg:first-child path {\n fill: var(--color-success);\n }\n\n .plan-action-button {\n background-color: var(--color-success);\n }\n }\n`;\n\nexport const PlanBoxOuterWrapperVer0 = styled.div`\n background-color: #ffffff;\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : \"0px\")};\n width: 100%;\n max-width: 400px;\n box-sizing: border-box;\n\n overflow: ${(props) => (props.showBestPriceByRandomGirl ? \"unset\" : \"hidden\")};\n @media (max-width: 1150px) {\n overflow: hidden;\n }\n\n &:first-of-type {\n margin-top: 0px;\n margin-left: auto;\n }\n\n &:last-of-type {\n margin-bottom: 0px;\n margin-right: auto;\n }\n\n &:hover {\n box-shadow: ${({ disabled }) => {\n return disabled ? \"none\" : \"0px 2px 14px -6px rgba(0,0,0,0.44)\";\n }};\n cursor: ${({ disabled }) => {\n return disabled ? \"default\" : \"pointer\";\n }};\n \n div {\n cursor: ${({ disabled }) => {\n return disabled ? \"default\" : \"pointer\";\n }};\n }\n }\n\n @media (max-width: 768px) {\n margin: 8px auto;\n border-radius: 0px;\n }\n\n @media (max-width: 1030px) {\n margin: 8px auto;\n }\n`;\n\nexport const PlanBoxWrapper = styled.div`\n position: relative;\n width: 100%;\n max-width: var(--plan-box-max-width);\n box-sizing: border-box;\n padding: var(--spacing-xl);\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : \"0px\")};\n box-shadow: ${({ newLabel, color, disabled }) => {\n if (disabled && newLabel) {\n return \"inset 0px 0px 0px 4px #cccccc\";\n }\n if (newLabel) {\n return `inset 0px 0px 0px 4px ${COLORS[color].mainColor}`;\n }\n return \"none\";\n }};\n\n .box-discount {\n border-top-right-radius: ${(props) => (props.showBestPriceByRandomGirl && props.borderRadius ? `${props.borderRadius}px` : \"unset\")};\n }\n \n /* Due to long labels in RU */\n .plan-action-button {\n padding: 0 16px;\n }\n\n .tooltip {\n padding: 15px 20px;\n max-width: 250px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n }\n\n @media (min-width: 1031px) and (max-width: 1144px) {\n padding: var(--spacing-lg);\n }\n`;\n\nexport const PlanBoxWrapperVer0 = styled.div`\n position: relative;\n width: 100%;\n max-width: 400px;\n box-sizing: border-box;\n padding: ${({showBestPriceByRandomGirl}) => showBestPriceByRandomGirl ? \"40px 30px 46px 30px\" : \"40px 40px 46px 40px\"};\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : \"0px\")};\n box-shadow: ${({ newLabel, color, disabled }) => {\n if (disabled && newLabel) {\n return \"inset 0px 0px 0px 4px #cccccc\";\n }\n if (newLabel) {\n return `inset 0px 0px 0px 4px ${COLORS[color].mainColor}`;\n }\n return \"none\";\n }};\n\n .box-discount {\n border-top-right-radius: ${(props) => (props.showBestPriceByRandomGirl && props.borderRadius ? `${props.borderRadius}px` : \"unset\")};\n }\n \n /* Due to long labels in RU */\n .plan-action-button {\n padding: 0 16px;\n }\n\n &:first-of-type {\n margin-left: 0px;\n }\n\n &:last-of-type {\n margin-right: 0px;\n }\n\n @media (max-width: 768px) {\n padding: 25px 20px;\n border-radius: 0px;\n\n .box-discount {\n border-top-right-radius: 0;\n }\n }\n\n .tooltip {\n padding: 15px 20px;\n max-width: 250px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n }\n\n .feature-info-icon {\n margin-left: 2px;\n }\n\n @media (min-width: 1031px) and (max-width: 1144px) {\n padding: 20px 20px 26px 20px;\n }\n\n ${({showBestPriceByRandomGirl}) => showBestPriceByRandomGirl ? css`\n @media (min-width: 1221px) {\n .prices-wrapper-inner {\n font-size: 0.9em;\n }\n }\n ` : null}\n`;\n\nexport const PlanBoxInnerWrapper = styled.div``;\n\nexport const PlanBoxFeaturesWrapper = styled.div`\n margin-top: var(--spacing-xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-md);\n\n @media (max-width: 768px) {\n display: none;\n }\n\n .plans-feature {\n gap: var(--spacing-sm);\n\n svg:first-child {\n width: 11.15px;\n height: 8.57px;\n }\n \n .inner-text {\n padding: 0;\n margin: 0;\n font-size: 15px;\n font-weight: 400;\n letter-spacing: normal;\n }\n }\n`;\n\nexport const PlanBoxFeaturesWrapperVer0 = styled.div`\n margin-top: 33px;\n\n @media (max-width: 768px) {\n display: none;\n }\n`;\n\nexport const ArrowBoxInnerWrapper = styled.span`\n vertical-align: top;\n display: inline-block;\n`;\n\nexport const PlanDescription = styled.div`\n margin: 26px auto 0px auto;\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.14;\n letter-spacing: -0.35px;\n text-align: center;\n color: ${props => (props.disabled ? \"#cccccc\" : \"#878787\")};\n height: 32px;\n\n @media (max-width: 768px) {\n display: none;\n }\n`;\n\n/* ===== BoxPeriod.js ===== */\nexport const PeriodWrapper = styled.div`\n border-radius: 30px;\n height: 60px;\n border-radius: 30px;\n border: 0.5px solid rgba(0, 0, 0, 0.03);\n background-color: ${({ backgroundColorValue }) => backgroundColorValue || \"rgba(0, 0, 0, 0.1)\"};\n max-width: ${props => props.width}px;\n width: 100%;\n display: flex;\n justify-content: space-around;\n align-items: center;\n position: relative;\n box-sizing: border-box;\n\n .choose-period {\n color: var(--color-base-black);\n line-height: 60px;\n font-size: var(--medium-font-size);\n font-weight: 700;\n letter-spacing: normal;\n text-transform: uppercase;\n }\n\n .period-separator:has(+ .choose-period.active), .choose-period.active + .period-separator {\n display: none;\n }\n\n .period-separator {\n background: rgba(0, 0, 0, 0.10);\n height: 22px;\n }\n`;\n\nexport const PeriodWrapperVer0 = styled.div`\n margin: 0px auto 30px auto;\n position: relative;\n display: flex;\n justify-content: space-around;\n align-items: center;\n width: ${props => props.width}px;\n max-width: 400px;\n height: 38px;\n border-radius: 19px;\n background-color: ${({ backgroundColorValue }) => backgroundColorValue || \"rgba(0, 0, 0, 0.1)\"};\n position: relative;\n\n @media (max-width: 768px) {\n width: 90%;\n }\n`;\n\nexport const Period = styled.div`\n position: relative;\n display: inline-block;\n width: ${props => props.width}%;\n text-align: center;\n /* font-family: Inter, Roboto; */\n font-size: 14px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 38px;\n letter-spacing: -0.35px;\n color: #333333;\n text-transform: uppercase;\n z-index: 2;\n transition: all 0.25s ease-in-out;\n cursor: pointer !important;\n\n &.active, &:hover {\n color: ${props => COLORS[props.color].mainColor};\n }\n`;\n\nexport const PeriodSeparator = styled.div`\n position: relative;\n display: inline-block;\n width: 1px;\n height: 16px;\n background-color: #cccccc;\n`;\n\nexport const PeriodSelectedBar = styled.div`\n width: calc(${props => props.width}% - 10px);\n height: calc(100% - 10px);\n border-radius: 24px;\n position: absolute;\n top: 5px;\n left: calc(${props => props.leftOffset}% + 6px);\n background-color: #ffffff;\n z-index: 1;\n transition: all 0.25s ease-in-out;\n box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.10);\n`;\n\nexport const PeriodSelectedBarVer0 = styled.div`\n width: calc(${props => props.width}% - 4px);\n height: 34px;\n border-radius: 17px;\n position: absolute;\n top: 2px;\n left: calc(${props => props.leftOffset}% + 2px);\n background-color: #ffffff;\n z-index: 1;\n transition: all 0.25s ease-in-out;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.07);\n`;\n\n/* ===== PricingPageUI.js ===== */\nexport const VatIncluded = styled.div`\n max-width: var(--pricing-page-content-width);\n width: calc(100% - var(--pricing-page-content-offset));\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-base-black);\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n gap: var(--spacing-xs);\n margin: var(--spacing-lg) 0 var(--spacing-xl) 0;\n padding: 0 var(--spacing-xl) var(--spacing-md) var(--spacing-xl);\n box-sizing: border-box;\n line-height: 18px;\n\n a {\n font-weight: 400 !important;\n }\n\n .upgrade-text {\n margin-bottom: 0;\n }\n\n @media(max-width: 1030px) {\n flex-direction: column;\n align-items: flex-start;\n max-width: var(--plan-box-max-width);\n border-bottom: 0.5px solid var(--box-border);\n }\n`;\n\nexport const VatIncludedVer0 = styled.div`\n display: flex;\n flex-direction: column-reverse;\n color: #999;\n font-size: 14px;\n margin: 21px 0 25px 0;\n padding: 0 0 20px;\n text-align: center;\n border-bottom: 1px solid #eee;\n`;\n\n/* ===== BoxHeader.js ===== */\nexport const BoxTitle = styled.h2`\n color: var(--text-link);\n font-size: 24px;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n letter-spacing: -0.24px;\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n`;\n\nexport const BoxTitleVer0 = styled.h2`\n font-size: 22px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.18;\n letter-spacing: -0.33px;\n text-align: center;\n color: ${({disabled, theme, color}) => {\n if (color && !disabled) {\n return COLORS[color].mainColor\n } else if (disabled && theme === \"dark\") {\n return \"#888888\";\n } else if (disabled) {\n return \"#cccccc\";\n } else {\n return \"#212121\"\n }\n }};\n display: flex;\n align-items: center;\n justify-content: center;\n\n @media(max-width: 768px) {\n font-size: 20px;\n }\n`;\n\nexport const BoxSubtitle = styled.div`\n color: var(--color-base-black);\n font-size: var(--base-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n text-transform: uppercase;\n`;\n\nexport const BoxSubtitleVer0 = styled.div`\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.21;\n letter-spacing: -0.35px;\n text-align: center;\n color: ${({disabled, theme}) => {\n if (disabled && theme === \"dark\") {\n return \"#888888\";\n } else if (disabled) {\n return \"#cccccc !important\";\n } else if (theme === \"dark\") {\n return \"#e6e6e6\";\n } else {\n return \"#878787\";\n }\n }};\n text-transform: uppercase;\n\n @media(max-width: 768px) {\n display: none;\n }\n`;\n\nexport const HeaderWrapper = styled.div`\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nexport const HeaderWrapperVer0 = styled.div`\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 8px;\n`;\n\n/* ===== BoxPrice.js ===== */\nexport const PricesWrapperRow = styled.div`\n margin: var(--spacing-xl) auto var(--spacing-2xl) auto;\n\n .price-period-text {\n color: var(--color-gray);\n font-size: var(--base-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n text-align: left;\n }\n`;\n\nexport const PricesWrapperRowVer0 = styled.div`\n max-width: 320px;\n margin: 24px auto 30px auto;\n /* font-family: Inter, Roboto; */\n @media (max-width: 768px) {\n margin: 16px auto 26px auto;\n }\n`;\n\nexport const PricesWrapperInnerRow = styled.div`\n min-height: 47px;\n display: flex;\n align-items: center;\n\n --crossline-height: 1.5px;\n --crossline-offset: 4px;\n\n .new-price {\n color: var(--color-base-black);\n font-size: 2.5em;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n letter-spacing: -2px;\n text-align: left;\n }\n\n .slash {\n color: var(--old-price-color);\n font-size: 2em;\n font-style: normal;\n font-weight: 300;\n line-height: normal;\n letter-spacing: -1.6px;\n margin-left: 4px;\n margin-right: calc(4px + var(--crossline-offset));\n }\n\n .old-price {\n color: var(--old-price-color);\n font-size: 2em;\n font-style: normal;\n font-weight: 300;\n line-height: normal;\n letter-spacing: -1.6px;\n text-align: left;\n }\n\n .crossline {\n position: absolute;\n height: var(--crossline-height);\n border-radius: 0.75px;\n background: var(--old-price-color);\n width: calc(100% + (var(--crossline-offset) * 2));\n left: calc(var(--crossline-offset) * -1);\n top: calc(50% - var(--crossline-height) / 2);\n }\n\n @media (min-width: 1145px) and (max-width: 1220px) {\n font-size: 0.9em;\n }\n\n @media (min-width: 1031px) and (max-width: 1144px) {\n font-size: 0.8em;\n }\n`;\n\nexport const PricesWrapperInnerRowVer0 = styled.div`\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n justify-content: center;\n min-height: 48px;\n\n --crossline-height: 1.5px;\n --crossline-offset: 4px;\n\n .crossline {\n position: absolute;\n height: var(--crossline-height);\n border-radius: 0.75px;\n width: calc(100% + (var(--crossline-offset) * 2));\n left: calc(var(--crossline-offset) * -1);\n top: calc(50% - var(--crossline-height) / 2);\n }\n\n @media (max-width: 768px) {\n min-height: 0px;\n }\n\n .new-price, .old-price {\n font-size: 2.375em;\n }\n\n .slash {\n font-size: 2.5em;\n }\n\n @media (min-width: 1145px) and (max-width: 1220px) {\n font-size: 0.8em;\n }\n\n @media (min-width: 1031px) and (max-width: 1144px) {\n font-size: 0.7em;\n }\n`;\n\n/* ===== ExplorePcloud.js ===== */\nexport const TryPcloud = styled.div`\n max-width: var(--pricing-page-content-width);\n width: calc(100% - var(--pricing-page-content-offset));\n color: var(--color-base-black);\n text-align: center;\n font-size: 18px;\n font-weight: 500;\n line-height: 26px;\n margin-top: var(--spacing-md);\n margin-bottom: var(--spaces-6);\n box-sizing: border-box;\n`;\n\nexport const TryPcloudVer0 = styled.div`\n color: #2c2c2c;\n font-family: \"Roboto\", sans-serif;\n text-align: center;\n font-size: 18px;\n margin: 30px auto 40px auto;\n padding: 0px 20px;\n box-sizing: border-box;\n`;\n\n/* ===== UserPlanInfo.js ===== */\nexport const UserPlanInfoContainer = styled.div`\n background: var(--alert-info-background);\n border-radius: var(--alert-info-border-radius);\n text-align: center;\n box-sizing: border-box;\n max-width: var(--pricing-page-content-width);\n width: calc(100% - var(--pricing-page-content-offset));\n padding: var(--spacing-md) var(--spacing-lg);\n font-size: 13px;\n font-weight: 400;\n line-height: 16px;\n color: var(--color-base-black);\n display: flex;\n align-items: flex-start;\n justify-content: center;\n gap: var(--spacing-sm);\n margin-bottom: var(--spacing-lg);\n\n @media (max-width: 768px) {\n padding: var(--spacing-md);\n }\n\n &:before {\n content: \"\";\n background: url(\"${(typeof cdnPath !== 'undefined' ? cdnPath : '/')}images/small-info-icon.svg\") no-repeat;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n display: inline-block;\n }\n\n & > div > &:last-of-type {\n margin: var(--spacing-md) auto var(--spacing-2xl);\n }\n`;\n\nexport const UserPlanInfoContainerVer0 = styled.div`\n background: #fffbdd;\n border: 1px solid #ede9cd;\n text-align: center;\n font-size: 14px;\n padding: 13px 20px;\n margin: 10px auto;\n width: 100%;\n max-width: 826px;\n box-sizing: border-box;\n border-radius: 7px;\n\n &:last-of-type {\n margin: 10px auto 40px;\n }\n`;","import styled from \"styled-components\";\nimport { PlanBoxOuterWrapperVer0, PeriodWrapperVer0, PlanBoxWrapperVer0} from \"./Plans\";\n\nexport const Crypto_PlansWrapper = styled.div`\n width: 100%;\n max-width: 1220px;\n box-sizing: border-box;\n\n .plans-container {\n min-height: 505px;\n }\n\n @media (max-width: 768px) {\n .plans-container {\n min-height: auto;\n }\n }\n`;\n\nexport const Crypto_PlanBoxOuterWrapper = styled(PlanBoxOuterWrapperVer0)`\n max-width: unset;\n @media (max-width: 768px) {\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : \"0px\")};\n }\n`;\n\nexport const Crypto_PeriodsWrapper = styled.div``;\n\nexport const Crypto_PeriodWrapper = styled(PeriodWrapperVer0)`\n margin: 0px auto 20px auto;\n width: 100%;\n max-width: unset;\n`;\n\nexport const Crypto_PlanBoxWrapper = styled(PlanBoxWrapperVer0)`\n padding: 36px 40px;\n max-width: unset;\n`;\n\nexport const Crypto_PlanBoxFeaturesWrapper = styled.div`\n margin-top: 39px;\n\n @media (max-width: 768px) {\n display: none;\n }\n`;","import styled from \"styled-components\";\nimport { PlanBoxWrapper, PlanBoxWrapperVer0} from \"./Plans\";\n\nexport const Storage_PlanBoxWrapperVer0 = styled(PlanBoxWrapperVer0)`\n .plans-feature {\n border-bottom: none;\n }\n`;\n\nexport const Storage_PlanBoxWrapper = styled(PlanBoxWrapper)`\n .plans-feature {\n border-bottom: none;\n }\n`;","import styled from \"styled-components\";\nimport { Crypto_PlansWrapper, Crypto_PlanBoxOuterWrapper, Crypto_PlanBoxWrapper, Crypto_PlanBoxFeaturesWrapper} from \"./CryptoPlans\";\n\nexport const StorageFamily_PlansWrapper = styled(Crypto_PlansWrapper)`\n .plans-container {\n min-height: 487px;\n }\n\n @media (max-width: 768px) {\n .plans-container {\n min-height: auto;\n }\n }\n`;\n\nexport const StorageFamily_PlanBoxOuterWrapper = styled(Crypto_PlanBoxOuterWrapper)`\n background-color: #f6f6f6;\n`;\n\nexport const StorageFamily_PlanBoxWrapper = styled(Crypto_PlanBoxWrapper)``;\n\nexport const StorageFamily_PlanBoxFeaturesWrapper = styled(Crypto_PlanBoxFeaturesWrapper)``;","import styled from \"styled-components\";\nimport { PlansWrapperVer0, PeriodsWrapperVer0} from \"./Plans\";\n\nexport const Traffic_PlansWrapper = styled(PlansWrapperVer0)`\n .plans-container {\n min-height: 337px;\n }\n\n @media (max-width: 768px) {\n .plans-container {\n min-height: 320px;\n }\n }\n`;\n\nexport const Traffic_PeriodsWrapper = styled(PeriodsWrapperVer0)`\n margin-top: 0;\n`;","import styled from \"styled-components\";\nimport { PeriodWrapperVer0 } from \"./Plans\";\n\nexport const Pass_PlansWrapper = styled.div`\n max-width: 1220px;\n box-sizing: border-box;\n margin: 0 auto;\n`;\n\nexport const Pass_PeriodsWrapper = styled.div`\n .choose-period {\n &:not(.active) {\n color: #fff;\n }\n }\n\n .period-separator {\n display: none;\n }\n \n @media (max-width: 768px) {\n margin-top: 20px;\n margin-bottom: -4px;\n }\n`;\nexport const Pass_PeriodWrapper = styled(PeriodWrapperVer0)`\n margin: 0px auto 40px auto;\n \n @media (max-width: 768px) {\n margin: 0px auto 20px;\n }\n`;\n\nexport const Pass_VatIncluded = styled.div`\n font-size: 15px;\n color: #fff;\n opacity: .5;\n margin-top: 16px;\n text-align: center;\n`;","import React from \"react\";\nimport styled from \"styled-components\";\n\nexport const Wrapper = styled.div`\n position: relative;\n`;\n\nexport const FormWrapper = styled.div`\n box-sizing: border-box;\n border-radius: 7px;\n border: solid 1px #f2f2f2;\n background-color: #fcfcfc;\n padding: 13px;\n\n @media (max-width: 768px) {\n padding: 0px;\n border-radius: 0px;\n background: transparent;\n border: none;\n min-height: 0px;\n height: auto;\n }\n`;\n\nexport const SignFormWrapper = styled(FormWrapper)`\n height: ${({ user }) => (user ? \"auto\" : \"540px\")};\n padding: ${({ user }) => (user ? \"13px\" : \"28px 48px 28px\")};\n transition: all 250ms ease-in-out;\n overflow-y: auto;\n overflow-x: hidden;\n`;\n\nexport const PaymentFormWrapper = styled(FormWrapper)`\n height: 460px;\n`;\n\nexport const PaymentMessageForm = styled(PaymentFormWrapper)`\n padding: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n text-align: center;\n font-size: 20px;\n line-height: 1.4;\n flex-direction: column;\n\n svg {\n margin-bottom: 20px;\n\n @media (max-width: 768px) {\n margin-bottom: 15px;\n }\n }\n\n @media (max-width: 768px) {\n font-size: 15px;\n font-weight: bold;\n }\n`;\n\nexport const FormContainer = styled.div`\n width: 100%;\n max-width: 420px;\n margin: 0 auto;\n height: 100%;\n background-color: inherit;\n box-sizing: border-box;\n\n &.payment-form {\n padding: 30px 0px 0px 0px;\n\n @media (max-width: 768px) {\n padding-bottom: 0px;\n }\n }\n\n .responsive-wrap {\n width: 100%;\n\n @media (max-width: 768px) {\n margin-left: 0px;\n }\n }\n`;\n\nexport const SectionTitle = styled.h3`\n font-size: 18px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.22;\n letter-spacing: normal;\n text-align: left;\n color: #2a2a2a;\n padding-left: 0px;\n margin: 0px 0px 15px 0px;\n opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};\n\n @media (max-width: 768px) {\n text-transform: uppercase;\n font-size: 14px;\n opacity: 0.5;\n color: #000;\n margin-bottom: 10px;\n }\n`;\n\nexport const SeparationLine = styled.div`\n display: inline-block;\n width: 100%;\n height: 1px;\n background-color: #f6f6f6;\n margin: 20px auto;\n flex-shrink: 0;\n\n @media (max-width: 768px) {\n margin: 11px auto;\n }\n`;\n\nexport const TopHeadline = styled.h1`\n margin: 42px auto 30px auto;\n font-size: 36px;\n font-weight: bold;\n letter-spacing: normal;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n\n span {\n margin-left: 18px;\n margin-bottom: -2px;\n line-height: 46px;\n }\n\n @media (max-width: 768px) {\n font-size: 24px;\n letter-spacing: -0.6px;\n margin: 5px auto 12px;\n\n &.checkout-headline {\n display: none;\n }\n }\n`;\n\nexport const PriceLoadingWrapper = styled.div`\n display: inline-block;\n width: 18px;\n height: 18px;\n position: relative;\n`;\n\nexport const AnimationContainer = styled.div`\n flex-shrink: 0;\n\n .fade-enter {\n opacity: 0;\n }\n .fade-exit {\n opacity: 1;\n }\n .fade-enter-active {\n opacity: 1;\n }\n .fade-exit-active {\n opacity: 0;\n }\n .fade-enter-active,\n .fade-exit-active {\n transition: opacity 300ms ease-in-out;\n }\n`;\n\nexport const FadeTranstionContainer = styled.div`\n // Loading animation\n .fading-enter,\n .fade-appear {\n opacity: 1;\n }\n .fading-exit {\n opacity: 0;\n }\n .fading-enter-active,\n .fade-appear-active {\n opacity: 1;\n }\n .fading-exit-active {\n opacity: 0;\n }\n .fading-enter-active,\n .fade-appear-active,\n .fading-exit-active {\n }\n`;\n\nexport const UserPlanInfoContainer = styled.div`\n background: #fffbdd;\n border: 1px solid #ede9cd;\n text-align: center;\n font-size: 14px;\n padding: 13px 20px;\n margin: 10px auto;\n width: 100%;\n max-width: 826px;\n box-sizing: border-box;\n border-radius: 7px;\n\n &:last-of-type {\n margin: 10px auto 40px;\n }\n`;\n\nexport const PriceError = styled(UserPlanInfoContainer)`\n color: #f73c3c;\n border: solid 1px #f73c3c;\n background: rgb(254, 246, 246);\n margin: 10px auto 40px;\n`;\n","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgCheckIconV2(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 12,\n height: 9,\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4 6.175l5.9-5.9A.948.948 0 0110.6 0c.283 0 .517.092.7.275a.948.948 0 01.275.7.948.948 0 01-.275.7l-6.6 6.6c-.2.2-.434.3-.7.3a.96.96 0 01-.7-.3l-2.6-2.6a.948.948 0 01-.275-.7c0-.283.091-.517.275-.7A.948.948 0 011.4 4c.283 0 .516.092.7.275l1.9 1.9z\",\n fill: \"#17BED0\"\n })));\n}\nexport default SvgCheckIconV2;","import React, { useMemo } from \"react\";\nimport { hrefSearch } from \"@pcloud/web-utilities/dist/lib/utils\";\nimport { PlansContainerWrapper, PlansPageTitle, PlansContainerWrapperVer0, PlansWrapper, PlansWrapperVer0, PlanBoxOuterWrapper, PlanBoxOuterWrapperVer0, PeriodsWrapper, PeriodsWrapperVer0, PeriodSelectedBar, PeriodSelectedBarVer0, PeriodWrapper, PeriodWrapperVer0, PlanBoxFeaturesWrapper, VatIncluded, PlanBoxesWrapper, PlanBoxesWrapperVer0, BoxTitle, BoxTitleVer0, BoxSubtitleVer0, BoxSubtitle, HeaderWrapperVer0, HeaderWrapper, PricesWrapperInnerRow, PricesWrapperInnerRowVer0, PricesWrapperRowVer0, PricesWrapperRow, PlanBoxFeaturesWrapperVer0, VatIncludedVer0, TryPcloud, TryPcloudVer0, PaymentPartner, PaymentPartnerVer0, JapaneseCertificationVer0, JapaneseCertification, JapaneseCloudAwardContainerVer0, JapaneseCloudAwardContainer, JapaneseCloudAwardContainerTitle, JapaneseCloudAwardContainerTitleVer0, ReadMoreToggleVer0, ReadMoreToggle, JapaneseCertificationDescription, JapaneseCertificationDescriptionVer0, CertificatesWrapper, CertificatesWrapperVer0, CertificateImage, CertificateImageVer0, GogoLogoVer0, GogoLogo, UserPlanInfoContainer, UserPlanInfoContainerVer0, ArrowBoxWrapperVer0, ArrowBoxWrapper} from \"./Plans\";\nimport { Crypto_PlansWrapper, Crypto_PlanBoxOuterWrapper, Crypto_PlanBoxWrapper, Crypto_PeriodsWrapper, Crypto_PeriodWrapper, Crypto_PlanBoxFeaturesWrapper} from \"./CryptoPlans\";\nimport { Storage_PlanBoxWrapper, Storage_PlanBoxWrapperVer0 } from \"./StoragePlans\";\nimport { StorageFamily_PlansWrapper, StorageFamily_PlanBoxOuterWrapper, StorageFamily_PlanBoxWrapper, StorageFamily_PlanBoxFeaturesWrapper } from \"./StorageFamilyPlans\";\nimport { Traffic_PlansWrapper, Traffic_PeriodsWrapper } from \"./TrafficPlans\";\nimport { Pass_PlansWrapper, Pass_PeriodsWrapper, Pass_PeriodWrapper, Pass_VatIncluded } from \"./PassPlans\";\nimport { TopHeadline } from \"../views/Style\";\nimport CheckIcon from \"../../../svg/check-icon.svg\";\nimport CheckIconV2 from \"../../../svg/check-icon-v2.svg\";\n\nconst PlansTypeComponent = (props) => {\n\n const version = useMemo(() => props.plansVersion ? props.plansVersion : (props.type === \"storage\" ? (hrefSearch(\"plansversion\") || (typeof PLANS_VERSION !== \"undefined\" ? PLANS_VERSION: null)) : \"0.0.0\"), [props.type]);\n \n const components = {\n PlansContainer: {\n storage: {\n \"0.0.0\": PlansContainerWrapperVer0, \n default: PlansContainerWrapper\n },\n },\n PlansWrapper: {\n storage: {\n \"0.0.0\": PlansWrapperVer0, \n default: PlansWrapper\n },\n crypto: Crypto_PlansWrapper,\n passwords: Pass_PlansWrapper,\n storage_family: StorageFamily_PlansWrapper,\n traffic: Traffic_PlansWrapper\n },\n PlanBoxOuterWrapper: {\n storage: {\n \"0.0.0\": PlanBoxOuterWrapperVer0, \n default: PlanBoxOuterWrapper\n },\n crypto: Crypto_PlanBoxOuterWrapper,\n storage_family: StorageFamily_PlanBoxOuterWrapper\n },\n PlanBoxWrapper: {\n storage: {\n \"0.0.0\": Storage_PlanBoxWrapperVer0, \n default: Storage_PlanBoxWrapper\n },\n crypto: Crypto_PlanBoxWrapper,\n storage_family: StorageFamily_PlanBoxWrapper\n },\n PeriodsWrapper: {\n storage: {\n \"0.0.0\": PeriodsWrapperVer0, \n default: PeriodsWrapper\n },\n crypto: Crypto_PeriodsWrapper,\n passwords: Pass_PeriodsWrapper,\n traffic: Traffic_PeriodsWrapper\n },\n PeriodWrapper: {\n storage: {\n \"0.0.0\": PeriodWrapperVer0, \n default: PeriodWrapper\n },\n crypto: Crypto_PeriodWrapper,\n passwords: Pass_PeriodWrapper\n },\n PlanBoxFeaturesWrapper: {\n storage: {\n \"0.0.0\": PlanBoxFeaturesWrapperVer0, \n default: PlanBoxFeaturesWrapper\n },\n crypto: Crypto_PlanBoxFeaturesWrapper,\n storage_family: StorageFamily_PlanBoxFeaturesWrapper\n },\n VatIncluded: {\n storage: {\n \"0.0.0\": VatIncludedVer0, \n default: VatIncluded\n },\n passwords: Pass_VatIncluded\n },\n TopHeadline: {\n storage: {\n \"0.0.0\": TopHeadline,\n default: PlansPageTitle\n }\n },\n PeriodSelectedBar: {\n storage: {\n \"0.0.0\": PeriodSelectedBarVer0,\n default: PeriodSelectedBar\n }\n },\n PlanBoxesWrapper: {\n storage: {\n \"0.0.0\": PlanBoxesWrapperVer0,\n default: PlanBoxesWrapper\n }\n },\n BoxTitle: {\n storage: {\n \"0.0.0\": BoxTitleVer0,\n default: BoxTitle\n }\n },\n BoxSubtitle: {\n storage: {\n \"0.0.0\": BoxSubtitleVer0,\n default: BoxSubtitle\n }\n },\n HeaderWrapper: {\n storage: {\n \"0.0.0\": HeaderWrapperVer0,\n default: HeaderWrapper\n }\n },\n PricesWrapperRow: {\n storage: {\n \"0.0.0\": PricesWrapperRowVer0,\n default: PricesWrapperRow\n }\n },\n PricesWrapperInnerRow: {\n storage: {\n \"0.0.0\": PricesWrapperInnerRowVer0,\n default: PricesWrapperInnerRow\n }\n },\n CheckIcon: {\n storage: {\n \"0.0.0\": CheckIcon,\n default: CheckIconV2\n }\n },\n TryPcloud: {\n storage: {\n \"0.0.0\": TryPcloudVer0,\n default: TryPcloud\n }\n },\n PaymentPartner: {\n storage: {\n \"0.0.0\": PaymentPartnerVer0,\n default: PaymentPartner\n }\n },\n JapaneseCertification: {\n storage: {\n \"0.0.0\": JapaneseCertificationVer0,\n default: JapaneseCertification\n }\n },\n JapaneseCloudAwardContainer: {\n storage: {\n \"0.0.0\": JapaneseCloudAwardContainerVer0,\n default: JapaneseCloudAwardContainer\n },\n },\n JapaneseCloudAwardContainerTitle: {\n storage: {\n \"0.0.0\": JapaneseCloudAwardContainerTitleVer0,\n default: JapaneseCloudAwardContainerTitle\n },\n },\n ReadMoreToggle: {\n storage: {\n \"0.0.0\": ReadMoreToggleVer0,\n default: ReadMoreToggle\n },\n },\n JapaneseCertificationDescription: {\n storage: {\n \"0.0.0\": JapaneseCertificationDescriptionVer0,\n default: JapaneseCertificationDescription\n },\n },\n CertificatesWrapper: {\n storage: {\n \"0.0.0\": CertificatesWrapperVer0,\n default: CertificatesWrapper\n },\n },\n CertificateImage: {\n storage: {\n \"0.0.0\": CertificateImageVer0,\n default: CertificateImage\n },\n },\n GogoLogo: {\n storage: {\n \"0.0.0\": GogoLogoVer0,\n default: GogoLogo\n }\n },\n UserPlanInfoContainer: {\n storage: {\n \"0.0.0\": UserPlanInfoContainerVer0,\n default: UserPlanInfoContainer\n }\n },\n ArrowBoxWrapper: {\n storage: {\n \"0.0.0\": ArrowBoxWrapperVer0,\n default: ArrowBoxWrapper\n }\n }\n };\n\n const tmpComponentByPlansType = components[props.name][props.type || \"storage\"] || components[props.name][\"storage\"];\n\n const ComponentByPlansType = tmpComponentByPlansType[version] || tmpComponentByPlansType[\"default\"] || tmpComponentByPlansType;\n return ;\n}\n\nexport default PlansTypeComponent;","//@ flow\n\nimport React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\n\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport { ColorType } from \"../../lib/types/dataTypes.components\";\nimport { __ } from \"../../lib/utils\";\nimport PlansTypeComponent from \"../PricingPage/styles/PlansTypeComponent\";\n\ntype BoxHeaderProps = {\n title: string,\n subtitle: string,\n color?: ColorType,\n disabled?: boolean,\n className?: string,\n theme?: \"dark\" | \"light\",\n discountPeriod?: number,\n priorityLabel: boolean,\n plansType: \"storage\" | \"crypto\" | \"traffic\" | \"storage_family\" | \"passwords\",\n plansVersion: string\n};\n\nconst BoxHeader = ({\n title,\n subtitle,\n color = \"cyan\",\n disabled = false,\n className = \"\",\n theme = \"light\",\n discountPeriod,\n label,\n subtitlePosition,\n plansType = \"storage\",\n plansVersion = \"0.0.0\"\n}: BoxHeaderProps) => {\n const plansTypeProps = {\n type: plansType,\n plansVersion\n };\n\n return (\n \n {subtitlePosition == \"top\" && subtitle ? (\n {subtitle.replace(\"%limited_discount_period%\", 30 * discountPeriod)}\n ) : null}\n \n {label ? {label} : null}\n {title}\n \n {subtitlePosition == \"bottom\" && subtitle ? (\n {subtitle.replace(\"%limited_discount_period%\", 30 * discountPeriod)}\n ) : null}\n \n )\n};\n\nexport default BoxHeader;\n\nconst Label = styled.div`\n display: inline-block;\n text-transform: uppercase;\n background-color: ${({disabled, theme, color}) => {\n if (color && !disabled) {\n return COLORS[color].mainColor\n } else if (disabled && theme === \"dark\") {\n return \"#888888\";\n } else if (disabled) {\n return \"#cccccc\";\n } else {\n return \"#212121\"\n }\n }};\n color: #fff;\n padding: 4px 6px;\n font-size: 14px;\n border-radius: 4px;\n margin-right: 6px;\n`;\n","import styled from \"styled-components\";\n\nexport const CenterAlign = styled.div`\n text-align: center;\n margin: 0 auto;\n`","//@flow\n\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { __, signToCurrency } from \"../../lib/utils\";\nimport { CenterAlign } from \"../CommonStyledComponents\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport PlansTypeComponent from \"../PricingPage/styles/PlansTypeComponent\";\n\ntype BoxPriceProps = {\n price: number,\n currency: string,\n oldPrice?: number,\n slashPeriod?: string,\n periodText?: string,\n disabled?: boolean,\n className?: string,\n theme?: \"dark\" | \"light\",\n discountPeriod?: number,\n template?: \"row\" | \"column\",\n plansType: \"storage\" | \"crypto\" | \"traffic\" | \"storage_family\" | \"passwords\",\n};\n\nconst BoxPrices = ({\n price = 0,\n currency,\n oldPrice = 0,\n slashPeriod,\n periodText,\n disabled = false,\n className = \"\",\n theme = \"light\",\n discountPeriod,\n template = \"row\",\n showSaveLabel = false,\n color=\"cyan\",\n plansType = \"storage\",\n plansVersion = \"0.0.0\"\n}: BoxPriceProps) => {\n price = (price % 1 === 0) ? price : price.toFixed(2);\n oldPrice = (oldPrice % 1 === 0) ? oldPrice : oldPrice.toFixed(2);\n \n const priceFractions = (Number(price) + \"\").split('.');\n let priceDecimalPart = \"00\";\n \n if (priceFractions.length > 1) {\n priceDecimalPart = priceFractions[1].slice(0, 2);\n\n if (priceDecimalPart.length === 1) {\n priceDecimalPart += \"0\";\n }\n }\n\n const newPriceWholeNumber = price % 1 === 0 ? (price + \"\") : ((Math.floor(price)).toString());\n\n let Price = PriceRow;\n let OldPrice = OldPriceRow;\n let CurrencyCode = CurrencyCodeRow;\n let CrossLine = CrossLineRow;\n\n if (template == 'column') {\n Price = PriceColumn;\n OldPrice = OldPriceColumn;\n CurrencyCode = CurrencyCodeColumn;\n CrossLine = CrossLineColumn;\n }\n\n const renderOldPrice = () => {\n if (!(oldPrice && oldPrice !== price)) {\n return null;\n }\n\n return (\n \n {oldPrice}\n {signToCurrency[currency]}\n \n \n );\n };\n\n const renderSlashRow = () => {\n if (!(oldPrice && oldPrice !== price)) {\n return null;\n }\n\n return (\n \n /\n \n );\n };\n\n const renderNewPriceRow = () => {\n return (\n \n {price}\n {signToCurrency[currency]}\n \n );\n };\n\n const renderSlashPeriod = () => {\n return slashPeriod ? (\n \n {slashPeriod}\n \n ) : null;\n };\n\n const renderPeriodText = () => {\n if (!periodText) {\n return null;\n }\n\n return (\n \n {periodText.replace(\"%limited_discount_period%\", 30 * discountPeriod)}\n \n );\n };\n\n const renderSaveLabel = () => {\n if (!showSaveLabel) {\n return null;\n }\n\n return (\n \n {__(\"pricing_page_save_label\", \"Save %discount% %currency%\", {\n discount: oldPrice - price,\n currency: signToCurrency[currency]\n })}\n \n );\n };\n\n const renderPriceRow = () => {\n if (!price) {\n return (\n \n \n -\n \n \n );\n }\n\n return (\n \n {showSaveLabel && (oldPrice - price) > 0 ? renderPeriodText() : null}\n\n \n {renderNewPriceRow()}\n {renderSlashRow()}\n {renderOldPrice()}\n {renderSlashPeriod()}\n \n\n {oldPrice - price > 0 ? renderSaveLabel() : null}\n\n {!(showSaveLabel && (oldPrice - price) > 0) ? renderPeriodText() : null}\n \n );\n };\n\n const renderPriceColumn = () => {\n if (!price) {\n return null;\n }\n\n return (\n \n {showSaveLabel && (oldPrice - price) > 0 ? renderPeriodText() : null}\n \n {renderOldPrice()}\n \n \n {newPriceWholeNumber}\n \n {price % 1 !== 0 && \n \n .\n {priceDecimalPart}\n \n }\n \n {signToCurrency[currency]}\n \n \n\n {renderSlashPeriod}\n \n\n {oldPrice - price > 0 ? renderSaveLabel() : null}\n\n {!(showSaveLabel && (oldPrice - price) > 0) ? renderPeriodText() : null}\n \n );\n };\n\n return template === 'row' ? renderPriceRow() : (template == 'column' ? renderPriceColumn() : null);\n};\n\nexport default BoxPrices;\n\n// Template: column\nconst PricesWrapperColumn = styled.div``;\n\nconst PricesWrapperInnerColumn = styled.div``;\n\nconst PriceColumn = styled.div`\n line-height: 0.77;\n font-weight: bold;\n text-align: left;\n margin-top: 26px;\n color: ${({ disabled, theme }) => {\n if (disabled) {\n return \"#cccccc !important\";\n } else if (theme === \"dark\") {\n return \"#e6e6e6\";\n } else {\n return \"#000000\";\n }\n }};\n\n @media (max-width: 768px) {\n margin-top: 20px;\n margin-bottom: 35px;\n text-align: center;\n }\n`;\n\nconst OldPriceColumn = styled.span`\n position: relative;\n font-size: 61px;\n line-height: 23px;\n font-weight: bold;\n text-align: left;\n color: ${({ disabled, theme }) => {\n if (disabled) {\n return \"#cccccc !important\";\n } else if (theme === \"dark\") {\n return \"#bfbebe\";\n } else {\n return \"#d336c8\";\n }\n }};\n .old-price-value,\n .old-price-currency-code {\n opacity: 0.3;\n }\n`;\n\nconst CurrencyCodeColumn = styled.span`\n font-size: 42px;\n margin-left: 10px;\n`;\n\nconst CrossLineColumn = styled.div`\n position: absolute;\n left: -15px;\n top: 38px;\n width: calc(100% + 30px);\n height: 3px;\n background-color: ${props => (props.disabled ? \"#cccccc !important\" : \"#8b8b8b\")};\n`;\n\nconst ValueNewPriceColumn = styled.span`\n font-size: ${props => (props.fontSize ? props.fontSize : \"50\")}px;\n @media (max-width: 768px) {\n font-size: ${props => (props.fontSizeMobile ? props.fontSizeMobile : \"50\")}px;\n }\n @media (min-width: 769px) and (max-width: 800px) {\n font-size: ${props => (props.fontSizeTablet ? props.fontSizeTablet : \"50\")}px;\n }\n`;\n\nconst ValueDecimalPart = styled.span`\n font-size: ${props => (props.fontSize ? props.fontSize : \"20\")}px;\n @media (max-width: 768px) {\n font-size: ${props => (props.fontSizeMobile ? props.fontSizeMobile : \"20\")}px;\n }\n @media (min-width: 769px) and (max-width: 800px) {\n font-size: ${props => (props.fontSizeTablet ? props.fontSizeTablet : \"50\")}px;\n }\n position: absolute;\n letter-spacing: 2.67px;\n`;\nconst CurrencyCodeNewPrice = styled.span`\n font-size: ${props => (props.fontSize ? props.fontSize : \"20\")}px;\n @media (max-width: 768px) {\n font-size: ${props => (props.fontSizeMobile ? props.fontSizeMobile : \"20\")}px;\n }\n @media (min-width: 769px) and (max-width: 800px) {\n font-size: ${props => (props.fontSizeTablet ? props.fontSizeTablet : \"50\")}px;\n }\n letter-spacing: 1.56; \n`;\n\n// Template: row\nconst OldPriceRow = styled.span`\n position: relative;\n font-size: 38px;\n font-weight: 300;\n line-height: 1.19;\n letter-spacing: -1.05px;\n text-align: center;\n display: inline-block;\n color: ${({ disabled, theme }) => {\n if (disabled) {\n return \"#cccccc !important\";\n } else if (theme === \"dark\") {\n return \"#bfbebe\";\n } else {\n return \"#aaaaaa\";\n }\n }};\n @media (max-width: 768px) {\n font-size: 32px;\n }\n`;\n\nconst PriceRow = styled.span`\n font-size: 38px;\n font-weight: bold;\n line-height: 1.19;\n letter-spacing: -1.05px;\n text-align: center;\n color: ${({ disabled, theme }) => {\n if (disabled) {\n return \"#cccccc !important\";\n } else if (theme === \"dark\") {\n return \"#e6e6e6\";\n } else {\n return \"#000000\";\n }\n }};\n @media (max-width: 768px) {\n font-size: 32px;\n }\n`;\n\nconst PeriodText = styled.div`\n font-size: 14px;\n font-weight: normal;\n line-height: 1.21;\n letter-spacing: -0.35px;\n text-align: center;\n color: ${({ disabled, theme }) => {\n if (disabled) {\n return \"#cccccc !important\";\n } else if (theme === \"dark\") {\n return \"#e6e6e6\";\n } else {\n return \"#868686\";\n }\n }};\n text-transform: uppercase;\n @media (max-width: 768px) {\n font-size: 12px;\n }\n`;\n\nconst CurrencyCodeRow = styled.span`\n font-size: 20px;\n letter-spacing: 0px;\n margin-left: 3px;\n @media (max-width: 768px) {\n font-size: 16px;\n }\n`;\n\nconst Value = styled.span``;\n\nconst CrossLineRow = styled.div`\n position: absolute;\n left: -4px;\n top: 19px;\n width: 110%;\n height: 1px;\n background-color: ${props => (props.disabled ? \"#cccccc !important\" : \"#aaaaaa\")};\n`;\n\nconst Slash = styled.span`\n margin: 0px 10px;\n font-size: 40px;\n font-weight: 300;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.19;\n letter-spacing: -1.05px;\n text-align: center;\n color: ${({ disabled, theme }) => {\n if (disabled) {\n return \"#cccccc !important\";\n } else if (theme === \"dark\") {\n return \"#bfbebe\";\n } else {\n return \"#ececec\";\n }\n }};\n @media (max-width: 768px) {\n font-size: 32px;\n }\n`;\n\nconst SlashPeriod = styled.span`\n font-size: 21px;\n font-weight: 600;\n margin: 0 0 0 -3px;\n color: ${({ disabled, theme }) => {\n if (disabled) {\n return \"#cccccc !important\";\n } else if (theme === \"dark\") {\n return \"#e6e6e6\";\n } else {\n return \"#2c2c2c\";\n }\n }};\n font-family: \"Roboto\", sans-serif;\n`;\n\nconst SaveLabel = styled.div`\n display: inline-block;\n min-width: 110px;\n box-sizing: border-box;\n color: ${({color}) => COLORS[color].mainColor};\n text-align: center;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n text-transform: uppercase;\n padding: 4px 20px;\n border-radius: 8px;\n background: ${({color}) => COLORS[color].lightShade};\n margin: 8px auto 0 auto;\n\n @media (max-width: 768px) {\n border-radius: 4px;\n }\n`;\n","//@ flow\n\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nimport { CenterAlign } from \"../CommonStyledComponents\";\nimport { businessPrices } from \"@pcloud/web-utilities/dist/plans/prices\";\nimport { signToCurrency } from \"../../lib/utils\";\n\ntype BoxPriceProps = {\n currency: string,\n disabled?: boolean,\n className?: string,\n theme?: \"dark\" | \"light\",\n planId: 201 | 202,\n pricesToShow: \"both\" | \"monthly\" | \"yearly\"\n};\n\nconst BoxPricesBusiness = ({\n currency,\n disabled = false,\n className = \"\",\n theme = \"light\",\n planId,\n pricesToShow = \"both\"\n}: BoxPriceProps) => {\n const renderPrices = () => {\n if (pricesToShow === \"both\") {\n return (\n <>\n \n {__(\"Yearly Subscription\")}\n \n {businessPrices[planId][currency][\"year\"]}\n {signToCurrency[currency]}\n \n \n \n \n {__(\"Monthly Subscription\")}\n \n {businessPrices[planId][currency][\"month\"]}\n {signToCurrency[currency]}\n \n \n \n )\n } else if (pricesToShow === \"monthly\") {\n return (\n \n {__(\"Monthly Subscription\")}\n \n {businessPrices[planId][currency][\"month\"]}\n {signToCurrency[currency]}\n \n \n )\n } else if (pricesToShow === \"yearly\") {\n return (\n \n {__(\"Yearly Subscription\")}\n \n {businessPrices[planId][currency][\"year\"]}\n {signToCurrency[currency]}\n \n \n )\n }\n }\n return (\n \n \n \n {renderPrices()}\n \n \n \n {__(\"key_business_per_user_month\")}\n \n \n )\n};\n\nexport default BoxPricesBusiness;\n\nconst PricesWrapper = styled.div`\n max-width: 316px;\n margin: 32px auto 24px auto;\n font-family: Inter, Roboto;\n @media(max-width: 768px) {\n margin: 26px auto;\n }\n`;\n\nconst Price = styled.span`\n font-size: 42px;\n font-weight: bold;\n line-height: 1.19;\n letter-spacing: -1.05px;\n text-align: center;\n color: ${({disabled, theme}) => {\n if (disabled) {\n return \"#cccccc\";\n } else if (theme === \"dark\") {\n return \"#ffffff\";\n } else {\n return \"#000000\";\n }\n }};\n @media(max-width: 768px) {\n font-size: 32px;\n }\n`;\n\nconst BottomText = styled.div`\n font-size: 14px;\n font-weight: normal;\n line-height: 1.21;\n letter-spacing: -0.35px;\n text-align: center;\n color: ${({disabled, theme}) => {\n if (disabled) {\n return \"#cccccc !important\";\n } else if (theme === \"dark\") {\n return \"#ffffff\";\n } else {\n return \"#868686\";\n }\n }};\n text-transform: uppercase;\n @media(max-width: 768px) {\n font-size: 12px;\n }\n`;\n\nconst CurrencySign = styled.span`\n font-size: 22px;\n letter-spacing: -0.55px;\n text-align: center;\n line-height: 40px;\n vertical-align: top;\n @media(max-width: 768px) {\n font-size: 16px;\n }\n`;\n\nconst CurrencyCode = styled.span`\n font-size: 22px;\n letter-spacing: 0px;\n margin-left: 3px;\n @media(max-width: 768px) {\n font-size: 16px;\n }\n`;\n\nconst Value = styled.span``;\n\nconst PriceContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 6px;\n`;\n\nconst PriceBox = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n`;\n\nconst Separator = styled.div`\n display: inline-block;\n height: 49px;\n width: 1px;\n background-color: #e5e5e5;\n margin: 0px 23px;\n`;\n\nconst PeriodText = styled.div`\n font-size: 11px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n text-align: center;\n color: #888888;\n`;","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgInfoIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 16,\n height: 16\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#d9d9d9\",\n d: \"M8 16a8.009 8.009 0 01-8-8 8.009 8.009 0 018-8 8.009 8.009 0 018 8 8.009 8.009 0 01-8 8zm0-9a1 1 0 00-1 1v3a1 1 0 001 1 1 1 0 001-1V8a1 1 0 00-1-1zm0-3a1 1 0 00-1 1 1 1 0 001 1 1 1 0 001-1 1 1 0 00-1-1z\"\n })));\n}\nexport default SvgInfoIcon;","//@flow\n\nimport React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Tooltip as ReactTooltip } from \"react-tooltip\";\n\nimport CheckIcon from \"../../svg/check-icon.svg\";\nimport InfoIcon from \"../../svg/info-icon.svg\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport { v4 as uuidv4 } from 'uuid';\nimport PlansTypeComponent from \"../PricingPage/styles/PlansTypeComponent\";\n\ntype BoxFeatureProps = {\n feature: string,\n tooltip?: string,\n lastChild?: boolean,\n disabled?: boolean,\n className?: string,\n theme?: \"dark\" | \"light\",\n color?: string,\n showCheck?: boolean\n};\n\nconst BoxFeature = ({\n feature,\n tooltip,\n lastChild = false,\n disabled = false,\n className = \"\",\n theme,\n color,\n showCheck\n}: BoxFeatureProps) => {\n const [id] = useState(uuidv4());\n let colorValue = \"#17bed0\";\n if (disabled) {\n colorValue = \"#ccc\";\n } else if (color && COLORS[color]) {\n colorValue = typeof COLORS[color].bulletsColor !== 'undefined' && COLORS[color].bulletsColor !== '' ? COLORS[color].bulletsColor : COLORS[color].mainColor;\n }\n\n return (\n \n {showCheck ? : null}\n \n {feature}\n \n {tooltip ? (\n \n \n \n \n ) : null}\n \n );\n};\n\nexport default BoxFeature;\n\nconst FeatureWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: ${props => (props.lastChild ? \"none\" : \"1px solid #f2f2f2\")};\n border-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"rgba(255,255,255, 0.13)\";\n } else {\n return \"#f2f2f2\";\n }\n }};\n width: 100%;\n\n svg {\n flex-shrink: 0;\n }\n\n .feature-tooltip {\n padding: 15px 20px;\n max-width: 250px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n text-align: center;\n }\n`;\n\nconst FeatureText = styled.div`\n padding: 8px 0px;\n /* font-family: Inter, Roboto; */\n font-size: 16px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: -0.4px;\n text-align: left;\n color: ${({ disabled, theme }) => {\n if (disabled && theme === \"dark\") {\n return \"rgba(255, 255, 255, 0.3)\";\n } else if (disabled) {\n return \"#cccccc\";\n } else if (theme === \"dark\") {\n return \"#e6e6e6\";\n } else {\n return \"#000000\";\n }\n }};\n margin-left: 13px;\n flex-grow: 1;\n`;\n","//@flow\n\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport { ColorType } from \"../../lib/types/dataTypes.components\";\nimport { detectIsRetina } from \"@pcloud/web-utilities/dist/lib/utils\";\n\ntype BoxDiscsountProps = {\n value: number | string,\n type: \"percent\" | \"fixedamount\" | \"text\",\n color?: ColorType,\n theme?: string,\n currency?: string,\n disabled?: boolean,\n className?: string,\n background?: string,\n backgroundRetina?: String,\n width?: string,\n height?: string,\n positionLeft?: string,\n template: \"corner\" | \"paperclip\" | \"full-width\"\n};\n\nconst BoxDiscount = ({\n value,\n type = \"percent\",\n color = \"cyan\",\n theme,\n currency,\n disabled = false,\n className = \"\",\n template = \"corner\",\n width,\n height,\n positionLeft,\n background,\n backgroundRetina\n}: BoxDiscsountProps) => {\n\n let DiscountWrap = DiscountWrapCorner;\n let DiscountValueWrap = DiscountValueWrapCorner;\n\n switch (template) {\n case \"paperclip\":\n DiscountWrap = DiscountWrapPaperclip;\n DiscountValueWrap = DiscountValueWrapPaperclip;\n break;\n case \"full-width\":\n DiscountWrap = DiscountWrapFullWidth;\n DiscountValueWrap = DiscountValueWrapFullWidth;\n break;\n }\n\n const isRetina = detectIsRetina();\n\n if (!value) {\n return null;\n }\n\n return (\n \n \n {type !== \"text\" ? - : null}\n {type === \"fixedamount\" ? {currency} : null}\n {value}\n {type === \"percent\" ? % : null}\n \n \n )\n};\n\nexport default BoxDiscount;\n\n// template: \"full-width\"\nconst DiscountWrapFullWidth = styled.div`\n width: 100%;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 15px 20px;\n background: ${props => props.background ? props.background : 'transparent'};\n`;\n\nconst DiscountValueWrapFullWidth = styled.div`\n color: white;\n font-size: 22px;\n`;\n\n// template: \"paperclip\"\nconst DiscountWrapPaperclip = styled.div`\n background: ${props => props.background ? props.background : 'transparent'};\n width: ${props => props.width ? props.width : 'initial'};\n height: ${props => props.height ? props.height : 'initial'};\n position: relative;\n left: ${props => props.positionLeft ? props.positionLeft : 'initial'};\n background-size: ${props => props.background ? 'contain' : 'initial'};\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst DiscountValueWrapPaperclip = styled.div`\n color: white;\n font-size: 30px;\n position: relative;\n top: -7px;\n`;\n\n// template: \"corner\"\nconst DiscountWrapCorner = styled.div`\n position: absolute;\n width: 0;\n height: 0;\n top: 0;\n right: 0;\n border-left: 80px solid transparent;\n border-bottom: 80px solid transparent;\n border-right: 80px solid ${({ disabled, theme, color }) => {\n if (disabled && theme === \"dark\") {\n return \"#888888\";\n } else if (disabled) {\n return \"#cccccc\";\n } else {\n return COLORS[color].mainColor;\n }\n }};\n border-top: 0 solid transparent;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n text-align: center;\n\n @media(max-width: 768px) {\n border-left-width: 60px;\n border-bottom-width: 60px;\n border-right-width: 60px;\n }\n`;\n\nconst DiscountValueWrapCorner = styled.div`\n position: absolute;\n top: 12px;\n left: 14px;\n width: 80px;\n font-family: Inter, Roboto;\n font-size: 23px;\n font-weight: 900;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.21;\n letter-spacing: -0.77px;\n text-align: center;\n color: ${props => COLORS[props.color].text};\n -webkit-transform: rotate(45deg);\n -moz-transform: rotate(45deg);\n -o-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n\n @media(max-width: 768px) {\n top: 10px;\n left: 0px;\n font-size: 18px;\n }\n`;\n\nconst MinusSign = styled.span``;\nconst Currency = styled.span``;\nconst Value = styled.span``;\nconst PercentSign = styled.span``;\n","//@ flow\n\nimport React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\n\ntype BoxDisabledProps = {\n title: string,\n subtitle: string,\n actionText?: string,\n handleAction?: event => void,\n wrapperClassName?: string\n};\n\nconst BoxDisabled = ({\n title,\n subtitle,\n actionText,\n handleAction,\n wrapperClassName\n}: BoxDisabledProps) => {\n return (\n \n {title}\n {(subtitle && subtitle != \" \") ? (\n {subtitle}\n ) : null}\n {actionText ? (\n {actionText}\n ) : null}\n \n )\n};\n\nexport default BoxDisabled;\n\nconst DisabledWrapper = styled.div`\n width: 100%;\n box-sizing: border-box;\n border: solid 1px #ede9cd;\n background-color: #fffbdd;\n padding: 20px;\n margin: 46px auto 56px auto;\n`;\n\nconst DisabledTitle = styled.div`\n /* font-family: Inter, Roboto; */\n font-size: 15px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.2;\n letter-spacing: normal;\n text-align: center;\n color: #000000;\n \n`;\n\nconst DisabledSubtitle = styled.div`\n /* font-family: Inter, Roboto; */\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.21;\n letter-spacing: -0.28px;\n text-align: center;\n color: #000000;\n margin-top: 15px;\n`;\n\nconst ActionButton = styled.div`\n /* font-family: Inter, Roboto; */\n font-size: 15px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.2;\n letter-spacing: normal;\n text-align: center;\n color: #17bed0;\n margin-top: 15px;\n cursor: pointer;\n`;\n","//@flow\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { hiDPI } from \"polished\";\n\nconst PaymentOptions = () => (\n \n \n \n \n \n \n \n);\n\nexport default PaymentOptions;\n\nconst PaymentOptionsWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: absolute;\n width: calc(100% - 80px);\n left: 40px;\n bottom: 36px;\n\n @media (max-width: 768px) {\n position: static;\n width: 100%;\n margin-top:20px;\n }\n`;\n\nconst PaymentIcon = styled.div`\n display: inline-block;\n width: 54px;\n height: 36px;\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center;\n`;\n\nconst visaImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + (window.devicePixelRatio > 1.5 ? 'images/plans/cards/visa@2x.png' : 'images/plans/cards/visa.png');\nconst VisaIcon = styled(PaymentIcon)`\n background-image: url(${visaImg});\n`;\n\nconst masterImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + (window.devicePixelRatio > 1.5 ? 'images/plans/cards/mastercard@2x.png' : 'images/plans/cards/mastercard.png');\nconst MasterCardIcon = styled(PaymentIcon)`\n background-image: url(${masterImg});\n`;\n\nconst paypalImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + (window.devicePixelRatio > 1.5 ? 'images/plans/cards/paypal@2x.png' : 'images/plans/cards/paypal.png');\nconst PaypalIcon = styled(PaymentIcon)`\n background-image: url(${paypalImg});\n`;\n\nconst americanExpressImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + (window.devicePixelRatio > 1.5 ? 'images/plans/cards/american_express@2x.png' : 'images/plans/cards/american_express.png');\nconst AmericanExpressIcon = styled(PaymentIcon)`\n background-image: url(${americanExpressImg});\n`;\n\nconst discoverImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + (window.devicePixelRatio > 1.5 ? 'images/plans/cards/discover@2x.png' : 'images/plans/cards/discover.png');\nconst DiscoverIcon = styled(PaymentIcon)`\n background-image: url(${discoverImg});\n`;","//@flow\n\nimport React, { useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { Tooltip as ReactTooltip } from \"react-tooltip\";\n\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport { ColorType } from \"../lib/types/dataTypes.components\";\n\ntype TabType = {\n tabId: string | number,\n tabTitle?: string,\n clickAction: (tabId: string | number) => void,\n disabled?: boolean,\n TabIcon?: any,\n tabIconActive?: any,\n tooltip?: string,\n testId?: string,\n tabAttributeId?: string\n};\n\ntype TabsProps = {\n color: ColorType,\n tabs: Array,\n activeTab: string | number,\n theme?: \"light\" | \"dark\",\n uppercase?: boolean,\n iconFill?: string,\n iconActiveFill?: string,\n};\n\nconst Tabs = ({ color, tabs, activeTab, theme, uppercase = true, iconFill = \"#2a2a2a\", iconActiveFill = \"#2a2a2a\" }: TabsProps) => {\n const tabsMap = {};\n const tabWidth = 100 / tabs.length;\n\n const renderTabs = () => {\n const tabsComponents = tabs.map(\n (tab, index) => {\n const { tabId, tabTitle, clickAction, disabled, TabIcon, tabIconActive, tooltip, testId = \"\", tabAttributeId = \"\" } = tab;\n tabsMap[tabId] = {index: index, tab: tab};\n const isActiveTab = tabId === activeTab;\n const renderTabIcon = () => {\n if (!TabIcon) {\n return null;\n }\n\n return (\n \n \n \n );\n };\n\n return (\n (!disabled ? clickAction(tabId) : null)}\n key={tabId}\n id={tabAttributeId}\n disabled={disabled}\n theme={theme}\n color={color}\n className={isActiveTab ? \"active tab-holder\" : \"tab-holder\"}\n uppercase={uppercase}\n tabTitle={tabTitle}\n data-testid={testId}\n activeFill={iconActiveFill}\n >\n {renderTabIcon()}\n {tabTitle ? tabTitle : null}\n \n );\n }\n );\n\n return tabsComponents;\n };\n\n return (\n \n {renderTabs()}\n \n \n \n );\n};\n\nexport default Tabs;\n\nconst TabsWrapper = styled.div`\n border-bottom: 1px solid #eee;\n border-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"rgba(255,255,255,0.13)\";\n } else {\n return \"#eee\";\n }\n }};\n margin: 0 auto;\n margin-bottom: 20px;\n position: relative;\n\n .tabs-tooltip {\n padding: 10px 20px;\n max-width: 250px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n text-align: center;\n }\n`;\n\nconst Tab = styled.div`\n width: ${props => props.width || 50}%;\n display: inline-block;\n padding: ${props => (props.tabTitle ? \"0px 0px 12px 0px\" : \"0px\")};\n text-align: center;\n font-size: 13px;\n font-family: \"Roboto\", sans-serif;\n color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#999999\";\n } else {\n return \"#222222\";\n }\n }};\n ${({ uppercase }) => (uppercase ? \"text-transform: uppercase\" : \"font-size: 15px\")};\n cursor: ${props => (props.disabled ? \"default\" : \"pointer\")};\n transition: all 0.25s ease-in-out;\n position: relative;\n\n &.active {\n font-weight: bold;\n cursor: default;\n color: ${({ theme, color }) => {\n if (theme === \"dark\" && color && COLORS[color]) {\n return COLORS[color].mainColor;\n } else {\n return \"#222222\";\n }\n }};\n }\n\n .tab-icon {\n transition: all 0.25s ease-in-out;\n\n &.active {\n fill: ${props => (props.activeFill)};\n }\n }\n\n ${props =>\n props.disabled\n ? `\n &::after {\n content: \"\";\n position: absolute;\n top: 0px;\n left: 0px;\n display: inline-block;\n width: 100%;\n height: 100%;\n }\n `\n : ``};\n\n @media (max-width: 768px) {\n padding: 0px 0px 20px 0px;\n }\n`;\n\nconst ActiveLine = styled.div`\n width: ${props => props.width || 50}%;\n position: absolute;\n bottom: -1px;\n height: 2px;\n background: ${props => (props.color ? COLORS[props.color].mainColor : \"#17bed0\")};\n transition: left 0.25s ease-in-out;\n left: ${props => props.tab * props.width}%;\n`;\n\nconst TabIconWrapper = styled.div`\n text-align: center;\n margin-bottom: 8px;\n`;\n","//@flow\n\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { CSSTransition } from \"react-transition-group\";\n\nimport { planBoxPeriodTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType } from \"../../../../lib/types/dataTypes.components\";\nimport { BoxHeader, BoxPrices, BoxDiscount } from \"../../../PlansBox\";\nimport Tabs from \"../../../Tabs\";\nimport SpinContainer from \"../../../SpinContainer\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\n\nimport LoadingIcon from \"../../../../svg/loading-icon.svg\";\n\ntype PaymentViewBoxProps = {\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme: \"light\" | \"dark\",\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n oldPrice?: number,\n periodText?: string,\n discountPercent?: number,\n showDiscountCorner?: boolean,\n discountPeriod?: number,\n renderView: () => string,\n selectedTabView: \"card\" | \"paypal\",\n tabs: {},\n loading: boolean,\n title: string\n};\n\nconst PaymentViewBoxDefault = ({\n billingPeriod,\n color,\n theme,\n price,\n currency = \"$\",\n oldPrice,\n periodText,\n discountPercent,\n showDiscountCorner = true,\n discountPeriod,\n showCurrencyCode = true,\n renderView,\n selectedTabView,\n tabs,\n loading = true,\n title\n}: PaymentViewBoxProps) => {\n \n return (\n \n {discountPercent && showDiscountCorner ? (\n \n ) : null}\n\n \n \n \n \n\n \n \n \n { }}\n onExited={() => { }}\n appear\n >\n \n \n \n \n \n \n \n {renderView()}\n \n \n );\n};\n\nexport default PaymentViewBoxDefault;\n\nconst Wrapper = styled.div`\n /* font-family: Inter, Roboto; */\n position: relative;\n width: 100%;\n border-radius: 10px;\n box-shadow: 3.8px 5.9px 10px 0 rgba(0, 0, 0, 0.05);\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#fafafa\";\n }\n }};\n overflow: hidden;\n min-height: 677px;\n padding-bottom: 30px;\n box-sizing: border-box;\n\n @media (max-width: 768px) {\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n min-height: 0px;\n border-radius: 0px;\n }\n`;\n\nconst LoaderWrapper = styled.div`\n position: absolute;\n left: 0px;\n width: 100%;\n min-height: 400px;\n background: inherit;\n z-index: 100;\n\n .loading-icon_svg__color-path {\n fill: ${({ color }) => (color && COLORS[color] ? (COLORS[color].loadingIconColor ? COLORS[color].loadingIconColor : COLORS[color].mainColor) : \"#17bed0\")};\n }\n`;\n\nconst FormWrapper = styled.div`\n max-width: 440px;\n width: 100%;\n margin: 0 auto;\n padding: 30px 40px 0px 40px;\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#fafafa\";\n }\n }};\n border-top: 1px solid #eeeeee;\n border-top-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"rgba(255,255,255,0.15)\";\n } else {\n return \"#eeeeee\";\n }\n }};\n box-sizing: border-box;\n position: relative;\n\n @media (max-width: 768px) {\n padding-bottom: 30px;\n margin-top: -28px;\n }\n`;\n\nconst AlignContainer = styled.div`\n padding: 36px 40px 2px 40px;\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n\n @media (max-width: 768px) {\n padding: 25px 20px;\n }\n`;\n\nconst AnimationContainer = styled.div`\n background-color: inherit;\n\n .fading-enter,\n .fade-appear {\n opacity: 1;\n }\n .fading-exit {\n opacity: 0;\n }\n .fading-enter-active,\n .fade-appear-active {\n opacity: 1;\n }\n .fading-exit-active {\n opacity: 0;\n }\n .fading-enter-active,\n .fade-appear-active,\n .fading-exit-active {\n transition: all 400ms ease-in-out;\n }\n`;\n","//@flow\nimport styled from \"styled-components\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\n\nexport const Wrapper = styled.div`\n position: relative;\n display: flex;\n justify-content: space-between; \n width: 100%;\n box-sizing: border-box;\n border-radius: 10px;\n box-shadow: 3.8px 5.9px 10px 0 rgba(0, 0, 0, 0.05);\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n min-height: ${({ showPaymentOptions, timerExp }) => showPaymentOptions && timerExp ? \"520px\" : \"507px\"};\n\n .tooltip {\n padding: 15px 20px;\n max-width: 250px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n text-align: center;\n }\n\n .discount-paperclip {\n margin-bottom: 70px;\n }\n\n @media (max-width: 768px) {\n display: block;\n overflow: hidden;\n min-height: initial;\n\n .disabledview-right-column {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding-top: 25px;\n }\n }\n\n @media (min-width: 769px) {\n .mobile-only {\n display: none;\n }\n }\n\n .disabledview-left-column {\n display: flex;\n flex-direction: column;\n \n .disabled-box {\n margin: 0 50px 0 0;\n width: auto;\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n }\n`;\n\nexport const WrapperRightColumn = styled.div`\n width: 358px;\n padding: 40px 50px 60px 0;\n box-sizing: border-box;\n @media (max-width: 768px) {\n width: 100%;\n padding: 0 20px 25px 20px;\n }\n`;\n\nexport const WrapperLeftColumn = styled.div`\n flex: 1;\n padding: 40px 0 60px 50px;\n box-sizing: border-box;\n \n \n @media (max-width: 768px) {\n display: none !important;\n }\n`;\n\nexport const FeaturesWrapper = styled.div`\n margin-top: 24px;\n margin-bottom: 34px;\n\n @media (max-width: 768px) {\n display: none;\n }\n`;\n\nexport const Timeleft = styled.div`\n text-align: center;\n font-size: 10px;\n font-weight: 500;\n color: #878787;\n letter-spacing: -0.3px;\n text-transform: uppercase;\n margin: 10px auto 10px auto;\n`;\n\nexport const TimerWrapper = styled.div`\n margin-bottom: 34px;\n padding: 20px 20px 11px 20px;\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"rgba(255,255,255,0.07)\";\n } else {\n return \"#f8f8f8\";\n }\n }};\n border-radius: 12px;\n border: solid 1px #f6f6f6;\n border-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"transparent\";\n } else {\n return \"#f6f6f6\";\n }\n }};\n box-sizing: border-box;\n`;\n\nexport const PlanDescription = styled.div`\n margin: 26px auto 0px auto;\n /* font-family: Inter, Roboto; */\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.14;\n letter-spacing: -0.35px;\n text-align: center;\n color: ${props => (props.disabled ? \"#cccccc\" : \"#878787\")};\n height: 32px;\n\n @media (max-width: 768px) {\n display: none;\n }\n`;\n\nexport const FormWrapper = styled.div`\n position: relative;\n max-width: 440px;\n width: 100%;\n margin: 0 auto;\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#fafafa\";\n }\n }};\n border-top: 1px solid #eeeeee;\n border-top-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"rgba(255,255,255,0.15)\";\n } else {\n return \"#eeeeee\";\n }\n }};\n box-sizing: border-box;\n\n .responsive-wrap {\n width: 100%;\n margin: 0px;\n }\n\n .link {\n color: #746de4;\n }\n @media (max-width: 768px) {\n margin-top: -28px;\n }\n`;\n\nexport const LoaderWrapper = styled.div`\n position: absolute;\n left: 0px;\n width: 100%;\n min-height: 400px;\n background: inherit;\n z-index: 100;\n\n .loading-icon_svg__color-path {\n fill: ${({ color }) => (color && COLORS[color] ? (COLORS[color].loadingIconColor ? COLORS[color].loadingIconColor : COLORS[color].mainColor) : \"#17bed0\")};\n }\n`;\n\nexport const AnimationContainer = styled.div`\n background-color: inherit;\n\n .fading-enter,\n .fade-appear {\n opacity: 1;\n }\n .fading-exit {\n opacity: 0;\n }\n .fading-enter-active,\n .fade-appear-active {\n opacity: 1;\n }\n .fading-exit-active {\n opacity: 0;\n }\n .fading-enter-active,\n .fade-appear-active,\n .fading-exit-active {\n transition: all 400ms ease-in-out;\n }\n`;\n\nexport const BoxDiscountAnimationContainer = styled.div`\n background-color: inherit;\n\n \n .fading-appear {\n opacity: 1;\n }\n \n .fading-enter,\n .fading-exit {\n opacity: 0;\n }\n .fading-enter-active,\n .fading-appear-active {\n opacity: 1;\n }\n .fading-exit-active {\n opacity: 0;\n }\n .fading-enter-active,\n .fading-appear-active,\n .fading-exit-active {\n transition: opacity 400ms ease-in-out;\n }\n`;","//@flow\n\nimport React from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\n\nimport { Wrapper, WrapperRightColumn, WrapperLeftColumn, FormWrapper, LoaderWrapper, AnimationContainer, BoxDiscountAnimationContainer } from \"./Styles/PriceOnTheLeftStyles\";\n\nimport { ColorType } from \"../../../../lib/types/dataTypes.components\";\nimport { BoxHeader, BoxPrices, BoxDiscount } from \"../../../PlansBox\";\nimport Tabs from \"../../../Tabs\";\nimport SpinContainer from \"../../../SpinContainer\";\n\nimport LoadingIcon from \"../../../../svg/loading-icon.svg\";\n\ntype PaymentViewBoxProps = {\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme: \"light\" | \"dark\",\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n oldPrice?: number,\n periodText?: string,\n discountPercent?: number,\n showDiscountCorner?: boolean,\n discountPeriod?: number,\n discountValue?: string | number,\n discountType?: \"percent\" | \"fixedamount\" | \"text\",\n discountLabelBackground?: string,\n discountLabelBackgroundMobile?: string,\n discountLabelBackgroundRetina?: string,\n discountLabelWidth?: string,\n discountLabelHeight?: string,\n discountLabelPositionLeft?: string,\n renderView: () => string,\n selectedTabView: \"card\" | \"paypal\",\n tabs: {},\n loading: boolean,\n title: string,\n showHeader: boolean,\n priceLoading?: Boolean\n};\n\nconst PaymentViewBoxPriceOnTheLeft = ({\n color,\n theme,\n price,\n currency = \"$\",\n oldPrice,\n discountPeriod,\n discountValue,\n discountType,\n discountLabelBackground,\n discountLabelBackgroundMobile,\n discountLabelBackgroundRetina,\n discountLabelWidth,\n discountLabelHeight,\n discountLabelPositionLeft,\n showCurrencyCode = true,\n renderView,\n selectedTabView,\n tabs,\n loading = true,\n title,\n showHeader = false,\n priceLoading = fasle\n}: PaymentViewBoxProps) => {\n \n return (\n \n \n \n \n { }}\n onExited={() => { }}\n appear\n >\n \n \n \n\n \n \n\n \n\n \n \n \n\n \n\n \n \n \n { }}\n onExited={() => { }}\n appear\n >\n \n \n \n \n \n \n \n {renderView()}\n \n\n \n \n );\n};\n\nexport default PaymentViewBoxPriceOnTheLeft;","import styled from \"styled-components\";\n\nimport { WrapperLeftColumn, WrapperRightColumn } from \"./PriceOnTheLeftStyles\";\n\nexport const WrapperLeftColumn2 = styled(WrapperLeftColumn)`\n width: 50%;\n padding: 0px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n width: 100%;\n display: flex !important;\n }\n`\n\nexport const WrapperRightColumn2 = styled(WrapperRightColumn)`\n width: 50%;\n padding: 11px 40px 40px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: column;\n background-color: #fff;\n border-radius: 21px;\n\n @media (max-width: 768px) {\n width: 100%;\n padding: 20px;\n box-sizing: border-box;\n }\n\n &>div {\n width: 100%;\n }\n`;\n\nexport const PeriodText = styled.div`\n font-size: 16px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 0.98;\n letter-spacing: normal;\n text-align: center;\n color: #fff;\n text-transform: uppercase;\n margin-top: 8px;\n\n @media (max-width: 768px) {\n margin-top: 0px;\n font-size: 12px;\n }\n`;\n\nexport const PlanInfo = styled.div`\n color: #fff;\n padding: 12px 20px;\n box-sizing: border-box;\n font-size: 20px;\n font-weight: bold;\n`; ","//@flow\n\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { hiDPI } from \"polished\";\n\nimport { __ } from \"../lib/utils\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport { ColorType } from \"../lib/types/dataTypes.components\";\n\ntype TabType = {\n tabId: string | number,\n tabValue: Array,\n tabTitle: string,\n tabCustomColor: ColorType,\n clickAction: (tabId: string | number) => void,\n newLabel?: boolean\n};\n\ntype ToggleTabsProps = {\n color: ColorType,\n tabs: Array,\n activeTab: string | number,\n theme?: \"light\" | \"dark\",\n title?: string,\n width?: string,\n defaultClickAction: (tabId: string | number) => void,\n showBestValued: boolean\n};\n\nconst CONTWIDTHX2 = 300;\nconst CONTWIDTHX3 = 380;\n\nconst ToggleTabs = ({\n tabs,\n theme,\n activeTab = 0,\n color=\"cyan\",\n title,\n disabled,\n width,\n defaultClickAction,\n showBestValued = true,\n}: ToggleTabsProps) => {\n const [chosenTabId, setChosenTabId] = useState(activeTab);\n const tabsContainerWidth = width ? width : (tabs.length === 3 ? CONTWIDTHX3 : CONTWIDTHX2);\n\n const { tabWidth, offsets } = useMemo(() => {\n const tabWidth = (100 / tabs.length)\n const offsets = tabs.reduce((offsetsOut, tab, index) => {\n offsetsOut[tab.tabId] = tabWidth * index;\n return offsetsOut;\n }, {});\n return {tabWidth, offsets};\n }, [tabs]);\n\n useEffect(() => {\n setChosenTabId(activeTab);\n }, [tabs, activeTab])\n\n const handleOnClick = (clickedTabId, event, tabClickAction) => {\n if (disabled) {\n return;\n }\n\n if (clickedTabId === chosenTabId) {\n return;\n }\n\n if (defaultClickAction) {\n defaultClickAction(clickedTabId, event);\n } else if (tabClickAction) {\n tabClickAction(clickedTabId, event);\n }\n\n setChosenTabId(clickedTabId);\n }\n\n const renderTabs = () => {\n return tabs.map(({tabTitle, tabId, clickAction, tabCustomColor, newLabel}, index) => {\n return (\n \n handleOnClick(tabId, event, clickAction)}\n color={tabCustomColor || color}\n width={tabWidth}\n className={\"toggle-tab \" + (tabId === activeTab ? \"active\" : \"\" )}\n disabled={disabled}\n >\n {tabTitle}\n {newLabel ? New : null}\n \n {index !== tabs.length - 1 ? : null}\n \n );\n });\n };\n\n return (\n \n {title ? {title} : null}\n \n \n {renderTabs()}\n {(tabs.indexOf(\"lifetime\") !== -1 && showBestValued) ? (\n \n \n {__(\"best_valued\")}\n \n ) : null}\n \n \n );\n};\n\nexport default ToggleTabs;\n\nconst TabsTitle = styled.div`\n /* font-family: \"Roboto\", sans-serif; */\n font-size: 22px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: 0.71;\n letter-spacing: normal;\n text-align: center;\n color: #ffffff;\n margin-bottom: 18px;\n`;\n\nconst TabsWrapper = styled.div`\n margin: 0px auto 20px auto;\n position: relative;\n display: flex;\n justify-content: space-around;\n align-items: center;\n width: ${props => props.width}px;\n height: 38px;\n border-radius: 19px;\n background-color: rgba(0, 0, 0, 0.1);\n position: relative;\n\n @media (max-width: 768px) {\n width: 90%;\n }\n`;\n\nconst Tab = styled.div`\n position: relative;\n width: ${props => props.width}%;\n text-align: center;\n /* font-family: \"Roboto\", sans-serif; */\n font-size: 14px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 38px;\n letter-spacing: -0.35px;\n color: ${props => (props.active ? COLORS[props.color].mainColor : \"#333333\")};\n text-transform: uppercase;\n z-index: 2;\n transition: all 0.25s ease-in-out;\n cursor: pointer !important;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: ${props => COLORS[props.color].mainColor};\n }\n`;\n\nconst Separator = styled.div`\n position: relative;\n display: inline-block;\n width: 1px;\n height: 16px;\n background-color: #cccccc;\n`;\n\nconst SelectedBar = styled.div`\n width: calc(${props => props.width}% - 4px);\n height: 34px;\n border-radius: 17px;\n position: absolute;\n top: 2px;\n left: calc(${props => props.leftOffset}% + 2px);\n background-color: #ffffff;\n z-index: 1;\n transition: all 0.25s ease-in-out;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.07);\n`;\n\nconst BestValue = styled.div`\n position: absolute;\n top: -32px;\n left: 100%;\n\n @media (max-width: 768px) {\n display: none;\n }\n`;\n\nconst BestValueArrow = styled.div`\n position: absolute;\n right: -30px;\n top: 3px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 78px;\n height: 26px;\n`;\n\nconst BestValueText = styled.div`\n font-family: \"Marck Script\";\n font-size: 19px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: 0.38px;\n text-align: left;\n color: #000000;\n position: absolute;\n width: 92px;\n top: 37px;\n left: 12px;\n transition: all 0.3s ease-in-out;\n\n @media (min-width: 1350px) {\n width: 200px;\n top: 44px;\n }\n`;\n\nconst New = styled.span`\n display: inline-block;\n font-size: 11px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 0.8;\n letter-spacing: normal;\n text-align: center;\n color: #fff;\n padding: 4px;\n border-radius: 3px;\n background-color: ${props => COLORS[props.color].mainColor};\n margin-left: 6px;\n`;\n","//@flow\n\nimport React, { useEffect, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\n\nimport { Wrapper, FormWrapper, LoaderWrapper, AnimationContainer, BoxDiscountAnimationContainer } from \"./Styles/PriceOnTheLeftStyles\";\n\nimport { ColorType } from \"../../../../lib/types/dataTypes.components\";\nimport { BoxPrices, BoxDiscount } from \"../../../PlansBox\";\nimport SpinContainer from \"../../../SpinContainer\";\n\nimport LoadingIcon from \"../../../../svg/loading-icon.svg\";\nimport { PeriodText, PlanInfo, WrapperLeftColumn2, WrapperRightColumn2 } from \"./Styles/PricesOnTheLseftStyles2\";\nimport ToggleTabs from \"../../../ToggleTabs\";\nimport { signToCurrency } from \"@pcloud/web-utilities/dist/payments/constants.payments\";\n\ntype PaymentViewBoxProps = {\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme: \"light\" | \"dark\",\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n oldPrice?: number,\n periodText?: string,\n discountPercent?: number,\n showDiscountCorner?: boolean,\n discountPeriod?: number,\n discountValue?: string | number,\n discountType?: \"percent\" | \"fixedamount\" | \"text\",\n renderView: () => string,\n selectedTabView: \"card\" | \"paypal\",\n tabs: {},\n loading: boolean,\n title: string,\n showHeader: boolean,\n priceLoading?: Boolean\n};\n\nconst PaymentViewBoxPriceOnTheLeft2 = ({\n color,\n theme,\n price,\n currency = \"$\",\n oldPrice,\n discountPeriod,\n discountValue,\n discountType,\n showCurrencyCode = true,\n renderView,\n selectedTabView,\n tabs,\n periodText,\n loading = true,\n title,\n priceLoading = fasle\n}: PaymentViewBoxProps) => {\n const [isMobile, setIsMobile] = useState(window.innerWidth <= 768)\n\n useEffect(() => {\n const resizeEventListener = () => {\n setIsMobile(window.innerWidth <= 768);\n };\n\n window.addEventListener(\"resize\", resizeEventListener);\n\n return () => {\n window.removeEventListener(\"resize\", resizeEventListener);\n }\n }, [])\n\n return (\n \n \n {isMobile ? (\n {`${title} / ${price} ${signToCurrency[currency]}`}\n ) : null }\n {!isMobile ? (\n \n \n { }}\n onExited={() => { }}\n appear\n >\n \n \n \n \n \n {periodText}\n \n \n ) : null}\n \n \n \n {/* */}\n \n \n \n \n { }}\n onExited={() => { }}\n appear\n >\n \n \n \n \n \n \n \n {renderView()}\n \n \n \n );\n};\n\nexport default PaymentViewBoxPriceOnTheLeft2;\n\nconst TabsWrapper = styled.div`\n opacity: ${({ visible }) => (visible ? \"1\" : \"0\")};\n visibility: ${({ visible }) => (visible ? \"visible\" : \"hidden\")};\n transition: opacity 250ms ease-in-out;\n\n @media (max-width: 768px) {\n display: ${({ visible }) => visible ? \"block\" : \"none\"};\n }\n`;","//@flow\n\nimport React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport { sha256 } from \"js-sha256\";\n\nimport {\n signToCurrency,\n __,\n hrefSearch,\n rcookie,\n setcookie,\n isInternetExplorer\n} from \"../../../lib/utils\";\n\nimport {\n planBoxTexts,\n planNames,\n gaPeriods,\n PASS_PLANS_PER_PERIOD,\n plansQuota\n} from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { MAX_CUSTOM_TRAFFIC_COUNT } from \"@pcloud/web-utilities/dist/plans/constants.plans\";\nimport { ColorType, PlanIDType, Userinfo } from \"../../../lib/types/dataTypes.components\";\nimport { getPromoParam, sendAnalyticsEvent } from \"@pcloud/web-utilities/dist/lib/ptr\";\n\nimport CreditCardBox from \"../../PaymentComponents/CreditCardBox\";\nimport PaypalBox from \"../../PaymentComponents/PaypalBox\";\nimport CreditCardFormTemplate from \"../../PaymentComponents/CreditCardFormTemplate\";\nimport PrefilledCreditCardForm from \"../../PaymentComponents/PrefilledCreditCardForm\";\nimport { sendCJConversionTag } from \"@pcloud/web-utilities/dist/lib/cjAffiliate\";\nimport { get6HData, send6HData } from \"@pcloud/web-utilities/dist/lib/6HAgancy\";\n\nimport diffs from \"../../../lib/diffs\";\nimport { SubscriptionUpdate } from \"../../../lib/payments\";\n\nimport PaymentViewBoxDefault from \"./planBoxTemplates/PaymentViewBoxDefault\";\nimport PaymentViewBoxPriceOnTheLeft from \"./planBoxTemplates/PaymentViewBoxPriceOnTheLeft\";\nimport PaymentViewBoxPriceOnTheLeft2 from \"./planBoxTemplates/PaymentViewBoxPriceOnTheLeft2\";\nimport { getGlobalLocationId } from \"@pcloud/web-utilities/dist/api/utils.api\";\n\ntype PaymentViewBoxProps = {\n planId: Array,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme: \"light\" | \"dark\",\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n country: string,\n buttonAction: (planId: PlanIDType, billingPeriod: \"month\" | \"year\" | \"lifetime\") => void,\n oldPrice?: number,\n periodText?: string,\n discountPercent?: number,\n discount?: string, \n userInfo: Userinfo,\n paymentProvider: string,\n showDiscountCorner?: boolean,\n setCart: () => void,\n setPaymentProvider: () => void,\n open3DsecureIframe: () => void,\n on3DsecureError: () => void,\n setsfPaymentSourceID: () => void,\n cjData: any,\n setPaymentInitiated: () => void,\n getCurrentStorageCount: () => number,\n onUserInfoChangeAfterPayment: () => void,\n discountPeriod?: number,\n limitedPeriodDiscount?: string,\n itemsPriceData: any,\n setUserInfo?: () => void,\n template: \"default\" | \"price-on-the-left\"\n};\n\nconst PaymentViewBox = (props: PaymentViewBoxProps) => {\n const {\n planId,\n billingPeriod,\n color,\n theme,\n price,\n currency = \"$\",\n country = \"fr\",\n discount,\n userInfo,\n setCart,\n paymentProvider,\n setsfPaymentSourceID,\n setPaymentProvider,\n open3DsecureIframe,\n on3DsecureError,\n cjData,\n setPaymentInitiated,\n getCurrentStorageCount = () => 0,\n limitedPeriodDiscount,\n itemsPriceData,\n onUserInfoChangeAfterPayment = () => {},\n template = \"default\",\n setUserInfo\n } = props;\n const [view, setView] = useState(\"card\");\n const DEFAULT_TABS = useRef([\n {\n tabId: \"card\",\n tabAttributeId: \"credit-card\",\n tabTitle: __(\"credit_card\", \"Credit Card\"),\n tabValue: \"card\",\n clickAction: setView\n },\n {\n tabId: \"paypal\",\n tabAttributeId: \"tab-pcl-pp\",\n tabTitle: \"Paypal\",\n tabValue: \"paypal\",\n clickAction: setView\n }\n ]);\n const [tabs, setTabs] = useState(DEFAULT_TABS.current);\n const [userPaymentSource, setUserPaymentSource] = useState(null);\n const [cardProvider, setCardProvider] = useState(\"stripe\");\n const [loading, setLoading] = useState(true);\n\n const isIE = isInternetExplorer();\n const texts = planBoxTexts[planId.join(\"+\")];\n const { title: titleObj } = texts;\n const title = titleObj[\"billingPeriod\"] || titleObj.default;\n const { auth } = userInfo;\n const loaderElement = useRef(null);\n const userDiff = useRef(null);\n\n const promoParams = {\n label: getPromoParam(\"label\"),\n channelid: getPromoParam(\"channelid\"),\n passcampaign: getPromoParam(\"passcampaign\"),\n };\n\n useEffect(() => {\n if (hrefSearch(\"ErrCode\") === \"0\") {\n afterPaymentActions(hrefSearch(\"transactionid\"));\n return;\n }\n\n setTabs(DEFAULT_TABS.current);\n setCart(planId);\n loadPaymentData();\n loadSubscribedProducts();\n\n return () => {\n diffs.stop();\n }\n }, []); // []\n\n useEffect(() => {\n subscribeForUserDiff();\n }, [userInfo]);\n\n const getPaymentSource = callback => {\n const dfd = jQuery.Deferred();\n\n if (pCloudGlobals.apiMethod) {\n pCloudGlobals.apiMethod(\n \"listpaymentsources\",\n { auth },\n (res: any) => {\n callback(res);\n dfd.resolve(res);\n },\n {\n errorCallback: dfd.reject\n }\n );\n }\n\n return dfd;\n };\n\n const getPaymentProvider = callback => {\n const dfd = jQuery.Deferred();\n const params = { auth };\n\n if (rcookie(\"forcecard\")) {\n params.card = rcookie(\"forcecard\");\n }\n\n if (rcookie(\"forcecountry\")) {\n params.country = rcookie(\"forcecountry\");\n }\n\n if (isIE) {\n params.browser = \"IE\";\n }\n\n if (pCloudGlobals.apiMethod) {\n pCloudGlobals.apiMethod(\n \"listpaymentmethods\",\n params,\n (res: any) => {\n callback(res);\n dfd.resolve(res);\n },\n {}\n );\n }\n\n return dfd;\n };\n\n const loadPaymentData = () => {\n const returnedValues = {};\n const successCallbackSource = data => (returnedValues.paymentSource = data);\n const successCallbackProvider = data => (returnedValues.paymentProvider = data);\n\n const paymentSourcePromise = getPaymentSource(successCallbackSource);\n const paymentProviderPromise = getPaymentProvider(successCallbackProvider);\n\n $.when.apply($, [paymentSourcePromise, paymentProviderPromise]).done(() => {\n const paymentSourceData = returnedValues.paymentSource;\n const paymentProviderData = returnedValues.paymentProvider;\n let newView = \"card\";\n let newProvider = \"safecharge\";\n let newCardProvider = \"safecharge\";\n\n if (paymentProviderData && paymentProviderData.paymentmethods) {\n const paymentMethod = paymentProviderData.paymentmethods[0];\n newView = paymentMethod.type;\n newProvider = paymentMethod.method;\n newCardProvider = paymentMethod.method;\n }\n\n if (\n paymentSourceData &&\n (paymentSourceData.stripe || paymentSourceData.safecharge || paymentSourceData.paypal)\n ) {\n if (paymentSourceData.stripe) {\n newView = \"card\";\n newProvider = \"stripe\";\n newCardProvider = \"stripe\";\n setUserPaymentSource(paymentSourceData);\n } else if (paymentSourceData.safecharge && (!isIE || (isIE && billingPeriod !== \"lifetime\"))) {\n newView = \"card\";\n newProvider = \"safecharge\";\n newCardProvider = \"safecharge\";\n setUserPaymentSource(paymentSourceData);\n } else if (paymentSourceData.paypal) {\n newView = \"paypal\";\n newProvider = \"paypal\";\n setUserPaymentSource(paymentSourceData);\n }\n\n\n if (billingPeriod !== \"lifetime\") {\n let newTabs = DEFAULT_TABS.current.map(tab =>\n tab.tabId !== newView ? { ...tab, disabled: true } : tab\n );\n setTabs(newTabs);\n DEFAULT_TABS.current = newTabs;\n }\n }\n\n setPaymentProvider(newProvider);\n setCardProvider(newCardProvider);\n setView(newView);\n\n if (loaderElement.current) {\n loaderElement.current.classList.toggle(\"fadein\");\n loaderElement.current.classList.toggle(\"fadeout\");\n }\n\n setTimeout(() => {\n setLoading(false);\n }, 300);\n });\n };\n\n const loadSubscribedProducts = () => {\n const { lastsubscription } = userInfo;\n\n if (lastsubscription && lastsubscription.status != \"active\") {\n return;\n }\n\n let choosenProducts = planId;\n choosenProducts = choosenProducts.map(productId => Number(productId));\n const otherProducts =\n lastsubscription &&\n lastsubscription.products.filter(subscribedProduct => {\n const choosenPremiumProducts = choosenProducts.filter(i => [1, 3, 14, 15].indexOf(i) != -1);\n const userChoosedPremiumProduct = !!choosenPremiumProducts.length;\n const userHasPremiumSubscription = [1, 3, 14, 15].indexOf(subscribedProduct) != -1;\n\n const skipPremium = !(userChoosedPremiumProduct && userHasPremiumSubscription);\n\n return choosenProducts.indexOf(planId) == -1 && skipPremium;\n });\n\n setCart(\n otherProducts && billingPeriod !== \"lifetime\"\n ? choosenProducts.concat(otherProducts)\n : choosenProducts\n );\n };\n\n const applyDiscount = () => {\n var retryCount = 0;\n var totalStorage;\n var totalTraffic;\n\n if (getCurrentStorageCount) {\n totalStorage += getCurrentStorageCount();\n totalTraffic = totalStorage <= MAX_CUSTOM_TRAFFIC_COUNT ? totalStorage : MAX_CUSTOM_TRAFFIC_COUNT;\n }\n\n if (paymentProvider === 'safecharge' && view === 'card') {\n var params = {\n 'auth': auth,\n 'discountcode': limitedPeriodDiscount\n };\n pCloudGlobals.apiMethod('subscriptionapplydiscount', params, function success() {\n $.cookie('total_val', 4.99);\n },\n function error(data) {\n console.log('error data === ', data);\n if (retryCount < 5) {\n retryCount++;\n setTimeout(() => {\n applyDiscount();\n }, 1000)\n }\n }\n );\n }\n\n if (paymentProvider === 'stripe' && view === 'card') {\n var paymentInfo = {\n 'auth': auth,\n 'products': planId[0],\n 'storage': totalStorage,\n 'traffic': totalTraffic,\n 'period': billingPeriod,\n 'discountcode': limitedPeriodDiscount\n };\n\n if ($.cookie('forcecurrency')) {\n paymentInfo.currency = $.cookie('forcecurrency');\n }\n\n if ($.cookie('forcecountry')) {\n paymentInfo.country = $.cookie('forcecountry');\n }\n\n pCloudGlobals.apiMethod('paystripe', paymentInfo, function () {\n $.cookie('total_val', 4.99);\n }, function () {\n if (retryCount < 10) {\n retryCount++\n setTimeout(function () {\n applyDiscount();\n }, 1000);\n }\n })\n }\n\n if (view === 'paypal') {\n const togglePaymentLoader = (action: \"show\" | \"hide\") => {\n let isLoading = action === \"show\";\n isLoading ? onPaymentProcessing() : afterPaymentProcessing();\n };\n\n const params = {\n provider: \"paypal\",\n period: billingPeriod,\n userAuth: auth,\n products: planId,\n discountcode: limitedPeriodDiscount,\n billingAddress: {},\n storage: totalStorage,\n traffic: totalTraffic,\n toggleLoader: togglePaymentLoader,\n };\n\n const payments = new SubscriptionUpdate(params);\n payments.createBraintreePayment({ refresh: false });\n }\n }\n\n const waitForAPItoUpdate = (callback) => {\n const onUpdateSuccess = (diffUserInfo) => {\n if (userDiff.current) {\n userDiff.current();\n }\n \n if (pCloudGlobals && pCloudGlobals.apiMethod) {\n const getUserInfo = (count = 0, prevUserInfo) => {\n const { auth } = userInfo;\n\n if (count > 5) {\n callback({ ...prevUserInfo, auth });\n return;\n }\n\n setTimeout(() => {\n pCloudGlobals.apiMethod('userinfo', { auth }, (userinfo) => {\n if (diffUserInfo.plan && (diffUserInfo.plan !== userinfo.plan || diffUserInfo.quota !== userinfo.quota)) {\n getUserInfo(count + 1, userinfo);\n } else {\n callback({ ...userinfo, auth });\n if (limitedPeriodDiscount) {\n applyDiscount();\n }\n }\n }, {\n errorCallback: (error) => {\n console.error(error);\n callback(null);\n if (limitedPeriodDiscount) {\n applyDiscount();\n }\n },\n forceFresh: true\n })\n }, 1000);\n }\n\n setTimeout(() => {\n getUserInfo(0);\n }, 1500);\n } else {\n callback(null);\n if (limitedPeriodDiscount) {\n applyDiscount();\n }\n }\n };\n\n subscribeForUserDiff(onUpdateSuccess);\n };\n\n const subscribeForUserDiff = onChange => {\n if (!userInfo) {\n return;\n }\n\n if (userDiff.current) {\n userDiff.current(true);\n }\n\n const { auth } = userInfo;\n\n userDiff.current = diffs.listen(auth, entries => {\n if (entries.length) {\n const modifyUserEvents = entries.filter(({ event, userinfo }) => {\n return event === \"modifyuserinfo\" && userinfo;\n });\n \n if (modifyUserEvents.length) {\n const { userinfo } = modifyUserEvents[modifyUserEvents.length - 1];\n if (onChange) {\n onChange(userinfo);\n }\n }\n }\n });\n };\n\n const subscribeForPaymentSource = ({ callback, transactionID }) => {\n let paymentSourceId = 0;\n let creditCardPaymentSource = 0;\n\n if (userPaymentSource && userPaymentSource.stripe) {\n const stripeSources = userPaymentSource.stripe.sources;\n creditCardPaymentSource = stripeSources[stripeSources.length - 1];\n } else if (userPaymentSource && userPaymentSource.safecharge) {\n const sfSources = userPaymentSource.safecharge.sources;\n creditCardPaymentSource = sfSources[sfSources.length - 1];\n }\n\n if (creditCardPaymentSource) {\n paymentSourceId = creditCardPaymentSource.paymentsourceid;\n }\n\n const params = {\n subscribefor: \"paymentsource\",\n auth: auth\n };\n\n if (paymentSourceId) {\n params.paymentsourceid = paymentSourceId;\n }\n\n if (pCloudGlobals && pCloudGlobals.apiMethod) {\n pCloudGlobals.apiMethod(\n \"subscribe\",\n params,\n ({ paymentsouce }) => {\n let providerSourceID;\n if (paymentsouce && paymentsouce.sources.length) {\n const paymentSoucesLength = paymentsouce.sources.length;\n providerSourceID = paymentsouce.sources[paymentSoucesLength - 1].providersourceid;\n }\n if (providerSourceID) {\n setsfPaymentSourceID(providerSourceID);\n }\n callback(transactionID);\n },\n {\n errorCallback: () => {\n callback(transactionID);\n },\n timeout: 0\n }\n );\n } else {\n callback(transactionID);\n }\n };\n\n const subscribeForUserInfoChange = () => {\n waitForAPItoUpdate((userInfo) => {\n if (userInfo) {\n setUserInfo(userInfo);\n };\n onUserInfoChangeAfterPayment(userInfo);\n });\n }\n\n const abbortUserInfoChangeSubscribe = () => {\n if (userDiff.current) {\n userDiff.current(true);\n }\n }\n\n const afterPaymentActions = useCallback(res => {\n const transactionID = res.transactionId || res.transactionid || res.id || \"\";\n const analyticsParams = {\n category: \"promo\",\n action: \"purchase\",\n label: promoParams.label || \"www-site\",\n os: 4\n };\n const analyticsData = {\n revenue: price,\n currency: signToCurrency[currency] || \"USD\"\n };\n const data6H = get6HData();\n\n\n if (promoParams.channelid) {\n analyticsData.channelid = promoParams.channelid;\n }\n\n if (promoParams.passcampaign) {\n analyticsData.passcampaign = promoParams.passcampaign;\n }\n\n sendAnalyticsEvent(analyticsParams, analyticsData);\n\n // if (typeof ga4 !== \"undefined\") {\n // const ga4Items = [{\n // item_name: planId.map(planID => planNames[planID]).join(\" + \") + \" \" + gaPeriods[billingPeriod],\n // item_brand: planId.some(planID => PASS_PLANS_PER_PERIOD[billingPeriod].includes(planID)) ? \"pCloudPass\" : \"pCloud\",\n // item_category: gaPeriods[billingPeriod],\n // item_variant: plansQuota[planId.find(planID => plansQuota[planID])] || \"\",\n // affiliation: rcookie(\"ref\"),\n // coupon: discount || \"\",\n // index: 0,\n // price: price,\n // currency: signToCurrency[currency] || \"USD\",\n // quantity: 1\n // }];\n\n // ga4({\n // eventname: \"purchase\",\n // ecommerce: {\n // currency: signToCurrency[currency],\n // value: price,\n // transaction_id: transactionID,\n // payment_type: view === \"ccard\" ? cardProvider : view,\n // items: ga4Items\n // }\n // })\n // }\n\n const itemsInfo = [\n {\n name: planId.map(planid => planNames[planid]).join(\" + \"),\n price: price,\n quantity: 1\n }\n ];\n\n gtagAds('event', 'conversion', { \n 'send_to': 'AW-946159937/3Uu5CKv9wo0YEMGClcMD',\n 'value': price,\n 'currency': signToCurrency[currency] || \"USD\",\n 'transaction_id': transactionID,\n items: itemsInfo\n });\n\n if (typeof ttq !== \"undefined\" && ttq.track && typeof ttq.track == \"function\") {\n const itemsInfo = planId.map(planid => {\n if (typeof planid === \"string\" && planid.indexOf(\"_\") !== -1) {\n const idSplitArr = planid.split(\"_\");\n const customPlanId = idSplitArr[0];\n planid = customPlanId;\n }\n\n let productPrice = 0;\n if (itemsPriceData[billingPeriod] && itemsPriceData[billingPeriod].length > 0) {\n const product = itemsPriceData[billingPeriod].find(({productid}) => productid == planid);\n if (product) {\n productPrice = product.pricecents / 100\n }\n }\n\n return {\n content_id: planid,\n content_type: 'product',\n content_name: planNames[planid],\n quantity: 1,\n price: productPrice\n };\n });\n\n ttq.track('CompletePayment', {\n contents: itemsInfo,\n value: price,\n currency: signToCurrency[currency] || \"USD\",\n });\n }\n\n if (typeof fbq == \"function\") {\n let sha256UserID = sha256(user.userid.toString());\n\n if (sha256UserID.length) {\n sha256UserID += `-${getGlobalLocationId()}`;\n }\n\n fbq(\"track\", billingPeriod === \"lifetime\" ? \"Purchase\" : \"Subscribe\", {\n value: price,\n currency: signToCurrency[currency] || \"USD\",\n });\n }\n window.uetq = window.uetq || [];\n window.uetq.push('event', 'purchase', { 'revenue_value': price, currency: (signToCurrency[currency] || 'USD') });\n\n cjData.orderId = transactionID;\n delete cjData.cartSubtotal;\n sendCJConversionTag(cjData);\n\n if (data6H && pCloudGlobals.apiMethod) {\n send6HData(pCloudGlobals.apiMethod, data6H);\n }\n\n if (sessionStorage.pCloud) {\n sessionStorage.removeItem(\"pCloud\");\n }\n\n const newProvider = view === \"card\" ? cardProvider : \"paypal\";\n setPaymentProvider(newProvider);\n setcookie(\"exit-intent-hide\", 1, 1);\n });\n\n const onPaymentSuccess = transactionID => {\n if (cardProvider === \"safecharge\" && view === \"card\") {\n subscribeForPaymentSource({\n callback: afterPaymentActions,\n transactionID: transactionID\n });\n } else {\n afterPaymentActions(transactionID);\n }\n };\n\n const onPaymentProcessing = () => {\n const newTabs = tabs.map(tab => {\n return { disabled: true, ...tab };\n });\n setTabs(newTabs);\n setPaymentInitiated(true);\n setcookie(\"exit-intent-hide\", 1, 1);\n };\n\n const afterPaymentProcessing = () => {\n setTabs(DEFAULT_TABS.current);\n setcookie(\"exit-intent-hide\", \"\", 1);\n };\n\n const renderView = () => {\n if (view === \"card\") {\n let creditCardPaymentSource = null;\n\n if (userPaymentSource && userPaymentSource.stripe) {\n const stripeSources = userPaymentSource.stripe.sources;\n creditCardPaymentSource = stripeSources[stripeSources.length - 1];\n } else if (userPaymentSource && userPaymentSource.safecharge && !isIE) {\n const sfSources = userPaymentSource.safecharge.sources;\n creditCardPaymentSource = sfSources[sfSources.length - 1];\n }\n\n return (\n \n );\n } else if (view === \"paypal\") {\n return (\n \n );\n }\n };\n\n let PaymentViewBox = PaymentViewBoxDefault;\n\n if (template == \"price-on-the-left\") {\n PaymentViewBox = PaymentViewBoxPriceOnTheLeft;\n }\n\n if (template == \"price-on-the-left-2\") {\n PaymentViewBox = PaymentViewBoxPriceOnTheLeft2;\n }\n\n return ;\n};\n\nexport default PaymentViewBox;\n","//@flow\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nimport { planBoxTexts, planBoxPeriodTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../../lib/types/dataTypes.components\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport { TimerTemplate } from \"@pcloud/web-utilities/dist/resources/components/TimerTemplate\";\nimport TimerContainer from \"@pcloud/web-utilities/dist/resources/components/TimerContainer\";\nimport { ButtonWithIcon } from \"@pcloud/web-utilities/dist/resources/components/ButtonDefault\";\n\nimport { BoxHeader, BoxPrices, BoxDiscount, PaymentOptions } from \"../../../PlansBox\";\nimport { __ } from \"../../../../lib/utils\";\nimport { detectIsMobile } from \"@pcloud/web-utilities/dist/lib/utils\";\n\ntype PlanViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme: \"light\" | \"dark\",\n timerTheme: string,\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n timerExp?: number,\n oldPrice?: number,\n periodText?: string,\n discountPercent?: number,\n increasingPrice?: boolean,\n showDiscountCorner: boolean,\n discountPeriod?: number,\n showPaymentOptions?: boolean,\n showPlanDescriptionText?: boolean,\n renderSocialProofText: () => string,\n renderFeatures: () => string,\n onActionButtonClick: () => void\n};\n\nconst PlanBoxDefaultView = ({\n planId,\n billingPeriod,\n color,\n theme,\n timerTheme,\n price,\n currency,\n timerExp,\n oldPrice,\n periodText,\n discountPercent,\n increasingPrice,\n showDiscountCorner = true,\n discountPeriod,\n showPaymentOptions,\n showCurrencyCode = true,\n showPlanDescriptionText = false,\n showSocialProofOnlyMobile = false,\n renderSocialProofText,\n renderFeatures,\n onActionButtonClick\n}: PlanViewBoxProps) => {\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { title: titleObj, description, features, buttonText: buttonTextObj } = texts;\n const buttonText = buttonTextObj[billingPeriod] || buttonTextObj.default;\n const title = titleObj[billingPeriod] || titleObj.default;\n const isMobile = detectIsMobile();\n\n return (\n \n \n\n \n \n\n \n\n

\n {timerExp ? (\n \n

\n {increasingPrice ? null : {__(\"timer_hurryup\")}}\n \n { }}\n renderTimer={TimerTemplate}\n timerColor={timerTheme === \"dark\" ? \"353535\" : \"fafafa\"}\n textColor={timerTheme === \"dark\" ? \"ffffff\" : \"444444\"}\n showLabels\n />\n \n {increasingPrice ? (\n {__(\"easter_promo_timer\")}\n ) : null}\n

\n \n ) : null}\n\n

\n \n

\n

\n \n {showPlanDescriptionText && description ? (\n {description}\n ) : null}\n {showSocialProofOnlyMobile ? (isMobile && showSocialProofOnlyMobile ? renderSocialProofText() : null) : renderSocialProofText() }\n {renderFeatures()}\n {showPaymentOptions ? : null}\n \n );\n};\n\nexport default PlanBoxDefaultView;\n\nconst Wrapper = styled.div`\n /* font-family: Inter, Roboto; */\n position: relative;\n width: 100%;\n box-sizing: border-box;\n padding: 36px 40px 36px 40px;\n border-radius: 10px;\n box-shadow: 3.8px 5.9px 10px 0 rgba(0, 0, 0, 0.05);\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n overflow: hidden;\n min-height: ${({ showPaymentOptions, timerExp }) => showPaymentOptions && timerExp ? \"743px\" : \"677px\"};\n\n @media (max-width: 768px) {\n padding: 25px 20px;\n min-height: 0px;\n border-radius: 0px;\n }\n\n .tooltip {\n padding: 15px 20px;\n max-width: 250px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n text-align: center;\n }\n`;\n\nconst FeaturesWrapper = styled.div`\n margin-top: 39px;\n\n @media (max-width: 768px) {\n display: none;\n }\n`;\n\nconst Timeleft = styled.div`\n text-align: center;\n font-size: 10px;\n font-weight: 500;\n color: #878787;\n letter-spacing: -0.3px;\n text-transform: uppercase;\n margin: 10px auto 10px auto;\n`;\n\nconst BoxWrapper = styled.div``;\n\nconst TimerWrapper = styled.div`\n margin-bottom: 34px;\n padding: 20px 20px 11px 20px;\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"rgba(255,255,255,0.07)\";\n } else {\n return \"#f8f8f8\";\n }\n }};\n border-radius: 12px;\n border: solid 1px #f6f6f6;\n border-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"transparent\";\n } else {\n return \"#f6f6f6\";\n }\n }};\n box-sizing: border-box;\n`;\n\nconst PlanDescription = styled.div`\n margin: 26px auto 0px auto;\n /* font-family: Inter, Roboto; */\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.14;\n letter-spacing: -0.35px;\n text-align: center;\n color: ${props => (props.disabled ? \"#cccccc\" : \"#878787\")};\n height: 32px;\n\n @media (max-width: 768px) {\n display: none;\n }\n`;\n\nconst SocialProofText = styled.div`\n font-size: 18px;\n text-align: center;\n color: ${props => (props.color && COLORS[props.color] ? COLORS[props.color].socialProofSecondColor : \"#000\" )};\n margin: 20px 0px 0px 0px;\n display: flex;\n align-items: center;\n align-self: center;\n flex-direction: row;\n gap: 20px;\n\n & > span:first-child {\n color: ${props => (props.color && COLORS[props.color] ? COLORS[props.color].mainColor : \"#000\" )};\n font-size: bold;\n flex-shrink: 0;\n line-height: 0.81;\n\n & > span:last-child {\n align-self: center;\n flex-shrink: 1;\n text-align: left;\n }\n }\n`;","//@flow\nimport React from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\n\nimport { Wrapper, WrapperRightColumn, WrapperLeftColumn, FeaturesWrapper, Timeleft, TimerWrapper, PlanDescription, BoxDiscountAnimationContainer } from \"./Styles/PriceOnTheLeftStyles\";\nimport { planBoxTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../../lib/types/dataTypes.components\";\nimport { TimerTemplate } from \"@pcloud/web-utilities/dist/resources/components/TimerTemplate\";\nimport TimerContainer from \"@pcloud/web-utilities/dist/resources/components/TimerContainer\";\nimport { ButtonWithIcon } from \"@pcloud/web-utilities/dist/resources/components/ButtonDefault\";\n\nimport { BoxHeader, BoxPrices, BoxDiscount, PaymentOptions } from \"../../../PlansBox\";\n\nimport { __ } from \"../../../../lib/utils\";\nimport { detectIsMobile } from \"@pcloud/web-utilities/dist/lib/utils\";\n\ntype PlanViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme: \"light\" | \"dark\",\n timerTheme: string,\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n timerExp?: number,\n oldPrice?: number,\n periodText?: string,\n increasingPrice?: boolean,\n showDiscountCorner: boolean,\n discountPeriod?: number,\n discountValue?: string | number,\n discountType?: \"percent\" | \"fixedamount\" | \"text\",\n discountLabelBackground?: string,\n discountLabelBackgroundMobile?: string,\n discountLabelBackgroundRetina?: string,\n discountLabelWidth?: string,\n discountLabelHeight?: string,\n discountLabelPositionLeft?: string,\n showPaymentOptions?: boolean,\n priceLoading?: boolean,\n showPlanDescriptionText?: boolean,\n renderSocialProofText: () => string,\n renderFeatures: () => string,\n onActionButtonClick: () => void\n};\n\nconst PlanBoxPriceOnTheLeftView = ({\n planId,\n billingPeriod,\n color,\n theme,\n timerTheme,\n price,\n currency,\n timerExp,\n oldPrice,\n increasingPrice,\n discountPeriod,\n discountValue,\n discountType,\n discountLabelBackground,\n discountLabelBackgroundMobile,\n discountLabelBackgroundRetina,\n discountLabelWidth,\n discountLabelHeight,\n discountLabelPositionLeft,\n showPaymentOptions,\n showCurrencyCode = true,\n showPlanDescriptionText = false,\n showSocialProofOnlyMobile = false,\n priceLoading = false,\n renderSocialProofText,\n renderFeatures,\n onActionButtonClick\n}: PlanViewBoxProps) => {\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { title: titleObj, description, buttonText: buttonTextObj } = texts;\n const buttonText = buttonTextObj[billingPeriod] || buttonTextObj.default;\n const title = titleObj[billingPeriod] || titleObj.default;\n const isMobile = detectIsMobile();\n\n return (\n \n \n \n \n { }}\n onExited={() => { }}\n appear\n >\n \n \n \n\n \n \n\n \n\n \n\n \n\n \n\n {showPlanDescriptionText && description ? (\n {description}\n ) : null}\n {renderFeatures()}\n {showPaymentOptions ? : null}\n\n

\n {timerExp ? (\n \n

\n {increasingPrice ? null : {__(\"timer_hurryup\")}}\n \n { }}\n renderTimer={TimerTemplate}\n timerColor={timerTheme === \"dark\" ? \"353535\" : \"fafafa\"}\n textColor={timerTheme === \"dark\" ? \"999999\" : \"444444\"}\n showLabels\n />\n \n {increasingPrice ? (\n {__(\"easter_promo_timer\")}\n ) : null}\n

\n \n ) : null}\n\n

\n \n

\n

\n\n {showSocialProofOnlyMobile ? (isMobile && showSocialProofOnlyMobile ? renderSocialProofText() : null) : renderSocialProofText() }\n\n \n \n );\n};\n\nexport default PlanBoxPriceOnTheLeftView;","//@flow\nimport React, { useEffect, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\n\nimport { Wrapper, FeaturesWrapper, Timeleft, TimerWrapper, PlanDescription, BoxDiscountAnimationContainer } from \"./Styles/PriceOnTheLeftStyles\";\nimport { WrapperRightColumn2, WrapperLeftColumn2, PeriodText } from \"./Styles/PricesOnTheLseftStyles2\";\nimport { planBoxTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { TimerTemplate } from \"@pcloud/web-utilities/dist/resources/components/TimerTemplate\";\nimport TimerContainer from \"@pcloud/web-utilities/dist/resources/components/TimerContainer\";\nimport { ColorType, PlanIDType } from \"../../../../lib/types/dataTypes.components\";\nimport { ButtonWithIcon } from \"@pcloud/web-utilities/dist/resources/components/ButtonDefault\";\n\nimport { BoxPrices, BoxDiscount, PaymentOptions } from \"../../../PlansBox\";\n\nimport { __, calculateDiscountPercent } from \"../../../../lib/utils\";\n\ntype PlanViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme: \"light\" | \"dark\",\n timerTheme: string,\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n timerExp?: number,\n oldPrice?: number,\n periodText?: string,\n increasingPrice?: boolean,\n showDiscountCorner: boolean,\n discountPeriod?: number,\n discountValue?: string | number,\n discountType?: \"percent\" | \"fixedamount\" | \"text\",\n showPaymentOptions?: boolean,\n priceLoading?: boolean,\n showPlanDescriptionText?: boolean,\n renderSocialProofText: () => string,\n renderFeatures: () => string,\n onActionButtonClick: () => void\n};\n\nconst PlanBoxPriceOnTheLeft2View = ({\n planId,\n billingPeriod,\n color,\n theme,\n timerTheme,\n price,\n currency,\n timerExp,\n oldPrice,\n increasingPrice,\n discountPeriod,\n discountValue,\n discountType,\n discountLabelBackgroundMobile,\n showPaymentOptions,\n showCurrencyCode = true,\n showPlanDescriptionText = false,\n showSocialProofOnlyMobile = false,\n priceLoading = false,\n periodText,\n renderSocialProofText,\n renderFeatures,\n renderTabs,\n onActionButtonClick\n}: PlanViewBoxProps) => {\n const [isMobile, setIsMobile] = useState(window.innerWidth <= 768)\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { title: titleObj, description, buttonText: buttonTextObj } = texts;\n const buttonText = buttonTextObj[billingPeriod] || buttonTextObj.default;\n const title = titleObj[billingPeriod] || titleObj.default;\n\n useEffect(() => {\n const resizeEventListener = () => {\n setIsMobile(window.innerWidth <= 768);\n };\n\n window.addEventListener(\"resize\", resizeEventListener);\n\n return () => {\n window.removeEventListener(\"resize\", resizeEventListener);\n }\n }, [])\n\n return (\n \n \n {isMobile ? renderTabs() : null}\n \n { }}\n onExited={() => { }}\n appear\n >\n \n \n \n \n \n {periodText}\n \n \n\n \n {!isMobile ? renderTabs() : null}\n {showPlanDescriptionText && description ? (\n {description}\n ) : null}\n {renderFeatures()}\n {showPaymentOptions ? : null}\n\n

\n {timerExp ? (\n \n

\n {increasingPrice ? null : {__(\"timer_hurryup\")}}\n \n { }}\n renderTimer={TimerTemplate}\n timerColor={timerTheme === \"dark\" ? \"353535\" : \"fafafa\"}\n textColor={timerTheme === \"dark\" ? \"999999\" : \"444444\"}\n showLabels\n />\n \n {increasingPrice ? (\n {__(\"easter_promo_timer\")}\n ) : null}\n

\n \n ) : null}\n\n

\n \n

\n

\n \n {showSocialProofOnlyMobile ? (isMobile ? renderSocialProofText() : null) : renderSocialProofText() }\n \n );\n};\n\nexport default PlanBoxPriceOnTheLeft2View;","//@flow\n\nimport React, { useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport reactStringReplace from \"react-string-replace\";\n\nimport { planBoxTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../lib/types/dataTypes.components\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\n\nimport { BoxFeature } from \"../../PlansBox\";\nimport { __ } from \"../../../lib/utils\";\n\nimport PlanBoxDefaultView from \"./planBoxTemplates/PlanBoxDefaultView\";\nimport PlanBoxPriceOnTheLeftView from \"./planBoxTemplates/PlanBoxPriceOnTheLeftView\";\nimport PlanBoxPriceOnTheLeft2View from \"./planBoxTemplates/PlanBoxPriceOnTheLeft2View\";\n\ntype PlanViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme: \"light\" | \"dark\",\n timerTheme: string,\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n buttonAction: () => void,\n timerExp?: number,\n oldPrice?: number,\n periodText?: string,\n discountPercent?: number,\n increasingPrice?: boolean,\n showDiscountCorner: boolean,\n getTotalStorage: (storage: number) => string,\n getTotalTraffic: (storage: number) => string,\n discountPeriod?: number,\n showPaymentOptions?: boolean,\n showPlanDescriptionText?: boolean,\n showSocialProof?: boolean,\n showSocialProofLanding?: string,\n showSocialProofOnlyMobile?: boolean,\n template: \"default\" | \"price-on-the-left\",\n renderTabs: () => void\n};\n\nconst PlanViewBox = (props: PlanViewBoxProps) => {\n const {\n planId, \n billingPeriod, \n theme, \n color, \n showSocialProofLanding, \n showSocialProof, \n buttonAction,\n template = \"default\",\n renderTabs = () => {},\n getTotalStorage: getTotalStorageForUser,\n getTotalTraffic: getTotalTrafficForUser\n } = props;\n\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { features } = texts;\n const [randomGeneratedNumber, setRandomGeneratedNumber] = useState(0);\n\n const getPromoCount = (params = {}, successCallback = () => {}, errorCallback = () => {}) => {\n let paramsCopy = { ...params };\n\n paramsCopy.type = 6;\n paramsCopy.promo = showSocialProofLanding;\n\n return pCloudGlobals.apiMethod(\n \"getpromonewsfeed\",\n paramsCopy,\n res => {\n successCallback(res);\n },\n { errorCallback }\n );\n };\n\n useEffect(() => {\n if (showSocialProof) {\n getPromoCount(\n {},\n res => {\n setRandomGeneratedNumber(res.count);\n },\n () => {});\n }\n }, []); //[]\n\n const handleButtonClick = event => {\n buttonAction(planId, billingPeriod);\n };\n\n const renderFeatures = () => {\n const featureToRender = features[billingPeriod] || features[\"default\"];\n return featureToRender.map(({ feature, tooltip }, index) => {\n if (feature.indexOf(\"%amount%\") !== -1) {\n feature = feature.replace(\"%amount%\", getTotalStorageForUser(planId[0]));\n }\n\n if (feature.indexOf(\"%traffic_amount%\") !== -1) {\n feature = feature.replace(\"%traffic_amount%\", getTotalTrafficForUser(planId[0]));\n }\n\n return (\n \n );\n });\n };\n\n const renderCards = () => {\n let digits = randomGeneratedNumber.toString().split(\"\");\n let realDigits = digits.map(Number);\n\n return realDigits.map((digit, index) => \n \n {digit}\n \n );\n };\n\n const renderSocialProofText = () => {\n if (!showSocialProof) {\n return null;\n }\n\n const textSocialProof = __(\"singles_day_offer\", \"%numberOfPeople% people have already taken advantage of the offer\");\n\n let textSocialProofFormatted = reactStringReplace(\n textSocialProof,\n /(%numberOfPeople%)/g,\n (match, i) => (\n \n {renderCards()}\n \n )\n )\n\n return (\n \n {textSocialProofFormatted}\n \n )\n };\n\n let PlanBoxTemplateView = PlanBoxDefaultView;\n\n if (template == \"price-on-the-left\") {\n PlanBoxTemplateView = PlanBoxPriceOnTheLeftView;\n }\n\n if (template == \"price-on-the-left-2\") {\n PlanBoxTemplateView = PlanBoxPriceOnTheLeft2View;\n }\n\n return (\n \n );\n};\n\nexport default PlanViewBox;\n\nconst SocialProofText = styled.div`\n font-size: 18px;\n text-align: left;\n color: ${props => (props.color && COLORS[props.color] ? COLORS[props.color].socialProofSecondColor : \"#000\" )};\n margin: 20px 0px 0px 0px;\n display: flex;\n align-items: center;\n align-self: center;\n flex-direction: row;\n gap: 20px;\n\n & > span:first-child {\n color: ${props => (props.color && COLORS[props.color] ? COLORS[props.color].mainColor : \"#000\" )};\n font-size: bold;\n flex-shrink: 0;\n line-height: 0.81;\n\n & > span:last-child {\n align-self: center;\n flex-shrink: 1;\n text-align: left;\n }\n }\n`;\n\nconst CardWrapper =styled.div`\n flex-shrink: 0;\n display: flex;\n gap: 4px;\n`;\n\nconst Card = styled.span`\n font-size: 24px;\n font-weight: bold;\n display: inline-block;\n border-radius: 5px;\n padding: 4px 6px;\n color: #000;\n background: #fff;\n zoom: 1;\n`;","//@floow\n\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nimport { planBoxTexts, planBoxPeriodTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../../lib/types/dataTypes.components\";\nimport { __ } from \"../../../../lib/utils\";\n\nimport { BoxHeader, BoxPrices, BoxDiscount } from \"../../../PlansBox\";\n\ntype LoginViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme?: \"light\" | \"dark\",\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n renderView: () => string,\n onClick: () => void,\n oldPrice?: number,\n periodText?: string,\n discountPercent?: number,\n showDiscountCorner?: boolean,\n discountPeriod?: number\n};\n\nconst LoginViewBoxDefault = ({\n planId,\n billingPeriod,\n color,\n theme,\n price,\n currency,\n renderView,\n oldPrice,\n periodText,\n discountPercent,\n showDiscountCorner = true,\n discountPeriod,\n showCurrencyCode = true,\n}: LoginViewBoxProps) => {\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { title: titleObj } = texts;\n const title = titleObj[billingPeriod] || titleObj.default;\n\n return (\n \n {discountPercent && showDiscountCorner ? (\n \n ) : null}\n\n \n \n\n \n \n\n \n {renderView()}\n \n \n );\n};\n\nexport default LoginViewBoxDefault;\n\nconst Wrapper = styled.div`\n /* font-family: Inter, Roboto; */\n position: relative;\n width: 100%;\n box-sizing: border-box;\n border-radius: 10px;\n box-shadow: 3.8px 5.9px 10px 0 rgba(0, 0, 0, 0.05);\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#fafafa\";\n }\n }};\n overflow: hidden;\n min-height: 677px;\n\n @media (max-width: 768px) {\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n min-height: 0px;\n border-radius: 0px;\n }\n`;\n\nconst FormWrapper = styled.div`\n max-width: 440px;\n width: 100%;\n margin: 0 auto;\n min-height: 385px;\n padding: 30px 40px 20px 40px; \n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#fafafa\";\n }\n }};\n border-top: 1px solid #eeeeee;\n border-top-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"rgba(255,255,255,0.15)\";\n } else {\n return \"#eeeeee\";\n }\n }};\n box-sizing: border-box;\n\n .responsive-wrap {\n width: 100%;\n margin: 0px;\n }\n\n .link {\n color: #746de4;\n }\n @media (max-width: 768px) {\n margin-top: -28px;\n }\n`;\n\nconst AlignContainer = styled.div`\n padding: 36px 40px 2px 40px;\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n\n @media (max-width: 768px) {\n padding: 25px 20px;\n }\n`;\n","//@floow\n\nimport React from \"react\";\n\nimport { Wrapper, WrapperRightColumn, WrapperLeftColumn, FormWrapper} from \"./Styles/PriceOnTheLeftStyles\";\nimport { planBoxTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../../lib/types/dataTypes.components\";\nimport { __ } from \"../../../../lib/utils\";\n\nimport { BoxHeader, BoxPrices, BoxDiscount } from \"../../../PlansBox\";\n\ntype LoginViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme?: \"light\" | \"dark\",\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n handleLogin: () => void,\n renderView: () => string,\n onTabClick: () => void,\n oldPrice?: number,\n periodText?: string,\n discountPercent?: number,\n discountValue?: string | number,\n discountType?: \"percent\" | \"fixedamount\" | \"text\",\n discountLabelBackground?: string,\n discountLabelBackgroundMobile?: string,\n discountLabelBackgroundRetina?: string,\n discountLabelWidth?: string,\n discountLabelHeight?: string,\n discountLabelPositionLeft?: string,\n showDiscountCorner?: boolean,\n discountPeriod?: number\n};\n\nconst LoginViewBoxPriceOnTheLeft = ({\n planId,\n billingPeriod,\n color,\n theme,\n price,\n currency,\n renderView,\n onTabClick,\n oldPrice,\n discountValue,\n discountType,\n discountLabelBackground,\n discountLabelBackgroundMobile,\n discountLabelBackgroundRetina,\n discountLabelWidth,\n discountLabelHeight,\n discountLabelPositionLeft,\n discountPeriod,\n showCurrencyCode = true\n}: LoginViewBoxProps) => {\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { title: titleObj } = texts;\n const title = titleObj[billingPeriod] || titleObj.default;\n\n return (\n \n \n \n \n \n\n \n\n \n \n \n\n \n\n \n {renderView()}\n \n \n \n );\n};\n\nexport default LoginViewBoxPriceOnTheLeft;\n","//@floow\n\nimport React, { useState, useEffect } from \"react\";\n\nimport { Wrapper, FormWrapper, BoxDiscountAnimationContainer} from \"./Styles/PriceOnTheLeftStyles\";\nimport { planBoxTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../../lib/types/dataTypes.components\";\nimport { __, signToCurrency } from \"../../../../lib/utils\";\n\nimport { BoxPrices, BoxDiscount } from \"../../../PlansBox\";\nimport { PeriodText, WrapperLeftColumn2, WrapperRightColumn2, PlanInfo } from \"./Styles/PricesOnTheLseftStyles2\";\n\ntype LoginViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme?: \"light\" | \"dark\",\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n handleLogin: () => void,\n renderView: () => string,\n onTabClick: () => void,\n oldPrice?: number,\n periodText?: string,\n discountPercent?: number,\n discountValue?: string | number,\n discountType?: \"percent\" | \"fixedamount\" | \"text\",\n discountLabelBackground?: string,\n discountLabelBackgroundMobile?: string,\n discountLabelBackgroundRetina?: string,\n discountLabelWidth?: string,\n discountLabelHeight?: string,\n discountLabelPositionLeft?: string,\n showDiscountCorner?: boolean,\n discountPeriod?: number,\n showHeader: boolean\n};\n\nconst LoginViewBoxPriceOnTheLeft2 = ({\n planId,\n billingPeriod,\n color,\n theme,\n price,\n currency,\n renderView,\n onTabClick,\n oldPrice,\n discountPeriod,\n showCurrencyCode = true,\n periodText,\n}: LoginViewBoxProps) => {\n const [isMobile, setIsMobile] = useState(window.innerWidth <= 768)\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { title: titleObj } = texts;\n const title = titleObj[billingPeriod] || titleObj.default;\n\n useEffect(() => {\n const resizeEventListener = () => {\n setIsMobile(window.innerWidth <= 768);\n };\n\n window.addEventListener(\"resize\", resizeEventListener);\n\n return () => {\n window.removeEventListener(\"resize\", resizeEventListener);\n }\n }, [])\n\n return (\n \n \n {isMobile ? (\n {`${title} / ${price} ${signToCurrency[currency]}`}\n ) : null }\n {!isMobile ? (\n \n \n \n \n \n \n {periodText}\n \n \n ) : null }\n \n\n \n \n {renderView()}\n \n \n \n );\n};\n\nexport default LoginViewBoxPriceOnTheLeft2;\n","//@floow\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport styled from \"styled-components\";\n\nimport { planBoxTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../lib/types/dataTypes.components\";\nimport { __, getLanguage } from \"../../../lib/utils\";\n\nimport LoginViewBoxDefault from \"./planBoxTemplates/LoginViewBoxDefault\";\nimport LoginViewBoxPriceOnTheLeft from \"./planBoxTemplates/LoginViewBoxPriceOnTheLeft\";\nimport LoginViewBoxPriceOnTheLeft2 from \"./planBoxTemplates/LoginViewBoxPriceOnTheLeft2\";\n\ntype LoginViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme?: \"light\" | \"dark\",\n price: number,\n currency: \"$\" | \"€\" | \"₤\",\n handleLogin: () => void,\n LoginOrSignupComponent: any,\n oldPrice?: number,\n periodText?: string,\n discountPercent?: number,\n showDiscountCorner?: boolean,\n discountPeriod?: number,\n defaultLoginView?: \"login\" | \"register\",\n passPcloud: boolean,\n template: \"default\" | \"price-on-the-left\"\n};\n\nconst LoginViewBox = (props: LoginViewBoxProps) => {\n const {\n planId,\n billingPeriod,\n theme,\n handleLogin,\n LoginOrSignupComponent,\n defaultLoginView = \"login\",\n passPcloud = false,\n template = \"default\"\n } = props;\n const [view, setView] = useState(defaultLoginView);\n const loginOrSignupContainer = useRef(null);\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { title: titleObj, description, features, buttonText } = texts;\n const title = titleObj[billingPeriod] || titleObj.default;\n\n useEffect(() => {\n if (passPcloud) {\n openPassLoginModal(true, \"register\");\n } else {\n LoginOrSignupComponent(loginOrSignupContainer.current, {\n isLoginModal: false,\n onSuccess: handleLogin,\n showTitle: false,\n theme: theme,\n language: getLanguage(),\n passpcloud: passPcloud ? 1 : 0,\n });\n }\n }, [view]);\n\n const onTabClick = (tabId) => {\n setView(tabId);\n };\n\n const renderView = () => {\n if (passPcloud) {\n return (\n \n \n {__(\"signin_to_pcloud_pass\", \"You need to sign in to a pCloud Pass account to proceed.\")}\n {__(\"signin\", \"Sign in\")}\n \n \n )\n }\n\n if (view === \"login\" || view === \"register\") {\n return (\n

\n );\n }\n\n return null;\n };\n\n let LoginViewBox = LoginViewBoxDefault;\n\n if (template == \"price-on-the-left\") {\n LoginViewBox = LoginViewBoxPriceOnTheLeft;\n }\n\n if (template == \"price-on-the-left-2\") {\n LoginViewBox = LoginViewBoxPriceOnTheLeft2;\n }\n\n return ;\n};\n\nexport default LoginViewBox;\n\nconst Form = styled.div`\n width: 100%;\n height: 100%;\n /* height: 385px; */\n\n overflow-y: auto;\n overflow-x: hidden;\n\n /* width */\n &::-webkit-scrollbar {\n width: 5px;\n border-radius: 3px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: #eaeaea;\n border-radius: 3px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: #aaa;\n border-radius: 3px;\n transition: background 200ms ease-in-out;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: #555;\n }\n`;\n\nconst CenteredContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-align: center;\n line-height: 1.5;\n`;\n\nconst Link = styled.span`\n font-weight: bold;\n color: #746de4;\n cursor: pointer;\n`;\n","//@flow\n\nimport React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport { __ } from \"../../../../lib/utils\";\nimport { planBoxTexts, planBoxPeriodTexts, notEligibleTexts, notEligibleTextsForGetPlansApi } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../../lib/types/dataTypes.components\";\nimport Button from \"@pcloud/web-utilities/dist/resources/components/ButtonDefault\";\n\nimport { BoxHeader, BoxDiscount, BoxPrices, BoxDisabled } from \"../../../PlansBox\";\n\ntype DisabledViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme?: \"light\" | \"dark\",\n buttonAction: () => void,\n discountPercent?: number,\n showDiscountCorner?: boolean,\n disabledReason?: string,\n price: number,\n oldPrice: number,\n currency: string,\n periodText: string,\n discountPeriod: number,\n renderFeatures: () => string\n};\n\nconst DisabledViewBoxDefault = ({\n planId,\n billingPeriod,\n color,\n theme,\n buttonAction,\n discountPercent,\n showDiscountCorner,\n disabledReason,\n price,\n oldPrice,\n currency,\n periodText,\n discountPeriod,\n secondaryDisableText,\n showCurrencyCode = true,\n renderFeatures\n}: DisabledViewBoxProps) => {\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { title: titleObj } = texts;\n const title = titleObj[billingPeriod] || titleObj.default;\n const disabledText = (notEligibleTextsForGetPlansApi[disabledReason] || notEligibleTexts[disabledReason] || notEligibleTexts[\"plan_upgrade_restrictions\"]);\n\n return (\n \n {discountPercent && showDiscountCorner ? (\n \n ) : null}\n\n \n\n \n\n \n\n \n {__(\"header_logout\").toUpperCase()}\n \n\n {/* {renderFeatures()} */}\n \n );\n};\n\nexport default DisabledViewBoxDefault;\n\nconst Wrapper = styled.div`\n /* font-family: Inter, Roboto; */\n position: relative;\n width: 100%;\n box-sizing: border-box;\n padding: 36px 40px 36px 40px;\n border-radius: 10px;\n box-shadow: 3.8px 5.9px 10px 0 rgba(0, 0, 0, 0.05);\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n overflow: hidden;\n min-height: 677px;\n\n @media (max-width: 768px) {\n padding: 25px 20px;\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n min-height: 0px;\n border-radius: 0px;\n }\n\n .tooltip {\n padding: 15px 20px;\n max-width: 250px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n text-align: center;\n }\n`;\n\nconst FeaturesWrapper = styled.div`\n margin-top: 39px;\n @media (max-width: 768px) {\n display: none;\n }\n\n .box-feature {\n .inner-text {\n &::before {\n content: \"\";\n display: inline-block;\n width: 5px;\n height: 8px;\n border-right: 2px solid;\n transform: rotate(45deg);\n border-bottom: 2px solid;\n border-color: ${(props) => {\n if (props.color && !props.disabled) {\n return COLORS[props.color].mainColor\n } else if (props.disabled && props.theme === \"dark\") {\n return \"rgba(255, 255, 255, 0.3)\";\n } else if (props.disabled) {\n return \"#cccccc\";\n } else {\n return \"#212121\"\n }\n }};\n margin-right: 18px;\n position: relative;\n bottom: 2px;\n left: 2px;\n }\n }\n }\n`;","//@flow\n\nimport React from \"react\";\n\nimport { CSSTransition } from \"react-transition-group\";\n\nimport { Wrapper, WrapperRightColumn, WrapperLeftColumn, FeaturesWrapper, BoxDiscountAnimationContainer } from \"./Styles/PriceOnTheLeftStyles\";\n\nimport { __ } from \"../../../../lib/utils\";\nimport { planBoxTexts, notEligibleTexts, notEligibleTextsForGetPlansApi } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../../lib/types/dataTypes.components\";\nimport Button from \"@pcloud/web-utilities/dist/resources/components/ButtonDefault\";\n\nimport { BoxHeader, BoxDiscount, BoxDisabled } from \"../../../PlansBox\";\n\ntype DisabledViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme?: \"light\" | \"dark\",\n buttonAction: () => void,\n discountPercent?: number,\n showDiscountCorner?: boolean,\n disabledReason?: string,\n price: number,\n oldPrice: number,\n currency: string,\n periodText: string,\n discountValue?: string | number,\n discountType?: \"percent\" | \"fixedamount\" | \"text\",\n discountLabelBackground?: string,\n discountLabelBackgroundRetina?: string,\n discountLabelWidth?: string,\n discountLabelHeight?: string,\n discountLabelPositionLeft?: string,\n discountPeriod: number,\n renderFeatures: () => string,\n forceDisableText: string,\n priceLoading: boolean\n};\n\nconst DisabledViewBoxPriceOnTheLeft = ({\n planId,\n billingPeriod,\n color,\n theme,\n buttonAction,\n disabledReason,\n currency,\n discountValue,\n discountType,\n discountLabelBackground,\n discountLabelBackgroundRetina,\n discountLabelWidth,\n discountLabelHeight,\n discountLabelPositionLeft,\n discountPeriod,\n secondaryDisableText,\n renderFeatures,\n forceDisableText = \"\",\n priceLoading = false\n}: DisabledViewBoxProps) => {\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { title: titleObj } = texts;\n const title = titleObj[billingPeriod] || titleObj.default;\n const disabledText = forceDisableText && forceDisableText !== \"\" ? forceDisableText : (notEligibleTextsForGetPlansApi[disabledReason] || notEligibleTexts[disabledReason] || notEligibleTexts[\"plan_upgrade_restrictions\"]);\n\n return (\n \n \n \n \n { }}\n onExited={() => { }}\n appear\n >\n \n \n \n \n \n\n \n\n \n \n\n \n\n {renderFeatures()}\n\n \n {__(\"header_logout\").toUpperCase()}\n \n\n \n \n );\n};\n\nexport default DisabledViewBoxPriceOnTheLeft;","//@flow\n\nimport React, { useEffect, useState } from \"react\";\n\nimport { CSSTransition } from \"react-transition-group\";\n\nimport { Wrapper, BoxDiscountAnimationContainer } from \"./Styles/PriceOnTheLeftStyles\";\n\nimport { __, calculateDiscountPercent, detectIsMobile } from \"../../../../lib/utils\";\nimport { notEligibleTexts, notEligibleTextsForGetPlansApi } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../../lib/types/dataTypes.components\";\nimport Button from \"@pcloud/web-utilities/dist/resources/components/ButtonDefault\";\n\nimport { BoxDiscount, BoxDisabled, BoxPrices } from \"../../../PlansBox\";\nimport { PeriodText, WrapperLeftColumn2, WrapperRightColumn2 } from \"./Styles/PricesOnTheLseftStyles2\";\n\ntype DisabledViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme?: \"light\" | \"dark\",\n buttonAction: () => void,\n discountPercent?: number,\n showDiscountCorner?: boolean,\n disabledReason?: string,\n price: number,\n oldPrice: number,\n currency: string,\n periodText: string,\n discountValue?: string | number,\n discountType?: \"percent\" | \"fixedamount\" | \"text\",\n discountLabelBackground?: string,\n discountLabelBackgroundRetina?: string,\n discountLabelWidth?: string,\n discountLabelHeight?: string,\n discountLabelPositionLeft?: string,\n discountPeriod: number,\n renderFeatures: () => string,\n forceDisableText: string,\n priceLoading: boolean\n};\n\nconst DisabledViewBoxPriceOnTheLeft2 = ({\n color,\n theme,\n buttonAction,\n disabledReason,\n currency,\n discountValue,\n discountType,\n price,\n oldPrice,\n showCurrencyCode,\n secondaryDisableText,\n forceDisableText = \"\",\n priceLoading = false,\n renderTabs,\n periodText,\n discountPeriod\n}: DisabledViewBoxProps) => {\n const disabledText = forceDisableText && forceDisableText !== \"\" ? forceDisableText : (notEligibleTextsForGetPlansApi[disabledReason] || notEligibleTexts[disabledReason] || notEligibleTexts[\"plan_upgrade_restrictions\"]);\n const [isMobile, setIsMobile] = useState(window.innerWidth <= 768)\n\n useEffect(() => {\n const resizeEventListener = () => {\n setIsMobile(window.innerWidth <= 768);\n };\n\n window.addEventListener(\"resize\", resizeEventListener);\n\n return () => {\n window.removeEventListener(\"resize\", resizeEventListener);\n }\n }, [])\n\n return (\n \n \n {isMobile ? renderTabs() : null}\n \n { }}\n onExited={() => { }}\n appear\n >\n \n \n \n \n \n {periodText}\n \n \n\n \n {!isMobile ? renderTabs() : null}\n \n \n {__(\"header_logout\").toUpperCase()}\n \n\n \n \n );\n};\n\nexport default DisabledViewBoxPriceOnTheLeft2;","//@flow\n\nimport React from \"react\";\n\nimport { __ } from \"../../../lib/utils\";\nimport { planBoxTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../lib/types/dataTypes.components\";\n\nimport { BoxFeature } from \"../../PlansBox\";\n\nimport DisabledViewBoxDefault from \"./planBoxTemplates/DisabledViewBoxDefault\";\nimport DisabledViewBoxPriceOnTheLeft from \"./planBoxTemplates/DisabledViewBoxPriceOnTheLeft\";\nimport DisabledViewBoxPriceOnTheLeft2 from \"./planBoxTemplates/DisabledViewBoxPriceOnTheLeft2\";\n\ntype DisabledViewBoxProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme?: \"light\" | \"dark\",\n buttonAction: () => void,\n discountPercent?: number,\n showDiscountCorner?: boolean,\n disabledReason?: string,\n price: number,\n oldPrice: number,\n currency: string,\n periodText: string,\n discountPeriod: number,\n template: \"default\" | \"price-on-the-left\"\n};\n\nconst DisabledViewBox = (props: DisabledViewBoxProps) => {\n const {\n planId,\n billingPeriod,\n theme,\n template = \"default\",\n color\n } = props;\n\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { features } = texts;\n \n\n const renderFeatures = () => {\n const featuresToRender = features[billingPeriod] || features[\"default\"];\n return featuresToRender.map(({ feature, tooltip }, index) => {\n return (\n \n );\n });\n };\n\n let DisabledViewBox = DisabledViewBoxDefault;\n\n if (template == \"price-on-the-left\") {\n DisabledViewBox = DisabledViewBoxPriceOnTheLeft;\n }\n\n if (template == \"price-on-the-left-2\") {\n DisabledViewBox = DisabledViewBoxPriceOnTheLeft2;\n }\n\n return ; \n};\n\nexport default DisabledViewBox;","import styled from \"styled-components\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\n\nexport const SecondaryActionLink = styled.a`\n color: ${(props) =>\n props.color && COLORS[props.color]\n ? COLORS[props.color].mainColor\n : \"#17bed0\"};\n display: inline-block;\n margin-top: 20px;\n text-decoration: none;\n font-size: 13px;\n font-weight: bold;\n margin-bottom: 34px;\n text-transform: uppercase;\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 6px;\n height: 6px;\n border-top: 1px solid\n ${(props) =>\n props.color && COLORS[props.color]\n ? COLORS[props.color].mainColor\n : \"#17bed0\"};\n border-right: 1px solid\n ${(props) =>\n props.color && COLORS[props.color]\n ? COLORS[props.color].mainColor\n : \"#17bed0\"};\n transform: rotate(45deg);\n margin-left: 5px;\n margin-bottom: 2px;\n }\n`;\n\nexport const Message = styled.div`\n /* font-family: Inter, Roboto; */\n font-size: 22px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.18;\n letter-spacing: -0.55px;\n text-align: center;\n color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#ffffff\";\n } else {\n return \"#111111\";\n }\n }};\n margin-top: 20px;\n padding: 0px 40px 0px 40px;\n`;","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgSuccessIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 64 64\"\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M25.8 40.1l-6.9-6.9c-.8-.8-2-.8-2.8 0-.8.8-.8 2 0 2.8l8.3 8.4c.8.8 2 .8 2.8 0l21.2-21.2c.8-.8.8-2 0-2.8-.8-.8-2-.8-2.8 0L25.8 40.1zM0 32c0 17.7 14.3 32 32 32s32-14.3 32-32S49.7 0 32 0 0 14.4 0 32zm4 0C4 16.6 16.5 4 32 4s28 12.5 28 28-12.5 28-28 28S4 47.5 4 32z\",\n fillRule: \"evenodd\",\n clipRule: \"evenodd\"\n })));\n}\nexport default SvgSuccessIcon;","import styled, { keyframes } from \"styled-components\";\n\nexport const AnimationContainer = styled.div`\n width: 100%;\n\n .slide-enter {\n opacity: 0;\n transform: ${({ animationDirection }) => animationDirection && animationDirection === \"right\" ? \"translateX(-150px)\" : \"translateX(150px)\"};\n }\n .slide-enter-active {\n opacity: 1;\n transform: translateX(0px);\n }\n .slide-exit {\n opacity: 1;\n transform: translateX(0px);\n }\n .slide-exit-active {\n opacity: 0;\n transform: ${({ animationDirection }) => animationDirection && animationDirection === \"right\" ? \"translateX(150px)\" : \"translateX(-150px)\"};\n }\n .slide-enter-active,\n .slide-exit-active {\n transition: opacity ${({timeout}) => timeout}ms, transform ${({timeout}) => timeout}ms;\n transition-delay: ${({delay}) => delay}ms;\n }\n\n .fade-enter {\n opacity: 0;\n }\n .fade-enter-active {\n opacity: 1;\n }\n .fade-exit {\n opacity: 1;\n }\n .fade-exit-active {\n opacity: 0;\n }\n .fade-enter-active,\n .fade-exit-active {\n transition: opacity ${({timeout}) => timeout}ms;\n transition-delay: ${({delay}) => delay}ms;\n }\n\n .fade-down-enter {\n opacity: 0;\n transform: translateY(-10px);\n }\n .fade-down-enter-active {\n opacity: 1;\n transform: translateY(0px);\n }\n .fade-down-exit {\n opacity: 1;\n transform: translateY(0px);\n }\n .fade-down-exit-active {\n opacity: 0;\n transform: translateY(-10px);\n }\n .fade-down-enter-active,\n .fade-down-exit-active {\n transition: all ${({timeout}) => timeout}ms;\n }\n\n .expand-enter {\n opacity: 0;\n max-height: 0px;\n }\n .expand-enter-active {\n opacity: 1;\n max-height: ${({height}) => height}px;\n }\n .expand-exit {\n opacity: 1;\n max-height: ${({height}) => height}px;\n }\n .expand-exit-active {\n opacity: 0;\n max-height: 0px\n }\n .expand-enter-active,\n .expand-exit-active {\n transition: all ${({timeout}) => timeout}ms;\n transition-delay: ${({delay}) => delay}ms;\n }\n\n .page-enter {\n .inner-animation.animation-type-slide {\n opacity: 0;\n transform: ${({ animationDirection }) => animationDirection && animationDirection === \"right\" ? \"translateX(-150px)\" : \"translateX(150px)\"};\n }\n\n .inner-animation.animation-type-fade {\n opacity: 0;\n }\n }\n .page-enter-active {\n .inner-animation.animation-type-slide {\n opacity: 1;\n transform: translateX(0px);\n }\n .inner-animation.animation-type-fade {\n opacity: 1;\n }\n }\n .page-exit {\n .inner-animation.animation-type-slide {\n opacity: 1;\n transform: translateX(0px);\n }\n .inner-animation.animation-type-fade {\n opacity: 1;\n }\n }\n .page-exit-active {\n .inner-animation.animation-type-slide {\n opacity: 0;\n transform: ${({ animationDirection }) => animationDirection && animationDirection === \"right\" ? \"translateX(150px)\" : \"translateX(-150px)\"};\n }\n .inner-animation.animation-type-fade {\n opacity: 0;\n }\n }\n .page-enter-active,\n .page-exit-active {\n .inner-animation.animation-type-slide {\n transition: opacity ${({timeout}) => timeout}ms, transform ${({timeout}) => timeout}ms;\n transition-delay: ${({delay}) => delay}ms;\n }\n .inner-animation.animation-type-fade {\n transition: opacity ${({timeout}) => timeout}ms;\n transition-delay: ${({delay}) => delay}ms;\n }\n }\n \n`;\n\nexport const scale = keyframes`\n 0%{\n transform: scale(1)\n }\n\n 33%{\n transform: scale(0.96)\n }\n\n 66%{\n transform: scale(1.12)\n }\n\n 100% {\n transform: scale(1);\n }\n`;","import React from \"react\";\nimport { SwitchTransition, CSSTransition } from \"react-transition-group\";\nimport { AnimationContainer } from \"./AnimationContainer\";\n\ntype AnimationProps = {\n children: any,\n trigger: any,\n type: \"slide\" | \"fade\" | \"page\",\n timeout: number,\n animationDirection: \"left\" | \"right\",\n style: any,\n};\n\nconst SwitchAnimation = ({\n children,\n trigger = false,\n type = \"fade\",\n timeout = 500,\n animationDirection = \"left\",\n style = {},\n}: AnimationProps) => (\n \n \n {\n node.addEventListener(\"transitionend\", done, false);\n }}\n classNames={type || \"fade\"}\n timeout={timeout}\n >\n

{children}

\n \n \n \n);\n\nexport default SwitchAnimation;","//@flow\n\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nimport { signToCurrency } from \"@pcloud/web-utilities/dist/payments/constants.payments\";\n\ntype BoxPriceInlineProps = {\n price: number,\n currency: string,\n oldPrice?: number,\n className?: string,\n newLine?: boolean,\n size?: \"small\" | \"big\"\n};\n\nconst BoxPricesInline = ({\n price,\n currency,\n oldPrice,\n className = \"\",\n newLine = false,\n size\n}: BoxPriceInlineProps) => (\n \n {newLine ?
: null}\n \n {oldPrice ? (\n \n \n {oldPrice}\n {signToCurrency[currency]}\n \n \n {size === \"small\" ? null : /}\n \n ) : null}\n\n \n {price}\n {signToCurrency[currency]}\n \n \n \n);\n\nexport default BoxPricesInline;\n\nconst PricesWrapper = styled.div`\n /* font-family: Inter, Roboto; */\n display: inline-block;\n`;\n\nconst OldPrice = styled.span`\n position: relative;\n font-size: ${({ size }) => (size === \"small\" ? \"15px\" : \"30px\")};\n font-weight: 300;\n line-height: 1.2;\n letter-spacing: -0.45px;\n color: #aaaaaa;\n margin-right: ${({ size }) => (size === \"small\" ? \"10px\" : \"0px\")};\n\n @media (max-width: 768px) {\n font-size: inherit;\n }\n`;\n\nconst Price = styled.span`\n font-size: ${({ size }) => (size === \"small\" ? \"15px\" : \"30px\")};\n font-weight: bold;\n line-height: 1.2;\n letter-spacing: -0.45px;\n\n @media (max-width: 768px) {\n font-size: inherit;\n }\n`;\n\nconst CurrencyCode = styled.span`\n font-size: ${({ size }) => (size === \"small\" ? \"15px\" : \"18px\")};\n letter-spacing: 0px;\n margin-left: 3px;\n @media (max-width: 768px) {\n font-size: inherit\n }\n`;\n\nconst Value = styled.span``;\n\nconst CrossLine = styled.div`\n position: absolute;\n left: 0px;\n top: ${({ size }) => (size === \"small\" ? \"9px\" : \"17px\")};\n width: 100%;\n height: 1px;\n background-color: #aaaaaa;\n\n @media (max-width: 768px) {\n top: 50%;\n }\n`;\n\nconst Slash = styled.span`\n margin: 0px 5px;\n font-size: 31px;\n font-weight: 300;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.19;\n letter-spacing: -1.05px;\n text-align: center;\n color: #ececec;\n @media (max-width: 768px) {\n font-size: inherit;\n }\n`;\n","import React, { useRef } from \"react\";\nimport styled from \"styled-components\";\nimport Flipclock from \"react-simple-flipclock\";\n\nimport Modal, { OvalModalClose, OvalModalWrap } from \"@pcloud/web-utilities/dist/resources/components/Modal\";\nimport { ButtonWithIcon } from \"@pcloud/web-utilities/dist/resources/components/ButtonDefault\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport { ADD_STORAGE_1COUNT_PLAN_ID, ADD_STORAGE_4COUNT_PLAN_ID, PREMIUM_PLAN_ID, PREMIUM_PLUS_PLAN_ID } from \"@pcloud/web-utilities/dist/plans/constants.plans\";\n\nimport SwitchAnimation from \"../../Animation/SwitchAnimation\";\nimport { upsellButtonText } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { __ } from \"../../../lib/utils\";\nimport { Message, SecondaryActionLink } from \"./common.style\";\n\nimport SuccessIcon from \"../../../svg/success-icon.svg\";\nimport reactStringReplace from \"react-string-replace\";\nimport BoxPricesInline from \"../../PlansBox/BoxPricesInline\";\n\nconst UpsellModalv1 = ({\n currentUpsellProductID,\n closeUpsellModal,\n showUpsellModal,\n currentUpsellProductData,\n paymentLoading,\n handleSubmit,\n color,\n actionLink,\n actionText,\n errorMessage,\n theme,\n successMessage,\n upsellProductPrices,\n currency,\n billingPeriod,\n}) => {\n const closeModalTimeout = useRef(null);\n\n const handleGetUpsell = (e) => {\n if (paymentLoading) {\n return null;\n }\n\n clearTimeout(closeModalTimeout.current);\n handleSubmit(e);\n }\n\n const getUpsellDescription = (upsellDescription) => {\n if (!currentUpsellProductID) {\n return \"\";\n }\n\n const upsellPriceData = upsellProductPrices[currentUpsellProductID] || {};\n const { price, originalPrice } = upsellPriceData;\n\n let upsellTextFormatted = reactStringReplace(\n upsellDescription,\n /(%price%)/g,\n (match, i) => (\n \n )\n )\n \n upsellTextFormatted = reactStringReplace(\n upsellTextFormatted,\n /(%period%)/g,\n (match, i) => __(billingPeriod)\n )\n\n upsellTextFormatted = reactStringReplace(\n upsellTextFormatted,\n /(%old_price%)/g,\n (match, i) => \"\"\n )\n\n upsellTextFormatted = reactStringReplace(\n upsellTextFormatted,\n /(%XXXGB%)/g,\n (match, i) => {\n if (currentUpsellProductID === ADD_STORAGE_1COUNT_PLAN_ID) {\n return `500 ${__(\"GB\")}`;\n }\n\n if (currentUpsellProductID === ADD_STORAGE_4COUNT_PLAN_ID) {\n return `2 ${__(\"TB\")}`;\n }\n }\n )\n\n upsellTextFormatted = reactStringReplace(\n upsellTextFormatted,\n /(%percent%)/g,\n (match, i) => Math.round((1 - price / originalPrice) * 100) + \"%\"\n )\n \n upsellTextFormatted = reactStringReplace(\n upsellTextFormatted,\n /()/g,\n (match, i) =>
\n )\n\n return upsellTextFormatted;\n }\n\n const getUpsellButtonText = () => {\n let buttonText = upsellButtonText[currentUpsellProductID][billingPeriod] || \"\";\n\n if (currentUpsellProductID === PREMIUM_PLAN_ID || currentUpsellProductID === ADD_STORAGE_1COUNT_PLAN_ID) {\n buttonText = buttonText.replace(\"%XXXGB%\", 500 + __(\"GB\"));\n }\n\n if (currentUpsellProductID === PREMIUM_PLUS_PLAN_ID || currentUpsellProductID === ADD_STORAGE_4COUNT_PLAN_ID) {\n buttonText = buttonText.replace(\"%XXXGB%\", 2 + __(\"TB\"));\n }\n\n return buttonText.toUpperCase();\n };\n\n const renderUpsellContent = () => {\n if (!currentUpsellProductID || !currentUpsellProductData) {\n return null;\n };\n\n const {\n upsellImage,\n upsellTimer,\n upsellDescriptionColor,\n upsellDescription,\n upsellDescription2,\n upsellDescription2Color,\n upsellHeadline,\n upsellDisclaimer,\n upsellHeadlineColor\n } = currentUpsellProductData;\n const isMobile = window.innerWidth < 768;\n\n if (upsellTimer) {\n clearTimeout(closeModalTimeout.current);\n closeModalTimeout.current = setTimeout(() => {\n closeUpsellModal();\n }, upsellTimer*1000 + 6);\n }\n \n return (\n \n \n \n {successMessage}\n \n { upsellImage ? (\n \n ) : null }\n { upsellTimer ? (\n \n \n \n \n \n ) : null }\n {upsellHeadline ? {upsellHeadline} : null}\n \n \n {getUpsellDescription(upsellDescription)}\n \n \n \n \n {getUpsellDescription(upsellDescription2)}\n \n \n \n \n \n \n \n {actionText}\n \n \n \n {(upsellDisclaimer) ? (\n // \n // {__(\"crypto_cross_disclaimer\").replace(\"%button%\", paymentProvider === \"paypal\" ? \"Pay with PayPal\" : __(\"upsell_disclaimer_button_text\"))}\n // \n \n \n {upsellDisclaimer}\n \n \n ) : null}\n \n )\n }\n\n const renderSuccessViewMessage = () => {\n return (\n \n \n {successMessage}\n \n {actionText}\n \n \n )\n }\n\n return (\n \n \n \n \n {currentUpsellProductID ? renderUpsellContent() : renderSuccessViewMessage()}\n \n \n \n )\n}\n\nexport default UpsellModalv1;\n\nconst ModalContent = styled.div`\n /* padding: 40px 40px 20px 40px; */\n min-height: 629px;\n width: 725.63px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#212429\";\n } else {\n return \"#ffffff\";\n }\n }};\n\n svg {\n flex-shrink: 0;\n }\n\n @media (max-width: 768px) {\n height: auto;\n width: calc(100vw - 40px);\n /* padding: 30px; */\n }\n`;\n\nconst ModalAlignemnt = styled.div`\n padding: 0px 40px;\n\n &:first-of-type {\n padding-top: 40px;\n }\n\n &:last-of-type {\n padding-bottom: 20px;\n }\n\n @media (max-width: 768px) {\n padding: 0px 30px;\n\n &:first-of-type {\n padding-top: 30px;\n }\n\n &:last-of-type {\n padding-bottom: 30px;\n }\n }\n`;\n\nconst UpsellBanner = styled.img`\n margin: 34px auto 24px auto;\n display: inline-block;\n width: 100%;\n height: 180px;\n\n @media (max-width: 768px) {\n height: 180px;\n }\n`;\n\nconst TimerWrapper = styled.div`\n margin: 34px auto;\n padding: 15px;\n max-width: 400px;\n background-color: #f8f8f8;\n border-radius: 12px;\n border: solid 1px #f6f6f6;\n border-color: #f6f6f6;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n\n @media (max-width: 768px) {\n margin: 20px auto;\n }\n`;\n\nconst UpsellWrapper = styled.div`\n width: 100%;\n`;\n\nconst UpsellHeadline = styled.div`\n font-size: 32px;\n font-weight: 700;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.21;\n letter-spacing: -0.36px;\n text-align: center;\n color: ${({ color }) => color};\n margin-bottom: 20px;\n\n @media (max-width: 768px) {\n font-size: 24px !important;\n }\n`;\n\nconst UpsellDescription = styled.div`\n /* font-family: Inter, Roboto; */\n font-size: 22px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.21;\n letter-spacing: -0.36px;\n text-align: center;\n color: ${({ color }) => color};\n\n @media (max-width: 768px) {\n font-size: 18px !important;\n }\n`;\n\nconst UpsellDescription2 = styled.div`\n /* font-family: Inter, Roboto; */\n font-size: 18px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.21;\n letter-spacing: -0.36px;\n text-align: center;\n color: ${({ color }) => color};\n margin-top: 16px;\n\n @media (max-width: 768px) {\n font-size: 18px !important;\n }\n`;\n\nconst UpsellDisclaimer = styled.div`\n /* font-family: Inter, Roboto; */\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.18;\n letter-spacing: -0.17px;\n text-align: center;\n color: #777777;\n`;\n\nconst ButtonWrapper = styled.div`\n max-width: 300px;\n margin: 0 auto;\n margin-top: 0px;\n\n @media (max-width: 768px) {\n max-width: 100%;\n }\n`;\n\nconst Error = styled.div`\n display: inline-block;\n color: #c2313a;\n font-size: 12px;\n min-height: 12px;\n line-height: 12px;\n /* font-family: Inter, Roboto; */\n font-weight: bold;\n visibility: ${(props) => (props.hidden ? \"hidden\" : \"visible\")};\n margin-bottom: 10px;\n`;","import React, { useRef } from \"react\";\nimport styled from \"styled-components\";\nimport { Tooltip as ReactTooltip } from \"react-tooltip\";\n\nimport Modal, { OvalModalClose } from \"@pcloud/web-utilities/dist/resources/components/Modal\";\nimport { ButtonWithIcon } from \"@pcloud/web-utilities/dist/resources/components/ButtonDefault\";\nimport { ADD_STORAGE_1COUNT_PLAN_ID, ADD_STORAGE_4COUNT_PLAN_ID, PREMIUM_PLAN_ID, PREMIUM_PLUS_PLAN_ID } from \"@pcloud/web-utilities/dist/plans/constants.plans\";\n \nimport { planBoxTexts, underPriceTexts, upsellButtonText } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { getTotalStorage, getTotalTraffic } from \"@pcloud/web-utilities/dist/plans/utils.plans\";\nimport { __, signToCurrency } from \"../../../lib/utils\";\n\nimport SuccessIcon from \"../../../svg/success-icon.svg\";\nimport InfoIcon from \"../../../svg/info-icon.svg\";\n\n\nconst UpsellModalv2 = ({\n currentUpsellProductID,\n closeUpsellModal,\n showUpsellModal,\n currentUpsellProductData,\n paymentLoading,\n handleSubmit,\n color,\n actionLink,\n actionText,\n errorMessage,\n theme,\n successMessage,\n upsellProductPrices,\n currency,\n billingPeriod,\n upsellIndex,\n userInfo\n}) => {\n const closeModalTimeout = useRef(null);\n const isMobile = window.innerWidth < 768;\n\n const handleGetUpsell = (e) => {\n if (paymentLoading) {\n return null;\n }\n\n clearTimeout(closeModalTimeout.current);\n handleSubmit(e);\n }\n\n const getUpsellButtonText = () => {\n let buttonText = upsellButtonText[currentUpsellProductID][billingPeriod] || \"\";\n\n if (currentUpsellProductID === PREMIUM_PLAN_ID || currentUpsellProductID === ADD_STORAGE_1COUNT_PLAN_ID) {\n buttonText = buttonText.replace(\"%XXXGB%\", 500 + __(\"GB\"));\n }\n\n if (currentUpsellProductID === PREMIUM_PLUS_PLAN_ID || currentUpsellProductID === ADD_STORAGE_4COUNT_PLAN_ID) {\n buttonText = buttonText.replace(\"%XXXGB%\", 2 + __(\"TB\"));\n }\n\n return buttonText.toUpperCase();\n };\n\n const getUpsellHeadline = () => {\n if (!currentUpsellProductID) {\n return \"\";\n }\n\n const upsellPriceData = upsellProductPrices[currentUpsellProductID] || {};\n const { price, originalPrice } = upsellPriceData;\n\n const { upsellHeadline } = currentUpsellProductData;\n const discountPercentValue = Math.floor((1 - (price / originalPrice)) * 100);\n\n let upsellTextFormatted = upsellHeadline.replace(\"%DISCOUNT%\", `${discountPercentValue}%`);\n\n return upsellTextFormatted;\n }\n \n const renderUpsellFeatures = () => {\n const features = planBoxTexts[currentUpsellProductID] && planBoxTexts[currentUpsellProductID].features.default;\n\n if (!features) {\n return null;\n }\n\n return features.map(({ feature, tooltip }) => {\n if (feature.indexOf(\"%amount%\") !== -1) {\n feature = feature.replace(\"%amount%\", getTotalStorage(currentUpsellProductID, userInfo));\n }\n\n if (feature.indexOf(\"%traffic_amount%\") !== -1) {\n feature = feature.replace(\"%traffic_amount%\", getTotalTraffic(currentUpsellProductID, userInfo));\n }\n\n return (\n

\n \n {feature}\n {tooltip ? (\n \n \n \n \n ) : null}\n \n

\n )\n })\n }\n\n const renderUpsellContent = () => {\n if (!currentUpsellProductID || !currentUpsellProductData) {\n return null;\n };\n\n const upsellPriceData = upsellProductPrices[currentUpsellProductID] || {};\n const { price, originalPrice } = upsellPriceData;\n console.log(\"upsellPriceData\", currentUpsellProductID, upsellProductPrices, upsellPriceData)\n const {\n upsellImage,\n upsellHeadline,\n upsellDisclaimer,\n upsellImagePosition,\n } = currentUpsellProductData;\n \n return (\n \n \n \n \n {successMessage}\n {!isMobile ? \n {actionText}\n : null}\n \n \n \n \n {upsellHeadline ? (\n \n {getUpsellHeadline()}\n \n ) : null}\n \n \n {price}\n {signToCurrency[currency]}\n \n /\n {`${originalPrice} ${signToCurrency[currency]}`}\n \n {underPriceTexts[billingPeriod]}\n \n {renderUpsellFeatures()}\n \n

\n \n \n

\n {(upsellDisclaimer) ? (\n \n {upsellDisclaimer}\n \n ) : null}\n \n \n \n \n \n {isMobile ? \n {actionText}\n : null}\n \n )\n }\n\n const renderSuccessViewMessage = () => {\n return (\n \n \n \n \n {successMessage}\n \n {actionText}\n \n \n \n \n )\n }\n\n return (\n \n \n \n \n {currentUpsellProductID ? renderUpsellContent() : renderSuccessViewMessage()}\n \n \n \n )\n}\n\nexport default UpsellModalv2;\n\nconst ModalContent = styled.div``;\n\nconst PaymentSuccessMessageWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n margin-bottom: 12px;\n`;\n\nconst Message = styled.div`\n font-size: 15px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n text-align: center;\n color: #000;\n margin-top: 6px;\n\n a {\n color: currentColor;\n text-decoration: underline;\n margin-left: 4px;\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 6px;\n height: 6px;\n border-top: 1px solid currentColor;\n border-right: 1px solid currentColor;\n transform: rotate(45deg);\n margin-left: 5px;\n margin-bottom: 2px;\n }\n\n @media (max-width: 768px) {\n color: #86c600;\n margin-bottom: 0px;\n margin-left: 0px;\n margin-top: 8px;\n display: block;\n }\n }\n`;\n\nconst UpsellContentWrapper = styled.div`\n width: 100%;\n padding: 20px;\n border-radius: 12px;\n border: solid 1px #f8f6fd;\n background-color: #fff;\n box-sizing: border-box;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n\n @media (max-width: 768px) {\n flex-direction: column;\n display: flex;\n background: transparent;\n border: none;\n border-radius: 0;\n }\n`;\n\nconst UpsellTextContent = styled.div`\n order: ${({upsellImagePosition}) => upsellImagePosition && upsellImagePosition === \"right\" ? 1 : 2};\n\n @media (max-width: 768px) {\n order: 2;\n }\n`;\n\nconst UpsellHeadline = styled.div`\n font-size: 26px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.15;\n letter-spacing: -0.52px;\n text-align: center;\n color: #000;\n margin: 10px auto 36px auto;\n padding: 0px 30px;\n box-sizing: border-box;\n\n @media (max-width: 768px) {\n font-size: 22px;\n margin-bottom: 22px;\n }\n`;\n\nconst PricesWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n`;\n\nconst Currency = styled.span`\n vertical-align: top;\n font-size: 0.5em;\n margin-left: 3px;\n font-weight: normal;\n`;\n\n\nconst CurrentPrice = styled.div`\n font-size: 40px;\n font-weight: 800;\n font-stretch: normal;\n font-style: normal;\n line-height: 0.75;\n text-align: center;\n color: #86c224;\n\n @media (max-width: 768px) {\n font-size: 36px;\n }\n`;\n\nconst PriceSlash = styled.div`\n font-size: 33px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: -0.66px;\n text-align: center;\n color: #86c224;\n\n @media (max-width: 768px) {\n font-size: 30px;\n }\n`;\n\nconst OldPrice = styled.div`\n padding: 6px 9px;\n border-radius: 15px;\n background-color: #1f1f1f;\n font-size: 15px;\n font-weight: 600;\n font-stretch: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: -0.45px;\n text-align: center;\n color: #fff;\n position: relative;\n\n @media (max-width: 768px) {\n font-size: 18px;\n }\n\n &::after {\n position: absolute;\n content: \"\";\n left: 12px;\n top: 50%;\n right: 0;\n border-top: 2px solid;\n border-color: currentColor;\n transform: rotate(-25deg);\n width: calc(100% - 24px);\n }\n`;\n\nconst UnderPriceText = styled.div`\n font-size: 13px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 2.31;\n letter-spacing: normal;\n text-align: center;\n color: #a1a1a1;\n margin: 6px auto 36px auto;\n text-transform: uppercase;\n\n @media (max-width: 768px) {\n font-size: 12px;\n margin: 2px auto 22px auto;\n }\n`;\n\nconst FeaturesList = styled.ul`\n font-size: 13px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.3;\n letter-spacing: normal;\n text-align: left;\n color: #000;\n margin-bottom: 20px;\n\n .feature-tooltip {\n padding: 15px 20px;\n max-width: 250px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n text-align: center;\n width: 100%;\n flex-grow: 1;\n flex-shrink: 0;\n }\n\n li {\n margin: 8px 0px 8px 12px;\n\n &:first-of-type {\n margin-top: 0px;\n }\n\n &:last-of-type {\n margin-bottom: 0px;\n }\n\n @media (max-width: 768px) {\n margin: 4px 0px 4px 12px;\n }\n }\n\n @media (max-width: 768px) {\n margin-bottom: 8px;\n }\n`;\n\nconst FeatureTextWrap = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n svg {\n flex-shrink: 0;\n }\n`;\n\nconst UpsellImageContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n order: ${({upsellImagePosition}) => upsellImagePosition && upsellImagePosition === \"right\" ? 2 : 1};\n\n @media (max-width: 768px) {\n order: 1;\n }\n`;\n\nconst UpsellBanner = styled.img`\n display: inline-block;\n width: 100%;\n\n @media (max-width: 768px) {\n max-height: 160px;\n width: auto;\n }\n`;\n\nconst UpsellDisclaimer = styled.div`\n font-size: 12px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.18;\n letter-spacing: -0.17px;\n text-align: center;\n color: #888;\n margin-top: 16px;\n`;\n\nconst Error = styled.div`\n display: inline-block;\n color: #c2313a;\n font-size: 12px;\n min-height: 12px;\n line-height: 12px;\n /* font-family: Inter, Roboto; */\n font-weight: bold;\n visibility: ${(props) => (props.hidden ? \"hidden\" : \"visible\")};\n margin-bottom: 10px;\n`;\n\nconst UpsellModalWrapper = styled.div`\n padding: 20px 10px 10px;\n border-radius: 22px;\n box-shadow: 0 25px 60px 0 rgba(0, 0, 0, 0.16);\n background-color: #fbfafe;\n min-height: 562px;\n width: 800px;\n box-sizing: border-box;\n max-height: calc(100vh - 80px);\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n overflow: auto;\n\n @media (max-width: 768px) {\n height: auto;\n width: calc(100vw - 40px);\n background: #fff;\n overflow: auto;\n min-height: 300px;\n\n &:not(.centered) {\n justify-content: flex-start;\n }\n }\n\n @media (max-height: 642px) {\n min-height: calc(100vh - 80px);\n }\n`;\n\nconst MyAccountLink = styled.a`\n display: inline-block;\n font-size: 15px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n text-align: center;\n color: #000;\n text-decoration: underline;\n margin-left: 4px;\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 6px;\n height: 6px;\n border-top: 1px solid currentColor;\n border-right: 1px solid currentColor;\n transform: rotate(45deg);\n margin-left: 5px;\n margin-bottom: 2px;\n }\n\n @media (max-width: 768px) {\n color: #86c600;\n margin-bottom: 20px;\n }\n`;","//@flow\n\nimport React, { useState, useRef, useEffect } from \"react\";\nimport reactStringReplace from \"react-string-replace\";\nimport styled from \"styled-components\";\nimport { sha256 } from \"js-sha256\";\n\nimport {\n __,\n rcookie,\n signToCurrency,\n} from \"../../../lib/utils\";\nimport { SubscriptionUpdate } from \"../../../lib/payments\";\n\nimport {\n getPrice,\n planNames,\n PASS_PLANS_PER_PERIOD,\n gaPeriods,\n} from \"@pcloud/web-utilities/dist/plans/plansInfo\";\n\nimport { CUSTOM_PLAN_ID } from \"@pcloud/web-utilities/dist/plans/constants.plans\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport {\n PlanIDType,\n Userinfo,\n ColorType,\n} from \"../../../lib/types/dataTypes.components\";\nimport { sendCJPageVisitTag, CJ_PLANS_PREFIX } from \"@pcloud/web-utilities/dist/lib/cjAffiliate\";\nimport { get6HData, send6HData } from \"@pcloud/web-utilities/dist/lib/6HAgancy\";\nimport diffs from \"../../../lib/diffs\";\nimport { getPromoParam } from \"@pcloud/web-utilities/dist/lib/ptr\";\nimport { Message, SecondaryActionLink } from \"./common.style\";\n\nimport SuccessIcon from \"../../../svg/success-icon.svg\";\nimport UpsellModalv1 from \"./UpsellModalv1\";\nimport UpsellModalv2 from \"./UpsellModalv2\";\nimport { getGlobalLocationId } from \"@pcloud/web-utilities/dist/api/utils.api\";\n\ntype SuccessViewBoxProps = {\n successMessage: string,\n color: ColorType,\n theme: \"dark\" | \"light\",\n billingAddress: any,\n paymentProvider: string,\n open3DsecureIframe: () => void,\n on3DsecureError: () => void,\n upsellProduct?: PlanIDType,\n billingPeriod?: \"month\" | \"year\" | \"lifetime\",\n userInfo?: Userinfo,\n currency?: \"$\" | \"€\" | \"₤\",\n cart: Array,\n analytics: {\n category: string,\n label: string,\n },\n sfPaymentSourceID: string,\n upsellDiscount?: string,\n passPcloud?: boolean\n};\n\nconst SuccessViewBox = ({\n successMessage = __(\"Your payment has been successful\"),\n color = \"cyan\",\n theme,\n billingAddress,\n upsellProduct,\n billingPeriod,\n paymentProvider,\n userInfo,\n currency,\n open3DsecureIframe,\n on3DsecureError,\n cart,\n analytics,\n sfPaymentSourceID,\n upsellDiscount,\n actionLink,\n actionText,\n actionTextToUpperCase = false,\n upsellProductsInfo,\n upsellProductPrices,\n seenUpsellProducts,\n setSeenUpsellProducts,\n currentUpsellProductID,\n setCurrentUpsellProductID,\n upsellVersion,\n passPcloud = false\n}: SuccessViewBoxProps) => {\n const [paymentLoading, setPaymentLoading] = useState(false);\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [showUpsellModal, setShowUpsellModal] = useState(false);\n const [cjData, setCjData] = useState(null);\n const [countdown, setCountdown] = useState(5);\n const userDiff = useRef(null);\n\n actionText = actionTextToUpperCase ? __(actionText || \"birthday_landing_not_eligible_CTA1\", \"Go to my account\").toUpperCase() : __(actionText || \"birthday_landing_not_eligible_CTA1\", \"Go to my account\");\n\n const changeUpsell = () => {\n for (let index = 0; index < upsellProductsInfo.length; index++) {\n const upsell = upsellProductsInfo[index];\n const { disabled, planId } = upsell;\n\n if (planId && !disabled && seenUpsellProducts.indexOf(planId) === -1) {\n setErrorMessage(\"\");\n setShowUpsellModal(true);\n setCurrentUpsellProductID(planId);\n break;\n };\n\n if (index === upsellProductsInfo.length - 1) {\n setCurrentUpsellProductID(null);\n }\n };\n };\n\n useEffect(() => {\n changeUpsell();\n }, [upsellProductsInfo, seenUpsellProducts]);\n\n useEffect(() => {\n setPaymentLoading(false);\n }, [currentUpsellProductID])\n\n // useEffect(() => {\n // if (showUpsellModal && currentUpsellProductID && upsellProductPrices && upsellProductPrices[currentUpsellProductID]) {\n // if (typeof ga4 == 'function') {\n // const upsellPriceData = upsellProductPrices[currentUpsellProductID] || {};\n // ga4({\n // eventname: \"view_promotion\",\n // ecommerce: {\n // items: [{\n // promotion_name: getPromoParam(\"label\") || analytics.label,\n // creative_slot: \"upsell\",\n // item_name: planNames[currentUpsellProductID] + \" \" + gaPeriods[billingPeriod],\n // item_brand: PASS_PLANS_PER_PERIOD[billingPeriod].includes(currentUpsellProductID) ? \"pCloudPass\" : \"pCloud\",\n // item_id: getPromoParam(\"channelid\"),\n // affiliation: rcookie(\"ref\"),\n // quantity: 1,\n // currency: signToCurrency[currency] || \"USD\",\n // price: upsellPriceData.price,\n // item_variant: plansQuota[currentUpsellProductID]\n // }]\n // }\n // })\n // }\n // }\n // }, [showUpsellModal, currentUpsellProductID, upsellProductPrices])\n\n useEffect(() => {\n if (cjData) {\n sendCJPageVisitTag(cjData);\n }\n }, [cjData]);\n\n useEffect(() => {\n document.getElementsByTagName(\"body\")[0].classList.add(\"successeful-payment\");\n\n // redirect countdown for pPass trial users\n if (passPcloud) {\n const timer = setInterval(() => {\n setCountdown((currentCountdown) => {\n console.log({ currentCountdown })\n\n if (currentCountdown <= 1) {\n window.location.href = actionLink;\n }\n return currentCountdown - 1;\n });\n }, 1000);\n\n return () => clearInterval(timer);\n }\n\n }, []);\n\n const setCJData = () => {\n const newCjData = {};\n const items = [];\n const locationid = rcookie(\"locationid\") || \"0\";\n const sha256Email = sha256 ? sha256(userInfo.email) : \"\";\n\n newCjData.emailHash = sha256Email;\n newCjData.userId = locationid + \"_\" + userInfo.userid;\n\n if (upsellProduct) {\n let totalDiscount = 0;\n\n const planId = CJ_PLANS_PREFIX[upsellProduct] + \"_\" + billingPeriod[0].toUpperCase();\n const currentPrice = getPrice(upsellProduct, billingPeriod, currency);\n let discountValue = 0;\n\n if (upsellPriceData) {\n discountValue = upsellPriceData.oldPrice - upsellPriceData.currentPrice;\n }\n\n items.push({\n itemId: planId,\n quantity: 1,\n unitPrice: currentPrice,\n discount: discountValue\n })\n\n newCjData.cartSubtotal = price;\n newCjData.currency = signToCurrency[currency] || 'USD';\n newCjData.items = items;\n }\n\n setCjData(newCjData);\n }\n\n const closeUpsellModal = () => {\n setShowUpsellModal(false);\n setTimeout(() => {\n setSeenUpsellProducts(seenUpsellProducts.concat(currentUpsellProductID));\n }, 500);\n };\n\n const subscribeForUserDiff = onChange => {\n if (!userInfo) {\n return;\n }\n\n if (userDiff.current) {\n userDiff.current(true);\n }\n\n const { auth } = userInfo;\n\n userDiff.current = diffs.listen(auth, entries => {\n if (entries.length) {\n const modifyUserEvents = entries.filter(({ event, time, userinfo }) => {\n return event === \"modifyuserinfo\" && userinfo;\n });\n if (modifyUserEvents.length) {\n const { userinfo } = modifyUserEvents[modifyUserEvents.length - 1];\n if (onChange) {\n onChange(userinfo);\n }\n }\n }\n });\n };\n\n const waitForAPItoUpdate = (callback) => {\n const onUpdateSuccess = () => {\n if (userDiff.current) {\n userDiff.current();\n }\n\n if (pCloudGlobals && pCloudGlobals.apiMethod) {\n clearTimeout(timeout);\n setTimeout(() => {\n const { auth } = userInfo;\n pCloudGlobals.apiMethod('userinfo', { auth }, (userinfo) => {\n callback({ ...userinfo, auth });\n }, {\n errorCallback: (error) => {\n console.error(error);\n callback(null);\n },\n forceFresh: true\n })\n }, 1500);\n } else {\n callback(null);\n }\n };\n\n subscribeForUserDiff(onUpdateSuccess);\n\n const timeout = setTimeout(() => {\n onUpdateSuccess();\n }, (paymentProvider === \"paypal\" ? 0 : 6000));\n };\n\n const afterPaymentActions = (res) => {\n const transactionID = res.transactionId || res.transactionid || res.id || \"\";\n const { label, category } = analytics;\n const upsellPriceData = upsellProductPrices[currentUpsellProductID] || {};\n const promoParams = {\n label: getPromoParam(\"label\"),\n channelid: getPromoParam(\"channelid\"),\n passcampaign: getPromoParam(\"passcampaign\"),\n };\n \n const analyticsParams = {\n category: \"promo\",\n action: \"purchase\",\n label: promoParams.label || label,\n os: 4,\n };\n\n const analyticsData = {\n revenue: upsellPriceData.price,\n currency: signToCurrency[currency] || \"USD\",\n };\n\n const data6H = get6HData();\n\n if (promoParams.channelid) {\n analyticsData.channelid = promoParams.channelid;\n }\n\n if (promoParams.passcampaign) {\n analyticsData.passcampaign = promoParams.passcampaign;\n }\n\n sendAnalyticsEvent(analyticsParams, analyticsData);\n\n if (data6H && pCloudGlobals.apiMethod) {\n send6HData(pCloudGlobals.apiMethod, data6H);\n }\n\n // if (typeof ga4 !== \"undefined\") {\n // ga4({\n // eventname: \"purchase\",\n // ecommerce: {\n // currency: signToCurrency[currency],\n // value: upsellPriceData.price,\n // transaction_id: transactionID,\n // payment_type: paymentProvider,\n // items: [{\n // promotion_name: getPromoParam(\"label\") || analytics.label,\n // creative_slot: \"upsell\",\n // item_name: planNames[currentUpsellProductID] + \" \" + gaPeriods[billingPeriod],\n // item_brand: PASS_PLANS_PER_PERIOD[billingPeriod].includes(currentUpsellProductID) ? \"pCloudPass\" : \"pCloud\",\n // creative_name: getPromoParam(\"channelid\"),\n // affiliation: rcookie(\"ref\"),\n // quantity: 1,\n // currency: signToCurrency[currency] || \"USD\",\n // price: upsellPriceData.price,\n // item_variant: plansQuota[currentUpsellProductID]\n // }]\n // }\n // })\n // }\n\n const itemsInfo = [\n {\n name: planNames[currentUpsellProductID],\n price: upsellPriceData.price,\n quantity: 1,\n },\n ];\n\n gtagAds('event', 'conversion', {\n 'send_to': 'AW-946159937/3Uu5CKv9wo0YEMGClcMD',\n 'value': upsellPriceData.price,\n 'currency': signToCurrency[currency] || \"USD\",\n 'transaction_id': transactionID,\n items: itemsInfo\n });\n\n if (typeof ttq !== \"undefined\" && ttq.track && typeof ttq.track == \"function\") {\n ttq.track('CompletePayment', {\n content_id: currentUpsellProductID,\n content_type: 'product',\n content_name: planNames[currentUpsellProductID],\n quantity: 1,\n price: upsellPriceData.price,\n value: upsellPriceData.price,\n currency: signToCurrency[currency] || \"USD\"\n })\n }\n\n if (typeof fbq == \"function\") {\n let sha256UserID = sha256(user.userid.toString());\n\n if (sha256UserID.length) {\n sha256UserID += `-${getGlobalLocationId()}`;\n }\n\n fbq(\"track\", billingPeriod === \"lifetime\" ? \"Purchase\" : \"Subscribe\", {\n value: upsellPriceData.price,\n currency: signToCurrency[currency] || \"USD\",\n });\n }\n window.uetq = window.uetq || [];\n window.uetq.push('event', 'purchase', { 'revenue_value': upsellPriceData.price, currency: (signToCurrency[currency] || 'USD') });\n\n waitForAPItoUpdate((userInfo) => {\n setSeenUpsellProducts(seenUpsellProducts.concat(currentUpsellProductID));\n // setCurrentUpsellProductID(null);\n // setPaymentLoading(false);\n\n if (sessionStorage.pCloud) {\n sessionStorage.removeItem(\"pCloud\");\n };\n });\n };\n\n const handleSubmit = (event: SyntheticInputEvent) => {\n const upsellPriceData = upsellProductPrices[currentUpsellProductID] || {};\n event.preventDefault();\n setErrorMessage(\"\");\n\n if (paymentLoading) {\n return;\n };\n\n // if (typeof ga4 == 'function') {\n // ga4({\n // eventname: \"select_promotion\",\n // ecommerce: {\n // items: [{\n // promotion_name: getPromoParam(\"label\") || analytics.label,\n // creative_slot: \"upsell\",\n // item_name: planNames[currentUpsellProductID] + \" \" + gaPeriods[billingPeriod],\n // item_brand: PASS_PLANS_PER_PERIOD[billingPeriod].includes(currentUpsellProductID) ? \"pCloudPass\" : \"pCloud\",\n // item_id: getPromoParam(\"channelid\"),\n // affiliation: rcookie(\"ref\"),\n // quantity: 1,\n // currency: signToCurrency[currency] || \"USD\",\n // price: upsellPriceData.price,\n // item_variant: plansQuota[currentUpsellProductID]\n // }]\n // }\n // })\n // }\n\n const products = billingPeriod === \"lifetime\" ? [typeof currentUpsellProductID === \"string\" && currentUpsellProductID.indexOf(CUSTOM_PLAN_ID) !== -1 ? CUSTOM_PLAN_ID : currentUpsellProductID] : [...cart, currentUpsellProductID];\n const params = {\n provider: paymentProvider,\n period: billingPeriod,\n userAuth: userInfo.auth,\n products: products,\n billingAddress: billingAddress,\n storage: upsellPriceData.storage || 0,\n traffic: 0,\n providerSourceId: sfPaymentSourceID,\n toggleLoader: togglePaymentLoader,\n showPaymentError: setErrorMessage,\n showBadInput: () => { },\n open3DsecureIframe,\n on3DsecureError,\n };\n\n if (upsellPriceData.discountCode && upsellPriceData.validdiscountcode) {\n params.discountcode = upsellPriceData.discountCode;\n }\n\n const payments = new SubscriptionUpdate(params);\n\n if (paymentProvider === \"paypal\") {\n payments.createBraintreePayment({\n refresh: false,\n callback: afterPaymentActions,\n });\n } else if (paymentProvider === \"safecharge\") {\n payments.initSafechargePayment({\n refresh: false,\n callback: afterPaymentActions,\n });\n } else if (paymentProvider === \"stripe\") {\n payments.updateStripeSubscription({\n refresh: false,\n callback: afterPaymentActions,\n });\n }\n };\n\n const togglePaymentLoader = (action: \"show\" | \"hide\", type) => {\n if (action === \"hide\" && type && type === \"success\") {\n return;\n }\n\n setPaymentLoading(action === \"show\");\n };\n\n const getRedirectCountDownMessage = () => {\n let message = __(\"ppass_redirect_msg\", \"You will be automatically redirected in %seconds% seconds\");\n message = reactStringReplace(message, /(%seconds%)/g, (match, i) => (\n {countdown}\n ));\n\n return message;\n }\n\n\n const renderUpsell = () => {\n const currentUpsellIndex = upsellProductsInfo.findIndex(({ planId }) => currentUpsellProductID === planId);\n const currentUpsellProductData = currentUpsellIndex !== -1 && upsellProductsInfo[currentUpsellIndex];\n\n if (upsellVersion === 1 || typeof upsellVersion === \"undefined\") {\n return (\n \n )\n } else if (upsellVersion === 2) {\n return (\n \n )\n }\n }\n\n return (\n \n \n \n {successMessage}\n \n {actionText}\n \n {passPcloud &&\n \n {getRedirectCountDownMessage()}\n \n }\n \n {renderUpsell()}\n \n );\n};\n\nexport default SuccessViewBox;\n\nconst Wrapper = styled.div`\n /* font-family: Inter, Roboto; */\n position: relative;\n width: 100%;\n box-sizing: border-box;\n padding: 40px 40px 46px 40px;\n box-shadow: 3.8px 5.9px 10px 0 rgba(0, 0, 0, 0.05);\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#fafafa\";\n }\n }};\n min-height: 677px;\n\n //fix for IE\n height: 676px;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n\n @media (max-width: 768px) {\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n min-height: 0px;\n border-radius: 0px;\n height: auto;\n }\n`;\n\nconst RedirectMessage = styled.div`\n font-size: 16px;\n text-align: center;\n color: #888;\n font-family: 'Roboto';\n`\n","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgWarning(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 50.7 45.3\"\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M5.3 45.3h40c4.1 0 6.6-4.4 4.6-8l-20-34.7c-2-3.5-7.1-3.5-9.2 0L.7 37.3c-2 3.6.5 8 4.6 8zm20-18.6c-1.5 0-2.7-1.2-2.7-2.7v-5.3c0-1.5 1.2-2.7 2.7-2.7s2.7 1.2 2.7 2.7V24c0 1.5-1.2 2.7-2.7 2.7zM28 37.3h-5.3V32H28v5.3z\",\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n fill: \"#ff8000\"\n })));\n}\nexport default SvgWarning;","//@flow\n\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nimport { __ } from \"../../../lib/utils\";\nimport { planBoxTexts, planBoxPeriodTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport { ColorType, PlanIDType } from \"../../../lib/types/dataTypes.components\";\nimport WarningIcon from \"../../../../new_site/images/p_promo/warning.svg\";\n\nimport { BoxHeader, BoxDiscount, BoxPrices, BoxFeature } from \"../../PlansBox\";\n\ntype PaymentDisruptionViewProps = {\n planId: PlanIDType,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme?: \"light\" | \"dark\",\n discountPercent?: number,\n showDiscountCorner?: boolean,\n getTotalStorage: (storage: number) => string,\n getTotalTraffic: (storage: number) => string,\n price: number,\n oldPrice: number,\n currency: string,\n periodText: string,\n discountPeriod: number\n};\n\nconst PaymentDisruptionViewBox = ({\n planId,\n billingPeriod,\n color,\n theme,\n discountPercent,\n showDiscountCorner,\n price,\n oldPrice,\n currency,\n periodText,\n discountPeriod,\n showCurrencyCode = true,\n getTotalStorage: getTotalStorageForUser,\n getTotalTraffic: getTotalTrafficForUser\n}: PaymentDisruptionViewProps) => {\n const texts = planBoxTexts[planId.join(\"+\")] || planBoxTexts[planId];\n const { title: titleObj, features } = texts;\n const title = titleObj[billingPeriod] || titleObj.default;\n const renderFeatures = () => {\n const featuresToRender = features[billingPeriod] || features.default;\n return featuresToRender.map(({ feature, tooltip }, index) => {\n if (feature.indexOf(\"%amount%\") !== -1) {\n feature = feature.replace(\"%amount%\", getTotalStorageForUser(planId[0]));\n }\n\n if (feature.indexOf(\"%traffic_amount%\") !== -1) {\n feature = feature.replace(\"%traffic_amount%\", getTotalTrafficForUser(planId[0]));\n }\n return (\n \n );\n });\n };\n\n return (\n \n {discountPercent && showDiscountCorner ? (\n \n ) : null}\n\n \n\n \n\n \n \n

{__(\"payment_disruption\")}

\n \n\n {renderFeatures()}\n \n );\n};\n\nexport default PaymentDisruptionViewBox;\n\nconst Wrapper = styled.div`\n /* font-family: Inter, Roboto; */\n position: relative;\n width: 100%;\n box-sizing: border-box;\n padding: 36px 40px 36px 40px;\n border-radius: 10px;\n box-shadow: 3.8px 5.9px 10px 0 rgba(0, 0, 0, 0.05);\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n overflow: hidden;\n min-height: 677px;\n\n @media (max-width: 768px) {\n padding: 25px 20px;\n background-color: ${({ theme }) => {\n if (theme === \"dark\") {\n return \"#0d0e0f\";\n } else {\n return \"#ffffff\";\n }\n }};\n min-height: 0px;\n border-radius: 0px;\n }\n\n .tooltip {\n padding: 15px 20px;\n max-width: 250px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n text-align: center;\n }\n`;\n\nconst PaymentMessageForm = styled.div`\n padding: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n flex-direction: column;\n\tline-height: 20px;\n\tpadding: 20px;\n\tfont-size: 14px;\n background: #fffbdd;\n border: 1px solid #ede9cd;\n\n svg {\n margin-bottom: 20px;\n\n @media (max-width: 768px) {\n margin-bottom: 15px;\n }\n }\n\n @media (max-width: 768px) {\n font-size: 15px;\n font-weight: bold;\n }\n`;\n\nconst FeaturesWrapper = styled.div`\n margin-top: 39px;\n @media (max-width: 768px) {\n display: none;\n }\n`;","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgErrorIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 64,\n height: 63.999\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#f73c3c\",\n d: \"M19.544 61.484a31.9 31.9 0 01-10.171-6.858 31.857 31.857 0 01-6.858-10.172A31.794 31.794 0 010 32a31.806 31.806 0 012.516-12.457 31.875 31.875 0 016.858-10.17 31.855 31.855 0 0110.171-6.858A31.785 31.785 0 0132 0a31.785 31.785 0 0112.456 2.516 31.839 31.839 0 0110.171 6.858 31.879 31.879 0 016.859 10.17A31.8 31.8 0 0164 32a31.792 31.792 0 01-2.514 12.455 31.9 31.9 0 01-6.859 10.172 31.887 31.887 0 01-10.171 6.858A31.815 31.815 0 0132 64a31.814 31.814 0 01-12.456-2.516zM21.49 7.121a26.911 26.911 0 00-8.582 5.786 26.891 26.891 0 00-5.786 8.582A26.822 26.822 0 005 32a26.822 26.822 0 002.123 10.51 26.891 26.891 0 005.786 8.582 26.911 26.911 0 008.582 5.786A26.824 26.824 0 0032 59a26.826 26.826 0 0010.511-2.122 26.911 26.911 0 008.582-5.786 26.915 26.915 0 005.786-8.582A26.821 26.821 0 0059 32a26.82 26.82 0 00-2.122-10.51 26.915 26.915 0 00-5.786-8.582 26.911 26.911 0 00-8.582-5.786A26.853 26.853 0 0032 5a26.85 26.85 0 00-10.509 2.121zM30 44.5a2.5 2.5 0 012.5-2.5 2.5 2.5 0 012.5 2.5 2.5 2.5 0 01-2.5 2.5 2.5 2.5 0 01-2.5-2.5zm0-8v-17a2.5 2.5 0 012.5-2.5 2.5 2.5 0 012.5 2.5v17a2.5 2.5 0 01-2.5 2.5 2.5 2.5 0 01-2.5-2.5z\"\n })));\n}\nexport default SvgErrorIcon;","//@flow\n\nimport React, { useState, useEffect, useLayoutEffect, useRef } from \"react\";\nimport styled from \"styled-components\";\nimport { CSSTransition } from \"react-transition-group\";\n\nimport {\n __,\n currencyMap,\n rcookie,\n hrefSearch,\n getCurrency,\n signToCurrency,\n} from \"../../lib/utils\";\nimport { findIndex } from \"@pcloud/web-utilities/dist/lib/utils\";\nimport { getPromoParam, sendAnalyticsEvent } from \"@pcloud/web-utilities/dist/lib/ptr\";\nimport {\n underPriceTexts,\n getPrice,\n planNames,\n gaPeriods,\n PASS_PLANS_PER_PERIOD,\n plansQuota,\n} from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport {\n getCurrentStorageCount,\n getTotalTraffic,\n getTotalStorage\n} from \"@pcloud/web-utilities/dist/plans/utils.plans\";\nimport diffs from \"../../lib/diffs\";\n\nimport PaymentViewBox from \"./views/PaymentViewBox\";\nimport PlanViewBox from \"./views/PlanViewBox\";\nimport LoginViewBox from \"./views/LoginViewBox\";\nimport DisabledViewBox from \"./views/DisabledViewBox\";\nimport SuccessViewBox from \"./views/SuccessViewBox\";\nimport PaymentDisruptionViewBox from \"./views/PaymentDisruptionViewBox\";\nimport ToggleTabs from \"../ToggleTabs\";\nimport SpinContainer from \"../SpinContainer\";\nimport LoadingIcon from \"../../svg/loading-icon.svg\";\nimport ErrorIcon from \"../../svg/error-icon.svg\";\n\nimport { ColorType, PlanIDType, Userinfo } from \"../../lib/types/dataTypes.components\";\nimport usePrevious from \"@pcloud/web-utilities/dist/hooks/usePrevious\";\n\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport {\n PASS_FAMILY_PLAN_ID,\n PASS_PREMIUM_PLAN_ID\n} from \"@pcloud/web-utilities/dist/plans/constants.plans\";\nimport {\n PAYMENT_DISRUPTION_COUNTRIES\n} from \"@pcloud/web-utilities/dist/payments/constants.payments\";\nimport { sendCJPageVisitTag, CJ_PLANS_PREFIX } from \"@pcloud/web-utilities/dist/lib/cjAffiliate\";\n\ntype TabType = {\n tabId: string | number,\n tabValue: Array,\n tabTitle: string,\n tabType: \"plan\" | \"period\"\n};\n\ntype PaymentPlanWrapperProps = {\n planIds: Array,\n billingPeriod: \"month\" | \"year\" | \"lifetime\",\n color: ColorType,\n theme: \"light\" | \"dark\",\n country: string,\n logoutCallback: () => void,\n onAuthAction: (data: Userinfo) => void,\n open3DsecureIframe: () => void,\n on3DsecureError: () => void,\n timer: {\n start: number,\n end: number,\n encreasingPriceValue: number,\n discountPreset: string,\n encreasingPriceInterval?: number,\n theme?: string,\n initialDiscount?: string\n },\n LoginOrSignupComponent: any,\n analytics: {\n category: string,\n label: string\n },\n discount?: string,\n currencyDiscounts?: any,\n upsellProduct?: PlanIDType,\n upsellProducts?: Array,\n customUpsellDiscount?: string,\n user?: Userinfo,\n tabs?: {\n color: ColorType,\n tabs: Array,\n activeTab: string | number,\n theme?: \"light\" | \"dark\",\n title?: string,\n isAlwaysVisible?: boolean\n },\n openPrivecyModal?: () => void,\n canAddStorage?: boolean,\n limitedPeriodDiscount?: string,\n discountPeriod?: number,\n freeUsersOnly?: boolean,\n showPaymentOptions?: boolean,\n onPriceGet?: (price) => void,\n defaultLoginView?: \"login\" | \"register\",\n handleExternalLogin?: boolean,\n passPcloud?: boolean,\n showPlanDescriptionText?: boolean,\n showSocialProof?: boolean,\n showSocialProofLanding?: string,\n showSocialProofOnlyMobile?: boolean, \n template: \"default\" | \"price-on-the-left\" | \"price-on-the-left-2\",\n discountValue: string | Number,\n discountType: \"percent\" | \"fixedamount\" | \"text\",\n discountLabelBackground?: string,\n discountLabelBackgroundMobile?: string,\n discountLabelBackgroundRetina?: string,\n discountLabelWidth?: string,\n discountLabelHeight?: string,\n discountLabelPositionLeft?: string\n};\n\nconst PaymentPlanWrapper = ({\n planIds,\n billingPeriod,\n color,\n theme,\n country = \"fr\",\n logoutCallback,\n onAuthAction,\n open3DsecureIframe = () => { },\n on3DsecureError = () => { },\n timer = {},\n LoginOrSignupComponent,\n discount,\n currencyDiscounts,\n user,\n upsellProducts = [],\n analytics,\n tabs,\n openPrivecyModal,\n canAddStorage = true,\n limitedPeriodDiscount,\n discountPeriod,\n freeUsersOnly,\n showPaymentOptions,\n onPriceGet,\n customSuccessMessage,\n successActionLink,\n successActionText,\n successActionTextToUpperCase = false,\n secondaryDisableText,\n showCurrencyCode = true,\n flow = {\n steps: [\"plan\", \"login\", \"payment\", \"success\"],\n actions: {\n plan: null,\n login: null,\n payment: null,\n success: null\n }\n },\n defaultLoginView,\n handleExternalLogin = false,\n passPcloud = false,\n showPlanDescriptionText = false,\n showSocialProof = false,\n showSocialProofLanding = \"\",\n showSocialProofOnlyMobile = false,\n template = \"default\",\n discountValue,\n discountType,\n discountLabelBackground,\n discountLabelBackgroundMobile,\n discountLabelBackgroundRetina,\n discountLabelWidth,\n discountLabelHeight,\n discountLabelPositionLeft,\n upsellVersion,\n abTest = false\n}: PaymentPlanWrapperProps) => {\n const [view, setView] = useState(\"plan\");\n const [currentPlanIds, setCurrentPlanIds] = useState(planIds);\n const [selectedTab, setSelectedTab] = useState((tabs && tabs.activeTab) || null);\n const [period, setPeriod] = useState(billingPeriod);\n const [price, setPrice] = useState(0);\n const [oldPrice, setOldPrice] = useState(0);\n const [currency, setCurrency] = useState(null);\n const [userInfo, setUserInfo] = useState(user || null);\n const [discountCode, setDiscountCode] = useState(false);\n const [discountPercent, setDiscountPercent] = useState(0);\n const [disabledReason, setDisabledReason] = useState(\"\");\n const [paymentProvider, setPaymentProvider] = useState(\"safecharge\");\n const [sfPaymentSourceID, setsfPaymentSourceID] = useState(null);\n const [cart, setCart] = useState(null);\n const [cjData, setCjData] = useState(null);\n const [paymentInitiated, setPaymentInitiated] = useState(false);\n const [tabsSetting, setTabsSetting] = useState(tabs);\n const [priceLoading, setPriceLoading] = useState(true);\n const [priceLoadingError, setPriceLoadingError] = useState(\"\");\n const [tabsSwitched, setTabsSwitched] = useState(false);\n const [plans, setPlans] = useState({});\n const [successMessage, setSuccessMessage] = useState(customSuccessMessage || \"Your payment has been successful\");\n const [upsellProductsInfo, setUpsellProductsInfo] = useState([]);\n const [upsellProductPrices, setUpsellProductPrices] = useState({});\n const [seenUpsellProducts, setSeenUpsellProducts] = useState([]);\n const [currentUpsellProductID, setCurrentUpsellProductID] = useState(null);\n const shouldStartFreeTrial = useRef({ value: false });\n\n const [timerExp, setTimerExp] = useState(null);\n const [passedHours, setPassedHours] = useState(null);\n\n const prevUserInfo = usePrevious(userInfo);\n\n const { encreasingPriceValue, discountPreset } = timer;\n const timerInterval = useRef(null);\n const getplansXHR = useRef(null);\n const increasingPrice = encreasingPriceValue && discountPreset;\n\n const promoParams = {\n label: getPromoParam(\"label\"),\n channelid: getPromoParam(\"channelid\"),\n passcampaign: getPromoParam(\"passcampaign\"),\n };\n\n const loginCallback = (newUser) => {\n if (newUser) {\n if (!passPcloud || (passPcloud && (rcookie(\"passtoken\") || rcookie(\"restrictedPassToken\")))) {\n setUserInfo(newUser);\n if (shouldStartFreeTrial.current.value) {\n startTrial(newUser.auth);\n return;\n }\n }\n\n if (handleExternalLogin) {\n setView(\"payment\");\n }\n }\n }\n\n const registerCallback = (newUser) => {\n if (newUser) {\n if (!passPcloud || (passPcloud && (rcookie(\"passtoken\") || rcookie(\"restrictedPassToken\")))) {\n setUserInfo(newUser);\n if (shouldStartFreeTrial.current.value) {\n startTrial(newUser.auth);\n return;\n }\n }\n if (handleExternalLogin) {\n setView(\"payment\");\n }/* else {\n setView(\"plan\");\n }*/\n }\n }\n\n const onUserInfoChangeAfterPayment = (userInfo) => {\n if (!userInfo || !upsellProducts || upsellProducts.length === 0) {\n showSuccessMessage();\n return null;\n }\n\n const newUpsellProductsInfo = upsellProducts.map(upsell => {\n const { planId, planIdAccordingPurchase } = upsell;\n let newPlanId = planId;\n if (!planId) {\n if (planIdAccordingPurchase && planIdAccordingPurchase[currentPlanIds.join(\"+\")]) {\n newPlanId = planIdAccordingPurchase[currentPlanIds.join(\"+\")];\n }\n }\n\n return { ...upsell, planId: newPlanId }\n });\n\n const getUpsellPlansApiCalls = [];\n const newUpsellProductPrices = {};\n\n newUpsellProductsInfo.forEach(upsell => {\n const { planId, upsellDiscount } = upsell;\n\n if (planId) {\n const params = {\n products: planId,\n period: period,\n auth: userInfo.auth\n };\n\n if (upsellDiscount) {\n params.discountcode = upsellDiscount;\n };\n\n const onSuccessCallback = (plansData, resolve) => {\n const product = plansData.products[period] && plansData.products[period].find((product) => product.productid == planId);\n \n if (product) {\n const { pricecents, originalpricecents, validdiscountcode, canbuy, canbuydisabledreason = \"plan_upgrade_restrictions\"} = product;\n \n newUpsellProductPrices[planId] = {\n price: pricecents / 100,\n originalPrice: originalpricecents / 100,\n validdiscountcode: validdiscountcode,\n discountCode: upsellDiscount,\n };\n \n upsell.disabled = !canbuy;\n upsell.disabledReason = !canbuy && canbuydisabledreason;\n }\n\n resolve(plansData);\n };\n\n const promise = new Promise((resolve, reject) => {\n getPlanPrice(\n params,\n (data) => onSuccessCallback(data, resolve),\n reject\n );\n });\n\n getUpsellPlansApiCalls.push(promise);\n }\n });\n\n Promise.all(getUpsellPlansApiCalls)\n .then(values => {\n setUpsellProductPrices(newUpsellProductPrices);\n setUpsellProductsInfo(newUpsellProductsInfo);\n })\n .catch(error => {\n console.log(\"ERROR on getting upsell plans!\");\n }).finally(() => {\n showSuccessMessage();\n });\n };\n\n useEffect(() => {\n login_callback = login_callback ? [].concat(login_callback) : [];\n register_callback = register_callback ? [].concat(register_callback) : [];\n logout_callback = logout_callback ? [].concat(logout_callback) : [];\n\n const logoutCallback = () => {\n handleUIChangesOnLogout();\n }\n \n logout_callback.push(logoutCallback);\n login_callback.push(loginCallback);\n register_callback.push(registerCallback);\n\n if (timer) {\n initTimer();\n }\n\n return () => {\n diffs.stop();\n clearInterval(timerInterval.current);\n };\n }, []);\n\n useEffect(() => {\n // Await plans data to be ready.\n if (\n (\n !plans || !period || !plans[period]\n ) &&\n billingPeriod !== 'trial'\n ) {\n return;\n }\n\n if (view === \"plan\" || view === \"login\" || view === \"disabled\") {\n if (checkUserCanBuyPlans(userInfo)) {\n if (!handleExternalLogin && userInfo && view === \"login\") {\n setView(\"payment\");\n }\n\n if (view === \"disabled\") {\n setView(\"plan\");\n }\n }\n }\n }, [plans, period]);\n\n useEffect(() => {\n if (userInfo) {\n if (typeof _learnq !== 'undefined' && (rcookie('ref') == 56215 || hrefSearch(\"ref\") == 56215)) {\n _learnq.push(['identify', {\n '$email': userInfo.email,\n '$id': userInfo.userid\n }])\n }\n } else {\n resetTabs();\n }\n }, [userInfo]);\n\n useEffect(() => {\n if (!increasingPrice || passedHours === null || !timerExp) {\n return;\n }\n\n const { discountPreset, initialDiscount } = timer;\n const discountPresetPerProduct = typeof discountPreset === \"object\" ? discountPreset[currentPlanIds.join(\"+\")] : discountPreset;\n const initialDiscountPerProduct = typeof initialDiscount === \"object\" ? initialDiscount[currentPlanIds.join(\"+\")] : initialDiscount;\n const newDiscountCode = passedHours ? discountPresetPerProduct + passedHours : initialDiscountPerProduct;\n\n initPlansData(newDiscountCode);\n }, [passedHours, timerExp]); //[passedHours, timerExp]\n\n useEffect(() => {\n setDiscountPercent(Math.round((1 - price / oldPrice) * 100));\n\n if (onPriceGet) {\n onPriceGet(price, oldPrice, currency)\n }\n }, [price, oldPrice, currency]); //[price, oldPrice, currency]\n\n const biggestPaymenPlanWrapperViewHeight = useRef(0);\n\n useEffect(() => {\n if (view === \"payment\") {\n setUserVisit();\n initCJData();\n\n if (typeof fbq == \"function\") {\n fbq(\"track\", \"InitiateCheckout\", {});\n }\n window.uetq = window.uetq || [];\n window.uetq.push('event', 'InitiateCheckout');\n\n if (typeof ttq !== \"undefined\" && ttq.track && typeof ttq.track == \"function\") {\n ttq.track('InitiateCheckout');\n }\n // pintrk('track', 'custom', {eventName: \"InitiateCheckout\"});\n\n if (typeof pintrk === \"function\") {\n pintrk('track', 'addtocart');\n }\n } \n }, [view]); //[view]\n\n // useEffect(() => {\n // if (view === \"plan\" && price && currentPlanIds && period && currency) {\n // const ga4Items = [{\n // item_name: currentPlanIds.map(planID => planNames[planID]).join(\" + \") + \" \" + gaPeriods[period],\n // item_brand: currentPlanIds.some(planID => PASS_PLANS_PER_PERIOD[period].includes(planID)) ? \"pCloudPass\" : \"pCloud\",\n // item_category: gaPeriods[period],\n // item_variant: plansQuota[currentPlanIds.find(planID => plansQuota[planID])] || \"\",\n // affiliation: rcookie(\"ref\"),\n // coupon: discountCode || \"\",\n // index: 0,\n // price: price,\n // currency: signToCurrency[currency],\n // quantity: 1\n // }];\n // console.log(\"ga4Items\", ga4Items);\n // ga4({\n // eventname: \"view_item\",\n // items: ga4Items\n // })\n // }\n // }, [price, currency]);\n\n useLayoutEffect(() => {\n // Keep payment wrapper height equal on each steps for viewport > 768px.\n // Check if height is greater than CSS min-height and if so use it as new min-height value.\n if (typeof $ !== 'undefined') {\n // Desktop only\n if ($('.view-box-wrapper').height() > parseInt($('.view-box-wrapper').css('min-height'))) {\n biggestPaymenPlanWrapperViewHeight.current = $('.view-box-wrapper').height();\n }\n \n if (biggestPaymenPlanWrapperViewHeight.current > 0) {\n // TODO remove this need to set min-height when visiting each step by moving the min-height to be only to the parent container.\n let style = document.getElementById('payment-plan-wrapper-component-custom-styles');\n if (!style) {\n style = document.createElement('style');\n style.id = \"payment-plan-wrapper-component-custom-styles\";\n document.head.appendChild(style);\n }\n // Desktop only\n style.innerHTML = `@media (min-width: 769px) {\n .product_box_wrap, .view-box-wrapper, .loginview_wrapper, .planview_wrapper, .paymentview_wrapper, .disabledview_wrapper, .successview_wrapper {\n min-height: ${biggestPaymenPlanWrapperViewHeight.current}px !important;\n }\n }`;\n }\n }\n // \n }, [view]); //[view]\n\n useEffect(() => {\n const { discountPreset, initialDiscount } = timer;\n const discountPresetPerProduct = typeof discountPreset === \"object\" ? discountPreset[currentPlanIds.join(\"+\")] : discountPreset;\n const initialDiscountPerProduct = typeof initialDiscount === \"object\" ? initialDiscount[currentPlanIds.join(\"+\")] : initialDiscount;\n const newDiscountCode = passedHours ? discountPresetPerProduct + passedHours : initialDiscountPerProduct;\n\n initPlansData(newDiscountCode);\n }, [currentPlanIds, userInfo, period]);\n\n useEffect(() => {\n if (view === \"payment\" && cjData) {\n sendCJPageVisitTag(cjData);\n }\n }, [cjData]); //[cjData]\n\n const onLoadedPlans = (res, discountCode) => {\n const { currency, products } = res;\n let totalPrice = 0;\n let totalOriginalprice = 0;\n let validdiscountcode = false;\n\n if (products[period] && products[period].length > 0) {\n products[period].forEach((product) => {\n const { pricecents, originalpricecents } = product;\n totalPrice += pricecents;\n totalOriginalprice += discountPeriod ? discountPeriod * originalpricecents : originalpricecents;\n if (product.validdiscountcode) {\n validdiscountcode = true;\n }\n });\n }\n\n totalPrice /= 100;\n totalOriginalprice /= 100;\n\n setDiscountCode(discountCode && validdiscountcode ? discountCode : false);\n setPrice(totalPrice);\n setOldPrice(totalOriginalprice);\n setCurrency(currencyMap[currency]);\n setPriceLoading(false);\n setPlans(products);\n\n getplansXHR.current = null;\n };\n\n const onLoadPlansError = () => {\n setPriceLoading(false);\n setPriceLoadingError(__(\"custom_plan_price_error\"));\n getplansXHR.current = null;\n };\n\n const initCJData = () => {\n const newCjData = {};\n const items = [];\n const locationid = rcookie(\"locationid\") || \"0\";\n const sha256Email = sha256 ? sha256(userInfo.email) : \"\";\n\n newCjData.emailHash = sha256Email;\n newCjData.userId = locationid + \"_\" + userInfo.userid;\n\n let planId = \"\";\n let totalRegularPrice = 0;\n\n currentPlanIds.forEach((planid, index) => {\n planId += CJ_PLANS_PREFIX[planid] + \"_\";\n if (index === currentPlanIds.length - 1) {\n planId += period[0].toUpperCase();\n }\n\n const currentPrice = getPrice(planid, period, currency || '$');\n totalRegularPrice += currentPrice;\n });\n\n items.push({\n itemId: planId,\n quantity: 1,\n unitPrice: totalRegularPrice,\n discount: totalRegularPrice - price\n });\n\n newCjData.cartSubtotal = price;\n newCjData.currency = signToCurrency[currency] || \"USD\";\n newCjData.items = items;\n newCjData.discount = totalRegularPrice - price;\n\n setCjData(newCjData);\n };\n\n const getCurrencyForDiscount = (callback) => {\n if ((userInfo && userInfo.currency) || (currency && Boolean(prevUserInfo) == Boolean(userInfo))) {\n callback((userInfo && userInfo.currency) || currency);\n return;\n }\n\n const getCurrencyParams = {\n callback: callback,\n };\n\n if (userInfo) {\n getCurrencyParams.auth = userInfo.auth;\n }\n\n getCurrency(getCurrencyParams);\n }\n\n const initPlansData = (newDiscount) => {\n setPriceLoading(true);\n\n if (getplansXHR.current && getplansXHR.current.abort) {\n getplansXHR.current.abort();\n }\n\n if (priceLoadingError) {\n setPriceLoadingError(\"\");\n }\n\n const params = {\n products: currentPlanIds.join(\",\"),\n period: period\n }\n\n if (discount || newDiscount) {\n params.discountcode = newDiscount || (typeof discount === \"object\" && discount[currentPlanIds[0]]) || discount;\n }\n\n if (userInfo) {\n params.auth = userInfo.auth;\n } else {\n params.clearsession = 1;\n }\n\n if (currencyDiscounts) {\n getCurrencyForDiscount((newCurrency) => {\n newCurrency = currencyMap[newCurrency] || newCurrency;\n if (newCurrency) {\n if (currencyDiscounts[newCurrency]) {\n params.discountcode = currencyDiscounts[newCurrency];\n }\n }\n\n getplansXHR.current = getPlanPrice(params, (res) => onLoadedPlans(res, params.discountcode), onLoadPlansError);\n });\n } else {\n getplansXHR.current = getPlanPrice(params, (res) => onLoadedPlans(res, params.discountcode), onLoadPlansError);\n }\n };\n\n const getPlanPrice = (params = {}, successCallback = () => { }, errorCallback = () => { }) => {\n if (params.period && (params.period === \"trial\" || params.period === \"free\")) {\n setDiscountCode(false);\n setPrice(\"0.00\");\n setOldPrice(0);\n setCurrency(pclCurrency);\n setPriceLoading(false);\n return null;\n }\n\n if (rcookie(\"abtestinitiated\") || rcookie(\"showorigprices\")) {\n params.showorigprices = 1;\n params.label = rcookie(\"origipricelable\") || \"ABTestJan2024\";\n\n if (!rcookie(\"origipricelable\")) {\n setcookie(\"origipricelable\", \"ABTestJan2024\");\n }\n };\n\n return pCloudGlobals.apiMethod(\"billing/getplans\", params, successCallback, {\n errorCallback,\n onXhrError: errorCallback\n });\n };\n\n const handleUIChangesOnLogout = () => {\n diffs.stop();\n setView(\"plan\");\n setUserInfo(null);\n initTimer();\n setUpsellProductsInfo([]);\n setUpsellProductPrices({});\n setSeenUpsellProducts([]);\n setCurrentUpsellProductID(null);\n setDisabledReason(null);\n }\n\n const handleLogout = () => {\n handleUIChangesOnLogout();\n logoutCallback(() => { }, false, true);\n };\n\n const setUserVisit = () => {\n const params = {\n auth: userInfo.auth,\n products: currentPlanIds.join(\",\"),\n period: period,\n storage: getCurrentStorageCount(userInfo)\n };\n\n if (discountCode) {\n params.discountcode = discountCode;\n }\n\n pCloudGlobals.apiMethod(\"setuservisit\", params, () => { }, {});\n };\n\n const handleLogin = user => {\n onAuthAction(user, {\n promotion_name: analytics && analytics.label\n });\n\n setUserInfo(user.userinfo);\n };\n\n const startTrial = (auth) => {\n call.apiCall('passmanager/starttrial', { auth: auth },\n (res) => {\n showSuccessMessage();\n },\n (err) => {}\n )\n }\n\n const handleStartTrial = () => {\n if (userInfo) {\n startTrial(userInfo.auth);\n }\n }\n\n const handleGetPlan = (planId, billingPeriod) => {\n const { category, label } = analytics;\n\n const analyticsParams = {\n category: category + \" - buy button\",\n action: \"click\",\n label: promoParams.label || label,\n os: 4\n };\n const analyticsData = {};\n\n if (userInfo && userInfo.auth) {\n analyticsParams.auth = userInfo.auth;\n };\n\n if (promoParams.channelid) {\n analyticsData.channelid = promoParams.channelid;\n };\n\n if (promoParams.passcampaign) {\n analyticsData.passcampaign = promoParams.passcampaign;\n };\n\n if (flow.actions[view]) {\n flow.actions[view]({\n period: period,\n currentPlanIds: currentPlanIds,\n discountCode: discountCode\n });\n } else {\n if (userInfo) {\n if (billingPeriod === \"trial\") {\n handleStartTrial();\n } else {\n setView(\"payment\");\n }\n } else {\n setView(\"login\");\n if (billingPeriod === \"trial\") {\n shouldStartFreeTrial.current.value = true;\n }\n }\n }\n\n clearInterval(timerInterval.current);\n sendAnalyticsEvent(analyticsParams, analyticsData);\n\n // if (typeof ga4 == 'function') {\n // ga4({\n // eventname: \"select_promotion\",\n // ecommerce: {\n // items: [{\n // promotion_name: getPromoParam(\"label\") || analytics.label,\n // creative_slot: \"button\",\n // item_name: planNames[planId] + \" \" + gaPeriods[billingPeriod],\n // item_brand: PASS_PLANS_PER_PERIOD[billingPeriod].includes(planId) ? \"pCloudPass\" : \"pCloud\",\n // item_id: getPromoParam(\"channelid\"),\n // affiliation: rcookie(\"ref\"),\n // quantity: 1,\n // currency: signToCurrency[currency] || \"USD\",\n // price: price,\n // item_variant: plansQuota[planId]\n // }]\n // }\n // })\n // }\n };\n\n const resetTabs = () => {\n if (tabs) {\n setTabsSetting(tabs);\n }\n\n setTabsSwitched(false);\n };\n\n const checkUserCanBuyPlans = (user) => {\n let reason;\n\n if (user) {\n const userPlan = user.plan;\n const isBusiness = user.business;\n const isCrypto = user.cryptosubscription || user.cryptolifetime;\n const hasExtendedHistory = user.efh;\n const hasExtraTraffic = user.additionaltraffic || user.additionaltrafficlifetime;\n\n if (freeUsersOnly && (userPlan || isBusiness || isCrypto || hasExtendedHistory || hasExtraTraffic)) {\n reason = 'promotion_not_available';\n\n const { tabs: tabsCoppy } = { ...tabsSetting };\n const selectedTabIndex =\n tabsCoppy && findIndex(tabsCoppy, ({ tabId }) => tabId === selectedTab);\n\n if (tabsCoppy && selectedTabIndex < tabsCoppy.length - 1 && !tabsSwitched) {\n onTabClick(tabsCoppy[selectedTabIndex + 1].tabId);\n setTabsSwitched(true);\n } else {\n setDisabledReason(reason);\n setView(\"disabled\");\n setTabsSwitched(true);\n }\n } else {\n if (plans[period]) {\n const disabledPlan = plans[period].find((plan) => !plan.canbuy);\n\n if (disabledPlan) {\n reason = disabledPlan.canbuydisabledreason || \"plan_upgrade_restrictions\";\n\n const { tabs: tabsCoppy } = { ...tabsSetting };\n const selectedTabIndex =\n tabsCoppy && findIndex(tabsCoppy, ({ tabId }) => tabId === selectedTab);\n\n if (tabsCoppy && selectedTabIndex < tabsCoppy.length - 1 && !tabsSwitched) {\n onTabClick(tabsCoppy[selectedTabIndex + 1].tabId);\n setTabsSwitched(true);\n\n if (view !== \"plan\") {\n setView(\"plan\");\n }\n } else {\n setDisabledReason(reason);\n setView(\"disabled\");\n setTabsSwitched(true);\n }\n }\n } else if (\n billingPeriod === 'trial' &&\n user.usepassmanagertrial &&\n (\n currentPlanIds.includes(PASS_PREMIUM_PLAN_ID) ||\n currentPlanIds.includes(PASS_FAMILY_PLAN_ID)\n )\n ) {\n reason = 'current_plan';\n setDisabledReason(reason);\n setView(\"disabled\");\n setTabsSwitched(true);\n }\n }\n }\n\n return reason && reason !== \"\" ? false : true;\n };\n\n const initTimer = () => {\n const { start, end, initialDiscountStart } = timer;\n let timeNow = new Date().getTime();\n let newtimerExp = start;\n let newPassedHours = 0;\n const timeBetween = newtimerExp - timeNow;\n\n if (increasingPrice) {\n if (\n (timeNow >= start && timeNow <= end) ||\n (timeNow < start && timeNow >= initialDiscountStart)\n ) {\n if (timeNow > start) {\n newtimerExp =\n // timeNow + 6000\n // newPassedHours = Math.ceil(Math.abs(timeBetween) / (1000 * 60 * 6));\n timeNow + (60 - (timeNow % (1000 * 60 * 60)) / (1000 * 60)) * 60 * 1000;\n newPassedHours = Math.ceil(Math.abs(timeBetween) / (1000 * 60 * 60));\n }\n\n timerInterval.current = setInterval(() => {\n timeNow = new Date().getTime();\n\n if (timeNow >= end) {\n initPlansData();\n clearInterval(timerInterval.current);\n setTimerExp(null);\n setPassedHours(null);\n } else if (timeNow > newtimerExp) {\n newtimerExp += 1000 * 60 * 60;\n // newtimerExp += 6000;\n newPassedHours++;\n setPassedHours(newPassedHours);\n setTimerExp(newtimerExp);\n }\n }, 1000);\n\n setPassedHours(newPassedHours);\n setTimerExp(newtimerExp);\n } else if (timeNow < initialDiscountStart) {\n setPassedHours(newPassedHours);\n } else {\n initPlansData();\n }\n } else {\n if (timeNow >= start && timeNow <= end) {\n setTimerExp(end);\n } else {\n setTimerExp(null);\n }\n }\n };\n\n const showSuccessMessage = () => {\n setView(\"success\");\n };\n\n const onTabClick = clickedTabId => {\n const newTabsSetting = { ...tabsSetting };\n const { tabs } = newTabsSetting;\n const tabInfo = tabs.find(({ tabId }) => tabId === clickedTabId);\n const { tabType } = tabInfo;\n\n if (tabType === \"plan\") {\n setCurrentPlanIds(tabInfo.tabValue);\n } else if (tabType === \"period\") {\n setPeriod(tabInfo.tabValue);\n }\n\n setSelectedTab(clickedTabId);\n };\n\n const renderTabs = () => {\n if (!tabsSetting) {\n return;\n }\n\n let tabsSettingCoppy = { ...tabsSetting };\n const { tabs: tabsCoppy, isAlwaysVisible } = tabsSettingCoppy;\n\n const newTabs = tabsCoppy.map(tab => {\n const disabled = view !== \"plan\" && view !== \"disabled\";\n\n return { ...tab, clickAction: onTabClick, disabled };\n });\n\n tabsSettingCoppy = { ...tabsSettingCoppy, tabs: newTabs };\n\n if (selectedTab) {\n tabsSettingCoppy.activeTab = selectedTab;\n }\n\n let visible = true;\n if (!isAlwaysVisible && view !== \"plan\" && view !== \"disabled\") {\n visible = false;\n }\n\n return (\n \n \n \n );\n };\n\n const renderLoading = () => {\n return (\n \n { }}\n onExited={() => { }}\n appear\n >\n \n \n \n \n \n \n \n );\n };\n\n const renderError = () => {\n return (\n \n { }}\n onExited={() => { }}\n appear\n >\n \n {template === \"price-on-the-left\" || template === \"price-on-the-left-2\" && \n \n \n \n }\n {priceLoadingError}\n \n \n \n );\n };\n\n const renderView = () => {\n const periodText = discountPeriod ? underPriceTexts['discountPeriod'] : underPriceTexts[period];\n let viewToRender = view;\n // viewToRender = 'success';\n \n // Handle payment disruption in template \"price-on-the-left\"\n let forceDisableText = \"\";\n if (view === \"payment\" && flow && flow.steps.indexOf(view) !== -1 && template === \"price-on-the-left\" && PAYMENT_DISRUPTION_COUNTRIES.indexOf(country.toLowerCase()) !== -1) {\n viewToRender = \"disabled\";\n forceDisableText = __(\"payment_disruption\");\n }\n\n if (viewToRender === \"plan\" && flow && flow.steps.indexOf(viewToRender) !== -1) {\n return (\n getTotalStorage(planId, userInfo)}\n getTotalTraffic={planId => getTotalTraffic(planId, userInfo)}\n discountPeriod={discountPeriod}\n showPaymentOptions={showPaymentOptions}\n showCurrencyCode={showCurrencyCode}\n showPlanDescriptionText={showPlanDescriptionText}\n showSocialProof={showSocialProof}\n showSocialProofLanding={showSocialProofLanding}\n showSocialProofOnlyMobile={showSocialProofOnlyMobile}\n template={template}\n discountValue={discountValue}\n discountType={discountType}\n discountLabelBackground={discountLabelBackground}\n discountLabelBackgroundMobile={discountLabelBackgroundMobile}\n discountLabelBackgroundRetina={discountLabelBackgroundRetina}\n discountLabelWidth={discountLabelWidth}\n discountLabelHeight={discountLabelHeight}\n discountLabelPositionLeft={discountLabelPositionLeft}\n />\n );\n } else if (viewToRender === \"login\" && flow && flow.steps.indexOf(viewToRender) !== -1) {\n return (\n \n );\n } else if (viewToRender === \"payment\" && flow && flow.steps.indexOf(viewToRender) !== -1) {\n return (\n // Not used for template: \"price-on-the-left\"\n PAYMENT_DISRUPTION_COUNTRIES.indexOf(country.toLowerCase()) !== -1 ? (\n getTotalStorage(planId, userInfo)}\n getTotalTraffic={planId => getTotalTraffic(planId, userInfo)}\n oldPrice={oldPrice}\n price={price}\n currency={currency}\n periodText={periodText}\n discountPeriod={discountPeriod}\n showCurrencyCode={showCurrencyCode}\n />\n ) : (\n { }}\n userInfo={userInfo}\n oldPrice={oldPrice}\n discountPercent={discountPercent}\n discount={discountCode}\n periodText={periodText}\n open3DsecureIframe={open3DsecureIframe}\n on3DsecureError={on3DsecureError}\n paymentProvider={paymentProvider}\n setPaymentProvider={setPaymentProvider}\n setsfPaymentSourceID={setsfPaymentSourceID}\n cart={cart}\n setCart={setCart}\n renderTabs={renderTabs}\n openPrivecyModal={openPrivecyModal}\n showDiscountCorner={!passedHours}\n cjData={cjData}\n setPaymentInitiated={setPaymentInitiated}\n getCurrentStorageCount={() => getCurrentStorageCount(userInfo)}\n discountPeriod={discountPeriod}\n limitedPeriodDiscount={limitedPeriodDiscount}\n showCurrencyCode={showCurrencyCode}\n onUserInfoChangeAfterPayment={onUserInfoChangeAfterPayment}\n setUserInfo={setUserInfo}\n template={template}\n discountValue={discountValue}\n discountType={discountType}\n discountLabelBackground={discountLabelBackground}\n discountLabelBackgroundMobile={discountLabelBackgroundMobile}\n discountLabelBackgroundRetina={discountLabelBackgroundRetina}\n discountLabelWidth={discountLabelWidth}\n discountLabelHeight={discountLabelHeight}\n discountLabelPositionLeft={discountLabelPositionLeft}\n />\n )\n );\n } else if (viewToRender === \"disabled\") {\n return (\n \n );\n } else if (viewToRender === \"success\" && flow && flow.steps.indexOf(viewToRender) !== -1) {\n return (\n \n );\n }\n };\n\n return (\n \n {template === \"default\" ? renderTabs() : null}\n \n {renderLoading()}\n {renderError()}\n {renderView()}\n \n \n );\n};\n\nexport default PaymentPlanWrapper;\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst ViewWrapper = styled.div`\n position: relative;\n`;\n\nconst TabsWrapper = styled.div`\n opacity: ${({ visible }) => (visible ? \"1\" : \"0\")};\n visibility: ${({ visible }) => (visible ? \"visible\" : \"hidden\")};\n transition: opacity 250ms ease-in-out;\n\n @media (max-width: 768px) {\n display: ${({ visible }) => visible ? \"block\" : \"none\"};\n }\n`;\n\nconst AnimationContainer = styled.div`\n background-color: inherit;\n transition: opacity 400ms ease-in-out;\n\n & > div {\n transition: opacity 400ms ease-in-out;\n }\n\n .fading-enter,\n .fading-appear {\n opacity: 1;\n }\n .fading-exit {\n opacity: 0;\n }\n .fading-enter-active,\n .fading-appear-active {\n opacity: 1;\n }\n .fading-exit-active {\n opacity: 0;\n }\n .fading-enter-active,\n .fading-appear-active,\n .fading-exit-active {\n transition: opacity 400ms ease-in-out;\n }\n`;\n\nconst LoaderWrapper = styled.div`\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0px;\n background: inherit;\n z-index: 101;\n\n .loading-icon_svg__color-path {\n fill: ${({ color }) => (color && COLORS[color] ? (COLORS[color].loadingIconColor ? COLORS[color].loadingIconColor : COLORS[color].mainColor) : \"#17bed0\")};\n }\n`;\n\nconst ErrorMessageWrapper = styled.div`\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0px;\n background: inherit;\n z-index: 101;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n`;\n\nconst ErrorMessage = styled.div`\n display: inline-block;\n width: calc(100% - 80px);\n border: solid 1px #ff7373;\n background-color: #fff4f4;\n padding: 20px;\n /* font-family: Inter, Roboto; */\n font-size: 15px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.2;\n letter-spacing: normal;\n text-align: center;\n color: #ff2626;\n`;\n\nconst ErrorIconWrapper = styled.div`\n svg {\n path {\n fill: ${({ color }) => (color && COLORS[color] ? (COLORS[color].errorIconColor ? COLORS[color].errorIconColor : COLORS[color].mainColor) : \"#17bed0\")};\n }\n }\n`;\n","import React from \"react\";\n\nimport _move from \"../lib/move\";\nimport componentMount from \"../lib/componentMount\"\nimport PaymentPlanWrapper from \"../components/PaymentPlanBox/PaymentPlanWrapper\";\n\nconst _attachList = [\n {\n attach: self,\n list: [\n //components\n \"PaymentPlanWrapper\"\n ]\n }\n]\n\nconst prepComponents = {\n PaymentPlanWrapper: componentMount(props => )\n};\n\n_move(prepComponents, _attachList);","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t `'${s}'`).join(\",\") : \"\"\n\t\t}. Find the full error at: https://bit.ly/3cXEKWf`\n\t)\n}\n","import {\n\tDRAFT_STATE,\n\tDRAFTABLE,\n\thasSet,\n\tObjectish,\n\tDrafted,\n\tAnyObject,\n\tAnyMap,\n\tAnySet,\n\tImmerState,\n\thasMap,\n\tArchtype,\n\tdie\n} from \"../internal\"\n\n/** Returns true if the given value is an Immer draft */\n/*#__PURE__*/\nexport function isDraft(value: any): boolean {\n\treturn !!value && !!value[DRAFT_STATE]\n}\n\n/** Returns true if the given value can be drafted by Immer */\n/*#__PURE__*/\nexport function isDraftable(value: any): boolean {\n\tif (!value) return false\n\treturn (\n\t\tisPlainObject(value) ||\n\t\tArray.isArray(value) ||\n\t\t!!value[DRAFTABLE] ||\n\t\t!!value.constructor?.[DRAFTABLE] ||\n\t\tisMap(value) ||\n\t\tisSet(value)\n\t)\n}\n\nconst objectCtorString = Object.prototype.constructor.toString()\n/*#__PURE__*/\nexport function isPlainObject(value: any): boolean {\n\tif (!value || typeof value !== \"object\") return false\n\tconst proto = Object.getPrototypeOf(value)\n\tif (proto === null) {\n\t\treturn true\n\t}\n\tconst Ctor =\n\t\tObject.hasOwnProperty.call(proto, \"constructor\") && proto.constructor\n\n\tif (Ctor === Object) return true\n\n\treturn (\n\t\ttypeof Ctor == \"function\" &&\n\t\tFunction.toString.call(Ctor) === objectCtorString\n\t)\n}\n\n/** Get the underlying object that is represented by the given draft */\n/*#__PURE__*/\nexport function original(value: T): T | undefined\nexport function original(value: Drafted): any {\n\tif (!isDraft(value)) die(23, value)\n\treturn value[DRAFT_STATE].base_\n}\n\n/*#__PURE__*/\nexport const ownKeys: (target: AnyObject) => PropertyKey[] =\n\ttypeof Reflect !== \"undefined\" && Reflect.ownKeys\n\t\t? Reflect.ownKeys\n\t\t: typeof Object.getOwnPropertySymbols !== \"undefined\"\n\t\t? obj =>\n\t\t\t\tObject.getOwnPropertyNames(obj).concat(\n\t\t\t\t\tObject.getOwnPropertySymbols(obj) as any\n\t\t\t\t)\n\t\t: /* istanbul ignore next */ Object.getOwnPropertyNames\n\nexport const getOwnPropertyDescriptors =\n\tObject.getOwnPropertyDescriptors ||\n\tfunction getOwnPropertyDescriptors(target: any) {\n\t\t// Polyfill needed for Hermes and IE, see https://github.com/facebook/hermes/issues/274\n\t\tconst res: any = {}\n\t\townKeys(target).forEach(key => {\n\t\t\tres[key] = Object.getOwnPropertyDescriptor(target, key)\n\t\t})\n\t\treturn res\n\t}\n\nexport function each(\n\tobj: T,\n\titer: (key: string | number, value: any, source: T) => void,\n\tenumerableOnly?: boolean\n): void\nexport function each(obj: any, iter: any, enumerableOnly = false) {\n\tif (getArchtype(obj) === Archtype.Object) {\n\t\t;(enumerableOnly ? Object.keys : ownKeys)(obj).forEach(key => {\n\t\t\tif (!enumerableOnly || typeof key !== \"symbol\") iter(key, obj[key], obj)\n\t\t})\n\t} else {\n\t\tobj.forEach((entry: any, index: any) => iter(index, entry, obj))\n\t}\n}\n\n/*#__PURE__*/\nexport function getArchtype(thing: any): Archtype {\n\t/* istanbul ignore next */\n\tconst state: undefined | ImmerState = thing[DRAFT_STATE]\n\treturn state\n\t\t? state.type_ > 3\n\t\t\t? state.type_ - 4 // cause Object and Array map back from 4 and 5\n\t\t\t: (state.type_ as any) // others are the same\n\t\t: Array.isArray(thing)\n\t\t? Archtype.Array\n\t\t: isMap(thing)\n\t\t? Archtype.Map\n\t\t: isSet(thing)\n\t\t? Archtype.Set\n\t\t: Archtype.Object\n}\n\n/*#__PURE__*/\nexport function has(thing: any, prop: PropertyKey): boolean {\n\treturn getArchtype(thing) === Archtype.Map\n\t\t? thing.has(prop)\n\t\t: Object.prototype.hasOwnProperty.call(thing, prop)\n}\n\n/*#__PURE__*/\nexport function get(thing: AnyMap | AnyObject, prop: PropertyKey): any {\n\t// @ts-ignore\n\treturn getArchtype(thing) === Archtype.Map ? thing.get(prop) : thing[prop]\n}\n\n/*#__PURE__*/\nexport function set(thing: any, propOrOldValue: PropertyKey, value: any) {\n\tconst t = getArchtype(thing)\n\tif (t === Archtype.Map) thing.set(propOrOldValue, value)\n\telse if (t === Archtype.Set) {\n\t\tthing.add(value)\n\t} else thing[propOrOldValue] = value\n}\n\n/*#__PURE__*/\nexport function is(x: any, y: any): boolean {\n\t// From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js\n\tif (x === y) {\n\t\treturn x !== 0 || 1 / x === 1 / y\n\t} else {\n\t\treturn x !== x && y !== y\n\t}\n}\n\n/*#__PURE__*/\nexport function isMap(target: any): target is AnyMap {\n\treturn hasMap && target instanceof Map\n}\n\n/*#__PURE__*/\nexport function isSet(target: any): target is AnySet {\n\treturn hasSet && target instanceof Set\n}\n/*#__PURE__*/\nexport function latest(state: ImmerState): any {\n\treturn state.copy_ || state.base_\n}\n\n/*#__PURE__*/\nexport function shallowCopy(base: any) {\n\tif (Array.isArray(base)) return Array.prototype.slice.call(base)\n\tconst descriptors = getOwnPropertyDescriptors(base)\n\tdelete descriptors[DRAFT_STATE as any]\n\tlet keys = ownKeys(descriptors)\n\tfor (let i = 0; i < keys.length; i++) {\n\t\tconst key: any = keys[i]\n\t\tconst desc = descriptors[key]\n\t\tif (desc.writable === false) {\n\t\t\tdesc.writable = true\n\t\t\tdesc.configurable = true\n\t\t}\n\t\t// like object.assign, we will read any _own_, get/set accessors. This helps in dealing\n\t\t// with libraries that trap values, like mobx or vue\n\t\t// unlike object.assign, non-enumerables will be copied as well\n\t\tif (desc.get || desc.set)\n\t\t\tdescriptors[key] = {\n\t\t\t\tconfigurable: true,\n\t\t\t\twritable: true, // could live with !!desc.set as well here...\n\t\t\t\tenumerable: desc.enumerable,\n\t\t\t\tvalue: base[key]\n\t\t\t}\n\t}\n\treturn Object.create(Object.getPrototypeOf(base), descriptors)\n}\n\n/**\n * Freezes draftable objects. Returns the original object.\n * By default freezes shallowly, but if the second argument is `true` it will freeze recursively.\n *\n * @param obj\n * @param deep\n */\nexport function freeze(obj: T, deep?: boolean): T\nexport function freeze(obj: any, deep: boolean = false): T {\n\tif (isFrozen(obj) || isDraft(obj) || !isDraftable(obj)) return obj\n\tif (getArchtype(obj) > 1 /* Map or Set */) {\n\t\tobj.set = obj.add = obj.clear = obj.delete = dontMutateFrozenCollections as any\n\t}\n\tObject.freeze(obj)\n\tif (deep) each(obj, (key, value) => freeze(value, true), true)\n\treturn obj\n}\n\nfunction dontMutateFrozenCollections() {\n\tdie(2)\n}\n\nexport function isFrozen(obj: any): boolean {\n\tif (obj == null || typeof obj !== \"object\") return true\n\t// See #600, IE dies on non-objects in Object.isFrozen\n\treturn Object.isFrozen(obj)\n}\n","import {\n\tImmerState,\n\tPatch,\n\tImmerScope,\n\tDrafted,\n\tAnyObject,\n\tImmerBaseState,\n\tAnyMap,\n\tAnySet,\n\tProxyType,\n\tdie\n} from \"../internal\"\n\n/** Plugin utilities */\nconst plugins: {\n\tPatches?: {\n\t\tgeneratePatches_(\n\t\t\tstate: ImmerState,\n\t\t\tbasePath: PatchPath,\n\t\t\tpatches: Patch[],\n\t\t\tinversePatches: Patch[]\n\t\t): void\n\t\tgenerateReplacementPatches_(\n\t\t\tbase: any,\n\t\t\treplacement: any,\n\t\t\tpatches: Patch[],\n\t\t\tinversePatches: Patch[]\n\t\t): void\n\t\tapplyPatches_(draft: T, patches: Patch[]): T\n\t}\n\tES5?: {\n\t\twillFinalizeES5_(scope: ImmerScope, result: any, isReplaced: boolean): void\n\t\tcreateES5Proxy_(\n\t\t\tbase: T,\n\t\t\tparent?: ImmerState\n\t\t): Drafted\n\t\thasChanges_(state: ES5ArrayState | ES5ObjectState): boolean\n\t}\n\tMapSet?: {\n\t\tproxyMap_(target: T, parent?: ImmerState): T\n\t\tproxySet_(target: T, parent?: ImmerState): T\n\t}\n} = {}\n\ntype Plugins = typeof plugins\n\nexport function getPlugin(\n\tpluginKey: K\n): Exclude {\n\tconst plugin = plugins[pluginKey]\n\tif (!plugin) {\n\t\tdie(18, pluginKey)\n\t}\n\t// @ts-ignore\n\treturn plugin\n}\n\nexport function loadPlugin(\n\tpluginKey: K,\n\timplementation: Plugins[K]\n): void {\n\tif (!plugins[pluginKey]) plugins[pluginKey] = implementation\n}\n\n/** ES5 Plugin */\n\ninterface ES5BaseState extends ImmerBaseState {\n\tassigned_: {[key: string]: any}\n\tparent_?: ImmerState\n\trevoked_: boolean\n}\n\nexport interface ES5ObjectState extends ES5BaseState {\n\ttype_: ProxyType.ES5Object\n\tdraft_: Drafted\n\tbase_: AnyObject\n\tcopy_: AnyObject | null\n}\n\nexport interface ES5ArrayState extends ES5BaseState {\n\ttype_: ProxyType.ES5Array\n\tdraft_: Drafted\n\tbase_: any\n\tcopy_: any\n}\n\n/** Map / Set plugin */\n\nexport interface MapState extends ImmerBaseState {\n\ttype_: ProxyType.Map\n\tcopy_: AnyMap | undefined\n\tassigned_: Map | undefined\n\tbase_: AnyMap\n\trevoked_: boolean\n\tdraft_: Drafted\n}\n\nexport interface SetState extends ImmerBaseState {\n\ttype_: ProxyType.Set\n\tcopy_: AnySet | undefined\n\tbase_: AnySet\n\tdrafts_: Map // maps the original value to the draft value in the new set\n\trevoked_: boolean\n\tdraft_: Drafted\n}\n\n/** Patches plugin */\n\nexport type PatchPath = (string | number)[]\n","import {\n\tPatch,\n\tPatchListener,\n\tDrafted,\n\tImmer,\n\tDRAFT_STATE,\n\tImmerState,\n\tProxyType,\n\tgetPlugin\n} from \"../internal\"\nimport {die} from \"../utils/errors\"\n\n/** Each scope represents a `produce` call. */\n\nexport interface ImmerScope {\n\tpatches_?: Patch[]\n\tinversePatches_?: Patch[]\n\tcanAutoFreeze_: boolean\n\tdrafts_: any[]\n\tparent_?: ImmerScope\n\tpatchListener_?: PatchListener\n\timmer_: Immer\n\tunfinalizedDrafts_: number\n}\n\nlet currentScope: ImmerScope | undefined\n\nexport function getCurrentScope() {\n\tif (__DEV__ && !currentScope) die(0)\n\treturn currentScope!\n}\n\nfunction createScope(\n\tparent_: ImmerScope | undefined,\n\timmer_: Immer\n): ImmerScope {\n\treturn {\n\t\tdrafts_: [],\n\t\tparent_,\n\t\timmer_,\n\t\t// Whenever the modified draft contains a draft from another scope, we\n\t\t// need to prevent auto-freezing so the unowned draft can be finalized.\n\t\tcanAutoFreeze_: true,\n\t\tunfinalizedDrafts_: 0\n\t}\n}\n\nexport function usePatchesInScope(\n\tscope: ImmerScope,\n\tpatchListener?: PatchListener\n) {\n\tif (patchListener) {\n\t\tgetPlugin(\"Patches\") // assert we have the plugin\n\t\tscope.patches_ = []\n\t\tscope.inversePatches_ = []\n\t\tscope.patchListener_ = patchListener\n\t}\n}\n\nexport function revokeScope(scope: ImmerScope) {\n\tleaveScope(scope)\n\tscope.drafts_.forEach(revokeDraft)\n\t// @ts-ignore\n\tscope.drafts_ = null\n}\n\nexport function leaveScope(scope: ImmerScope) {\n\tif (scope === currentScope) {\n\t\tcurrentScope = scope.parent_\n\t}\n}\n\nexport function enterScope(immer: Immer) {\n\treturn (currentScope = createScope(currentScope, immer))\n}\n\nfunction revokeDraft(draft: Drafted) {\n\tconst state: ImmerState = draft[DRAFT_STATE]\n\tif (\n\t\tstate.type_ === ProxyType.ProxyObject ||\n\t\tstate.type_ === ProxyType.ProxyArray\n\t)\n\t\tstate.revoke_()\n\telse state.revoked_ = true\n}\n","import {\n\tImmerScope,\n\tDRAFT_STATE,\n\tisDraftable,\n\tNOTHING,\n\tPatchPath,\n\teach,\n\thas,\n\tfreeze,\n\tImmerState,\n\tisDraft,\n\tSetState,\n\tset,\n\tProxyType,\n\tgetPlugin,\n\tdie,\n\trevokeScope,\n\tisFrozen,\n\tshallowCopy\n} from \"../internal\"\n\nexport function processResult(result: any, scope: ImmerScope) {\n\tscope.unfinalizedDrafts_ = scope.drafts_.length\n\tconst baseDraft = scope.drafts_![0]\n\tconst isReplaced = result !== undefined && result !== baseDraft\n\tif (!scope.immer_.useProxies_)\n\t\tgetPlugin(\"ES5\").willFinalizeES5_(scope, result, isReplaced)\n\tif (isReplaced) {\n\t\tif (baseDraft[DRAFT_STATE].modified_) {\n\t\t\trevokeScope(scope)\n\t\t\tdie(4)\n\t\t}\n\t\tif (isDraftable(result)) {\n\t\t\t// Finalize the result in case it contains (or is) a subset of the draft.\n\t\t\tresult = finalize(scope, result)\n\t\t\tif (!scope.parent_) maybeFreeze(scope, result)\n\t\t}\n\t\tif (scope.patches_) {\n\t\t\tgetPlugin(\"Patches\").generateReplacementPatches_(\n\t\t\t\tbaseDraft[DRAFT_STATE].base_,\n\t\t\t\tresult,\n\t\t\t\tscope.patches_,\n\t\t\t\tscope.inversePatches_!\n\t\t\t)\n\t\t}\n\t} else {\n\t\t// Finalize the base draft.\n\t\tresult = finalize(scope, baseDraft, [])\n\t}\n\trevokeScope(scope)\n\tif (scope.patches_) {\n\t\tscope.patchListener_!(scope.patches_, scope.inversePatches_!)\n\t}\n\treturn result !== NOTHING ? result : undefined\n}\n\nfunction finalize(rootScope: ImmerScope, value: any, path?: PatchPath) {\n\t// Don't recurse in tho recursive data structures\n\tif (isFrozen(value)) return value\n\n\tconst state: ImmerState = value[DRAFT_STATE]\n\t// A plain object, might need freezing, might contain drafts\n\tif (!state) {\n\t\teach(\n\t\t\tvalue,\n\t\t\t(key, childValue) =>\n\t\t\t\tfinalizeProperty(rootScope, state, value, key, childValue, path),\n\t\t\ttrue // See #590, don't recurse into non-enumerable of non drafted objects\n\t\t)\n\t\treturn value\n\t}\n\t// Never finalize drafts owned by another scope.\n\tif (state.scope_ !== rootScope) return value\n\t// Unmodified draft, return the (frozen) original\n\tif (!state.modified_) {\n\t\tmaybeFreeze(rootScope, state.base_, true)\n\t\treturn state.base_\n\t}\n\t// Not finalized yet, let's do that now\n\tif (!state.finalized_) {\n\t\tstate.finalized_ = true\n\t\tstate.scope_.unfinalizedDrafts_--\n\t\tconst result =\n\t\t\t// For ES5, create a good copy from the draft first, with added keys and without deleted keys.\n\t\t\tstate.type_ === ProxyType.ES5Object || state.type_ === ProxyType.ES5Array\n\t\t\t\t? (state.copy_ = shallowCopy(state.draft_))\n\t\t\t\t: state.copy_\n\t\t// Finalize all children of the copy\n\t\t// For sets we clone before iterating, otherwise we can get in endless loop due to modifying during iteration, see #628\n\t\t// To preserve insertion order in all cases we then clear the set\n\t\t// And we let finalizeProperty know it needs to re-add non-draft children back to the target\n\t\tlet resultEach = result\n\t\tlet isSet = false\n\t\tif (state.type_ === ProxyType.Set) {\n\t\t\tresultEach = new Set(result)\n\t\t\tresult.clear()\n\t\t\tisSet = true\n\t\t}\n\t\teach(resultEach, (key, childValue) =>\n\t\t\tfinalizeProperty(rootScope, state, result, key, childValue, path, isSet)\n\t\t)\n\t\t// everything inside is frozen, we can freeze here\n\t\tmaybeFreeze(rootScope, result, false)\n\t\t// first time finalizing, let's create those patches\n\t\tif (path && rootScope.patches_) {\n\t\t\tgetPlugin(\"Patches\").generatePatches_(\n\t\t\t\tstate,\n\t\t\t\tpath,\n\t\t\t\trootScope.patches_,\n\t\t\t\trootScope.inversePatches_!\n\t\t\t)\n\t\t}\n\t}\n\treturn state.copy_\n}\n\nfunction finalizeProperty(\n\trootScope: ImmerScope,\n\tparentState: undefined | ImmerState,\n\ttargetObject: any,\n\tprop: string | number,\n\tchildValue: any,\n\trootPath?: PatchPath,\n\ttargetIsSet?: boolean\n) {\n\tif (__DEV__ && childValue === targetObject) die(5)\n\tif (isDraft(childValue)) {\n\t\tconst path =\n\t\t\trootPath &&\n\t\t\tparentState &&\n\t\t\tparentState!.type_ !== ProxyType.Set && // Set objects are atomic since they have no keys.\n\t\t\t!has((parentState as Exclude).assigned_!, prop) // Skip deep patches for assigned keys.\n\t\t\t\t? rootPath!.concat(prop)\n\t\t\t\t: undefined\n\t\t// Drafts owned by `scope` are finalized here.\n\t\tconst res = finalize(rootScope, childValue, path)\n\t\tset(targetObject, prop, res)\n\t\t// Drafts from another scope must prevented to be frozen\n\t\t// if we got a draft back from finalize, we're in a nested produce and shouldn't freeze\n\t\tif (isDraft(res)) {\n\t\t\trootScope.canAutoFreeze_ = false\n\t\t} else return\n\t} else if (targetIsSet) {\n\t\ttargetObject.add(childValue)\n\t}\n\t// Search new objects for unfinalized drafts. Frozen objects should never contain drafts.\n\tif (isDraftable(childValue) && !isFrozen(childValue)) {\n\t\tif (!rootScope.immer_.autoFreeze_ && rootScope.unfinalizedDrafts_ < 1) {\n\t\t\t// optimization: if an object is not a draft, and we don't have to\n\t\t\t// deepfreeze everything, and we are sure that no drafts are left in the remaining object\n\t\t\t// cause we saw and finalized all drafts already; we can stop visiting the rest of the tree.\n\t\t\t// This benefits especially adding large data tree's without further processing.\n\t\t\t// See add-data.js perf test\n\t\t\treturn\n\t\t}\n\t\tfinalize(rootScope, childValue)\n\t\t// immer deep freezes plain objects, so if there is no parent state, we freeze as well\n\t\tif (!parentState || !parentState.scope_.parent_)\n\t\t\tmaybeFreeze(rootScope, childValue)\n\t}\n}\n\nfunction maybeFreeze(scope: ImmerScope, value: any, deep = false) {\n\t// we never freeze for a non-root scope; as it would prevent pruning for drafts inside wrapping objects\n\tif (!scope.parent_ && scope.immer_.autoFreeze_ && scope.canAutoFreeze_) {\n\t\tfreeze(value, deep)\n\t}\n}\n","import {\n\teach,\n\thas,\n\tis,\n\tisDraftable,\n\tshallowCopy,\n\tlatest,\n\tImmerBaseState,\n\tImmerState,\n\tDrafted,\n\tAnyObject,\n\tAnyArray,\n\tObjectish,\n\tgetCurrentScope,\n\tDRAFT_STATE,\n\tdie,\n\tcreateProxy,\n\tProxyType\n} from \"../internal\"\n\ninterface ProxyBaseState extends ImmerBaseState {\n\tassigned_: {\n\t\t[property: string]: boolean\n\t}\n\tparent_?: ImmerState\n\trevoke_(): void\n}\n\nexport interface ProxyObjectState extends ProxyBaseState {\n\ttype_: ProxyType.ProxyObject\n\tbase_: any\n\tcopy_: any\n\tdraft_: Drafted\n}\n\nexport interface ProxyArrayState extends ProxyBaseState {\n\ttype_: ProxyType.ProxyArray\n\tbase_: AnyArray\n\tcopy_: AnyArray | null\n\tdraft_: Drafted\n}\n\ntype ProxyState = ProxyObjectState | ProxyArrayState\n\n/**\n * Returns a new draft of the `base` object.\n *\n * The second argument is the parent draft-state (used internally).\n */\nexport function createProxyProxy(\n\tbase: T,\n\tparent?: ImmerState\n): Drafted {\n\tconst isArray = Array.isArray(base)\n\tconst state: ProxyState = {\n\t\ttype_: isArray ? ProxyType.ProxyArray : (ProxyType.ProxyObject as any),\n\t\t// Track which produce call this is associated with.\n\t\tscope_: parent ? parent.scope_ : getCurrentScope()!,\n\t\t// True for both shallow and deep changes.\n\t\tmodified_: false,\n\t\t// Used during finalization.\n\t\tfinalized_: false,\n\t\t// Track which properties have been assigned (true) or deleted (false).\n\t\tassigned_: {},\n\t\t// The parent draft state.\n\t\tparent_: parent,\n\t\t// The base state.\n\t\tbase_: base,\n\t\t// The base proxy.\n\t\tdraft_: null as any, // set below\n\t\t// The base copy with any updated values.\n\t\tcopy_: null,\n\t\t// Called by the `produce` function.\n\t\trevoke_: null as any,\n\t\tisManual_: false\n\t}\n\n\t// the traps must target something, a bit like the 'real' base.\n\t// but also, we need to be able to determine from the target what the relevant state is\n\t// (to avoid creating traps per instance to capture the state in closure,\n\t// and to avoid creating weird hidden properties as well)\n\t// So the trick is to use 'state' as the actual 'target'! (and make sure we intercept everything)\n\t// Note that in the case of an array, we put the state in an array to have better Reflect defaults ootb\n\tlet target: T = state as any\n\tlet traps: ProxyHandler