\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 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 from \"react\";\nimport styled, { keyframes, css } from \"styled-components\";\nimport { Tooltip as ReactTooltip } from \"react-tooltip\";\n\nimport { ColorType } from \"../../lib/types/dataTypes.components\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\n\nimport { __ } from \"../../lib/utils\";\nimport InfoIcon from \"../../svg/info-icon.svg\";\nimport { cardIcons } from \"./SharedStyledComponents\";\n\nexport type CreditCardFormTemplateProps = {\n cardNumber: string,\n cardType: string,\n expDate: string,\n CVC: string,\n holderName: string,\n validCardNumber: boolean,\n validExpDate: boolean,\n validCVC: boolean,\n validHolderName: boolean,\n errorMessage: string,\n paymentLoading: boolean,\n changeCard: boolean,\n handleCardNumberChange: (event: SyntheticInputEvent) => void,\n handleCardNumberKeyPress: (event: SyntheticInputEvent) => void,\n handleCardNumberPaste: (event: SyntheticInputEvent) => void,\n handleExpDateChange: (event: SyntheticInputEvent) => void,\n handleExpDateKeyUp: (event: SyntheticInputEvent) => void,\n handleCVCChange: (event: SyntheticInputEvent) => void,\n handleCVCKeyPress: (event: SyntheticInputEvent) => void,\n handleHolderNameChange: (event: SyntheticInputEvent) => void,\n handleHolderNameKeyPress: (event: SyntheticInputEvent) => void,\n handleSubmit: (event: SyntheticInputEvent) => void,\n handleCardChange: () => void,\n color?: ColorType,\n shouldRenderInputs?: boolean,\n shouldRenderHolderName?: boolean,\n buttonText?: string,\n showDisclaimer: boolean,\n setPaymentLoading: (paymentLoading: boolean) => void,\n setErrorMessage: (errorMessage: string) => void,\n skipFormWrapper: boolean,\n disableErrorAnimation: boolean,\n holderNameRef: MutableRefObject,\n errorTextColor: string\n};\n\nconst CreditCardFormTemplateCheckoutV2 = ({\n cardNumber,\n validCardNumber,\n cardType,\n handleCardNumberChange,\n handleCardNumberKeyPress,\n handleCardNumberPaste,\n expDate,\n validExpDate,\n handleExpDateKeyUp,\n handleExpDateChange,\n CVC,\n validCVC,\n handleCVCChange,\n handleCVCKeyPress,\n holderName,\n validHolderName,\n handleHolderNameChange,\n handleHolderNameKeyPress,\n errorMessage,\n paymentLoading,\n handleSubmit,\n changeCard,\n handleCardChange,\n color,\n shouldRenderInputs = true,\n setPaymentLoading,\n setErrorMessage,\n skipFormWrapper,\n disableErrorAnimation = false,\n holderNameRef = null,\n errorTextColor = null\n}: CreditCardFormTemplateProps) => {\n const CardFieldsWrapper = skipFormWrapper ? CardWrapper : CardFormWrapper;\n return (\n \n \n {!shouldRenderInputs && paymentLoading ? : null}\n \n {shouldRenderInputs ? (\n \n \n \n \n {cardType ? cardIcons[cardType] : cardIcons[\"default\"]} \n \n\n \n ) : null}\n \n \n \n \n {!shouldRenderInputs && paymentLoading ? : null}\n \n {shouldRenderInputs ? (\n \n ) : null}\n \n \n \n \n \n \n \n {!shouldRenderInputs && paymentLoading ? : null}\n \n {shouldRenderInputs ? (\n \n ) : null}\n \n \n \n \n \n \n \n \n {changeCard ? (\n \n !paymentLoading ? handleCardChange() : null} color={color} data-testid=\"undo_cart_change\">\n {__(\"undo_cart_change\", \"Undo change\")}\n \n \n ) : null}\n \n );\n};\n\nexport default CreditCardFormTemplateCheckoutV2;\n\nconst CardFormWrapper = styled.form`\n ${({changecard}) => !changecard ? \n `\n padding-bottom: 31px;\n @media (max-width: 768px) {\n padding-bottom: 0;\n }\n `\n : null}\n`;\n\nconst CardWrapper = styled.div``;\n\nconst InputWrapper = styled.div`\n margin-top: 16px;\n`;\n\nconst shake = keyframes`\n 10%, 90% {\n transform: translate3d(-1px, 0, 0);\n }\n \n 20%, 80% {\n transform: translate3d(2px, 0, 0);\n }\n\n 30%, 50%, 70% {\n transform: translate3d(-4px, 0, 0);\n }\n\n 40%, 60% {\n transform: translate3d(4px, 0, 0);\n }\n`;\n\nconst InputField = styled.div`\n width: 100%;\n height: 40px;\n padding: 10px 12px;\n box-sizing: border-box;\n border: 1px solid #cdd0d4;\n background-color: #ffffff;\n font-family: Roboto;\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 color: #444444;\n outline: none;\n border-radius: 10px;\n\n &[data-invalid=\"true\"] {\n border: 1px solid #ff7373;\n\n color: ${({errorTextColor}) => errorTextColor ? errorTextColor : \"inherit\"};\n\n ${({disableErrorAnimation}) => !disableErrorAnimation ? css`\n animation-name: ${shake};\n animation-duration: 700ms;\n animation-delay: 500ms;\n animation-timing-function: ease-in-out;\n animation-direction: alternate;\n animation-fill-mode: forwards;\n ` : null}\n }\n\n /* iframe {\n height: auto !important;\n } */\n\n input {\n width: 100%;\n border: none;\n outline: none;\n background: transparent;\n\n &::placeholder {\n color: #cccccc;\n opacity: 1;\n }\n }\n`;\n\nconst CardNumberWrapper = styled(InputWrapper)`\n position: relative;\n`;\n\nconst CardIconWrapper = styled.div`\n & > div {\n top: calc(50% - 11px);\n z-index: unset;\n }\n`;\n\nconst ExpDateAndCVCWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 16px;\n`;\n\nconst ExpDateWrapper = styled(InputWrapper)`\n position: relative;\n display: inline-block;\n flex: 1;\n`;\n\nconst CVCWrapper = styled(InputWrapper)`\n display: inline-block;\n flex: 1;\n position: relative;\n\n .tooltip {\n padding: 15px 20px;\n max-width: 200px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n font-family: Roboto;\n text-align: center;\n }\n`;\n\nconst CardHolderWrapper = styled(InputWrapper)`\n clear: both;\n\n input {\n text-transform: uppercase;\n }\n`;\n\nconst ChangeCardWrapper = styled.div`\n margin-top: 12px;\n`;\n\nconst ChangeCard = styled.a`\n color: ${props =>\n COLORS[props.color] ? COLORS[props.color].mainColor : COLORS[\"cyan\"].mainColor};\n font-family: Roboto;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n text-decoration: none;\n`;\n\nconst InfoIconWrapper = styled.div`\n position: absolute;\n right: 12px;\n bottom: 12px;\n display: inline-block;\n height: 16px;\n width: 16px;\n z-index: 1;\n\n .tooltip {\n width: 200px;\n }\n`;\n\nconst DisabledInputFieldCover = styled.div`\n position: absolute;\n top: 0!important;\n left: 0;\n bottom: 0;\n right: 0;\n z-index: 2 !important;\n`;","//@flow\n\nimport React 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 { __ } from \"../../lib/utils\";\nimport InfoIcon from \"../../svg/info-icon.svg\";\nimport { cardIcons } from \"./SharedStyledComponents\";\n\nexport type PrefilledCreditCardFormProps = {\n paymentLoading: boolean,\n userPaymentSource: Object,\n errorMessage: string,\n handleCardChange: () => void,\n setPaymentLoading: (newValue: boolean) => void,\n setErrorMessage: (newValue: string) => void\n};\n\nconst PrefilledCreditCardFormCheckoutV2 = ({\n paymentLoading,\n userPaymentSource,\n errorMessage,\n handleCardChange,\n setPaymentLoading,\n setErrorMessage\n}: PrefilledCreditCardFormProps) => {\n const { last4, brand, expmonth, expyear, name } = userPaymentSource;\n let brandLowerCase = brand ? brand.toLowerCase() : null;\n\n return (\n \n \n \n {brandLowerCase ? cardIcons[brandLowerCase] : cardIcons[\"default\"]}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n !paymentLoading ? handleCardChange() : null} data-testid=\"change_card\">{__(\"change_card\", \"Change card?\")}\n \n \n );\n};\n\nexport default PrefilledCreditCardFormCheckoutV2;\n\nconst CardFormWrapper = styled.form``;\n\nconst InputWrapper = styled.div`\n margin-top: 16px;\n\n @media (max-width: 768px) {\n margin-top: 8px;\n }\n`;\n\nconst InputField = styled.input`\n width: 100%;\n height: 40px;\n padding: 10px 12px;\n box-sizing: border-box;\n border: 1px solid #cdd0d4 ;\n background-color: #f7f8fa;\n font-family: Roboto;\n font-size: 13px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.2;\n letter-spacing: normal;\n color: #999999;\n border-radius: 10px;\n`;\n\nconst CardNumberWrapper = styled(InputWrapper)`\n position: relative;\n div {\n top: calc(50% - 11px);\n z-index: 1;\n }\n`;\n\nconst ExpDateAndCVCWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 16px;\n`;\n\nconst ExpDateWrapper = styled(InputWrapper)`\n display: inline-block;\n flex: 1;\n`;\n\nconst CVCWrapper = styled(InputWrapper)`\n display: inline-block;\n flex: 1;\n position: relative;\n\n .tooltip {\n padding: 15px 20px;\n max-width: 200px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.35;\n font-weight: 400;\n font-family: Roboto;\n text-align: center;\n }\n`;\n\nconst CardHolderWrapper = styled(InputWrapper)`\n clear: both;\n\n input {\n text-transform: uppercase;\n }\n`;\n\nconst ChangeCardWrapper = styled.div`\n margin-top: 12px;\n`;\n\nconst ChangeCard = styled.a`\n color: ${COLORS[\"cyan\"].mainColor};\n font-family: Roboto;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n text-decoration: none;\n`;\n\nconst InfoIconWrapper = styled.div`\n position: absolute;\n right: 12px;\n bottom: 12px;\n display: inline-block;\n height: 16px;\n width: 16px;\n z-index: 1;\n`;","//@flow\n\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { hiDPI } from \"polished\";\n\nimport { __ } from \"../../lib/utils\";\nimport { ColorType } from \"../../lib/types/dataTypes.components\";\n\n\ntype PaypalBoxType = {\n color: ColorType,\n paypalEmail: string,\n errorMessage: string,\n paypalLoading: boolean,\n paymentLoading: boolean,\n handleLogout: () => void,\n setPaymentLoading: (newValue: boolean) => void,\n setPaypalLoading: (newValue: boolean) => void,\n setErrorMessage: (newValue: string) => void\n};\n\nconst PaypalTemplateCheckoutV2 = ({\n color,\n paypalEmail,\n errorMessage,\n paypalLoading,\n paymentLoading,\n handleLogout,\n setPaymentLoading,\n setPaypalLoading,\n setErrorMessage\n}: PaypalBoxType) => {\n\n return (\n

\n \n \n {paypalEmail ? (\n \n {paypalEmail}\n !paymentLoading ? handleLogout() : null}>{__(\"header_logout\")}\n \n ) : null}\n \n

\n );\n};\n\nexport default PaypalTemplateCheckoutV2;\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 16px;\n min-height: 183px;\n\n @media (max-width: 768px) {\n margin-top: 16px;\n }\n`;\n\nconst paypalIconImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + (window.devicePixelRatio > 1.5 ? 'images/paypal@2x.png' : 'images/paypal.png');\nconst PaypalIcon = styled.div`\n width: 155px;\n height: 155px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n display: inline-block;\n background-image: url(${paypalIconImg});\n`;\n\nconst ExistingEmail = styled.div`\n color: #818181;\n font-size: 12px;\n min-height: 12px;\n line-height: 12px;\n font-family: Roboto;\n width: 100%;\n text-align: center;\n left: 0px;\n`;\n\nconst Logout = styled.a`\n margin-left: 8px;\n color: #17bed0;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n text-decoration: none;\n`;\n","//@flow\n\nimport React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport { getPaymentsApiUrl } from \"../../lib/payments\";\nimport { __ } from \"../../lib/utils\";\n\nimport { getUserTtrafficCount } from \"@pcloud/web-utilities/dist/plans/utils.plans\";\nimport { ADDITIONAL_TRAFFIC_ID } from \"@pcloud/web-utilities/dist/plans/constants.plans\";\n\nconst LocalPaymentBoxV2 = ({\n auth,\n user = null,\n planId,\n period,\n discount,\n afterPaymentActions,\n onPaymentProcessing,\n afterPaymentProcessing,\n setDisabledButton,\n paymentMethods,\n payButtonClicked,\n traffic,\n onPaymentErrorMessageChange = (newErrorMessage) => null,\n downgrade = false\n}) => {\n const [selectedMethod, setSelectedMethod] = useState(\"\");\n const [paymentLoading, setPaymentLoading] = useState(false);\n const [errorMessage, setErrorMessage] = useState(\"\");\n\n useEffect(() => {\n if (paymentMethods.length === 1) {\n setSelectedMethod(paymentMethods[0].method);\n }\n }, [paymentMethods]);\n\n useEffect(() => {\n if (!selectedMethod) {\n setDisabledButton(true);\n } else {\n setDisabledButton(false);\n }\n }, [selectedMethod]); //[selectedMethod]\n\n useEffect(() => {\n if (payButtonClicked) {\n handleSubmit();\n }\n }, [payButtonClicked]); //[payButtonClicked]\n\n useEffect(() => {\n onPaymentErrorMessageChange(errorMessage);\n }, [errorMessage]);\n\n const buildParams = callback => {\n if (!selectedMethod) {\n return;\n }\n\n const params = {\n auth: auth,\n products: planId.join(\",\"),\n traffic: planId.indexOf(ADDITIONAL_TRAFFIC_ID) !== -1 ? (traffic || (user && getUserTtrafficCount(user, true)) || 0) : 0,\n period,\n paymentmethod: selectedMethod\n };\n\n if (discount) {\n params.discountcode = discount;\n }\n\n if (downgrade) {\n params.isdowngrade = 1;\n }\n\n pCloudGlobals.apiMethod(\n \"safechargepayment/buildparams\",\n params,\n (res: any) => {\n if (openLocalPaymentsModal) {\n openLocalPaymentsModal(res);\n }\n },\n {\n apiServer: getPaymentsApiUrl()\n }\n );\n\n // onPaymentProcessing();\n setErrorMessage(\"\");\n };\n\n const handleSubmit = () => {\n buildParams();\n };\n\n const onMethodSelect = method => {\n if (paymentMethods && paymentMethods.length === 1) {\n return;\n }\n\n if (selectedMethod === method) {\n setSelectedMethod(\"\");\n } else {\n setSelectedMethod(method);\n }\n };\n\n const renderSelectText = () => {\n if (paymentMethods && paymentMethods.length > 1) {\n return {__(\"choose_local_provider\")};\n }\n };\n\n const renderLocalPayments = () => {\n return paymentMethods.map(({ method, logourl, displayname }) => {\n return (\n onMethodSelect(method)}\n className={selectedMethod === method ? \"selected\" : \"\"}\n >\n \n \n );\n });\n };\n\n return (\n \n {renderSelectText()}\n

{renderLocalPayments()}

\n \n );\n};\n\nexport default LocalPaymentBoxV2;\n\nconst Wrapper = styled.div`\n min-height: 230px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n margin-top: 30px;\n`;\n\nconst SelectText = styled.div`\n display: inline-block;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.23;\n letter-spacing: normal;\n text-align: left;\n color: #999999;\n`;\n\nconst LogoBox = styled.div`\n display: block;\n border: 1px solid #dedede;\n border-radius: 5px;\n cursor: pointer;\n margin: 0 auto;\n width: 203px;\n height: 42px;\n box-sizing: border-box;\n transition: all 250ms ease-in-out;\n\n &.selected {\n border-color: #17bed0;\n color: #009aab;\n }\n\n img {\n margin: 0 auto;\n display: block;\n height: 100%;\n max-width: 100%;\n }\n`;","//@flow\n\nimport React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { hiDPI } from \"polished\";\n\nimport { SubscriptionUpdate } from \"../../lib/payments\";\nimport { __, hrefSearch, removeHrefSearch } from \"../../lib/utils\";\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\nconst AlipayPaymentBoxV2 = ({\n auth, \n user = null,\n planId,\n period,\n discount,\n setDisabledButton,\n setDisabledPlanOptions,\n payButtonClicked,\n traffic,\n checkCurrentSubscription,\n onPaymentErrorMessageChange = (newErrorMessage) => null,\n downgrade = false\n}) => {\n const [paymentLoading, setPaymentLoading] = useState(false);\n const [errorMessage, setErrorMessage] = useState(\"\");\n\n useEffect(() => {\n if (hrefSearch(\"redirect_status\") === \"failed\" && hrefSearch(\"source_type\") === \"alipay\") {\n setErrorMessage(__(\"something_went_wrong_refresh_and_try_again\"));\n }\n }, []);\n\n useEffect(() => {\n onPaymentErrorMessageChange(errorMessage);\n }, [errorMessage]);\n\n useEffect(() => {\n if (payButtonClicked) {\n if (hrefSearch(\"redirect_status\") === \"failed\" && hrefSearch(\"source_type\") === \"alipay\") {\n removeHrefSearch([\"source_type\", \"redirect_status\", \"payment_intent_client_secret\", \"payment_intent\"], false);\n }\n setErrorMessage(\"\");\n handleSubmit();\n }\n }, [payButtonClicked]); //[payButtonClicked]\n\n useEffect(() => {\n setDisabledButton(paymentLoading);\n setDisabledPlanOptions(paymentLoading);\n }, [paymentLoading]);\n\n const handleModalClose = () => {\n setPaymentLoading(false);\n setErrorMessage(\"\"); \n };\n\n const togglePaymentLoading = (state) => {\n setPaymentLoading(state === \"show\" ? true : false);\n }\n\n const showPaymentError = message => {\n setErrorMessage(message);\n togglePaymentLoading(\"hide\");\n };\n\n const handleSubmit = () => {\n const params = {\n provider: \"stripe\",\n period: period,\n userAuth: auth,\n products: planId,\n traffic: planId.indexOf(ADDITIONAL_TRAFFIC_ID) !== -1 ? (parseInt(traffic) || (user && getUserTtrafficCount(user, true)) || 0) : 0,\n downgrade: downgrade,\n toggleLoader: togglePaymentLoading,\n showPaymentError\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 const payments = new SubscriptionUpdate(params);\n payments.createAlipayPayment({\n showPaymentConfirmationModal: checkCurrentSubscription(),\n handlePaymentConfirmationCancle: handleModalClose\n })\n };\n\n return (\n \n \n \n );\n};\n\nexport default AlipayPaymentBoxV2;\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n min-height: 183px;\n\n @media (max-width: 768px) {\n margin-top: 16px;\n }\n`;\n\nconst logoImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + (window.devicePixelRatio > 1.5 ? 'images/plans/alipay-big@2x.png' : 'images/plans/alipay-big.png');\nconst LogoBox = styled.div`\n width: 155px;\n height: 155px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n display: inline-block;\n background-image: url(${logoImg});\n`;","//@flow\n\nimport React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { hiDPI } from \"polished\";\n\nimport { SubscriptionUpdate } from \"../../lib/payments\";\nimport { __, hrefSearch } from \"../../lib/utils\";\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\nconst WechatPaymentBoxV2 = ({\n auth,\n user,\n planId,\n period,\n discount,\n afterPaymentActions,\n setDisabledButton,\n setDisabledPlanOptions,\n payButtonClicked,\n traffic,\n checkCurrentSubscription,\n onPaymentErrorMessageChange = (newErrorMessage) => null,\n downgrade = false\n}) => {\n const [paymentLoading, setPaymentLoading] = useState(false);\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [qrcode, setQRCode] = useState(\"\");\n\n useEffect(() => {\n if (hrefSearch(\"redirect_status\") === \"failed\" && hrefSearch(\"source_type\") === \"wechat_pay\") {\n setErrorMessage(__(\"something_went_wrong_refresh_and_try_again\"));\n }\n }, []);\n\n useEffect(() => {\n onPaymentErrorMessageChange(errorMessage);\n }, [errorMessage]);\n\n useEffect(() => {\n setPaymentLoading(false);\n setErrorMessage(false);\n }, [qrcode]); //[qrcode]\n\n useEffect(() => {\n if (payButtonClicked) {\n setErrorMessage(\"\"); \n handleSubmit();\n }\n }, [payButtonClicked]); //[payButtonClicked]\n\n useEffect(() => {\n setDisabledButton(paymentLoading || qrcode);\n setDisabledPlanOptions(paymentLoading || qrcode);\n }, [paymentLoading, qrcode]);\n\n const handleModalClose = () => {\n setPaymentLoading(false);\n setErrorMessage(\"\"); \n };\n\n const togglePaymentLoading = (state) => {\n setPaymentLoading(state === \"show\" ? true : false);\n }\n\n const showPaymentError = message => {\n setErrorMessage(message);\n togglePaymentLoading(\"hide\");\n };\n\n const handleSubmit = () => {\n const params = {\n provider: \"stripe\",\n period: period,\n userAuth: auth,\n products: planId,\n traffic: planId.indexOf(ADDITIONAL_TRAFFIC_ID) !== -1 ? (parseInt(traffic) || (user && getUserTtrafficCount(user, true)) || 0) : 0,\n downgrade: downgrade,\n toggleLoader: togglePaymentLoading,\n showPaymentError\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 const payments = new SubscriptionUpdate(params);\n payments.createWechatPayment({\n onNextAction: (newQRCode) => {\n const img = new Image();\n img.src = newQRCode;\n img.onload = () => {\n setQRCode(newQRCode);\n }\n afterPaymentActions({});\n },\n showPaymentConfirmationModal: checkCurrentSubscription(),\n handlePaymentConfirmationCancle: handleModalClose\n })\n };\n\n return (\n \n {qrcode ? (\n \n {__(\"scan_qr_code\")}\n \n \n ) : }\n \n );\n};\n\nexport default WechatPaymentBoxV2;\n\nconst Wrapper = styled.div`\n min-height: 230px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n margin-top: 30px;\n`;\n\nconst QRCodeImage = styled.img`\n image-rendering: pixelated;\n`;\n\nconst logoImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + (window.devicePixelRatio > 1.5 ? 'images/plans/wechatpay-big@2x.png' : 'images/plans/wechatpay-big.png');\nconst LogoBox = styled.div`\n width: 162px;\n height: 162px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n display: inline-block;\n background-image: url(${logoImg});\n`;\n\nconst ScanText = styled.div`\n font-family: Roboto;\n font-size: 14px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.17;\n margin-bottom: 10px;\n text-align: center;\n`;\n\nconst CenterAlign = styled.div`\n text-align: center;\n margin: 0 auto;\n`;","import {\n CUSTOM_PLAN_ID,\n CUSTOM4TB_PLAN_ID, \n ADDITIONAL_TRAFFIC_ID,\n FAMILY2TB_PLAN_ID,\n FAMILY4TB_PLAN_ID,\n FAMILY10TB_PLAN_ID,\n PASS_PREMIUM_PLAN_ID,\n PASS_FAMILY_PLAN_ID,\n CRYPTO_PLAN_ID,\n VIVACOM_500GB_PLAN_ID,\n VIVACOM_1TB_PLAN_ID,\n VIVACOM_128GB_PLAN_ID\n} from \"@pcloud/web-utilities/dist/plans/constants.plans\";\n\nimport { productNameMap, STORAGE_PLANS, PASS_PLANS } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\n\nimport { getPlanTtraffic, getUserTtrafficCount, getCurrentStorageCount } from \"@pcloud/web-utilities/dist/plans/utils.plans\";\n\nimport { PLAN_NAMES_KEYS } from \"@pcloud/web-utilities/dist/config/constants\";\n\nimport { renderQuota } from \"@pcloud/web-utilities/dist/plans/utils.plans\";\n\nimport diffs from \"../lib/diffs\";\n\nimport {\n __, \n convertDateToDDMMMYY, \n daysDiff \n} from \"./utils\";\n\nimport { signToCurrency } from \"@pcloud/web-utilities/dist/payments/constants.payments\";\n\nimport { getPaymentsApiUrl, isInternalPaymentProvider, providers } from \"./payments\";\n\nimport userinfo from \"@pcloud/web-utilities/dist/api/methods/userinfo\";\n\nexport const filterSubscriptionsByCartItems = (userSubscriptions, planIdsToBuy, buyingPeriod) => {\n if (!planIdsToBuy.length || buyingPeriod === \"lifetime\" || !userSubscriptions || !userSubscriptions.length) {\n return;\n }\n\n const internalPaymentSubscriptions = userSubscriptions.filter(subscription => subscription.status !== \"canceled\" && isInternalPaymentProvider(subscription.provider));\n \n const plans = [];\n\n const storagePlansToUpgrade = [];\n const passPlansToUpgrade = [];\n const trafficPlansToUpgrade = [];\n const periods = [];\n let extProductIds = [];\n\n userSubscriptions.map(subscription => {\n if (subscription.status === \"canceled\") {\n return;\n }\n\n let subscriptionPeriod = null;\n let subscriptionProducts = [];\n \n if (subscriptionPeriod === null && !isInternalPaymentProvider(subscription.provider)) { \n // Google play, iTunes, Vivacom are here.\n // Set the opposite to the buyingPeriod, because we want to show them in \"YOUR ORDER\" list instead of \"CURRENTLY SUBSCRIBED\" list.\n // We'll receive money for those plans independently from their current subscription.\n subscriptionPeriod = buyingPeriod === \"month\" ? \"year\" : \"month\";\n\n subscriptionProducts = subscription.products.filter(productId => \n // Remove products if they are already part of active SafeCharge, PayPal or Stripe subscription.\n !internalPaymentSubscriptions.find(sub => sub.products.includes(productId)) &&\n // Remove VIVACOM products, because they should not be included in subscribed products.\n (productId !== VIVACOM_128GB_PLAN_ID && productId !== VIVACOM_1TB_PLAN_ID && productId !== VIVACOM_500GB_PLAN_ID) && \n // It's not already added as part of another external payment provider.\n extProductIds.indexOf(productId) === -1\n );\n\n if (subscriptionProducts.length === 0) {\n return;\n }\n\n extProductIds = extProductIds.concat(subscriptionProducts);\n } else {\n // SafeCharge, PayPal, Stripe are here.\n subscriptionPeriod = subscription.period;\n subscriptionProducts = subscription.products;\n }\n\n const userIsBuyingStorage = planIdsToBuy.some(planId => STORAGE_PLANS.indexOf(planId) !== -1);\n const userIsBuyingPcloudPass = planIdsToBuy.some(planId => PASS_PLANS.indexOf(planId) !== -1);\n const userIsBuyingTraffic = planIdsToBuy.some(planId => planId === ADDITIONAL_TRAFFIC_ID);\n\n periods.push(subscriptionPeriod);\n \n const subscribedProducts = subscriptionProducts.filter(planId => {\n if (userIsBuyingTraffic && planId === ADDITIONAL_TRAFFIC_ID) {\n // User is upgrading their traffic.\n trafficPlansToUpgrade.push(planId);\n return false;\n }\n\n const isStoragePlan = STORAGE_PLANS.indexOf(planId) !== -1;\n const isPassPlan = PASS_PLANS.indexOf(planId) !== -1;\n \n if (isStoragePlan && userIsBuyingStorage) {\n storagePlansToUpgrade.push(planId);\n }\n\n if (userIsBuyingPcloudPass && isPassPlan) {\n passPlansToUpgrade.push(planId);\n }\n\n // Remove 1. Plan is for storage and we're buying DIFFERENT storage. 3. Plan is pass plan and we're buying DIFFERENT pass plan.\n return !((isStoragePlan && userIsBuyingStorage && planIdsToBuy.indexOf(planId) === -1) || (userIsBuyingPcloudPass && isPassPlan && planIdsToBuy.indexOf(planId) === -1));\n });\n\n if (subscribedProducts.length === 0) {\n return;\n }\n \n plans.push({subscribedProducts, period: subscriptionPeriod});\n });\n\n return {plans, storagePlansToUpgrade, passPlansToUpgrade, trafficPlansToUpgrade, periods};\n};\n\nexport const getPreviewUserPlanChangeApiMethodAndOpts = (user, paymentType, paymentCardProvider) => {\n let apiMethod = \"\";\n const apiMethodOpts = {};\n\n if (!user) {\n apiMethod = \"billing/getproductsinfo\";\n } else {\n switch (paymentType) {\n case \"ccard\":\n switch (paymentCardProvider) {\n case \"safecharge\":\n apiMethod = \"safecharge/previewuserplanchange\";\n break;\n case \"stripe\":\n apiMethod = \"billing/stripe/previewuserplanchange\";\n break;\n }\n break;\n case \"paypal\": \n apiMethod = \"subscription/previewuserplanchange\";\n apiMethodOpts.apiServer = getPaymentsApiUrl();\n break;\n case \"alipay\": \n case \"wechat\": \n apiMethod = \"billing/stripe/previewuserplanchange\";\n break;\n case \"local\":\n apiMethod = \"safecharge/previewuserplanchange\";\n break;\n }\n }\n\n return {apiMethod, apiMethodOpts};\n};\n\nexport const loadPlanInfoApiCall = (\n {\n user, \n chosenPeriod,\n chosenPlanIds, \n getNextBilling = false,\n subscribedPlans = {plans: [], storagePlansToUpgrade: [], passPlansToUpgrade: [], trafficPlansToUpgrade: [], periods: []}, \n chosenUpsellPlans = {}, \n traffic, \n paymentView, \n cardProvider,\n discountCode,\n downgrade = false,\n forceFresh = false\n },\n\n onSuccess = (res, inputData) => {}, \n onError = (err) => {}\n ) => {\n\n const params = {};\n const chosenUpsellPlanIds = [];\n\n if (getNextBilling) {\n params.getnextbilling = 1;\n } else {\n if (!chosenPlanIds || chosenPlanIds.length == 0) {\n return null;\n }\n \n const productIDs = subscribedPlans.plans.length === 0 ? chosenPlanIds.concat([]) : [...new Set(chosenPlanIds.concat(...new Set(subscribedPlans.plans.map(({subscribedProducts}) => subscribedProducts))))];\n \n if (chosenUpsellPlans !== null) {\n for (const planId in chosenUpsellPlans) {\n if (productIDs.indexOf(chosenUpsellPlans[planId]) === -1) {\n productIDs.push(chosenUpsellPlans[planId]);\n chosenUpsellPlanIds.push(chosenUpsellPlans[planId]);\n }\n }\n }\n \n let trafficParam = -1;\n \n if (productIDs.indexOf(ADDITIONAL_TRAFFIC_ID) !== -1) {\n trafficParam = parseInt(traffic) || (user && getUserTtrafficCount(user, true));\n }\n \n params.products = productIDs.join(\",\");\n params.period = chosenPeriod;\n\n if (trafficParam !== -1) {\n params.traffic = trafficParam;\n }\n }\n\n if (user) {\n params.auth = user.auth;\n } else {\n params.clearsession = 1;\n }\n\n if (discountCode) {\n params.discountcode = discountCode;\n }\n\n if (downgrade) {\n params.isdowngrade = 1;\n }\n\n if (user?.lastsubscription?.status === \"active\" && user.lastsubscription?.products.indexOf(CUSTOM4TB_PLAN_ID) !== -1 && chosenPeriod !== \"lifetime\") {\n if (user?.planparams?.traffic) {\n params.traffic = (params.traffic || 0) + user.planparams.traffic\n }\n\n if (user?.planparams?.storage) {\n params.storage = user.planparams.storage\n }\n }\n\n // console.log('Load order info params', params);\n\n const {apiMethod: loadOrderInfoApiMethod, apiMethodOpts: loadOrderInfoApiMethodOpts} = getPreviewUserPlanChangeApiMethodAndOpts(user, paymentView, cardProvider);\n \n if (loadOrderInfoApiMethod == \"\") {\n onError({message: \"Missing provider method to handle this provider.\"});\n }\n\n if (forceFresh) {\n loadOrderInfoApiMethodOpts.forceFresh = forceFresh;\n }\n\n return pCloudGlobals.apiMethod(loadOrderInfoApiMethod, params, \n (res) => {\n onSuccess(res, {user, chosenPlanIds, subscribedPlans, chosenUpsellPlanIds});\n },\n {\n ...loadOrderInfoApiMethodOpts, \n errorCallback: onError, \n onXhrError: (xhr, status, error) => onError({\n result: \"xhr_error\", \n error: {xhr, status, error}\n })\n }) || null;\n}\n\nexport const checkIfUserPlanIsChanged = (currentUser, newUser) => {\n if ((!currentUser.lastsubscription && newUser.lastsubscription) || (currentUser.lastsubscription && !newUser.lastsubscription)) {\n return true;\n }\n\n // Amount of subscribed products are different?\n if (currentUser.lastsubscription && newUser.lastsubscription) {\n\n // Check period.\n if (currentUser.lastsubscription.period !== newUser.lastsubscription.period) {\n return true;\n }\n\n if (currentUser.lastsubscription.products.length !== newUser.lastsubscription.products.length) {\n return true;\n }\n\n // Check if each product exist in the other array.\n if(!newUser.lastsubscription.products.every(productId => currentUser.lastsubscription.products.includes(productId))) {\n return true;\n }\n }\n\n // Lifetime plans are different?\n if (\n currentUser.premiumlifetime != newUser.premiumlifetime || \n currentUser.cryptolifetime != newUser.cryptolifetime || \n currentUser.additionaltrafficlifetime != newUser.additionaltrafficlifetime\n ) {\n return true;\n }\n\n // Check pass plans\n if ((!currentUser.passmanagerdata && newUser.passmanagerdata) || (currentUser.passmanagerdata && !newUser.passmanagerdata)) {\n return true;\n }\n\n if (currentUser.passmanagerdata && newUser.passmanagerdata) {\n if (currentUser.passmanagerdata.islifetime != newUser.passmanagerdata.islifetime) {\n return true;\n }\n\n if (currentUser.passmanagerdata.family != newUser.passmanagerdata.family) {\n return true;\n }\n\n if (currentUser.passmanagerdata.plan != newUser.passmanagerdata.plan) {\n return true;\n }\n }\n\n // Amount of traffic is different?\n if (getUserTtrafficCount(currentUser, true) != getUserTtrafficCount(newUser, true)) {\n return true;\n }\n\n // Amount of storage is different?\n if (getCurrentStorageCount(currentUser) != getCurrentStorageCount(newUser)) {\n return true;\n }\n\n return false;\n};\n\nexport const getPaymentSummaryText = (subscriptionSummary, keepOldSubscriptionDate) => {\n let paymentSummaryText = \"\";\n \n const remainingDaysCurrentPlan = subscriptionSummary.nextBillingDate != \"\" ? daysDiff(subscriptionSummary.nextBillingDate) : 0;\n\n if (keepOldSubscriptionDate && remainingDaysCurrentPlan > 0) {\n if (subscriptionSummary.totalNextPriceToPay !== subscriptionSummary.totalPlanPrice) {\n // Text 1:\n // Payment applies to the remаining %num_days% days of your current plan. \n // Your total subscription price is %total_amount_and_currency%. \n // Next payment: %next_amount_and_currency%, on %date%.\n paymentSummaryText = __(remainingDaysCurrentPlan === 1 ? \"payment_summary_text_1_1\" : \"payment_summary_text_1\")\n .replace(\"%num_days%\", remainingDaysCurrentPlan)\n .replace(\"%total_amount_and_currency%\", `${subscriptionSummary.totalPlanPrice / 100} ${signToCurrency[subscriptionSummary.currency]}`)\n .replace(\"%next_amount_and_currency%\", `${subscriptionSummary.totalNextPriceToPay / 100} ${signToCurrency[subscriptionSummary.currency]}`)\n .replace(\"%date%\", convertDateToDDMMMYY(subscriptionSummary.nextBillingDate));\n } else {\n // Text 2:\n // Payment applies to the remаining %num_days% days of your current plan.\n // Your total subscription price is %total_amount_and_currency%. \n // Next billing date: %date%.\n paymentSummaryText = __(remainingDaysCurrentPlan === 1 ? \"payment_summary_text_2_1\" : \"payment_summary_text_2\")\n .replace(\"%num_days%\", remainingDaysCurrentPlan)\n .replace(\"%total_amount_and_currency%\", `${subscriptionSummary.totalPlanPrice / 100} ${signToCurrency[subscriptionSummary.currency]}`)\n .replace(\"%date%\", convertDateToDDMMMYY(subscriptionSummary.nextBillingDate));\n }\n } else {\n if (subscriptionSummary.totalPlanPrice !== subscriptionSummary.totalPriceToPay && subscriptionSummary.totalNextPriceToPay !== subscriptionSummary.totalPlanPrice) {\n // Text 3:\n // Your total subscription price is %total_amount_and_currency%. \n // Next payment: %next_amount_and_currency%, on %date%.\n paymentSummaryText = __(\"payment_summary_text_3\")\n .replace(\"%total_amount_and_currency%\", `${subscriptionSummary.totalPlanPrice / 100} ${signToCurrency[subscriptionSummary.currency]}`)\n .replace(\"%next_amount_and_currency%\", `${subscriptionSummary.totalNextPriceToPay / 100} ${signToCurrency[subscriptionSummary.currency]}`)\n .replace(\"%date%\", convertDateToDDMMMYY(subscriptionSummary.nextBillingDate));\n } else if (subscriptionSummary.totalPlanPrice !== subscriptionSummary.totalPriceToPay && subscriptionSummary.totalNextPriceToPay === subscriptionSummary.totalPlanPrice) {\n // Text 4:\n // Your total subscription price is %total_amount_and_currency%. \n // Next billing date: %date%.\n // payment_summary_text_4\n paymentSummaryText = __(\"payment_summary_text_4\")\n .replace(\"%total_amount_and_currency%\", `${subscriptionSummary.totalPlanPrice / 100} ${signToCurrency[subscriptionSummary.currency]}`)\n .replace(\"%date%\", convertDateToDDMMMYY(subscriptionSummary.nextBillingDate));\n } else if (subscriptionSummary.totalPlanPrice === subscriptionSummary.totalPriceToPay && subscriptionSummary.totalNextPriceToPay !== subscriptionSummary.totalPlanPrice) {\n // Text 5:\n // Next payment: %amount_and_currency%, on %date%.\n paymentSummaryText = __(\"next_payment_price_and_date\").replace(\"%amount_and_currency%\", `${subscriptionSummary.totalNextPriceToPay / 100} ${signToCurrency[subscriptionSummary.currency]}`).replace(\"%date%\", convertDateToDDMMMYY(subscriptionSummary.nextBillingDate));\n } else {\n // Text 6:\n // Next billing date: %date%.\n paymentSummaryText = __(\"next_billing_date\").replace(\"%date%\", convertDateToDDMMMYY(subscriptionSummary.nextBillingDate))\n }\n }\n\n return paymentSummaryText;\n}\n\nexport const subscribeForUserDiff = (user, onChange, currentUserDiffRef) => {\n if (!user) {\n return;\n }\n\n if (currentUserDiffRef.current) {\n // Skip stop is important here, because we are readding different listener.\n currentUserDiffRef.current(true);\n }\n\n const { auth } = user;\n\n currentUserDiffRef.current = diffs.listen(auth, entries => {\n if (entries.length) {\n const modifyUserEvents = entries.filter(({ event, time, userinfo }) => {\n const eventTime = new Date(time);\n return event === \"modifyuserinfo\" && userinfo;\n });\n\n if (modifyUserEvents.length) {\n const { userinfo } = modifyUserEvents[modifyUserEvents.length - 1];\n // console.log(\"!!!!!!!!!!!!!!! userDiff\", { user, userinfo });\n if (user && userinfo && userinfo.language !== user.language) {\n return;\n };\n\n if (onChange) {\n // Refresh the user info if we are before payment process\n // or show thank you page if we are in active payment process.\n onChange(userinfo);\n currentUserDiffRef.current();\n } else {\n // Not invoked, but just in case we don't have given onChange...\n location.reload();\n }\n }\n }\n });\n};\n\nexport const waitForAPItoUpdateUserInfo = ({\n onUpdateSuccess,\n metapixeleventid,\n currentUser,\n userDiff,\n transactionID,\n successCallback,\n errorCallback\n}) => {\n // Let's set fallback for user info change, because the event for changed user info\n // can be received from the backend before payment success method to be invoked.\n const fallbackUserInfoChangeTimeoutHandler = setTimeout(async () => {\n const userInfoResponse = await userinfo(currentUser.auth, () => {}, { apiServer: pCloudGlobals?.apiConfig?.apiServer, forceFresh: true });\n\n if (userInfoResponse && userInfoResponse.result === 0 && checkIfUserPlanIsChanged(currentUser, userInfoResponse)) {\n onUpdateSuccess({transactionID, metapixeleventid}, successCallback, errorCallback);\n diffs.stop();\n }\n }, 3000);\n\n subscribeForUserDiff(currentUser, (newUserInfo) => {\n clearTimeout(fallbackUserInfoChangeTimeoutHandler);\n onUpdateSuccess({transactionID, metapixeleventid}, successCallback, errorCallback);\n }, userDiff);\n};\n\nexport const getPaymentType = (userPaymentProvider) => {\n return !userPaymentProvider ? null : (userPaymentProvider.short_name === \"safecharge\" || userPaymentProvider.short_name === \"stripe\" ? \"ccard\" : (userPaymentProvider.short_name === \"paypal\" ? \"paypal\" : null));\n};\n\nexport const getCardProvider = (userPaymentProvider) => {\n return getPaymentType(userPaymentProvider) === \"ccard\" ? (userPaymentProvider.short_name === \"safecharge\" ? \"safecharge\" : \"stripe\") : null;\n}\n\nexport const getSubscriptionPaymentProvider = (subscription) => {\n return providers[(subscription && subscription.provider) || 0] || null;\n}\n\nexport const isExternalPaymentProvider = (subscription) => {\n const paymentProvider = getSubscriptionPaymentProvider(subscription);\n return paymentProvider && paymentProvider.short_name !== \"safecharge\" && paymentProvider.short_name !== \"stripe\" && paymentProvider.short_name !== \"paypal\";\n}\n\nexport const getUserLifetimeProducts = (user) => {\n if (!(user && (user.premiumlifetime || user.cryptolifetime || user.additionaltrafficlifetime || (user.passmanagerdata && user.passmanagerdata.islifetime)))) {\n // No Lifetime services.\n return [];\n }\n\n const lifetimeProducts = [];\n\n if (user.premiumlifetime) {\n lifetimeProducts.push({\n id: user.plan,\n name: (user.plan == CUSTOM_PLAN_ID ? __(PLAN_NAMES_KEYS[CUSTOM_PLAN_ID]) : productNameMap[user.plan].long) + ((user.plan == CUSTOM4TB_PLAN_ID || user.plan == CUSTOM_PLAN_ID) ? \" \" + renderQuota(user.quota) : \"\"),\n });\n }\n\n if (user.cryptolifetime) {\n lifetimeProducts.push({\n id: CRYPTO_PLAN_ID,\n name: productNameMap[CRYPTO_PLAN_ID].long\n });\n }\n\n if (user.additionaltrafficlifetime) {\n lifetimeProducts.push({\n id: ADDITIONAL_TRAFFIC_ID,\n name: productNameMap[ADDITIONAL_TRAFFIC_ID].long.replace(\"%amount%\", getPlanTtraffic(getUserTtrafficCount(user, true)))\n });\n }\n\n if (user.passmanagerdata && user.passmanagerdata.islifetime) {\n if (user.passmanagerdata.plan === 1) {\n lifetimeProducts.push({\n id: PASS_PREMIUM_PLAN_ID,\n name: productNameMap[PASS_PREMIUM_PLAN_ID].long\n });\n }\n\n if (user.passmanagerdata.plan === 2) {\n lifetimeProducts.push({\n id: PASS_FAMILY_PLAN_ID,\n name: productNameMap[PASS_FAMILY_PLAN_ID].long\n });\n }\n }\n\n return lifetimeProducts;\n};\n\nexport const getPricingPageURL = (plans, {discount, period, downgrade}, {pricingPagePassURL, familyPageURL, trafficPageURL, cryptoPageURL, pricingPageURL}) => {\n let url = \"\";\n for (const plan of plans) {\n switch (plan.id) {\n case PASS_PREMIUM_PLAN_ID:\n case PASS_FAMILY_PLAN_ID:\n url = pricingPagePassURL;\n break;\n case FAMILY2TB_PLAN_ID:\n case FAMILY4TB_PLAN_ID:\n case FAMILY10TB_PLAN_ID:\n url = familyPageURL;\n break;\n case ADDITIONAL_TRAFFIC_ID: \n url = trafficPageURL;\n break;\n case CRYPTO_PLAN_ID:\n url = cryptoPageURL;\n break;\n default: \n url = pricingPageURL;\n break;\n }\n\n if (url !== \"\") {\n // Break the for;\n break;\n }\n }\n\n const params = [];\n\n if (discount) {\n params.push(\"discount=\" + discount);\n }\n\n if (downgrade) {\n params.push(\"downgrade=1\");\n }\n\n params.push(\"period=\" + period);\n\n return url + (url.search(/[?]/) === -1 ? \"?\" : \"&\") + params.join(\"&\");\n};\n","export const getProductFromOrderInfo = (orderInfo, productId) => {\n // Search among initial products first (coming from URL params).\n return orderInfo.initialOrderPlans.find(({id}) => id == productId) || \n // Search among subscribed products\n orderInfo.subscribedPlans.plans.find(({subscribedProducts}) => subscribedProducts.find(({id}) => id == productId)) ||\n // Search among upsell products\n orderInfo.upsellPlans.find(({id}) => id == productId);\n}","//@flow\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport styled from \"styled-components\";\nimport { hiDPI } from \"polished\";\nimport { SwitchTransition, CSSTransition } from \"react-transition-group\";\n\nimport * as Style from \"./StyledComponents/Style\";\n\nimport { __ } from \"../../../lib/utils\";\n\nimport { signToCurrency } from \"@pcloud/web-utilities/dist/payments/constants.payments\";\nimport { rcookie, setcookie, isInternetExplorer, hrefSearch, removeHrefSearch } from \"@pcloud/web-utilities/dist/lib/utils\";\n\nimport CreditCardBox from \"../../PaymentComponents/CreditCardBox\";\nimport Tabs from \"../../Tabs\";\nimport SelectMenu from \"../../SelectMenu\";\nimport PaypalBox from \"../../PaymentComponents/PaypalBox\";\nimport CreditCardFormTemplateCheckoutV2 from \"../../PaymentComponents/CreditCardFormTemplateCheckoutV2\";\nimport PrefilledCreditCardFormCheckoutV2 from \"../../PaymentComponents/PrefilledCreditCardFormCheckoutV2\";\nimport PaypalTemplateCheckoutV2 from \"../../PaymentComponents/PaypalTemplateCheckoutV2\";\nimport LocalPaymentBoxV2 from \"../../PaymentComponents/LocalPaymentBoxV2\";\nimport AlipayPaymentBoxV2 from \"../../PaymentComponents/AlipayPaymentBoxV2\"\nimport WechatPaymentBoxV2 from \"../../PaymentComponents/WechatPaymentBoxV2\"\nimport {\n PREMIUM_PLAN_ID,\n PREMIUM_PLUS_PLAN_ID,\n CRYPTO_PLAN_ID,\n EFH_PLAN_ID,\n ADDITIONAL_TRAFFIC_ID,\n PASS_PREMIUM_PLAN_ID,\n PASS_FAMILY_PLAN_ID\n} from \"@pcloud/web-utilities/dist/plans/constants.plans\";\n\nimport {\n productNameMap,\n PASS_PLANS_PER_PERIOD,\n gaPeriods,\n plansQuota,\n planNames,\n} from \"@pcloud/web-utilities/dist/plans/plansInfo\";\n\nimport type {\n PlanIDType,\n PeriodType,\n Userinfo,\n CurrencyType,\n Subscription\n} from \"../../../lib/types/dataTypes.components\";\n\nimport { ALIPAY_PAYMENT_COUNTRIES } from \"@pcloud/web-utilities/dist/payments/constants.payments\";\nimport usePrevious from \"@pcloud/web-utilities/dist/hooks/usePrevious\";\nimport SpinContainer from \"../../SpinContainer\";\nimport LoadingIcon from \"../../../svg/loading-icon.svg\";\nimport { getPaymentsApiUrl, providers, isInternalPaymentProvider } from \"../../../lib/payments\";\n\nimport { waitForAPItoUpdateUserInfo } from \"../../../lib/plansUtils\";\nimport { ProductType } from \"../../../lib/types/ProductType\";\nimport { getProductFromOrderInfo } from \"../utils.plans\";\nimport { getPromoParam, sendAnalyticsEvent } from \"@pcloud/web-utilities/dist/lib/ptr\";\n\ntype Props = {\n payButtonRef: any,\n user: Userinfo,\n nextUser: Userinfo,\n cart: Array,\n chosenPeriod: PeriodType,\n discount: string,\n disabledButton?: boolean,\n setDisabledButton: (newValue: boolean) => void,\n setPaypalButtonLoading: (newValue: boolean) => void,\n paymentView: \"ccard\" | \"paypal\" | \"local\" | \"alipay\" | \"wechat\",\n setPaymentView: (newValue: \"ccard\" | \"paypal\" | \"local\" | \"alipay\" | \"wechat\") => void,\n cardProvider: \"stripe\" | \"safecahrge\",\n setCardProvider: (newValue: \"stripe\" | \"safecahrge\") => void,\n userPaymentSource: any,\n setUserPaymentSource: (newValue: any) => void,\n removePaypalPaymentSource: () => void,\n payButtonClicked: boolean,\n totalPrice: number,\n setDisabledPlanOptions: (newValue: boolean) => void,\n isMobile: boolean,\n traffic: string | number,\n hidePaypalButton: boolean,\n setHidePaypalButton: (newValue: boolean) => void,\n country: string,\n downgrade: boolean,\n onLoadedPaymentData: () => void,\n onLoadedPaymentDataError: (err) => void,\n disableLoadingIndication: boolean,\n orderInfo: {\n currency: CurrencyType,\n initialOrderPlans: Array,\n subscribedPlans: {plans: {subscribedProducts: Array, period: PeriodType}},\n upsellPlans: Array,\n },\n onPaymentStarted: () => void,\n onPaymentFinished: () => void,\n onPaymentErrorMessageChange: (newErrorMessage: string) => void,\n setUserSubscriptions: (userSubscriptions: Array) => void\n}\n\nconst PaymentContainer = ({\n payButtonRef,\n user,\n nextUser = user,\n cart = [],\n chosenPeriod,\n discount,\n disabledButton,\n setDisabledButton,\n setPaypalButtonLoading,\n paymentView,\n setPaymentView,\n cardProvider,\n setCardProvider,\n userPaymentSource,\n setUserPaymentSource,\n removePaypalPaymentSource,\n payButtonClicked,\n totalPrice,\n setDisabledPlanOptions,\n isMobile,\n userDiff = () => {},\n traffic,\n hidePaypalButton,\n setHidePaypalButton,\n country,\n downgrade,\n onLoadedPaymentData = () => null,\n onLoadedPaymentDataError = (err) => null,\n disableLoadingIndication = false,\n orderInfo = {\n totalPriceToPay: 0,\n totalOriginalPrice: 0,\n initialOrderPlans: [],\n subscribedPlans: {plans: [], period: null},\n upsellPlans: []\n },\n onPaymentStarted = () => null,\n onPaymentFinished = () => null,\n onPaymentErrorMessageChange = (newErrorMessage) => null,\n setUserSubscriptions = (userSubscriptions) => null,\n // paymentButtonRendered\n}: Props) => {\n const [tabs, setTabs] = useState([]);\n const [loading, setLoading] = useState(disableLoadingIndication ? false : true);\n const [loadPaymentDataInProgress, setLoadPaymentDataInProgress] = useState(true);\n const [safechargeLocals, setSafechargeLocals] = useState(null);\n const subscriptions = useRef([]);\n const isIE = isInternetExplorer();\n const prevPaymentView = usePrevious(paymentView);\n (tabs: Array<{\n tabId: string,\n TabIcon?: any,\n tooltip: string,\n clickAction: (paymentView: \"ccard\" | \"paypal\") => void\n }>);\n (loading: boolean);\n (safechargeLocals: any);\n\n const { auth } = nextUser || {};\n const userIsBuyingPcloudPassPremium = cart && (cart.indexOf(PASS_PREMIUM_PLAN_ID) !== -1 || cart.indexOf(PASS_FAMILY_PLAN_ID) !== -1);\n \n const onTabClick = (tabID) => {\n setPaymentView(tabID);\n if (hrefSearch(\"redirect_status\") === \"failed\" && hrefSearch(\"source_type\") === \"alipay\") {\n removeHrefSearch([\"source_type\", \"redirect_status\", \"payment_intent_client_secret\", \"payment_intent\"], false);\n }\n }\n\n const DEFAULT_TABS = useRef([\n {\n tabId: \"ccard\",\n TabIcon: CCIcon,\n tooltip: __(\"cc_payment\"),\n tabTitle: isMobile ? __(\"CREDIT CARD\") : \"\",\n testId: \"checkout_choose_card\",\n optionName: __(\"cc_payment\"),\n clickAction: onTabClick\n },\n {\n tabId: \"paypal\",\n TabIcon: PayPalIcon,\n tooltip: __(\"paypal_payment\"),\n tabTitle: isMobile ? __(\"PAYPAL\") : \"\",\n testId: \"checkout_choose_paypal\",\n optionName: __(\"paypal_payment\"),\n clickAction: onTabClick\n }\n ]);\n\n const localTabsData = {\n tabId: \"local\",\n TabIcon: LocalIcon,\n tooltip: __(\"local_payment\"),\n tabTitle: isMobile ? __(\"LOCAL\") : \"\",\n testId: \"checkout_choose_local\",\n optionName: __(\"local_payment\"),\n clickAction: onTabClick\n }\n\n const alipayTabsData = {\n tabId: \"alipay\",\n TabIcon: AlipayIcon,\n tooltip: __(\"Alipay\"),\n tabTitle: isMobile ? __(\"Alipay\") : \"\",\n testId: \"checkout_choose_alipay\",\n optionName: __(\"Alipay\"),\n clickAction: onTabClick\n }\n\n const wechatTabsData = {\n tabId: \"wechat\",\n TabIcon: WechatIcon,\n tooltip: __(\"Wechat\"),\n tabTitle: isMobile ? __(\"Wechat\") : \"\",\n testId: \"checkout_choose_wechat\",\n optionName: __(\"Wechat\"),\n clickAction: onTabClick\n }\n\n useEffect(() => {\n setTabs(DEFAULT_TABS.current);\n }, []);\n\n useEffect(() => {\n if ((hrefSearch('ErrCode') || hrefSearch(\"redirect_status\") === \"succeeded\") && cart) {\n onPaymentSuccess({ transactionId: hrefSearch('transactionid') }, null, null, true)\n }\n }, [cart])\n\n useEffect(() => {\n if (nextUser) {\n loadPaymentData(nextUser);\n }\n }, [nextUser]);\n\n useEffect(() => {\n const newPaymentView = getPaymentView();\n setTabs(getTabs());\n\n if (prevPaymentView !== newPaymentView) {\n setPaymentView(newPaymentView);\n } \n }, [user, userPaymentSource, cardProvider, safechargeLocals]);\n\n useEffect(() => {\n if (user && !loadPaymentDataInProgress) {\n setDisabledButton(false);\n setHidePaypalButton(false);\n } else {\n setDisabledButton(true);\n setHidePaypalButton(true);\n }\n }, [loadPaymentDataInProgress, user]);\n\n const getSubscriptionProvider = () => {\n if (chosenPeriod !== \"lifetime\" && subscriptions.current && subscriptions.current.length > 0 && userPaymentSource) {\n const internalPaymentSubscription = subscriptions.current.find(({provider, status}) => status !== \"canceled\" && isInternalPaymentProvider(provider));\n return internalPaymentSubscription && internalPaymentSubscription.provider;\n }\n \n return false;\n }\n\n const getTabs = () => {\n let newTabs = [...DEFAULT_TABS.current];\n const subscriptionProvider = getSubscriptionProvider();\n\n if (safechargeLocals && safechargeLocals.paymentmethods && safechargeLocals.paymentmethods.length) {\n newTabs.push(localTabsData);\n }\n\n country = country.toLowerCase();\n\n if (chosenPeriod !== \"month\") {\n if (ALIPAY_PAYMENT_COUNTRIES.indexOf(country) !== -1) {\n newTabs.push(alipayTabsData);\n }\n \n // if (WECHAT_PAYMENT_COUNTRIES.indexOf(country) !== -1) {\n // newTabs.push(wechatTabsData);\n // }\n }\n\n if (subscriptionProvider) {\n const subscriptionProviderType = providers[subscriptionProvider].type;\n const hasUserSubscriptionProvider = newTabs.some(tab => tab.tabId === subscriptionProviderType);\n\n if (hasUserSubscriptionProvider) {\n newTabs = newTabs.filter((tab) => tab.tabId === subscriptionProviderType);\n }\n }\n\n return newTabs;\n }\n\n const getSelectOptions = (tabs) => {\n return tabs.map(({\n tabId,\n TabIcon,\n tooltip,\n tabTitle,\n optionName,\n testId,\n clickAction,\n disabled\n }) => {\n return {\n optionId: tabId,\n OptionIcon: TabIcon,\n tooltip,\n optionName,\n testId,\n clickAction,\n disabled\n }\n })\n }\n\n const getPaymentView = () => {\n let newPaymentView = \"ccard\";\n const subscriptionProvider = getSubscriptionProvider();\n\n if (hrefSearch(\"redirect_status\") && hrefSearch(\"source_type\")) {\n const provider = hrefSearch(\"source_type\");\n newPaymentView = provider;\n } else if (subscriptionProvider) {\n const subscriptionProviderType = providers[subscriptionProvider].type;\n const hasUserSubscriptionProvider = tabs.some(tab => tab.tabId === subscriptionProviderType);\n\n if (hasUserSubscriptionProvider) {\n newPaymentView = subscriptionProviderType; \n }\n } else if (userPaymentSource && userPaymentSource.paypal) {\n newPaymentView = \"paypal\";\n }\n\n return newPaymentView;\n }\n\n const getPaymentSource = (callback) => {\n const dfd = jQuery.Deferred();\n\n pCloudGlobals.apiMethod(\n \"listpaymentsources\",\n { auth },\n (res: any) => {\n callback(res);\n dfd.resolve(res);\n },\n {\n errorCallback: dfd.reject,\n onXhrError: (xhr, status, error) => dfd.reject({\n result: \"xhr_error\", \n error: {xhr, status, error}\n })\n }\n );\n\n return dfd.promise();\n };\n\n const getPaymentSubscriptions = (callback) => {\n const dfd = jQuery.Deferred();\n\n pCloudGlobals.apiMethod(\n \"listpaymentsubscriptions\",\n { auth },\n (res: any) => {\n setUserSubscriptions(res.subscriptions);\n callback(res);\n dfd.resolve(res);\n },\n {\n errorCallback: dfd.reject,\n onXhrError: (xhr, status, error) => dfd.reject({\n result: \"xhr_error\", \n error: {xhr, status, error}\n })\n }\n );\n\n return dfd.promise();\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 pCloudGlobals.apiMethod(\n \"listpaymentmethods\",\n params,\n (res: any) => {\n callback(res);\n dfd.resolve(res);\n },\n {\n errorCallback: (errorRes) => {\n callback(errorRes);\n dfd.resolve(errorRes);\n },\n onXhrError: (xhr, status, error) => {\n const errorRes = {\n result: \"xhr_error\", \n error: {xhr, status, error}\n };\n\n callback(errorRes);\n dfd.resolve(errorRes);\n }\n }\n );\n\n return dfd.promise();\n };\n\n const getSafeChargeLocalPaymentsToken = (callback) => {\n const dfd = jQuery.Deferred();\n const params = { auth };\n\n if (rcookie(\"forcecountry\")) {\n params.country = rcookie(\"forcecountry\").toUpperCase();\n }\n \n pCloudGlobals.apiMethod(\n \"safechargepayment/getsessiontoken\",\n params,\n (tokenResult: any) => {\n getSafeChargeLPPayments(tokenResult.sessiontoken, ((methodsData) => {\n callback(methodsData);\n dfd.resolve(methodsData);\n }))\n },\n {\n apiServer: getPaymentsApiUrl(),\n timeout: 1500,\n errorCallback: (errorRes) => {\n callback(errorRes);\n dfd.resolve(errorRes);\n },\n onTimeout: () => {\n console.log(\"Request timed out -> safechargepayment/getsessiontoken\");\n },\n onXhrError: (xhr, status, error) => {\n const errorRes = {\n result: \"xhr_error\", \n error: {xhr, status, error}\n };\n \n callback(errorRes);\n dfd.resolve(errorRes);\n }\n }\n );\n\n return dfd.promise();\n }\n\n const getSafeChargeLPPayments = (token, callback) => {\n if (!token) {\n callback({});\n return;\n }\n\n const params = {\n auth,\n sessiontoken: token\n };\n\n if (rcookie(\"forcecountry\")) {\n params.country = rcookie(\"forcecountry\").toUpperCase();\n }\n\n pCloudGlobals.apiMethod(\n \"safechargepayment/getpaymentmethods\",\n params,\n (res: any) => {\n callback(res);\n },\n {\n apiServer: getPaymentsApiUrl(),\n timeout: 1500,\n errorCallback: (errorRes) => {\n callback(errorRes);\n },\n onTimeout: () => {\n callback();\n },\n onXhrError: (xhr, status, error) => {\n const errorRes = {\n result: \"xhr_error\", \n error: {xhr, status, error}\n };\n \n callback(errorRes);\n }\n }\n );\n };\n\n const loadPaymentData = (user) => {\n setLoadPaymentDataInProgress(true);\n const returnedValues = {};\n const successCallbackSource = data => returnedValues.paymentSource = data;\n const successCallbackProvider = data => returnedValues.paymentProvider = data;\n const successSafechargeLocal = data => returnedValues.safechargeLocal = data;\n const successCallbackPaymentSubscriptions = data => returnedValues.subscriptions = data.subscriptions;\n const paymentSourcePromise = getPaymentSource(successCallbackSource);\n const paymentProviderPromise = getPaymentProvider(successCallbackProvider);\n\n const promises = [paymentSourcePromise, paymentProviderPromise];\n\n if (chosenPeriod !== \"month\") {\n const safechargeLocalPromise = getSafeChargeLocalPaymentsToken(successSafechargeLocal);\n promises.push(safechargeLocalPromise);\n }\n\n // Used for defining which payment methods should be allowed. \n // Added user && user.lastsubscription, because if we don't have any lastsubscription then there is no need to make this call.\n if (chosenPeriod !== \"lifetime\" && user && user.lastsubscription) {\n const paymentSubscriptionsPromise = getPaymentSubscriptions(successCallbackPaymentSubscriptions);\n promises.push(paymentSubscriptionsPromise);\n }\n\n $.when.apply($, promises).done(() => {\n const paymentSourceData = returnedValues.paymentSource;\n const paymentProviderData = returnedValues.paymentProvider;\n const safechargeLocalData = returnedValues.safechargeLocal;\n subscriptions.current = returnedValues.subscriptions;\n let newCardProvider = \"safecharge\";\n\n if (paymentProviderData && paymentProviderData.paymentmethods && paymentProviderData.paymentmethods[0]) {\n const paymentMethod = paymentProviderData.paymentmethods[0];\n newCardProvider = paymentMethod.method;\n }\n\n if (\n paymentSourceData &&\n (paymentSourceData.stripe ||\n paymentSourceData.safecharge ||\n paymentSourceData.paypal)\n ) {\n if (paymentSourceData.stripe) {\n newCardProvider = \"stripe\";\n } else if (paymentSourceData.safecharge && (!isIE || (isIE && chosenPeriod !== \"lifetime\"))) {\n newCardProvider = \"safecharge\";\n }\n\n setUserPaymentSource(paymentSourceData);\n }\n\n if (safechargeLocalData && safechargeLocalData.paymentmethods) {\n setSafechargeLocals(safechargeLocalData);\n }\n\n setCardProvider(newCardProvider);\n\n setLoadPaymentDataInProgress(false);\n\n onLoadedPaymentData();\n \n setTimeout(() => {\n setLoading(false);\n }, 300);\n }).fail((err) => {\n setLoadPaymentDataInProgress(false);\n setLoading(false);\n onLoadedPaymentDataError(err);\n });\n };\n\n const onPaymentProcessing = () => {\n const newTabs = tabs.map(tab => { return { disabled: true, ...tab } })\n setTabs(newTabs);\n \n if (userDiff !== null) {\n // Stop onUserDiff listener. From now on we care only for payment requests to finish.\n userDiff(true);\n }\n\n onPaymentStarted();\n }\n\n const onUpdateSuccess = ({transactionID, metapixeleventid}, successCallback, errorCallback, dontSendPurchaseData) => {\n if (checkPclObjInterval) {\n clearInterval(checkPclObjInterval); \n }\n\n\n if (!dontSendPurchaseData) {\n sendAnalyticsEvents({transactionID, metapixeleventid});\n }\n\n if (successCallback) {\n successCallback();\n }\n\n if (rcookie(\"discount\")) {\n setcookie(\"discount\", null, 0);\n }\n\n setTimeout(function() {\n if (sessionStorage.pCloud) {\n sessionStorage.removeItem('pCloud');\n }\n\n window.location.href = thankYouPageURL();\n }, 1500);\n };\n\n const thankYouPageURL = (param) => {\n if (downgrade) {\n return manageSubscrLink;\n };\n\n let additionalParam = param ? '&' + param : '';\n let productsUrlParam = '&product=';\n\n const newPlanIds = cart.map((id) => {\n if (typeof id === \"string\" && id.indexOf(\"_\") !== -1) {\n const idSplitArr = id.split(\"_\");\n const customPlanId = idSplitArr[0];\n\n return customPlanId;\n }\n\n return id;\n });\n\n productsUrlParam += newPlanIds.join(\",\");\n\n const providerName = paymentView === \"ccard\" ? cardProvider : paymentView;\n let thankYouPageCopy = thankYouPage;\n\n if (userIsBuyingPcloudPassPremium) {\n thankYouPageCopy = thankYouPagePass;\n };\n\n thankYouPageCopy += productsUrlParam + ('&period=' + chosenPeriod) + '&pclext_update=1' + additionalParam;\n\n if (!(hrefSearch('ErrCode') || hrefSearch(\"redirect_status\") === \"succeeded\")) {\n thankYouPageCopy += \"&provider=\" + providerName;\n }\n\n return thankYouPageCopy;\n };\n\n const sendAnalyticsEvents = ({transactionID, metapixeleventid}) => {\n storePurchaseDataLocally({\n productIDs: cart,\n price: totalPrice,\n transactionID: transactionID,\n currency: signToCurrency[orderInfo.currency]\n });\n\n const cartProducts = cart.reduce((products, planId) => {\n products[planId] = getProductFromOrderInfo(orderInfo, planId);\n return products;\n }, {});\n\n if (typeof gtag === \"function\") {\n const itemsInfo = [{\n name: cart.map((planId) => productNameMap[planId][cartProducts[planId] && cartProducts[planId].addplan ? 'add' : 'long']).join(\" + \"),\n price: totalPrice,\n quantity: 1\n }\n ];\n\n const ga4Items = cart.map(planId => {\n return {\n item_name: planNames[planId] + \" \" + gaPeriods[chosenPeriod],\n item_brand: PASS_PLANS_PER_PERIOD[chosenPeriod].includes(planId) ? \"pCloudPass\" : \"pCloud\",\n item_category: gaPeriods[chosenPeriod],\n item_variant: plansQuota[planId] || \"\",\n affiliation: rcookie(\"ref\"),\n coupon: discount || \"\",\n item_id: planId,\n price: (cartProducts[planId] && cartProducts[planId].pricecents / 100) || 0,\n currency: signToCurrency[orderInfo.currency],\n quantity: 1\n }\n });\n\n if (typeof dataLayer !== 'undefined') {\n dataLayer.push({ecommerce: null}); // Clear the previous ecommerce object.\n dataLayer.push({\n event: \"purchase\",\n ecommerce: {\n currency: signToCurrency[orderInfo.currency],\n value: orderInfo.totalPriceToPay / 100,\n transaction_id: transactionID,\n payment_type: paymentView === \"ccard\" ? cardProvider : paymentView,\n items: ga4Items\n }\n });\n }\n\n gtagAds('event', 'conversion', { \n 'send_to': 'AW-946159937/3Uu5CKv9wo0YEMGClcMD',\n 'value': totalPrice,\n 'currency': signToCurrency[orderInfo.currency] || \"USD\",\n 'transaction_id': transactionID,\n items: itemsInfo\n });\n }\n\n if (typeof ttq !== \"undefined\" && ttq.track && typeof ttq.track == \"function\") {\n const ttqItems = cart.map(planId => {\n return {\n content_id: planId,\n content_type: 'product',\n content_name: productNameMap[planId][cartProducts[planId] && cartProducts[planId].addplan ? 'add' : 'long'],\n quantity: 1,\n price: (cartProducts[planId] && cartProducts[planId].pricecents / 100) || 0\n }\n });\n\n ttq.track('CompletePayment', {\n contents: ttqItems,\n value: totalPrice,\n currency: signToCurrency[orderInfo.currency] || \"USD\",\n });\n }\n\n if (typeof fbq == \"function\") {\n const metaPixelOpts = metapixeleventid ? {eventID: metapixeleventid} : {};\n\n fbq(\"track\", chosenPeriod === \"lifetime\" ? \"Purchase\" : \"Subscribe\", {\n value: totalPrice,\n currency: signToCurrency[orderInfo.currency] || \"USD\",\n }, metaPixelOpts);\n }\n\n const analyticsParams = {\n category: \"product\",\n label: getPromoParam(\"label\") || \"www-site\",\n action: \"purchase\",\n };\n\n const analyticsData = {\n revenue: orderInfo.totalPriceToPay / 100,\n currency: signToCurrency[orderInfo.currency] || \"USD\",\n period: chosenPeriod,\n products: cart.join(\",\")\n };\n\n if (getPromoParam(\"passcampaign\")) {\n analyticsData.passcampaign = getPromoParam(\"passcampaign\");\n }\n\n if (discount) {\n analyticsData.discount = discount;\n }\n\n sendAnalyticsEvent(analyticsParams, analyticsData);\n window.uetq = window.uetq || [];\n window.uetq.push('event', 'purchase', { 'revenue_value': totalPrice, currency: (signToCurrency[orderInfo.currency] || 'USD') });\n }\n\n const onPaymentSuccess = (res, successCallback, errorCallback, skipApiUpdate) => {\n const transactionID = res.transactionId || res.transactionid || res.id || \"\";\n const metapixeleventid = res.metapixeleventid;\n\n if (discount) {\n setcookie('discount', null, 0);\n }\n\n if (skipApiUpdate) {\n onUpdateSuccess({ transactionID, metapixeleventid }, successCallback, errorCallback, true);\n } else {\n waitForAPItoUpdateUserInfo({\n onUpdateSuccess,\n metapixeleventid,\n currentUser: user, \n userDiff,\n transactionID, \n successCallback, \n errorCallback\n });\n }\n };\n\n const afterPaymentProcessing = () => {\n setTabs(getTabs());\n onPaymentFinished();\n }\n\n const checkCurrentSubscription = () => {\n if (!cart || !user || (user && userIsBuyingPcloudPassPremium && !(rcookie(\"passtoken\") || rcookie(\"restrictedPassToken\")))) {\n return false;\n }\n\n const {\n lastsubscription,\n efh,\n cryptosubscription,\n premium,\n premiumlifetime,\n additionaltraffic,\n additionaltrafficlifetime,\n passmanagerdata\n } = user;\n const userCanceledSubscription = lastsubscription && lastsubscription.status === \"canceled\";\n let hasActiveStoragePlan = false;\n let hasActivePassPlan = false;\n let hasActiveEFHPlan = false;\n let hasActiveCryptoPlan = false;\n let hasActiveTrafficPlan = false;\n\n if (userCanceledSubscription) {\n return cart.some((id) => {\n const userIsBuyingStorage = (id === PREMIUM_PLAN_ID || id === PREMIUM_PLUS_PLAN_ID) && (lastsubscription.products.indexOf(PREMIUM_PLAN_ID) !== -1 || lastsubscription.products.indexOf(PREMIUM_PLUS_PLAN_ID) !== -1);\n const userIsBuyingPcloudPass = (id === PASS_FAMILY_PLAN_ID || id === PASS_PREMIUM_PLAN_ID) && (lastsubscription.products.indexOf(PASS_FAMILY_PLAN_ID) !== -1 || lastsubscription.products.indexOf(PASS_PREMIUM_PLAN_ID) !== -1);\n const userIsBuyingSubscribedPlan = lastsubscription.products.indexOf(id) !== -1;\n \n if (userIsBuyingSubscribedPlan) {\n if (efh && id == EFH_PLAN_ID) {\n hasActiveEFHPlan = true;\n }\n \n if (cryptosubscription && id == CRYPTO_PLAN_ID) {\n hasActiveCryptoPlan = true;\n }\n\n if (additionaltraffic && !additionaltrafficlifetime && id == ADDITIONAL_TRAFFIC_ID) {\n hasActiveTrafficPlan = true;\n }\n }\n \n if (userIsBuyingStorage && premium && !premiumlifetime) {\n hasActiveStoragePlan = true; \n }\n\n if (userIsBuyingPcloudPass && passmanagerdata.plan && !passmanagerdata.islifetime) {\n hasActivePassPlan = true; \n }\n \n return hasActiveEFHPlan || hasActiveCryptoPlan || hasActiveStoragePlan || hasActiveTrafficPlan || hasActivePassPlan;\n });\n }\n\n return false;\n }\n\n const renderPaymenDataLoading = () => {\n return (\n \n {}}\n onExited={() => {}}\n appear\n >\n \n \n \n \n \n \n {__(\"loading_payment_form\")}\n \n \n \n )\n }\n\n const renderView = () => {\n if (paymentView === \"ccard\") {\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 (paymentView === \"paypal\") {\n return (\n \n );\n } else if (paymentView === \"local\") {\n return (\n \n )\n } else if (paymentView === \"alipay\") {\n return (\n \n )\n } else if (paymentView === \"wechat\") {\n return (\n \n )\n }\n };\n\n return (\n \n \n 2\n {__(\"payment\")}\n \n {user ? (\n \n {!isIE ? (\n \n {\n tabs.length > 1 ? (\n isMobile ? (\n \n ) : (\n \n )\n ) : null\n }\n {renderPaymenDataLoading()}\n \n \n node.addEventListener(\"transitionend\", done, false)}\n classNames='fade'\n >\n {renderView()}\n \n \n \n \n ) : {__(\"payments_not_supported_ie\")}}\n \n ): null}\n \n )\n}\n\nexport default PaymentContainer;\n\nconst TabIcon = styled.div`\n display: inline-block;\n height: 22px;\n width: 28px;\n background-repeat: no-repeat;\n background-position: center;\n \n ${({ disabled }) => {\n if (disabled) {\n return `\n opacity: 0.5;\n -webkit-opacity: 0.5;\n -webkit-filter: grayscale(1);\n filter: grayscale(1);\n `\n }\n }}\n`;\n\nconst PayPalIcon = styled(TabIcon)`\n background-size: 22px 22px;\n background-image: url(\"/images/plans/tabs/pp.png\");\n ${hiDPI(1.5)} {\n background-image: url(\"/images/plans/tabs/pp@2x.png\");\n }\n`;\n\nconst CCIcon = styled(TabIcon)`\n background-size: 28px 22px;\n background-image: url(\"/images/plans/tabs/cc.png\");\n ${hiDPI(1.5)} {\n background-image: url(\"/images/plans/tabs/cc@2x.png\");\n }\n`;\n\nconst LocalIcon = styled(TabIcon)`\n background-size: 22px 22px;\n background-image: url(\"/images/plans/tabs/local.png\");\n ${hiDPI(1.5)} {\n background-image: url(\"/images/plans/tabs/local@2x.png\");\n }\n`;\n\nconst AlipayIcon = styled(TabIcon)`\n background-size: 28px 22px;\n background-image: url(\"/images/plans/tabs/alipay.png\");\n ${hiDPI(1.5)} {\n background-image: url(\"/images/plans/tabs/alipay@2x.png\");\n }\n`;\n\nconst WechatIcon = styled(TabIcon)`\n background-size: 28px 22px;\n background-image: url(\"/images/plans/tabs/wechatpay.png\");\n ${hiDPI(1.5)} {\n background-image: url(\"/images/plans/tabs/wechatpay@2x.png\");\n }\n`;\n\nconst PaymentProcessingWrapper = styled.div`\n display: inline-block;\n width: 100%;\n height: 100%;\n border-radius: 7px;\n border: solid 1px #f0f0f0;\n background-color: #fcfcfc;\n position: absolute;\n top: 0px;\n left: 0px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n z-index: 100;\n transition: all 400ms ease-in-out;\n`;\n\nconst ProcessingMessage = styled.div`\n font-family: Roboto;\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: ${({error}) => error ? \"#f73c3c\" : \"#000\"};\n max-width: 400px;\n margin: 0 auto;\n margin-top: 14px;\n transition: all 250ms ease-in-out;\n`;\n\nconst 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\nconst DisclaimerText = styled.span`\n font-size: 11px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n text-align: left;\n color: #999999;\n margin-right: 4px;\n\n b {\n font-weight: normal;\n color: #000;\n }\n\n a {\n color: #000;\n font-size: 11px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n /* margin-right: 4px;\n &:last-of-type {\n margin-right: 0px;\n } */\n }\n\n &:last-of-type {\n margin-right: 0px;\n }\n`;\n\nconst Disclaimer = styled.div`\n margin-top: 40px;\n line-height: 1;\n`;\n\nconst Message = styled.div`\n min-height: 298px;\n height: 297px;\n display: flex;\n align-items: center;\n text-align: center;\n justify-content: center;\n`;\n","var _path, _path2;\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 SvgPriceLoadingIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 18,\n height: 17.999\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9 18a9.01 9.01 0 01-9-9 9.01 9.01 0 019-9 9.01 9.01 0 019 9 9.01 9.01 0 01-9 9zM9 2a7.008 7.008 0 00-7 7 7.007 7.007 0 007 7 7.008 7.008 0 007-7 7.008 7.008 0 00-7-7z\",\n opacity: 0.15\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0 9a9.011 9.011 0 018.952-9H9a1 1 0 011 1 1 1 0 01-1 1 7.009 7.009 0 00-7 7 1 1 0 01-1 1 1 1 0 01-1-1z\",\n opacity: 0.35\n })));\n}\nexport default SvgPriceLoadingIcon;","// @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 hasDiscount?: boolean,\n discountPercentages?: number,\n size?: \"small\" | \"big\",\n priceColor?: string,\n oldPriceColor?: string,\n pricesInColumn?: boolean,\n};\n\nconst BoxPricesInlineV2 = ({\n price = 0,\n currency,\n oldPrice,\n className = \"\",\n newLine = false,\n hasDiscount = false,\n discountPercentages = 0,\n size = \"small\",\n priceColor,\n oldPriceColor,\n pricesInColumn = false,\n}: BoxPriceInlineProps) => {\n return (\n \n {newLine ?
: null}\n \n {oldPrice && oldPrice != price && price != 0 ? (\n \n \n {oldPrice}\n {signToCurrency[currency]}\n \n \n \n ) : null}\n\n \n {price}\n {signToCurrency[currency]}\n \n \n {hasDiscount ? \n \n {__(\"discount_applied\", \"Discount applied\")}{discountPercentages > 0 ? (\" -\" + discountPercentages + \"%\") : null}\n \n : null}\n \n )\n}\n\nexport default BoxPricesInlineV2;\n\nconst PricesWrapper = styled.div`\n font-family: Roboto, Inter;\n display: ${({column}) => column ? \"flex\" : \"inline-block\"};\n ${({column}) => column ? `\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n ` : null};\n \n &.vis-hidden {\n visibility: hidden;\n }\n`;\n\nconst OldPrice = styled.span`\n position: relative;\n font-size: ${({ size, column }) => (size === \"small\" ? \"14px\" : (column ? \"19px\" : \"18px\"))};\n color: ${({ color }) => (color ? color : \"#bbb\")};\n margin-right: ${({column}) => column ? \"0\" : \"8px\"};\n\n ${({column, size}) => column ? `\n line-height: ${size === \"small\" ? \"normal\" : \"1.11\"};\n ` : null};\n\n @media (max-width: 450px) {\n font-size: ${({ size, column }) => (size === \"small\" ? \"13px\" : (column ? \"18px\" : \"17px\"))};\n }\n`;\n\nconst Price = styled.span`\n font-size: ${({ size }) => (size === \"small\" ? \"15px\" : \"19px\")};\n font-weight: ${({ size }) => (size === \"small\" ? \"normal\" : \"500\")};\n line-height: ${({ size }) => (size === \"small\" ? \"normal\" : \"1.11\")};\n color: ${({ color }) => (color ? color : \"#000\")};\n\n @media (max-width: 450px) {\n font-size: ${({ size }) => (size === \"small\" ? \"14px\" : \"18px\")};\n }\n`;\n\nconst CurrencyCode = styled.span`\n font-size: ${({ size }) => (size === \"small\" ? \"10px\" : \"12px\")};\n line-height: ${({ size }) => (size === \"small\" ? \"1.4\" : \"1.33\")};\n margin-left: 3px;\n &.currency-code-old-price {\n line-height: ${({ size }) => (size === \"small\" ? \"1.38\" : \"1.45\")};\n }\n`;\n\nconst Value = styled.span``;\n\nconst CrossLine = styled.div`\n position: absolute;\n left: 0px;\n top: calc(50% - 1px);\n width: 100%;\n height: 1px;\n background-color: ${({ color }) => (color ? color : \"#bbb\")};\n`;\n\nconst DiscountWrapper = styled.div`\n text-align: right;\n & > span {\n padding: 4px 8px;\n border-radius: 8px;\n border: solid 1px #dfedb8;\n background-color: #fcfef6;\n font-size: 8px;\n font-weight: 500;\n color: #3eaf2f;\n }\n`;\n","//@flow\n\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { Tooltip as ReactTooltip } from \"react-tooltip\";\nimport InfoIcon from \"../../svg/info-icon.svg\";\nimport { CheckIcon } from \"../CheckoutPage/views/StyledComponents/Style\";\n\ntype BoxFeatureProps = {\n feature: string,\n tooltip?: string,\n className?: string,\n showCheck?: boolean,\n color?: string\n};\n\nconst BoxFeatureV2 = ({\n feature,\n tooltip,\n className = \"\",\n showCheck = true,\n color = \"#17bed0\"\n}: BoxFeatureProps) => {\n return (\n \n {showCheck ? : null}\n {feature}\n {tooltip ? (\n \n \n \n \n ) : null}\n \n );\n};\n\nexport default BoxFeatureV2;\n\nconst BenefitItemWrapper = styled.div`\n display: flex;\n gap: 12px;\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 BenefitText = styled.div`\n font-size: 13px;\n`;\n\n\n","//@flow\n\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { Tooltip as ReactTooltip } from \"react-tooltip\";\nimport { SwitchTransition, CSSTransition } from \"react-transition-group\";\n\nimport PriceLoadingIcon from \"../../../svg/price-loading-icon.svg\";\nimport InfoIcon from \"../../../svg/info-icon.svg\";\nimport type { CurrencyType } from \"../../../lib/types/dataTypes.components\";\nimport InputStyledCheckbox from \"@pcloud/web-utilities/dist/resources/components/InputStyledCheckbox\";\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\nimport { CUSTOM4TB_PLAN_ID } from \"@pcloud/web-utilities/dist/plans/constants.plans\";\nimport BoxPricesInlineV2 from \"../../PlansBox/BoxPricesInlineV2\";\nimport SpinContainer from \"../../SpinContainer\";\nimport { PriceLoadingWrapper, AnimationContainer, CheckIcon } from \"./StyledComponents/Style\";\nimport { renderQuota } from \"@pcloud/web-utilities/dist/plans/utils.plans\";\nimport { productNameMap, planBoxTexts } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\nimport BoxFeatureV2 from \"../../PlansBox/BoxFeatureV2\";\nimport { ProductType } from \"../../../lib/types/ProductType\";\nimport { ADDITIONAL_TRAFFIC_ID } from \"@pcloud/web-utilities/dist/plans/constants.plans\";\nimport ReactDOMServer from \"react-dom/server\";\n\ntype Props = {\n plan: ProductType,\n selectable: boolean,\n color: any,\n price: number,\n oldPrice: number,\n currency: CurrencyType,\n priceLoading: false,\n selected?: boolean,\n onChange?: () => void,\n testid?: string,\n disabled: boolean,\n featuresAsTooltip?: boolean,\n showFeatures: boolean\n};\n\nconst OrderInfoPlanBox = ({\n plan,\n selectable = false,\n color,\n price = 0,\n oldPrice = 0,\n currency = \"\",\n priceLoading = false,\n selected,\n onChange = () => {},\n testid = \"\",\n disabled = false,\n featuresAsTooltip = false,\n showFeatures = true\n}: Props) => {\n\n price = (price % 1 === 0) ? price : price.toFixed(2);\n oldPrice = (oldPrice % 1 === 0) ? oldPrice : oldPrice.toFixed(2);\n\n const getPlanName = () => {\n let planName = productNameMap[plan.id][plan.addplan ? 'add' : 'long'];\n console.log(\"plan\", plan)\n if (plan.id === ADDITIONAL_TRAFFIC_ID) {\n planName = planName.replace(\"%amount%\", renderQuota(plan.trafficafterbuy));\n }\n\n if (plan.id === CUSTOM4TB_PLAN_ID) {\n planName = planName + \" \" + renderQuota(plan.quotaafterbuy);\n }\n\n return planName;\n }\n\n const planName = useMemo(getPlanName, [plan]);\n\n const colorValue = COLORS[color] ? COLORS[color].mainColor : \"#17bed0\";\n\n const [togglePlanBenefits, setTogglePlanBenefits] = useState({shown: false, animationFinished: true});\n const [benefitsContainerWrapperMaxHeight, setBenefitsContainerWrapperMaxHeight] = useState(\"auto\");\n\n const benefitsContainerWrapper = useRef(null);\n\n const planBenefitsAreShown = useRef(false);\n\n useEffect(() => {\n return () => {\n if (!featuresAsTooltip && benefitsContainerWrapper.current) {\n benefitsContainerWrapper.current.removeEventListener(\"transitionend\", toggleAllBenefitsOnTransitionEnd);\n }\n };\n }, []);\n\n useEffect(() => {\n if (benefitsContainerWrapper.current) {\n initSeeAllBenefitsMaxHeightToApplyAnimation();\n }\n \n // window.onresize = initSeeAllBenefitsMaxHeightToApplyAnimation;\n }, [benefitsContainerWrapper]);\n\n const initSeeAllBenefitsMaxHeightToApplyAnimation = () => {\n if (benefitsContainerWrapper.current) {\n benefitsContainerWrapper.current.addEventListener(\"transitionend\", toggleAllBenefitsOnTransitionEnd);\n setBenefitsContainerWrapperMaxHeight(benefitsContainerWrapper.current.offsetHeight + \"px\");\n }\n };\n\n const toggleAllBenefitsOnTransitionEnd = (event) => {\n setTogglePlanBenefits({shown: planBenefitsAreShown.current, animationFinished: true});\n };\n\n const togglePlanBenefitsLink = () => {\n planBenefitsAreShown.current = !planBenefitsAreShown.current;\n setTogglePlanBenefits({shown: planBenefitsAreShown.current, animationFinished: false}); \n };\n\n const renderFeatures = (plan, showCheck = true) => {\n const { features } = planBoxTexts[plan.id];\n const featuresToRender = features[plan.addplan ? \"add\" : \"default\"];\n return featuresToRender.map(({ feature }, index) => {\n if (feature.indexOf(\"%traffic_amount%\") !== -1) {\n feature = feature.replace(\"%traffic_amount%\", renderQuota(plan.trafficafterbuy));\n }\n\n if (feature.indexOf(\"%amount%\") !== -1) {\n feature = feature.replace(\"%amount%\", renderQuota(plan.quotaafterbuy));\n }\n\n return (\n \n );\n });\n }; \n\n return (\n \n \n \n \n {selectable ? (\n \n ) : (\n \n )}\n \n \n \n {}}\n className=\"plan-name-text\">\n {planName}\n \n\n {showFeatures && featuresAsTooltip ?\n \n \n \n \n : null}\n\n \n \n \n \n \n \n node.addEventListener(\"transitionend\", done, false)}\n classNames=\"fade\"\n >\n {priceLoading ? (\n \n \n \n \n \n ) : (\n \n )}\n \n \n \n \n \n \n {showFeatures && !featuresAsTooltip ?\n \n \n \n {renderFeatures(plan)}\n \n \n \n {(togglePlanBenefits.shown && togglePlanBenefits.animationFinished) || (!togglePlanBenefits.shown && !togglePlanBenefits.animationFinished) ? \n \n {__(\"label_hide_all_benefits\", \"Hide all benefits\")} \n \n : \n \n {__(\"label_see_all_benefits\", \"See all benefits\")} \n \n }\n \n \n : null}\n \n );\n};\n\nexport default OrderInfoPlanBox;\n\nconst PlanWrapper = styled.div`\n width: 100%;\n padding: 12px 16px;\n box-sizing: border-box;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n background-color: #f7f8fa;\n margin: 8px auto;\n position: relative;\n\n svg {\n flex-shrink: 0;\n }\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: 10px auto;\n background-color: #f8f8f8;\n height: auto;\n }\n\n @media (max-width: 450px) {\n padding: 12px;\n }\n`;\n\nconst PlanNameAndPriceWrapper = styled.div`\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n justify-content: space-between;\n flex-wrap: nowrap;\n`;\n\nconst CheckBoxWrapper = styled.div`\n width: 30px;\n .checkbox-checkmark {\n margin-top: ${({ featuresAsTooltip }) => featuresAsTooltip ? \"3px\" : \"2px\"};\n line-height: 14px;\n height: 14px;\n padding-left: 14px;\n\n span {\n height: 14px;\n width: 14px;\n border-radius: 2px !important;\n border: ${({ selected, selectable }) =>\n selected && selectable ? \"solid 2px transparent\" : \"solid 1px #a1a1a1\"};\n background-color: ${({ selected, selectable, colorValue }) =>\n selected && selectable ? colorValue : \"#fff\"};\n\n &:after {\n left: 3px;\n height: 6px;\n width: 2px;\n }\n }\n }\n\n @media (max-width: 768px) {\n .checkbox-checkmark {\n margin-top: 2px;\n }\n }\n\n @media (max-width: 450px) {\n width: 22px;\n .checkbox-checkmark {\n margin-top: 0;\n }\n }\n`;\n\nconst CheckBoxAndPlanNameWrapper = styled.div`\n flex-grow: 1;\n display: flex;\n align-items: flex-start;\n flex-shrink: 100;\n\n ${({selectable, disabled}) => {\n if (selectable && disabled) {\n return `opacity: 0.65;`\n }\n }}\n`;\n\nconst PlanName = styled.div`\n max-width: ${({ hasInfoIcon }) => hasInfoIcon ? \"214px\" : \"auto\"};\n font-size: 15px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n letter-spacing: normal;\n text-align: left;\n color: #000;\n margin-right: 5px;\n flex-grow: 1;\n display: flex;\n align-items: flex-start;\n flex-shrink: 100;\n\n .plan-name-text {\n margin-right: ${({ hasInfoIcon }) => hasInfoIcon ? \"10px\" : \"0\"};\n }\n\n .plan-info-icon {\n position: relative;\n top: 3px;\n }\n\n .plan-info-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 color: #fff;\n }\n\n @media (max-width: 768px) {\n max-width: initial;\n\n .plan-name-text {\n margin-right: 0;\n }\n \n .plan-info-icon, .plan-info-tooltip {\n display: none;\n }\n }\n\n @media (max-width: 450px) {\n max-width: initial;\n font-size: 13px;\n }\n\n svg {\n flex-shrink: 0;\n }\n`;\n\nconst PlanNameText = styled.span`\n cursor: ${({ selectable, disabled }) => (selectable && !disabled ? \"pointer\" : \"default\")};\n`;\n\nconst PlanPricesWrapper = styled.div`\n display: flex;\n line-height: 15px;\n\n @media (max-width: 450px) {\n line-height: 13px;\n }\n`;\n\nconst BenefitsWrapper = styled.div`\n margin-left: 30px;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n color: #000;\n\n &.show-benefits {\n .benefits-container-wrapper {\n visibility: visible;\n max-height: ${({ maxheight }) => (maxheight ? maxheight : \"auto\")};\n }\n }\n\n .shown-benefits-link {\n &:after {\n transform: rotate(-135deg);\n top: 6px;\n }\n }\n\n @media (max-width: 450px) {\n margin-left: 22px;\n }\n`;\n\nconst ToggleBenefitsLink = styled.a`\n color: ${({color}) => color ? color : \"#17bed0\"};\n font-size: 13px;\n font-weight: 500;\n text-decoration: none;\n position: relative;\n margin-top:8px;\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst PlanBenefitsArrowDown = styled.span`\n display: inline-block;\n width: 6px;\n height: 6px;\n border-style: solid;\n border-color: ${({color}) => color ? color : \"#17bed0\"};\n border-width: 0px 2px 2px 0px;\n transform: rotate(45deg);\n margin-left: 8px;\n position: absolute;\n top: 2px;\n`;\n\nconst PlanBenefitsArrowUp = styled(PlanBenefitsArrowDown)`\n transform: rotate(-135deg);\n top: 6px;\n`;\n\nconst BenefitsContainerWrapper = styled.div`\n transition: visibility .3s ease-in-out, max-height .3s ease-in-out; // note that we're transitioning max-height, not height!\n overflow: hidden;\n visibility: hidden;\n max-height: ${({ maxheight }) => (maxheight === \"auto\" ? maxheight : \"0\")};\n`;\n\nconst BenefitsContainer = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-left: 4px;\n margin-bottom: 4px;\n margin-top: 8px;\n`;","//@flow\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { SwitchTransition, CSSTransition } from \"react-transition-group\";\n\nimport type { CurrencyType } from \"../../../lib/types/dataTypes.components\";\nimport PriceLoadingIcon from \"../../../svg/price-loading-icon.svg\";\nimport BoxPricesInlineV2 from \"../../PlansBox/BoxPricesInlineV2\";\nimport SpinContainer from \"../../SpinContainer\";\nimport { PriceLoadingWrapper, AnimationContainer } from \"./StyledComponents/Style\";\n\nimport { signToCurrency } from \"@pcloud/web-utilities/dist/payments/constants.payments\";\n\ntype Props = {\n periodText: string,\n price: number,\n oldPrice: number,\n priceLoading: boolean,\n priceLoadingDelay: number,\n currency: CurrencyType,\n showDiscountLabel?: boolean,\n discountPercentages: number,\n discountSum: number,\n};\n\nconst OrderInfoPriceSum = ({\n periodText,\n price,\n oldPrice,\n priceLoading = false,\n priceLoadingDelay = 0,\n currency,\n showDiscountLabel = false,\n discountPercentages = 0,\n discountSum = 0,\n}: Props) => {\n price = (price % 1 === 0) ? price : price.toFixed(2);\n oldPrice = (oldPrice % 1 === 0) ? oldPrice : oldPrice.toFixed(2);\n\n const [loading, setLoading] = useState(priceLoading);\n\n const debounceLoadingHandler = useRef(null);\n\n useEffect(() => {\n return () => {\n if (priceLoadingDelay > 0 && debounceLoadingHandler.current) {\n clearTimeout(debounceLoadingHandler.current);\n }\n }\n },[]);\n\n useEffect(() => {\n if (priceLoadingDelay == 0) {\n setLoading(priceLoading);\n return;\n }\n \n clearTimeout(debounceLoadingHandler.current);\n\n if (priceLoading) {\n debounceLoadingHandler.current = setTimeout(() => priceLoading ? setLoading(true) : null, priceLoadingDelay);\n } else {\n setLoading(false);\n }\n },[priceLoading]);\n\n return (\n \n \n

\n {periodText}\n

\n {showDiscountLabel ? \n \n {__(\"discount_applied\", \"Discount applied\")}{discountPercentages > 0 ? (\" -\" + discountPercentages + \"%\") : (discountSum > 0 ? -{discountSum} {signToCurrency[currency]} : null)}\n \n : null}\n \n \n \n node.addEventListener(\"transitionend\", done, false)}\n classNames=\"fade\"\n >\n \n {loading ? (\n \n \n \n \n \n ) : null}\n \n \n \n \n \n \n \n );\n};\n\nexport default OrderInfoPriceSum;\n\nconst SumWrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ${({column}) => column ? \"16px\" : \"28px\"};\n \n @media (max-width: 768px) {\n margin-bottom: 16px;\n }\n`;\n\nconst PeriodText = styled.div`\n font-size: 15px;\n font-weight: 500;\n color: #000;\n flex-grow: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n`;\n\nconst DiscountWrapper = styled.div`\n & > span {\n padding: 4px 8px;\n border-radius: 8px;\n border: solid 1px #dfedb8;\n background-color: #fcfef6;\n font-size: 12px;\n font-weight: 500;\n color: #3eaf2f;\n display: inline-block;\n line-height: 1.4;\n }\n`;\n\nconst DiscountCurrency = styled.span`\n font-size: 10px;\n`;\n","//@flow\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport styled from \"styled-components\";\n\nimport * as Style from \"./StyledComponents/Style\";\n\nimport type {\n PlanIDType,\n PeriodType,\n Userinfo,\n CurrencyType\n} from \"../../../lib/types/dataTypes.components\";\n\nimport { COLORS } from \"@pcloud/web-utilities/dist/config/constants\";\n\nimport { \n CUSTOM4TB_PLAN_ID\n} from \"@pcloud/web-utilities/dist/plans/constants.plans\";\n\nimport {\n plansCheckoutPageColors,\n productNameMap,\n underPriceTexts,\n testPlanNames,\n PASS_PLANS_PER_PERIOD,\n gaPeriods,\n plansQuota,\n planNames,\n} from \"@pcloud/web-utilities/dist/plans/plansInfo\";\n\nimport OrderInfoPlanBox from \"./OrderInfoPlanBox\";\nimport OrderInfoPriceSum from \"./OrderInfoPriceSum\";\nimport { __ } from \"../../../lib/utils\";\nimport { signToCurrency, currencyMap } from \"@pcloud/web-utilities/dist/payments/constants.payments\";\nimport { rcookie } from \"@pcloud/web-utilities/dist/lib/utils\";\n\nimport { loadPlanInfoApiCall, getPaymentSummaryText, getPricingPageURL } from \"../../../lib/plansUtils\";\nimport { ProductType } from \"../../../lib/types/ProductType\";\nimport { SubscriptionSummary } from \"../../../lib/types/SubscriptionSummary\";\n\ntype Props = {\n chosenPeriod: PeriodType,\n user: Userinfo,\n renderPayButton: any,\n setCart: (cart: Array) => void,\n disabledPlanOptions: boolean,\n paymentInProgress: boolean,\n setTotalPrice: (newPrice: number) => void,\n traffic: string | number,\n orderInfo: {\n currency: CurrencyType,\n totalDiscount: number,\n totalPlanPrice: number,\n totalPriceToPay: number,\n totalOriginalPrice: number,\n totalNextPriceToPay: number,\n nextBillingDate: string,\n initialOrderPlans: Array,\n subscribedPlans: {plans: Array<{subscribedProducts: Array, period: PeriodType}>, storagePlansToUpgrade: Array, passPlansToUpgrade: Array, trafficPlansToUpgrade: Array, periods: Array},\n upsellPlans: Array,\n chosenUpsellPlans: Array\n },\n paymentSummaryData: SubscriptionSummary,\n setPaymentSummaryData: (paymentSummaryData: SubscriptionSummary) => void,\n featuresAsTooltip: boolean,\n loadOrderInfoOnUpsellsChangeXHR: {},\n setChosenUpsellPlans: (chosenUpsellPlans: {data: {[planId: PlanIDType]: PlanIDType}, setAfter: \"checkbox_change\" | \"user_change\"}) => void,\n chosenUpsellPlans: {data: {[planId: PlanIDType]: PlanIDType}, setAfter: \"checkbox_change\" | \"user_change\"},\n loadOrderInfoXHR: {},\n setLoadRequiredPageDataFailed: (flag: boolean) => void,\n setLoadingOrderInfoOnUpsellsChange: (flag: boolean) => void,\n loadingOrderInfoOnUpsellsChange: boolean,\n paypalButtonLoading: boolean,\n paymentView: \"ccard\" | \"paypal\" | \"local\" | \"alipay\" | \"wechat\",\n cardProvider: \"stripe\" | \"safecahrge\",\n downgrade: string,\n pricingPageURL: string,\n pricingPagePassURL: string,\n cryptoPageURL: string,\n trafficPageURL: string,\n familyPageURL: string,\n};\n\nconst OrderInfoContainer = ({\n chosenPeriod,\n user,\n renderPayButton,\n setCart,\n disabledPlanOptions = false,\n paymentInProgress,\n discount,\n setTotalPrice,\n totalPrice,\n traffic,\n orderInfo = {\n totalDiscount: 0,\n totalPlanPrice: 0,\n totalPriceToPay: 0,\n totalOriginalPrice: 0,\n totalNextPriceToPay: 0,\n nextBillingDate: \"\",\n initialOrderPlans: [],\n subscribedPlans: {plans: [], storagePlansToUpgrade: [], passPlansToUpgrade: [], trafficPlansToUpgrade: [], periods: []},\n upsellPlans: [],\n chosenUpsellPlans: []\n },\n paymentSummaryData = {\n totalDiscount: 0,\n totalPlanPrice: 0,\n totalNextPriceToPay: 0,\n nextBillingDate: \"\"\n },\n setPaymentSummaryData,\n featuresAsTooltip = false,\n chosenUpsellPlans,\n setChosenUpsellPlans,\n loadOrderInfoOnUpsellsChangeXHR = null,\n loadOrderInfoXHR = null,\n setLoadRequiredPageDataFailed = (res = false) => res,\n setLoadingOrderInfoOnUpsellsChange = (res = false) => res,\n loadingOrderInfoOnUpsellsChange = false,\n paypalButtonLoading = false,\n paymentView = \"ccard\",\n cardProvider = null,\n downgrade = \"\",\n pricingPageURL,\n pricingPagePassURL,\n cryptoPageURL,\n trafficPageURL,\n familyPageURL,\n}: Props) => {\n \n const [totalOldPrice, setTotalOldPrice] = useState(0);\n\n const totalPriceAndPayBtnEl = useRef(null);\n\n useEffect(() => {\n if (totalPriceAndPayBtnEl.current) {\n initStickyTotalPriceAndPayBtnChecker();\n }\n }, [totalPriceAndPayBtnEl]);\n\n const getInitialAndSubscribedCartItems = () => {\n const cart = [];\n\n for (const plan of orderInfo.initialOrderPlans) {\n cart.push(plan.id);\n }\n\n for (const plan of orderInfo.subscribedPlans.plans) {\n for (const product of plan.subscribedProducts) {\n cart.push(product.id);\n }\n }\n\n return cart;\n };\n\n useEffect(() => {\n\n const cart = getInitialAndSubscribedCartItems().concat(orderInfo.chosenUpsellPlans);\n \n setCart(cart);\n\n // Update info for text below Pay now \n setPaymentSummaryData({\n totalDiscount: orderInfo.totalDiscount,\n totalPlanPrice: orderInfo.totalPlanPrice,// Total price without any discounts.\n totalPriceToPay: orderInfo.totalPriceToPay,\n totalNextPriceToPay: orderInfo.totalNextPriceToPay,\n nextBillingDate: orderInfo.nextBillingDate,\n currency: orderInfo.currency\n });\n \n setTotalPrice(orderInfo.totalPriceToPay / 100);\n setTotalOldPrice(orderInfo.totalOriginalPrice / 100);\n\n if (orderInfo.upsellPlans.length && typeof dataLayer !== \"undefined\") {\n orderInfo.upsellPlans.forEach(({id: planId, pricecents, discount, validdiscountcode}) => {\n dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.\n dataLayer.push({\n event: \"view_item\",\n ecommerce: {\n currency: signToCurrency[orderInfo.currency],\n value: pricecents / 100,\n items: [{\n item_id: planId,\n item_name: planNames[planId] + \" \" + gaPeriods[chosenPeriod],\n affiliation: rcookie(\"ref\"),\n coupon: discount && validdiscountcode ? discount : \"\",\n index: 0,\n item_brand: PASS_PLANS_PER_PERIOD[chosenPeriod].includes(planId) ? \"pCloudPass\" : \"pCloud\",\n item_category: gaPeriods[chosenPeriod],\n item_variant: plansQuota[planId] || \"\",\n price: pricecents / 100,\n quantity: 1\n }],\n }\n });\n })\n }\n\n // Fix sticky element on mobile.\n window.dispatchEvent(new CustomEvent(\"sticky-total-price-and-pay-btn-check\"));\n }, [orderInfo]);\n\n useEffect(() => {\n if (chosenUpsellPlans.data === null || loadOrderInfoXHR.current !== null || chosenUpsellPlans.setAfter != \"checkbox_change\") {\n return;\n }\n\n const cart = getInitialAndSubscribedCartItems();\n\n for (const planId in chosenUpsellPlans.data) {\n const upsellPlan = orderInfo.upsellPlans.find(plan => plan.id === chosenUpsellPlans.data[planId]);\n if (upsellPlan) {\n cart.push(upsellPlan.id);\n }\n }\n\n setCart(cart);\n\n // For text below Pay now and Due today we need to ask the API.\n setLoadingOrderInfoOnUpsellsChange(true);\n \n if (loadOrderInfoOnUpsellsChangeXHR && loadOrderInfoOnUpsellsChangeXHR.current && loadOrderInfoOnUpsellsChangeXHR.current !== null && loadOrderInfoOnUpsellsChangeXHR.current.abort) {\n loadOrderInfoOnUpsellsChangeXHR.current.abort();\n }\n\n loadOrderInfoOnUpsellsChangeXHR.current = loadPlanInfoApiCall({\n user, \n chosenPeriod,\n chosenPlanIds: cart, \n subscribedPlans: {plans: [], storagePlansToUpgrade: [], passPlansToUpgrade: [], trafficPlansToUpgrade: [], periods: []}, \n chosenUpsellPlans: {}, // all are set in cartItems, so we don't have to pass them here.\n traffic, \n paymentView, \n cardProvider,\n discountCode: discount\n }, (res) => {\n const newTotalPriceToPay = res.amounttopay;// Due today\n const newOriginalPrice = res.originaltotalamount;// Strikethrough price\n // Update Due today and strikethrough price.\n setTotalPrice(newTotalPriceToPay / 100);\n setTotalOldPrice(newOriginalPrice / 100);\n\n // Update info for text below Pay now \n setPaymentSummaryData({\n totalDiscount: res.totaldiscount || 0,\n totalPlanPrice: res.totalamount || 0,// Total price without any discounts.\n totalPriceToPay: newTotalPriceToPay,// Due today\n totalNextPriceToPay: res.nextbillingamount,\n nextBillingDate: res.nextbillingtime,\n currency: currencyMap[res.currency],\n });\n\n // Release resources and loading flags.\n setLoadingOrderInfoOnUpsellsChange(false);\n loadOrderInfoOnUpsellsChangeXHR.current = null;\n\n // Fix sticky element on mobile.\n window.dispatchEvent(new CustomEvent(\"sticky-total-price-and-pay-btn-check\"));\n }, (errData) => {\n // Internally aborted. Another request is in progress.\n if (errData && errData.result === \"xhr_error\" && errData.error && errData.error.status && errData.error.status === \"abort\") {\n return;\n }\n\n // This will hide the page and show error message.\n setLoadRequiredPageDataFailed(true);\n });\n }, [chosenUpsellPlans]);\n\n const initStickyTotalPriceAndPayBtnChecker = () => {\n const stickyElement = totalPriceAndPayBtnEl.current.querySelector('.sticky-element-wrapper');\n if (!stickyElement) {\n return;\n }\n\n let alreadyStuck = false;\n const onScrolledOrResized = () => {\n // If our sticky bottom part becomes visible to the viewport -> remove position: fixed.\n if (window.innerWidth <= 768 && window.innerHeight > 400 && totalPriceAndPayBtnEl.current.getBoundingClientRect().top + stickyElement.offsetHeight > window.innerHeight) {\n if (stickyElement.parentElement) {\n // Set blank height to support the same scrollbar height.\n stickyElement.parentElement.style.height = stickyElement.offsetHeight + \"px\";\n }\n\n if (!alreadyStuck) {\n // We are above the element.\n stickyElement.classList.add(\"sticky-total-price-and-pay-btn\");\n alreadyStuck = true;\n }\n } else if (alreadyStuck) {\n // Our sticky bottom part became visible into the viewport.\n if (stickyElement.parentElement) {\n // Revert added blank height to normal.\n stickyElement.parentElement.style.height = \"auto\";\n }\n stickyElement.classList.remove(\"sticky-total-price-and-pay-btn\");\n alreadyStuck = false;\n }\n };\n\n window.addEventListener(\"scroll\", onScrolledOrResized);\n window.addEventListener(\"resize\", onScrolledOrResized);\n window.addEventListener(\"sticky-total-price-and-pay-btn-check\", onScrolledOrResized);\n\n onScrolledOrResized();\n }\n\n const renderInitialOrderPlansList = () => {\n if (!orderInfo.initialOrderPlans.length) {\n return null;\n }\n\n return (\n \n {__(\"your_order\")}\n {renderInitialOrderPlans()}\n \n );\n }\n\n const renderInitialOrderPlans = () => {\n if (!orderInfo.initialOrderPlans.length) {\n return null;\n }\n\n return orderInfo.initialOrderPlans.map(product => \n 0 ? null : (product.originalprice / 100)}\n currency={paymentSummaryData.currency}\n featuresAsTooltip={featuresAsTooltip}\n />\n );\n };\n\n const renderSubscribedPlansWithDifferentChosenPeriodList = () => {\n // Check if we have subscribed plans for same period\n if (!user || !orderInfo.subscribedPlans.plans.length || chosenPeriod === \"lifetime\" || !orderInfo.subscribedPlans.plans.find(plan => plan.period !== chosenPeriod)) {\n return null;\n }\n\n return (\n \n {__(\"currently_subscribed\", \"Currently subscribed\")}\n {renderSubscribedPlans(false)}\n \n );\n };\n\n const renderSubscribedPlansWithSameChosenPeriodList = () => {\n // Check if we have subscribed plans for same period\n if (!user || !orderInfo.subscribedPlans.plans.length || chosenPeriod === \"lifetime\" || !orderInfo.subscribedPlans.plans.find(plan => plan.period === chosenPeriod)) {\n return null;\n }\n\n return (\n \n \n \n {__(\"currently_subscribed\", \"Currently subscribed\")}\n {renderSubscribedPlans(true)}\n \n \n \n );\n }\n\n const renderSubscribedPlans = (withSameChosenPeriod) => {\n if (!user || !orderInfo.subscribedPlans.plans.length || chosenPeriod === \"lifetime\") {\n return null;\n }\n\n return orderInfo.subscribedPlans.plans.map(plan => {\n // With same chosen period mode.\n if (withSameChosenPeriod && plan.period !== chosenPeriod) {\n return null;\n }\n\n // With different chosen period.\n if (!withSameChosenPeriod && plan.period === chosenPeriod) {\n return null;\n }\n\n return plan.subscribedProducts.map(product => \n 0 ? null : (product.originalprice / 100)}\n currency={paymentSummaryData.currency}\n featuresAsTooltip={featuresAsTooltip}\n showFeatures={!withSameChosenPeriod}\n />\n );\n });\n };\n\n const renderUpsellPlansList = () => {\n if (!orderInfo.upsellPlans.length) {\n return null;\n }\n\n return (\n \n \n {__(\"add_more\")}\n {renderUpsellPlans()}\n \n \n );\n };\n\n const renderUpsellPlans = () => {\n if (!orderInfo.upsellPlans.length) {\n return null;\n }\n\n return orderInfo.upsellPlans.map(product => \n 0 ? null : (product.originalprice / 100)}\n currency={paymentSummaryData.currency}\n onChange={() => {\n onChangeUpsellPlan(product);\n }}\n testid={\"checkout_add_\" + testPlanNames[product.id] + \"_toggle\"}\n disabled={disabledPlanOptions}\n featuresAsTooltip={featuresAsTooltip}\n />\n );\n }\n\n const onChangeUpsellPlan = (plan) => {\n const {id: planId, pricecents, addplan} = plan;\n const newChosenUpsellPlans = chosenUpsellPlans ? {...chosenUpsellPlans, setAfter: \"checkbox_change\"} : {setAfter: \"checkbox_change\", data: {}};\n if (newChosenUpsellPlans.data && typeof newChosenUpsellPlans.data[planId] !== \"undefined\") {\n // From checked to unchecked.\n delete newChosenUpsellPlans.data[planId];\n\n if (typeof dataLayer !== \"undefined\") {\n dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.\n dataLayer.push({\n event: \"remove_from_cart\",\n ecommerce: {\n currency: signToCurrency[paymentSummaryData.currency],\n value: pricecents / 100,\n items: [{\n item_name: planNames[planId] + \" \" + gaPeriods[chosenPeriod],\n item_brand: PASS_PLANS_PER_PERIOD[chosenPeriod].includes(planId) ? \"pCloudPass\" : \"pCloud\",\n item_category: gaPeriods[chosenPeriod],\n item_variant: plansQuota[planId] || \"\",\n affiliation: rcookie(\"ref\"),\n coupon: discount && paymentSummaryData.totalDiscount > 0 ? discount : \"\",\n price: pricecents / 100,\n currency: signToCurrency[paymentSummaryData.currency],\n quantity: 1,\n }]\n }\n });\n }\n } else {\n // From unchecked to checked.\n newChosenUpsellPlans.data[planId] = planId;\n\n if (typeof dataLayer !== \"undefined\") {\n dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.\n dataLayer.push({\n event: \"add_to_cart\",\n ecommerce: {\n currency: signToCurrency[paymentSummaryData.currency],\n value: pricecents / 100,\n items: [{\n item_name: planNames[planId] + \" \" + gaPeriods[chosenPeriod],\n item_brand: PASS_PLANS_PER_PERIOD[chosenPeriod].includes(planId) ? \"pCloudPass\" : \"pCloud\",\n item_category: gaPeriods[chosenPeriod],\n item_variant: plansQuota[planId] || \"\",\n affiliation: rcookie(\"ref\"),\n coupon: discount && paymentSummaryData.totalDiscount > 0 ? discount : \"\",\n price: pricecents / 100,\n currency: signToCurrency[paymentSummaryData.currency],\n quantity: 1,\n item_id: planId,\n }]\n }\n });\n }\n\n if (typeof ttq !== \"undefined\" && ttq.track && typeof ttq.track == \"function\") {\n ttq.track('AddToCart',{\n content_id: planId,\n content_type: 'product',\n content_name: productNameMap[planId][addplan ? 'add' : 'long'],\n quantity: 1,\n price: pricecents / 100,\n value: pricecents / 100,\n currency: signToCurrency[paymentSummaryData.currency]\n });\n }\n }\n\n setChosenUpsellPlans(newChosenUpsellPlans);\n };\n\n const renderTotalPrice = () => {\n let periodTextsKey = chosenPeriod;\n\n if (((paymentSummaryData.totalPlanPrice - paymentSummaryData.totalDiscount) / 100) !== totalPrice) {\n periodTextsKey = \"duetoday\";\n }\n\n const periodText = underPriceTexts[periodTextsKey];\n \n return (\n \n 0 ? (totalPrice + (paymentSummaryData.totalDiscount / 100)) : totalOldPrice}\n currency={paymentSummaryData.currency}\n periodText={periodText}\n showDiscountLabel={discount && paymentSummaryData.totalDiscount > 0}\n // discountPercentages={Math.round((paymentSummaryData.totalDiscount * 100) / paymentSummaryData.totalPlanPrice)}\n discountSum={paymentSummaryData.totalDiscount / 100}\n priceLoading={loadingOrderInfoOnUpsellsChange && !(paymentView === \"paypal\" && paypalButtonLoading)}\n priceLoadingDelay={300}\n />\n \n );\n };\n\n const renderChangeButton = () => {\n // If is bundle plan || user is buying CUSTOM4TB_PLAN_ID\n if (orderInfo.initialOrderPlans.length > 1 || orderInfo.initialOrderPlans.some(plan => plan.id === CUSTOM4TB_PLAN_ID)) {\n return null;\n }\n \n const color = orderInfo.initialOrderPlans.length > 0 && COLORS[plansCheckoutPageColors[orderInfo.initialOrderPlans[0].id]] ? COLORS[plansCheckoutPageColors[orderInfo.initialOrderPlans[0].id]].mainColor : \"#17bed0\";\n const changeOrderURL = getPricingPageURL(\n orderInfo.initialOrderPlans, \n {discount, period: chosenPeriod, downgrade},\n {pricingPagePassURL, familyPageURL, trafficPageURL, cryptoPageURL, pricingPageURL}\n );\n\n return (\n paymentInProgress ? event.preventDefault() : null}\n data-testid=\"checkout_change_plan\"\n color={color}\n >\n {__(\"product_change\")} \n \n );\n };\n\n const renderTextForPricesAndPeriods = () => {\n return (\n user && chosenPeriod !== \"lifetime\" ? (\n \n \n {paymentSummaryData.totalPlanPrice > 0 ? \n getPaymentSummaryText(paymentSummaryData, (((orderInfo.subscribedPlans.periods.length > 0 && !orderInfo.subscribedPlans.periods.some(period => period !== chosenPeriod)) || !(paymentView === \"ccard\" && cardProvider && cardProvider === \"stripe\")) && (orderInfo.subscribedPlans.plans.length > 0 || orderInfo.subscribedPlans.storagePlansToUpgrade.length > 0 || orderInfo.subscribedPlans.passPlansToUpgrade.length > 0 || orderInfo.subscribedPlans.trafficPlansToUpgrade.length > 0)))\n : null}\n \n {\n /*loadingOrderInfoOnUpsellsChange ? \n \n \n \n \n \n : null*/\n } \n \n )\n : null);\n };\n\n const renderOrderBox = () => {\n return (\n \n \n {renderChangeButton()}\n {renderInitialOrderPlansList()}\n {renderSubscribedPlansWithDifferentChosenPeriodList()}\n {renderUpsellPlansList()}\n \n \n \n \n \n \n\n {renderTotalPrice()}\n\n \n {renderPayButton()}\n \n \n \n\n {renderTextForPricesAndPeriods()}\n \n \n \n );\n };\n\n return (\n \n \n {renderSubscribedPlansWithSameChosenPeriodList()}\n {renderOrderBox()}\n \n \n );\n};\n\nexport default OrderInfoContainer;\n\nconst OrderInfoMainWrapper = styled(Style.RightBox)`\n .subscribed-for-same-period {\n background-color: transparent;\n border: none;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n box-shadow: none;\n\n .plan-wrapper {\n background-color: inherit;\n border-bottom: 1px solid #d9d9d9;\n border-radius: 0;\n\n .plan-box-check-icon {\n border-color: rgb(187, 187, 187);\n }\n\n &:last-of-type {\n border: none;\n }\n }\n\n @media (max-width: 768px) {\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);\n padding-top: 16px;\n }\n }\n`;\n\nconst OrderInformationWrapper = styled.div`\n position: relative;\n .first-order-info-list-title {\n margin-top: 0;\n }\n`;\n\nconst OrderInfoPriceSumWrapper = styled.div`\n margin-top: 34px;\n\n @media (max-width: 768px) {\n margin-top: 16px;\n }\n\n ${({loading}) => loading ? `\n .total-price {\n opacity: 0.5;\n }\n ` : null}\n`;\n\nconst WhatsIncludedContainer = styled.div`\n overflow-y: auto;\n padding: 9px 15px;\n box-sizing: border-box;\n border-radius: 7px;\n border: solid 1px #f0f0f0;\n background-color: #fcfcfc;\n\n .box-feature-wrapper {\n border: none;\n\n .inner-text {\n padding: 6px 0px;\n box-sizing: border-box;\n }\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 @media (max-width: 768px) {\n display: none;\n }\n`;\n\nconst AddMoreWrapper = styled.div``;\n\nconst ChangePlan = styled.a`\n text-transform: capitalize;\n position: absolute;\n top: -5px;\n right: 7px;\n font-size: 13px;\n font-weight: 500;\n font-style: normal;\n color: ${({color}) => color ? color : \"#17bed0\"};\n cursor: pointer;\n text-decoration: none;\n\n .arrow-right {\n display: inline-block;\n width: 7px;\n height: 7px;\n border-style: solid;\n border-color: ${({color}) => color ? color : \"#17bed0\"};\n border-width: 0px 2px 2px 0px;\n transform: rotate(-45deg);\n }\n`;\n\nconst TotalPriceAndPayBtnWrapper = styled.div`\n margin-top: 16px;\n .sticky-total-price-and-pay-btn {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: #fff;\n padding: 0 16px;\n box-shadow: 3px 1px 5px rgba(0,0,0,.09);\n z-index: 1;\n\n @media (max-width: 450px) {\n padding: 0 12px;\n }\n }\n`;\n\nconst TotalPriceAndPayBtnInnerWrapper = styled.div``;\n\nconst PayBtnWrapper = styled.div`\n @media (max-width: 768px) {\n padding-bottom: 16px;\n }\n`;\n\nconst SeparationLineBiggerWrapper = styled.div`\n position: relative;\n height: 1px;\n`;\n\nconst SeparationLineBigger = styled.div`\n position: absolute;\n left: -16px;\n width: calc(100% + 32px);\n background-color: #d9d9d9;\n height: 1px;\n`;\n\nconst TextForPricesAndPeriodsWrapper = styled.div`\n opacity: ${({loading}) => loading ? \"0.4\" : \"1\"};\n transition: opacity 250ms ease-in-out;\n margin-top: 8px;\n font-size: 12px;\n color: #969696;\n line-height: 1.33;\n\n @media (max-width: 768px) {\n margin-top: 0;\n margin-bottom: 40px;\n }\n\n & > span {\n margin-right: 5px;\n }\n`;\n\nexport const PriceLoadingWrapper = styled.div`\n display: inline-block;\n width: 8px;\n height: 8px;\n position: relative;\n svg { \n transform: scale(0.7);\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;","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 SvgSecureIcon(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 18,\n height: 22\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#84c925\",\n d: \"M9 0L0 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V4zM7.17 15.79L3.5 11.97l1.29-1.35 2.37 2.46 6.04-6.3 1.29 1.36z\"\n })));\n}\nexport default SvgSecureIcon;","//@flow\n\nimport { \n PREMIUM_PLAN_ID,\n PREMIUM_PLUS_PLAN_ID,\n CUSTOM_PLAN_ID,\n ADD_STORAGE_1COUNT_PLAN_ID,\n ADD_STORAGE_4COUNT_PLAN_ID,\n ADD_STORAGE_8COUNT_PLAN_ID,\n ADD_STORAGE_12COUNT_PLAN_ID,\n ADD_STORAGE_20COUNT_PLAN_ID,\n CUSTOM_20COUNT_PLAN_ID,\n CUSTOM_8COUNT_PLAN_ID,\n CUSTOM4TB_PLAN_ID,\n CRYPTO_PLAN_ID,\n EFH_PLAN_ID,\n FAMILY2TB_PLAN_ID,\n FAMILY_CUSTOM_2COUNT_PLAN_ID,\n FAMILY_CUSTOM_5COUNT_PLAN_ID,\n FAMILY_ADD_1COUNT_PLAN_ID,\n FAMILY_ADD_2COUNT_PLAN_ID,\n FAMILY_ADD_5COUNT_PLAN_ID,\n ADDITIONAL_TRAFFIC_ID,\n PASS_PREMIUM_PLAN_ID,\n PASS_FAMILY_PLAN_ID\n} from \"@pcloud/web-utilities/dist/plans/constants.plans\";\n\nexport const STEP = \"choose-plan\";\nexport const PERIODS = [\"year\", \"lifetime\"];\nexport const PLANS = {\n month: [PREMIUM_PLAN_ID, PREMIUM_PLUS_PLAN_ID],\n year: [PREMIUM_PLAN_ID, PREMIUM_PLUS_PLAN_ID],\n lifetime: [PREMIUM_PLAN_ID, PREMIUM_PLUS_PLAN_ID]\n};\nexport const PLANS_EXTENDED = {\n month: [PREMIUM_PLAN_ID, PREMIUM_PLUS_PLAN_ID],\n year: [PREMIUM_PLAN_ID, PREMIUM_PLUS_PLAN_ID],\n lifetime: [PREMIUM_PLAN_ID, PREMIUM_PLUS_PLAN_ID, CUSTOM_20COUNT_PLAN_ID]\n};\nexport const PLANS_ADD_STORAGE = {\n month: [],\n year: [],\n lifetime: [ADD_STORAGE_1COUNT_PLAN_ID, ADD_STORAGE_4COUNT_PLAN_ID, ADD_STORAGE_20COUNT_PLAN_ID]\n};\nexport const CHOSEN_PERIOD = \"lifetime\";\nexport const CURRENCY = \"\";\nexport const PLAN_OPTIONS_PER_PERIOD = {\n month: {\n [PREMIUM_PLAN_ID]: [CRYPTO_PLAN_ID, EFH_PLAN_ID],\n [PREMIUM_PLUS_PLAN_ID]: [CRYPTO_PLAN_ID, EFH_PLAN_ID],\n [CRYPTO_PLAN_ID]: [EFH_PLAN_ID],\n [EFH_PLAN_ID]: [CRYPTO_PLAN_ID],\n [ADDITIONAL_TRAFFIC_ID]: [CRYPTO_PLAN_ID, EFH_PLAN_ID],\n [PASS_PREMIUM_PLAN_ID]: [],\n [PASS_FAMILY_PLAN_ID]: []\n },\n year: {\n [PREMIUM_PLAN_ID]: [CRYPTO_PLAN_ID, EFH_PLAN_ID],\n [PREMIUM_PLUS_PLAN_ID]: [CRYPTO_PLAN_ID, EFH_PLAN_ID],\n [CRYPTO_PLAN_ID]: [EFH_PLAN_ID],\n [EFH_PLAN_ID]: [CRYPTO_PLAN_ID],\n [ADDITIONAL_TRAFFIC_ID]: [CRYPTO_PLAN_ID, EFH_PLAN_ID],\n [PASS_PREMIUM_PLAN_ID]: [],\n [PASS_FAMILY_PLAN_ID]: []\n },\n lifetime: {\n [PREMIUM_PLAN_ID]: [CRYPTO_PLAN_ID],\n [PREMIUM_PLUS_PLAN_ID]: [CRYPTO_PLAN_ID],\n [ADD_STORAGE_1COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [ADD_STORAGE_4COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [ADD_STORAGE_8COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [ADD_STORAGE_12COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [ADD_STORAGE_20COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [CUSTOM_20COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [CUSTOM_8COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [CUSTOM4TB_PLAN_ID]: [CRYPTO_PLAN_ID],\n [CUSTOM_PLAN_ID]: [CRYPTO_PLAN_ID],\n [CRYPTO_PLAN_ID]: [],\n [FAMILY2TB_PLAN_ID]: [CRYPTO_PLAN_ID],\n [FAMILY_CUSTOM_2COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [FAMILY_CUSTOM_5COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [FAMILY_ADD_1COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [FAMILY_ADD_2COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [FAMILY_ADD_5COUNT_PLAN_ID]: [CRYPTO_PLAN_ID],\n [ADDITIONAL_TRAFFIC_ID]: [CRYPTO_PLAN_ID],\n [PASS_PREMIUM_PLAN_ID]: [],\n [PASS_FAMILY_PLAN_ID]: []\n }\n};\n\nexport const PERIOD_OPTIONS_PER_PLAN = {\n [PREMIUM_PLAN_ID]: [\"year\", \"lifetime\"],\n [PREMIUM_PLUS_PLAN_ID]: [\"year\", \"lifetime\"],\n [ADD_STORAGE_1COUNT_PLAN_ID]: [\"lifetime\"],\n [ADD_STORAGE_4COUNT_PLAN_ID]: [\"lifetime\"],\n [ADD_STORAGE_8COUNT_PLAN_ID]: [\"lifetime\"],\n [ADD_STORAGE_12COUNT_PLAN_ID]: [\"lifetime\"],\n [ADD_STORAGE_20COUNT_PLAN_ID]: [\"lifetime\"],\n [CUSTOM_8COUNT_PLAN_ID]: [\"lifetime\"],\n [CUSTOM_20COUNT_PLAN_ID]: [\"lifetime\"],\n [CUSTOM_PLAN_ID]: [\"lifetime\"],\n [CUSTOM4TB_PLAN_ID]: [\"lifetime\"],\n [CRYPTO_PLAN_ID]: [\"year\", \"lifetime\"],\n [EFH_PLAN_ID]: [\"month\", \"year\"],\n [FAMILY2TB_PLAN_ID]: [\"lifetime\"],\n [FAMILY_CUSTOM_2COUNT_PLAN_ID]: [\"lifetime\"],\n [FAMILY_CUSTOM_5COUNT_PLAN_ID]: [\"lifetime\"],\n [FAMILY_ADD_1COUNT_PLAN_ID]: [\"lifetime\"],\n [FAMILY_ADD_2COUNT_PLAN_ID]: [\"lifetime\"],\n [FAMILY_ADD_5COUNT_PLAN_ID]: [\"lifetime\"],\n [ADDITIONAL_TRAFFIC_ID]: [\"month\", \"year\", \"lifetime\"],\n [PASS_PREMIUM_PLAN_ID]: [\"month\", \"year\", \"lifetime\"],\n [PASS_FAMILY_PLAN_ID]: [\"month\", \"year\", \"lifetime\"]\n};\n\nexport const ADD_STORAGE_PLANS = [\n ADD_STORAGE_1COUNT_PLAN_ID,\n ADD_STORAGE_4COUNT_PLAN_ID,\n ADD_STORAGE_8COUNT_PLAN_ID,\n ADD_STORAGE_12COUNT_PLAN_ID,\n ADD_STORAGE_20COUNT_PLAN_ID,\n];\n\nexport const CUSTOM_STORAGE_PLANS = [\n CUSTOM_8COUNT_PLAN_ID,\n CUSTOM_20COUNT_PLAN_ID,\n];\n\nexport const FAMILY_ADD_STORAGE_PLANS = [\n FAMILY_ADD_1COUNT_PLAN_ID,\n FAMILY_ADD_2COUNT_PLAN_ID,\n FAMILY_ADD_5COUNT_PLAN_ID\n];\n\nexport const FAMILY_CUSTOM_STORAGE_PLANS = [\n FAMILY_CUSTOM_2COUNT_PLAN_ID,\n FAMILY_CUSTOM_5COUNT_PLAN_ID,\n];","//@flow\n\nimport React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport Modal, { OvalModalClose } from \"@pcloud/web-utilities/dist/resources/components/Modal\";\nimport { onMouseOut, __ } from \"../../../lib/utils\";\nimport { setcookie, rcookie } from \"@pcloud/web-utilities/dist/lib/utils\";\n\ntype Props = {\n handleButtonClick: () => void\n};\n\nconst TimerDiscountModal = ({ handleButtonClick = () => {} }: Props) => {\n const [showModal, setShowModal] = useState(false);\n (showModal: boolean);\n\n const modalCustomStyle = {\n \"display\": \"flex\",\n \"alignItems\": \"center\",\n // \"justifyContent\": \"center\"\n };\n\n useEffect(() => {\n const timer = setTimeout(setMouseOutEvent, 5000);\n return () => {\n clearTimeout(timer)\n document.onmouseout = () => {};\n };\n }, []); //[]\n\n useEffect(() => {\n const timer = $(\".exit-intent-timer-container\").FlipClock(60, {\n autoStart: false,\n countdown: true,\n clockFace: \"MinuteCounter\",\n language: pCloud.lang\n });\n timer.start();\n var timeout = setTimeout(function() {\n closeModal();\n }, 62000);\n }, [showModal]); //[showModal]\n\n const handleMouseOut = event => {\n const refIsOK = true;\n //!rcookie(\"ref\") || rcookie(\"ref\") == 50 || rcookie(\"ref\") == 501 || hrefSearch(\"refcode\");\n\n onMouseOut(event, () => {\n if (refIsOK && !showModal && !rcookie(\"openedExitIntentTimerModal\")) {\n setShowModal(true);\n document.getElementsByTagName(\"BODY\")[0].classList.add(\"overlayed\");\n setcookie(\"openedExitIntentTimerModal\", true, 1);\n }\n });\n };\n\n const setMouseOutEvent = () => {\n document.onmouseout = handleMouseOut;\n };\n\n const closeModal = () => {\n setShowModal(false);\n document.getElementsByTagName(\"BODY\")[0].classList.remove(\"overlayed\");\n };\n\n const handleClick = () => {\n closeModal();\n handleButtonClick();\n };\n\n return (\n \n \n {__(\"checkout_exit_headline\").replace(\"%percent%\", \"10%\")}\n {__(\"checkout_exit_text\")}\n \n \n {__(\"checkout_exit_CTA\").replace(\"%percent%\", \"10%\")}\n \n {__(\"checkout_exit_sub_CTA\")}\n \n \n \n );\n};\n\nexport default TimerDiscountModal;\n\nconst ModalWrap = styled.div`\n width: 100%;\n min-width: 780px;\n box-sizing: border-box;\n text-align: center;\n background-clip: padding-box;\n box-shadow: 0 8px 30px rgb(0 0 0 / 20%);\n margin: 0 auto;\n padding: 20px;\n background-color: #fff;\n`;\n\nconst ModalTitle = styled.div`\n font-size: 30px;\n font-weight: 500;\n letter-spacing: -0.7px;\n margin: 40px 0 0 0;\n`;\n\nconst ModalDescription = styled.div`\n font-size: 20px;\n margin: 8px 0 0 0;\n letter-spacing: -0.5px;\n`;\n\nconst ModalButton = styled.div`\n display: table;\n font-size: 15px;\n font-weight: 500;\n min-width: 380px;\n margin: 42px auto;\n padding: 14px 20px 13px 20px;\n text-transform: uppercase;\n background: #86c600;\n color: #fff;\n border-radius: 7px;\n cursor: pointer;\n box-shadow: 0 1px 1px rgb(0 0 0 / 7%);\n width: auto;\n`;\n\nconst ModalNoThanks = styled.div`\n text-decoration: underline;\n cursor: pointer;\n color: #888;\n font-size: 16px;\n margin: 35px 0 50px;\n letter-spacing: -0.5px;\n`;\n\nconst TimerContainer = styled.div`\n text-align: center;\n margin: 50px auto 0px auto;\n width: auto;\n display: inline-block;\n`;\n","import { useState, useEffect, useRef } from \"react\";\n\nimport { CURRENCY } from \"../../PricingPage/defaultValues\";\nimport diffs from \"../../../lib/diffs\";\nimport { signToCurrency, currencyMap } from \"@pcloud/web-utilities/dist/payments/constants.payments\";\nimport { rcookie, hrefSearch } from \"@pcloud/web-utilities/dist/lib/utils\";\nimport { CUSTOM4TB_PLAN_ID, ADDITIONAL_TRAFFIC_ID } from \"@pcloud/web-utilities/dist/plans/constants.plans\";\nimport { getUserTtrafficCount } from \"@pcloud/web-utilities/dist/plans/utils.plans\";\n\nimport { \n filterSubscriptionsByCartItems, \n loadPlanInfoApiCall,\n subscribeForUserDiff,\n getPricingPageURL\n} from \"../../../lib/plansUtils\";\n\nexport const useOrderInfo = (({\n user,\n nextUser, \n discount, \n paymentView, \n cardProvider, \n chosenPlan, \n chosenPeriod, \n downgrade, \n traffic,\n cryptoPageURL, \n pricingPageURL, \n trafficPageURL, \n pricingPagePassURL,\n familyPageURL,\n isPaymentDisruptionCountry,\n setDataFetched,\n checkAllDataIsFetched,\n onLoadRequiredPageDataError\n }) => {\n\n const initialOrderInfo = {\n currency: CURRENCY,\n totalDiscount: 0,\n totalPlanPrice: 0,\n totalPriceToPay: 0,\n totalOriginalPrice: 0,\n totalNextPriceToPay: 0,\n nextBillingDate: \"\",\n initialOrderPlans: [], \n subscribedPlans: {plans: [], storagePlansToUpgrade: [], passPlansToUpgrade: [], trafficPlansToUpgrade: [], periods: []},\n upsellPlans: [],\n chosenUpsellPlans: []\n };\n\n const [discountCode, setDiscountCode] = useState(discount);\n const [userOrderInfo, setUserOrderInfo] = useState(initialOrderInfo);\n const [guestOrderInfo, setGuestOrderInfo] = useState(initialOrderInfo);\n // setAfter: \"checkbox_change\" | \"user_change\"\n const [chosenUpsellPlans, setChosenUpsellPlans] = useState({setAfter: \"user_change\", data: null});\n // Disable Addons while paying.\n const [disabledPlanOptions, setDisabledPlanOptions] = useState(isPaymentDisruptionCountry);\n const [loadingOrderInfoOnUpsellsChange, setLoadingOrderInfoOnUpsellsChange] = useState(false);\n const enableLoadingOrderInfoOnUpsellsChange = useRef(false);\n const loadOrderInfoOnUpsellsChangeXHR = useRef(null);\n const loadOrderInfoXHR = useRef(null);\n const [userSubscriptions, setUserSubscriptions] = useState(null);\n\n useEffect(() => {\n // Validate if we have chosenPlan param.\n if (chosenPlan.length === 0) {\n location.href = pricingPageURL + (pricingPageURL.search(/[?]/) === -1 ? \"?\" : \"&\") + \"period=\" + chosenPeriod;\n return;\n }\n }, []);\n\n useEffect(() => {\n // Prefetch order info data for next user and show it after all page required data is set.\n let userSubscribedPlans = {plans: [], storagePlansToUpgrade: [], passPlansToUpgrade: [], trafficPlansToUpgrade: [], periods: []};\n\n if (nextUser) {\n\n if (paymentView === \"ccard\" && !cardProvider) {\n return;\n }\n\n if (chosenPeriod !== \"lifetime\" && user && user.lastsubscription && userSubscriptions === null) {\n // Wait for userSubscriptions to be loaded.\n return;\n }\n \n // Get currently subscribed plans\n userSubscribedPlans = filterSubscriptionsByCartItems(userSubscriptions, chosenPlan, chosenPeriod);\n } // else -> Load guest order info data\n\n // Load guest/user order info\n abortPreviousLoadOrderInfoRequests();\n setDisabledPlanOptions(true);\n if (enableLoadingOrderInfoOnUpsellsChange.current && user === nextUser) {\n setLoadingOrderInfoOnUpsellsChange(true);\n }\n\n loadOrderInfoXHR.current = loadPlanInfoApiCall({\n user: nextUser, \n chosenPeriod,\n chosenPlanIds: chosenPlan, \n subscribedPlans: userSubscribedPlans, \n chosenUpsellPlans: chosenUpsellPlans && chosenUpsellPlans.data, \n traffic, \n paymentView, \n cardProvider,\n discountCode,\n downgrade\n }, onLoadedOrderInfo, onLoadOrderInfoError);\n\n }, [nextUser, discountCode, paymentView, cardProvider, userSubscriptions]); //[nextUser]\n\n const onLoadedOrderInfo = (res, {chosenPlanIds, user, subscribedPlans, chosenUpsellPlanIds}) => {\n // Check for blank products. For example if the products have already been bought.\n if (!res.products || (Array.isArray(res.products) && res.products.length === 0)) {\n onLoadOrderInfoError({result: 2313, error: \"This product can't be bought.\"}, null, null);\n return false;\n }\n\n // Copy object, because we want to modify it below without changing the initial response object.\n const products = res.products ? {...res.products} : null;\n const upsellproducts = res.upsellproducts ? {...res.upsellproducts} : null;\n\n setDataFetched(\"loadedOrderInfo\");\n checkAllDataIsFetched();\n setDisabledPlanOptions(false);\n\n // Move upsells and subscribed products to the right result section according to the request input params.\n if (products) {\n if (subscribedPlans.plans.length > 0) {\n for (const plan of subscribedPlans.plans) {\n for (const planId of plan.subscribedProducts) {\n // Move returned product to subscribedproducts, because it's actually subscribed product, but for a different period.\n if (products[planId]) {\n if (!res.subscribedproducts) {\n res.subscribedproducts = {};\n }\n \n res.subscribedproducts[planId] = products[planId];\n delete products[planId];\n }\n }\n }\n }\n\n if (chosenUpsellPlanIds.length > 0) {\n for (const productId in products) {\n const planId = products[productId].id;\n // Move returned product to upsells, because it's actually upsell for us.\n if (chosenUpsellPlanIds.indexOf(planId) !== -1) {\n if (!upsellproducts) {\n upsellproducts = {};\n }\n \n upsellproducts[planId] = products[planId];\n delete products[planId];\n }\n }\n }\n }\n\n const initialOrderPlansPrepared = [];\n if (products) {\n for (const planId of chosenPlanIds) {\n // Validate returned products are the same as the input param.\n if (products[planId]) {\n products[planId].id = planId;\n initialOrderPlansPrepared.push(products[planId]);\n }\n }\n }\n\n const subscribedPlansPrepared = {plans: [], storagePlansToUpgrade: subscribedPlans.storagePlansToUpgrade, passPlansToUpgrade: subscribedPlans.passPlansToUpgrade, trafficPlansToUpgrade: subscribedPlans.trafficPlansToUpgrade, periods: subscribedPlans.periods};\n\n if (res.subscribedproducts && subscribedPlans.plans.length > 0) {\n for (const plan of subscribedPlans.plans) {\n const subsribedProductsPerpared = [];\n for (const planId of plan.subscribedProducts) {\n // Validate returned products are the same as the input param.\n if (res.subscribedproducts[planId]) {\n res.subscribedproducts[planId].id = planId;\n subsribedProductsPerpared.push(res.subscribedproducts[planId]);\n }\n }\n\n subscribedPlansPrepared.plans.push({\n subscribedProducts: subsribedProductsPerpared,\n period: plan.period\n });\n }\n }\n\n const upsellProductsPrepared = [];\n\n if (chosenUpsellPlanIds.length > 0) {\n // Check with previous order info data to keep the upsell order\n const prevOrderInfo = userOrderInfo.initialOrderPlans.length > 0 ? userOrderInfo : (guestOrderInfo.initialOrderPlans.length > 0 ? guestOrderInfo : null);\n \n if (prevOrderInfo && prevOrderInfo.upsellPlans.length > 0) {\n for (const upsellPlan of prevOrderInfo.upsellPlans) {\n if (chosenUpsellPlanIds.indexOf(upsellPlan.id) !== -1 && upsellproducts && upsellproducts[upsellPlan.id]) {\n upsellProductsPrepared.push(upsellproducts[upsellPlan.id]);\n delete upsellproducts[upsellPlan.id];\n } else if (upsellproducts && upsellproducts[upsellPlan.id]) {\n upsellProductsPrepared.push(upsellproducts[upsellPlan.id]);\n delete upsellproducts[upsellPlan.id];\n }\n }\n }\n }\n\n if (upsellproducts) {\n // If we have more upsell products than the previous order info let's append them to the upsellProductsPrepared array.\n for (const productId in upsellproducts) {\n upsellProductsPrepared.push(upsellproducts[productId]);\n }\n }\n\n const newOrderInfo = {\n currency: currencyMap[res.currency],\n totalDiscount: res.totaldiscount || 0,\n totalPlanPrice: res.totalamount,// Total price without any discounts.\n totalPriceToPay: res.amounttopay,// Due today\n totalOriginalPrice: res.originaltotalamount,// Strikethrough price\n totalNextPriceToPay: res.nextbillingamount,\n nextBillingDate: res.nextbillingtime,\n initialOrderPlans: initialOrderPlansPrepared,\n subscribedPlans: subscribedPlansPrepared,\n upsellPlans: upsellProductsPrepared,\n chosenUpsellPlans: chosenUpsellPlanIds\n };\n\n // Show new order info.\n if (user) {\n setUserOrderInfo(newOrderInfo);\n } else {\n setGuestOrderInfo(newOrderInfo);\n }\n\n loadOrderInfoXHR.current = null;\n\n // Update chosenUpsellPlans\n const newChosenUpsellPlans = {setAfter: \"user_change\", data: {}};\n\n for (const key in chosenUpsellPlanIds) {\n newChosenUpsellPlans.data[chosenUpsellPlanIds[key]] = chosenUpsellPlanIds[key];\n }\n\n setChosenUpsellPlans(newChosenUpsellPlans);\n\n // If exit intent discount code or changed payment view was applied this loading should be hidden.\n setLoadingOrderInfoOnUpsellsChange(false);\n }\n\n const onLoadOrderInfoError = (xhr, status, error) => {\n // Check if the user can't buy the given plan.\n if (xhr && xhr.result) {\n switch (xhr.result) {\n // This custom plan can't be bought.\n case 2289: \n // This product can't be bought.\n case 2313: \n // Invalid 'period' provided.\n case 1101: \n location.href = getPricingPageURL(\n chosenPlan.map(planId => { return { id: planId } }), \n {discount: discountCode, period: chosenPeriod, downgrade},\n {pricingPagePassURL, familyPageURL, trafficPageURL, cryptoPageURL, pricingPageURL}\n );\n return false;\n }\n }\n \n onLoadRequiredPageDataError(xhr, status, error);\n };\n\n const abortPreviousLoadOrderInfoRequests = () => {\n if (loadOrderInfoXHR && typeof loadOrderInfoXHR.current !== \"undefined\" && loadOrderInfoXHR.current !== null && loadOrderInfoXHR.current.abort) {\n loadOrderInfoXHR.current.abort();\n }\n\n if (loadOrderInfoOnUpsellsChangeXHR && loadOrderInfoOnUpsellsChangeXHR.current !== null && loadOrderInfoOnUpsellsChangeXHR.current.abort) {\n loadOrderInfoOnUpsellsChangeXHR.current.abort();\n loadOrderInfoOnUpsellsChangeXHR.current = null;\n }\n }\n\n return {\n initialOrderInfo,\n userOrderInfo,\n setUserOrderInfo,\n guestOrderInfo,\n setGuestOrderInfo,\n chosenUpsellPlans,\n setChosenUpsellPlans,\n disabledPlanOptions,\n setDisabledPlanOptions,\n loadingOrderInfoOnUpsellsChange,\n setLoadingOrderInfoOnUpsellsChange,\n enableLoadingOrderInfoOnUpsellsChange,\n loadOrderInfoOnUpsellsChangeXHR,\n loadOrderInfoXHR,\n discountCode,\n setDiscountCode,\n setUserSubscriptions\n }\n});\n\nexport const useUser = (({\n user,\n setNextUser,\n userIsBuyingPcloudPassPlan,\n showPageLoading,\n resetLoadingRequiredPageDataStatus,\n cart,\n traffic,\n chosenPeriod,\n discountCode,\n userOrderInfo,\n setUserSubscriptions\n}) => {\n\n const userDiff = useRef(null);\n\n useEffect(() => {\n if (user) {\n _subscribeForUserDiff(user, onUserDiff);\n setTimeout(() => {\n sendTrackingEvents();\n }, 600);\n } else {\n diffs.stop();\n }\n }, [user]);\n\n useEffect(() => {\n if (!cart || !cart.length || !user) {\n return;\n }\n\n if (!user.business) {\n let totalTraffic = 0;\n \n cart.forEach(planId => {\n if (planId == CUSTOM4TB_PLAN_ID) {\n totalTraffic = 1;\n }\n\n if (planId == ADDITIONAL_TRAFFIC_ID) {\n totalTraffic = traffic || getUserTtrafficCount(user) || 0;\n }\n\n return planId;\n });\n \n \n const params = {\n auth: user.auth,\n products: cart.join(\",\"),\n period: chosenPeriod,\n traffic: totalTraffic\n };\n \n if (discountCode && userOrderInfo.totalDiscount > 0) {\n params.discountcode = discountCode;\n }\n \n pCloudGlobals.apiMethod(\"setuservisit\", params, () => {}, {});\n }\n }, [cart, user, discountCode]);\n\n const sendTrackingEvents = () => {\n if (typeof _learnq !== 'undefined' && (rcookie('ref') == 56215 || hrefSearch(\"ref\") == 56215)) {\n _learnq.push(['identify', {\n '$email': user.email,\n '$id': user.userid\n }])\n }\n\n // Tracking\n if (typeof fbq == \"function\") {\n fbq(\"track\", \"InitiateCheckout\", {});\n }\n\n window.uetq = window.uetq || [];\n window.uetq.push('event', 'InitiateCheckout');\n\n if (typeof ttq !== \"undefined\" && ttq.track && typeof ttq.track == \"function\" && !(hrefSearch('ErrCode') || hrefSearch(\"redirect_status\") === \"succeeded\")) {\n ttq.track('InitiateCheckout');\n }\n\n if (typeof pintrk == \"function\") {\n // pintrk('track', 'custom', {eventName: \"InitiateCheckout\"});\n pintrk('track', 'addtocart');\n }\n }\n\n const onLoginCallback = (userData, invokedAfterAction) => {\n if (pCloud && pCloud.user) {\n \n if (userIsBuyingPcloudPassPlan && !(rcookie(\"passtoken\") || rcookie(\"restrictedPassToken\"))) {\n // User is logged in pCloud, but not in pass while we want to buy pass plan.\n return;\n }\n\n // If we are here when logged by using another page.\n if (invokedAfterAction !== \"onAuthAction\") {\n showPageLoading();\n } // Else we were logged by using the login / register form ON this page.\n\n // Reset required page data status flags.\n resetLoadingRequiredPageDataStatus();\n setUserSubscriptions(null);\n // This will trigger loadPaymentData() in SigninContainer\n // After allRequiredPageDataIsLoaded nextUser will become === user\n setNextUser({ ...pCloud.user });\n }\n }\n\n const onLogoutCallback = () => {\n // Show pageLoading\n showPageLoading();\n // Reset required page data status flags.\n resetLoadingRequiredPageDataStatus();\n setUserSubscriptions(null);\n setNextUser(null);\n };\n\n const handlePassLogin = (userData) => {\n if (!pCloud) {\n const pCloud = {};\n }\n \n pCloud.user = Object.assign(pCloud.user || {}, userData);\n onLoginCallback(userData, \"onAuthAction\");\n };\n\n const onUserDiff = (newUserInfo) => {\n if (newUserInfo && pCloud.user && newUserInfo.userid == pCloud.user.userid) {\n showPageLoading();\n // Reset required page data status flags.\n resetLoadingRequiredPageDataStatus();\n pCloud.user = {...pCloud.user, ...newUserInfo};\n setNextUser(pCloud.user);\n }\n };\n\n const _subscribeForUserDiff = (user, onChange) => {\n return subscribeForUserDiff(user, onChange, userDiff);\n };\n\n\n return {\n onLoginCallback,\n onLogoutCallback,\n handlePassLogin,\n subscribeForUserDiff: _subscribeForUserDiff,\n userDiff,\n onUserDiff\n }\n});\n","//@flow\n\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport Componentify from \"react-componentify\";\nimport { SwitchTransition, CSSTransition } from \"react-transition-group\";\nimport reactStringReplace from \"react-string-replace\";\n\nimport SigninContainer from \"./views/SigninContainer\";\nimport PaymentContainer from \"./views/PaymentContainer\";\nimport OrderInfoContainer from \"./views/OrderInfoContainer\";\nimport { ButtonWithIcon } from \"@pcloud/web-utilities/dist/resources/components/ButtonDefault\";\nimport * as Style from \"./views/StyledComponents/Style\";\nimport WarningIcon from \"../../../new_site/images/p_promo/warning.svg\";\nimport SecureIcon from \"../../../src/svg/secure-icon.svg\";\n\nimport * as DEFAULT from \"../PricingPage/defaultValues\";\n\nimport { linkConverter } from \"@pcloud/web-utilities/dist/lib/componentifyConverters\";\n\nimport type { PeriodType, PricingPageURLProduct } from \"../../lib/types/dataTypes.components\";\n\nimport { __ } from \"../../lib/utils\";\n\nimport { signToCurrency } from \"@pcloud/web-utilities/dist/payments/constants.payments\";\nimport { rcookie, setcookie, hrefSearch, isInternetExplorer } from \"@pcloud/web-utilities/dist/lib/utils\";\n\nimport { productInfo, oldUnsupportedURLPlanNames, mapOldAddStoragePlanIds } from \"@pcloud/web-utilities/dist/plans/plansInfo\";\n\nimport {\n ADDITIONAL_TRAFFIC_ID,\n MIN_TRAFFIC_COUNT,\n MAX_TRAFFIC_COUNT_PER_PERIOD,\n PASS_FAMILY_PLAN_ID,\n PASS_PREMIUM_PLAN_ID\n} from \"@pcloud/web-utilities/dist/plans/constants.plans\";\n\nimport TimerDiscountModal from \"../ModalManager/StaticContainers/TimerDiscountModal\";\nimport { PAYMENT_DISRUPTION_COUNTRIES } from \"@pcloud/web-utilities/dist/payments/constants.payments\";\n\nimport { useOrderInfo, useUser } from \"./hooks/CheckoutHooks\";\nimport { getProductFromOrderInfo } from \"./utils.plans\";\n\ntype Props = {\n insertForm: () => void,\n hideExitIntent: boolean,\n onPlanChange: () => void,\n stopPageLoading: () => void,\n showPageLoading: () => void,\n pricingPageURL: string,\n pricingPagePassURL: string,\n cryptoPageURL: string,\n trafficPageURL: string,\n familyPageURL: string,\n};\n\nconst CheckoutPage = ({\n insertForm,\n hideExitIntent,\n onPlanChange = () => {},\n stopPageLoading = () => {},\n showPageLoading = () => {},\n pricingPageURL,\n pricingPagePassURL,\n cryptoPageURL,\n trafficPageURL,\n familyPageURL\n}: Props) => {\n // URL Parameters\n let URL_Product: PricingPageURLProduct | false = hrefSearch(\"product\");\n let URL_Period: PeriodType | false = hrefSearch(\"period\");\n let URL_Products: string | false = hrefSearch(\"products\");\n let URL_Discount: string | false = hrefSearch(\"discount\");\n let URL_Downgrade: boolean = hrefSearch(\"downgrade\");\n let URL_Traffic: string = hrefSearch(\"traffic\");\n let URL_featuresAsTooltip: string = hrefSearch(\"featurestooltip\");\n let discount = URL_Discount || rcookie(\"discount\");\n \n if (discount === \"null\") {\n discount = null;\n }\n\n const getInitialRequiredPageDataStatus = () => {\n return {\n loggedUser: {\n loadedOrderInfo: false,\n loadedPaymentData: isPaymentDisruptionCountry\n },\n guest: {\n loadedOrderInfo: false,\n loadedLoginOrSignupForm: userIsBuyingPcloudPassPlan\n }\n }\n };\n\n const setChosenPlan = () => {\n // Check if products are passed in the URL\n if (URL_Products) {\n return URL_Products.split(\",\").reduce((planIdsOut, productName) => {\n if (productInfo[productName] && productInfo[productName].plan_id && !oldUnsupportedURLPlanNames[productName]) {\n planIdsOut.push(mapOldAddStoragePlanIds[productInfo[productName].plan_id] || productInfo[productName].plan_id);\n }\n \n return planIdsOut;\n }, []);\n }\n\n // Check if product is passed in the URL\n if (URL_Product && productInfo[URL_Product] && productInfo[URL_Product].plan_id && !oldUnsupportedURLPlanNames[URL_Product]) {\n return [mapOldAddStoragePlanIds[productInfo[URL_Product].plan_id] || productInfo[URL_Product].plan_id];\n }\n \n return [];\n };\n\n const chosenPeriod = URL_Period || DEFAULT.CHOSEN_PERIOD;\n const chosenPlan = useMemo(setChosenPlan);\n const userIsBuyingPcloudPassPlan = chosenPlan.indexOf(PASS_PREMIUM_PLAN_ID) !== -1 || chosenPlan.indexOf(PASS_FAMILY_PLAN_ID) !== -1;\n const initialUser = pCloud && pCloud.user && (!userIsBuyingPcloudPassPlan || (userIsBuyingPcloudPassPlan && typeof pCloud.user.passmanagerdata !== \"undefined\" && (rcookie(\"passtoken\") || rcookie(\"restrictedPassToken\")))) ? pCloud.user : null;\n const traffic = !isNaN(URL_Traffic) && URL_Traffic ? (URL_Traffic < MIN_TRAFFIC_COUNT ? MIN_TRAFFIC_COUNT : (URL_Traffic > MAX_TRAFFIC_COUNT_PER_PERIOD[chosenPeriod] ? MAX_TRAFFIC_COUNT_PER_PERIOD[chosenPeriod] : URL_Traffic)) : 0;\n const country = pCloudUserIP && pCloudUserIP.country ? pCloudUserIP.country : \"fr\";\n const isPaymentDisruptionCountry = PAYMENT_DISRUPTION_COUNTRIES.indexOf(country) !== -1;\n const isIE = isInternetExplorer();\n const initialPaymentSummaryData = {\n totalDiscount: 0,\n totalPlanPrice: 0,\n totalPriceToPay: 0,\n totalNextPriceToPay: 0,\n nextBillingDate: \"\",\n currency: null\n };\n\n const payBtnErrorMsgShown = useRef(false);\n const payButtonRef = useRef(null);\n const loadingRequiredPageDataStatus = useRef(getInitialRequiredPageDataStatus());\n\n const [totalPrice, setTotalPrice] = useState(0);\n const [user, setUser] = useState(initialUser);\n const [nextUser, setNextUser] = useState(initialUser);\n const [loadRequiredPageDataFailed, setLoadRequiredPageDataFailed] = useState(false);\n const [disabledButton, setDisabledButton] = useState(true);\n const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);\n const [cart, setCart] = useState(null);\n const [paymentView, setPaymentView] = useState(\"ccard\");\n const [cardProvider, setCardProvider] = useState(isPaymentDisruptionCountry ? \"stripe\" : null);\n const [userPaymentSource, setUserPaymentSource] = useState(null);\n const [paypalButtonLoading, setPaypalButtonLoading] = useState(false);\n const [payButtonClicked, setPayButtonClicked] = useState(false);\n const [hidePaypalButton, setHidePaypalButton] = useState(false);\n const [buttonColor, setButtonColor] = useState(\"cyan\");\n const [loadingPayButton, setLoadingPayButton] = useState(false);\n const [payBtnErrorMsg, setPayBtnErrorMsg] = useState({show: payBtnErrorMsgShown.current, message: \"\"});\n const [requiredLoginOrSigninErrorMsg, setRequiredLoginOrSigninErrorMsg] = useState({show: false, message: \"\"});\n const [paymentSummaryData, setPaymentSummaryData] = useState(initialPaymentSummaryData);\n\n const resetLoadingRequiredPageDataStatus = () => {\n setLoadRequiredPageDataFailed(false);\n loadingRequiredPageDataStatus.current = getInitialRequiredPageDataStatus();\n };\n\n const onAllDataIsFetched = () => {\n if (user != nextUser) {\n if (nextUser) {\n setGuestOrderInfo(initialOrderInfo);\n } else {\n setUserOrderInfo(initialOrderInfo);\n }\n\n setUser(nextUser);\n\n // Hide Please log in or sign up error message if it was shown.\n setRequiredLoginOrSigninErrorMsg({...requiredLoginOrSigninErrorMsg, show: false});\n payBtnErrorMsgShown.current = false;\n setPayBtnErrorMsg({...payBtnErrorMsg, show: payBtnErrorMsgShown.current});\n }\n\n enableLoadingOrderInfoOnUpsellsChange.current = true;\n\n // Hide initial page loading if it's shown.\n stopPageLoading();\n }\n\n const checkAllDataIsFetched = () => {\n const userKey = nextUser ? \"loggedUser\" : \"guest\";\n const allRequiredPageDataIsLoaded = !Object.keys(loadingRequiredPageDataStatus.current[userKey]).some(loaded => !loadingRequiredPageDataStatus.current[userKey][loaded]);\n \n if (allRequiredPageDataIsLoaded) {\n onAllDataIsFetched();\n }\n };\n\n const setDataFetched = (key) => {\n const userKey = nextUser ? \"loggedUser\" : \"guest\";\n loadingRequiredPageDataStatus.current[userKey][key] = true;\n }\n\n const onLoadRequiredPageDataError = (errData) => {\n if (errData && errData.result === \"xhr_error\" && errData.error && errData.error.status && errData.error.status === \"abort\") {\n return;\n }\n\n enableLoadingOrderInfoOnUpsellsChange.current = true;\n stopPageLoading();\n setLoadRequiredPageDataFailed(true);\n }\n\n const {\n initialOrderInfo,\n userOrderInfo,\n setUserOrderInfo,\n guestOrderInfo,\n setGuestOrderInfo,\n chosenUpsellPlans, \n setChosenUpsellPlans,\n disabledPlanOptions,\n setDisabledPlanOptions,\n loadingOrderInfoOnUpsellsChange,\n setLoadingOrderInfoOnUpsellsChange,\n enableLoadingOrderInfoOnUpsellsChange,\n loadOrderInfoOnUpsellsChangeXHR,\n loadOrderInfoXHR,\n discountCode,\n setDiscountCode,\n setUserSubscriptions,\n } = useOrderInfo({\n user, nextUser, discount, paymentView, cardProvider, \n chosenPlan, chosenPeriod, downgrade: Boolean(URL_Downgrade), traffic,\n cryptoPageURL, pricingPageURL, trafficPageURL, pricingPagePassURL, familyPageURL,\n isPaymentDisruptionCountry,\n setDataFetched,\n checkAllDataIsFetched,\n onLoadRequiredPageDataError,\n });\n\n const {\n onLoginCallback,\n onLogoutCallback,\n handlePassLogin,\n subscribeForUserDiff,\n userDiff,\n onUserDiff\n } = useUser({\n user,\n setNextUser,\n userIsBuyingPcloudPassPlan,\n showPageLoading,\n resetLoadingRequiredPageDataStatus,\n cart,\n traffic,\n chosenPeriod,\n discountCode,\n userOrderInfo,\n setUserSubscriptions\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 login_callback.push(onLoginCallback);\n register_callback.push((userData) => onLoginCallback(userData, \"onAuthAction\"));\n logout_callback.push(onLogoutCallback);\n\n // Check if we are already logged in on this moment.\n if (nextUser === null && pCloud && pCloud.user && (!userIsBuyingPcloudPassPlan || (userIsBuyingPcloudPassPlan && typeof pCloud.user.passmanagerdata !== \"undefined\"))) {\n onLoginCallback(pCloud.user);\n }\n\n if (rcookie(\"discount\") && URL_Discount && rcookie(\"discount\") !== URL_Discount) {\n setcookie(\"discount\", URL_Discount);\n }\n \n window.addEventListener('resize', onResizeSetIsMobile);\n\n return () => {\n window.removeEventListener('resize', onResizeSetIsMobile)\n }\n }, []);\n\n useEffect(() => {\n if (payButtonClicked) {\n setPayButtonClicked(false);\n }\n }, [payButtonClicked]);\n\n useEffect(() => {\n if (cart && cart.length === 1 && (cart.indexOf(PASS_PREMIUM_PLAN_ID) !== -1 || cart.indexOf(PASS_FAMILY_PLAN_ID) !== -1)) {\n setButtonColor(\"pCloudPass\");\n } else {\n setButtonColor(\"cyan\");\n }\n \n onPlanChange(cart);\n }, [cart]);\n\n useEffect(() => { \n if (!cart?.length) {\n return;\n }\n\n const orderInfo = user ? userOrderInfo : guestOrderInfo;\n const itemsArr = cart.map(planid => {\n const currentProductData = getProductFromOrderInfo(orderInfo, planid);\n return {\n item_name: planNames[planid] + \" \" + gaPeriods[chosenPeriod],\n item_brand: orderInfo.initialOrderPlans.some(({id}) => PASS_PLANS_PER_PERIOD[chosenPeriod].includes(id)) ? \"pCloudPass\" : \"pCloud\",\n item_category: gaPeriods[chosenPeriod],\n item_variant: plansQuota[planid] || \"\",\n affiliation: rcookie(\"ref\"),\n coupon: discountCode && orderInfo.totalDiscount > 0 ? discountCode : \"\",\n price: currentProductData.pricecents / 100,\n currency: signToCurrency[orderInfo.currency],\n quantity: 1,\n item_id: planid,\n }\n });\n \n if (typeof dataLayer !== 'undefined') {\n dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.\n dataLayer.push({\n event: \"begin_checkout\",\n coupon: discountCode && orderInfo.totalDiscount > 0 ? discountCode : \"\",\n ecommerce: {\n currency: signToCurrency[orderInfo.currency],\n value: paymentSummaryData.totalPriceToPay / 100,\n items: itemsArr\n }\n });\n }\n }, [paymentSummaryData]);\n\n const onResizeSetIsMobile = () => {\n const newIsMobile = window.innerWidth <= 768;\n setIsMobile(newIsMobile);\n }\n\n const removePaypalPaymentSource = () => {\n const newUserPaymentSource = { ...userPaymentSource };\n if (newUserPaymentSource.paypal) {\n delete newUserPaymentSource.paypal;\n }\n\n setUserPaymentSource(newUserPaymentSource);\n }\n\n const onPayBtnClick = () => {\n if (!user) {\n setRequiredLoginOrSigninErrorMsg({show: true, message: __(\"login_or_signup_error_msg\", \"Please log in or sign up to continue.\")});\n } else {\n // Clear error if there are such.\n setRequiredLoginOrSigninErrorMsg({...requiredLoginOrSigninErrorMsg, show: false});\n }\n\n if (!(isIE || disabledButton || hidePaypalButton || loadingOrderInfoOnUpsellsChange)) {\n setPayButtonClicked(true);\n }\n };\n\n const renderPayButton = () => {\n // setPaymentButtonRendered(false);\n const payBtnText = __(\"checkout_right_btn\").toLowerCase();\n return (\n \n \n \n node.addEventListener(\n \"transitionend\",\n () => {\n done();\n // if (node.classList.contains(\"fade-enter-done\")) {\n // setPaymentButtonRendered(true);\n // }\n },\n false\n )\n }\n classNames=\"fade\"\n >\n \n \n {}}\n onExited={() => {}}\n appear\n >\n \n \n {(!payBtnErrorMsg.show && requiredLoginOrSigninErrorMsg.message) || payBtnErrorMsg.message}\n \n \n \n \n {paymentView === \"paypal\" && !isIE && !(userPaymentSource && userPaymentSource.paypal) && !hidePaypalButton ? (\n \n \n {paypalButtonLoading || loadingPayButton ? (\n \n \n \n ) : null}\n

\n \n \n ) : (\n \n \n \n )}\n \n \n \n \n );\n };\n\n const renderDisclaimer = () => {\n if (user) {\n return (\n \n \n \n {__(\"secure_ssl_payment_short\")}. {__(\"10_DAYS_MONEY_BACK\")}\n \n\n {userOrderInfo.currency ? \n \n {__(\"prices_displayed_currency\").replace(\"%currency%\", signToCurrency[userOrderInfo.currency])}\n \n : null}\n {(chosenPeriod != \"lifetime\" && (paymentView === \"ccard\" || paymentView === \"paypal\")) ? (\n \n \n \n ) : null}\n {(chosenPeriod != \"lifetime\" && paymentView === \"local\") ? (\n \n \n \n ) : null }\n \n {paymentView === \"ccard\" ? (\n

\n {reactStringReplace(__(\"store-card-disclaimer\"), /(%review%)/g, (match, i) => (\n {\n modalManager.open('PrivacyPolicy');\n }}\n >\n {__(\"store-card-review-link\")}\n \n ))}\n

\n ) : null}\n {paymentView === \"ccard\" && cardProvider === \"safecharge\" ? (\n

\n {__(\"checkout_safecharge_terms_1\")}\n {__(\"checkout_safecharge_terms_2\")}\n \n {__(\"terms and conditions\")}\n {\" \"}\n |\n \n {__(\"Privacy Policy\")}\n \n

\n ) : null}\n

\n {__(\"website_operated_address\")}\n

\n \n \n );\n }\n\n return null;\n };\n\n const handleTimerEIClick = () => {\n discount = \"EXIT_INTENT\";\n setDiscountCode(\"EXIT_INTENT\");\n };\n\n const renderExitIntent = () => {\n if (hideExitIntent) {\n return null;\n }\n\n if (chosenPeriod !== \"lifetime\" && user && !user.lastsubscription && !discountCode && !disabledPlanOptions && chosenPlan.indexOf(ADDITIONAL_TRAFFIC_ID) === -1 && chosenPlan.indexOf(PASS_PREMIUM_PLAN_ID) === -1 && chosenPlan.indexOf(PASS_FAMILY_PLAN_ID) === -1) {\n return ;\n }\n\n return null;\n }\n\n const onPaymentStarted = () => {\n // Clear previous error message if it's shown.\n onPaymentErrorMessageChange(\"\");\n // Show button loading.\n setLoadingPayButton(true);\n };\n\n const onPaymentErrorMessageChange = (newPaymentErrorMessage) => {\n \n if (newPaymentErrorMessage !== \"\") {\n // Rollback closed user diff watcher while payment processing.\n subscribeForUserDiff(user, onUserDiff);\n }\n\n payBtnErrorMsgShown.current = newPaymentErrorMessage !== \"\";\n setPayBtnErrorMsg({show: payBtnErrorMsgShown.current, message: payBtnErrorMsgShown.current ? newPaymentErrorMessage : payBtnErrorMsg.message});\n }\n\n const onPrepareLoginOrSignupFormFinished = () => {\n setDataFetched(\"loadedLoginOrSignupForm\"); \n checkAllDataIsFetched();\n };\n\n const onLoadedPaymentData = () => {\n setDataFetched(\"loadedPaymentData\");\n checkAllDataIsFetched();\n };\n\n return (\n \n \n {__(\"secure_checkout\")}\n \n \n {loadRequiredPageDataFailed ? \n {__(\"unexpected_error\", \"An unexpected error has occurred. Please reload the page to try again.\")}\n :\n \n \n \n { isPaymentDisruptionCountry ? (\n \n \n

{__(\"payment_disruption\")}

\n \n ) : (\n setLoadingPayButton(false)}\n orderInfo={userOrderInfo}\n onLoadedPaymentData={onLoadedPaymentData}\n onLoadedPaymentDataError={(err) => onLoadRequiredPageDataError(err)}\n disableLoadingIndication={true}\n chosenPeriod={chosenPeriod}\n payButtonClicked={payButtonClicked}\n totalPrice={totalPrice}\n cardProvider={cardProvider}\n setCardProvider={setCardProvider}\n // Only if discount is valid.\n discount={discountCode && paymentSummaryData.totalDiscount > 0 ? discountCode : \"\"}\n setDisabledPlanOptions={setDisabledPlanOptions}\n isMobile={isMobile}\n userDiff={userDiff.current}\n removePaypalPaymentSource={removePaypalPaymentSource}\n traffic={traffic}\n hidePaypalButton={hidePaypalButton}\n setHidePaypalButton={setHidePaypalButton}\n country={country}\n downgrade={Boolean(URL_Downgrade)}\n onPaymentErrorMessageChange={onPaymentErrorMessageChange}\n setUserSubscriptions={setUserSubscriptions}\n // paymentButtonRendered={paymentButtonRendered}\n />\n )\n }\n \n \n \n \n }\n \n {renderDisclaimer()}\n {renderExitIntent()}\n \n );\n};\n\nexport default CheckoutPage;\n\nconst ViewWrapper = styled.div`\n max-width: 1008px;\n padding: 0 24px;\n margin: 0 auto;\n\n @media (max-width: 768px) {\n padding: 0;\n }\n`;\n\nconst BoxWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 24px;\n\n @media (max-width: 768px) {\n flex-direction: column;\n gap: 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n height: 40px;\n .disable-btn-transition {\n transition: none;\n }\n`;\n\nconst PaypalButtonContainer = styled.div`\n width: 100%;\n height: 100%;\n position: relative;\n transition: opacity 250ms ease-in-out;\n\n ${({disabled, transitiondelay}) => disabled ? `\n margin-bottom: -8px;\n opacity: 0.5;\n transition-delay: ${transitiondelay ? transitiondelay : \"0ms\"};\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1000;\n }\n `\n : null}\n\n #paypal-button {\n line-height: 1;\n z-index: 0;\n position: relative;\n overflow: hidden;\n border-radius: 7px;\n height: 100%;\n\n .paypal-buttons {\n display: ${({hidepaypalbtn}) => hidepaypalbtn ? \"none\": \"inline-block\"}!important;\n }\n }\n`;\n\nconst BlueButtonLoading = styled.div`\n width: 100%;\n padding: 0px 8px;\n box-sizing: border-box;\n height: 100%;\n line-height: 40px;\n border-radius: 7px;\n background-color: #0070ba;\n cursor: default;\n pointer-events: none;\n margin-top: 0px;\n position: absolute;\n right: 0px;\n z-index: 1;\n`;\n\nconst spin = keyframes`\n 100% { transform: rotate(360deg) };\n`;\n\nconst loadingImg = (typeof cdnPath !== 'undefined' ? cdnPath : '/') + 'images/loading_button.png';\nconst Loading = styled.div`\n position: absolute;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n margin: -10px 0 0 -10px;\n -webkit-animation: ${spin} 0.5s linear infinite;\n animation: ${spin} 0.5s linear infinite;\n background: url(${loadingImg}) no-repeat 50%;\n background-size: 20px 20px;\n`;\n\nconst Disclaimer = styled.div`\n padding: 0px 16px;\n box-sizing: border-box;\n min-height: 60px;\n\n @media (max-width: 450px) {\n padding: 0px 12px;\n margin-top: 0;\n }\n`;\n\nconst DisclaimerText = styled.div`\n font-size: 11px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.4;\n letter-spacing: normal;\n text-align: center;\n color: #999999;\n\n b {\n font-weight: normal;\n color: #000;\n }\n`;\n\nconst Link = styled.a`\n color: #000;\n font-size: 11px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.4;\n letter-spacing: normal;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n margin-left: ${({marginLeft}) => marginLeft ? marginLeft : \"4px\"};\n`;\n\nconst SecureText = styled.div`\n font-family: Roboto;\n font-size: 12px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.17;\n letter-spacing: normal;\n text-align: center;\n color: #000;\n margin: 43px auto;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n flex-shrink: 0;\n \n path {\n fill: #17bed0;\n }\n }\n\n span {\n margin-left: 10px;\n }\n\n @media (max-width: 768px) {\n margin: 0 auto 40px auto;\n padding: 0 16px;\n }\n\n`;\n\nconst ErrorWrapper = styled.div`\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n padding: 16px;\n border-radius: 8px;\n border: solid 1px #ff2a20;\n background-color: rgba(255, 42, 32, 0.06);\n transition: all 500ms ease-in-out;\n margin-bottom: 16px;\n`;\n\n\nconst ErrorMsg = styled.div`\n font-family: Roboto;\n font-size: 13px;\n color: #ff2a20;\n transition: all 500ms ease-in-out;\n text-align: center;\n`;\n","import React from \"react\";\n\nimport _move from \"../lib/move\";\nimport componentMount from \"../lib/componentMount\"\nimport CheckoutPage from \"../components/CheckoutPage/CheckoutPage\";\n\nconst _attachList = [\n {\n attach: self,\n list: [\n //components\n \"CheckoutPage\"\n ]\n }\n]\n\nconst prepComponents = {\n CheckoutPage: componentMount(props => )\n};\n\n_move(prepComponents, _attachList);","import { rectToClientRect, detectOverflow as detectOverflow$1, offset as offset$1, autoPlacement as autoPlacement$1, shift as shift$1, flip as flip$1, size as size$1, hide as hide$1, arrow as arrow$1, inline as inline$1, limitShift as limitShift$1, computePosition as computePosition$1 } from '@floating-ui/core';\nimport { round, createCoords, max, min, floor } from '@floating-ui/utils';\nimport { getComputedStyle, isHTMLElement, isElement, getWindow, isWebKit, getFrameElement, getNodeScroll, getDocumentElement, isTopLayer, getNodeName, isOverflowElement, getOverflowAncestors, getParentNode, isLastTraversableNode, isContainingBlock, isTableElement, getContainingBlock } from '@floating-ui/utils/dom';\nexport { getOverflowAncestors } from '@floating-ui/utils/dom';\n\nfunction getCssDimensions(element) {\n const css = getComputedStyle(element);\n // In testing environments, the `width` and `height` properties are empty\n // strings for SVG elements, returning NaN. Fallback to `0` in this case.\n let width = parseFloat(css.width) || 0;\n let height = parseFloat(css.height) || 0;\n const hasOffset = isHTMLElement(element);\n const offsetWidth = hasOffset ? element.offsetWidth : width;\n const offsetHeight = hasOffset ? element.offsetHeight : height;\n const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;\n if (shouldFallback) {\n width = offsetWidth;\n height = offsetHeight;\n }\n return {\n width,\n height,\n $: shouldFallback\n };\n}\n\nfunction unwrapElement(element) {\n return !isElement(element) ? element.contextElement : element;\n}\n\nfunction getScale(element) {\n const domElement = unwrapElement(element);\n if (!isHTMLElement(domElement)) {\n return createCoords(1);\n }\n const rect = domElement.getBoundingClientRect();\n const {\n width,\n height,\n $\n } = getCssDimensions(domElement);\n let x = ($ ? round(rect.width) : rect.width) / width;\n let y = ($ ? round(rect.height) : rect.height) / height;\n\n // 0, NaN, or Infinity should always fallback to 1.\n\n if (!x || !Number.isFinite(x)) {\n x = 1;\n }\n if (!y || !Number.isFinite(y)) {\n y = 1;\n }\n return {\n x,\n y\n };\n}\n\nconst noOffsets = /*#__PURE__*/createCoords(0);\nfunction getVisualOffsets(element) {\n const win = getWindow(element);\n if (!isWebKit() || !win.visualViewport) {\n return noOffsets;\n }\n return {\n x: win.visualViewport.offsetLeft,\n y: win.visualViewport.offsetTop\n };\n}\nfunction shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {\n if (isFixed === void 0) {\n isFixed = false;\n }\n if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {\n return false;\n }\n return isFixed;\n}\n\nfunction getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {\n if (includeScale === void 0) {\n includeScale = false;\n }\n if (isFixedStrategy === void 0) {\n isFixedStrategy = false;\n }\n const clientRect = element.getBoundingClientRect();\n const domElement = unwrapElement(element);\n let scale = createCoords(1);\n if (includeScale) {\n if (offsetParent) {\n if (isElement(offsetParent)) {\n scale = getScale(offsetParent);\n }\n } else {\n scale = getScale(element);\n }\n }\n const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);\n let x = (clientRect.left + visualOffsets.x) / scale.x;\n let y = (clientRect.top + visualOffsets.y) / scale.y;\n let width = clientRect.width / scale.x;\n let height = clientRect.height / scale.y;\n if (domElement) {\n const win = getWindow(domElement);\n const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;\n let currentWin = win;\n let currentIFrame = getFrameElement(currentWin);\n while (currentIFrame && offsetParent && offsetWin !== currentWin) {\n const iframeScale = getScale(currentIFrame);\n const iframeRect = currentIFrame.getBoundingClientRect();\n const css = getComputedStyle(currentIFrame);\n const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;\n const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;\n x *= iframeScale.x;\n y *= iframeScale.y;\n width *= iframeScale.x;\n height *= iframeScale.y;\n x += left;\n y += top;\n currentWin = getWindow(currentIFrame);\n currentIFrame = getFrameElement(currentWin);\n }\n }\n return rectToClientRect({\n width,\n height,\n x,\n y\n });\n}\n\n// If has a CSS width greater than the viewport, then this will be\n// incorrect for RTL.\nfunction getWindowScrollBarX(element, rect) {\n const leftScroll = getNodeScroll(element).scrollLeft;\n if (!rect) {\n return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;\n }\n return rect.left + leftScroll;\n}\n\nfunction getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {\n if (ignoreScrollbarX === void 0) {\n ignoreScrollbarX = false;\n }\n const htmlRect = documentElement.getBoundingClientRect();\n const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :\n // RTL scrollbar.\n getWindowScrollBarX(documentElement, htmlRect));\n const y = htmlRect.top + scroll.scrollTop;\n return {\n x,\n y\n };\n}\n\nfunction convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {\n let {\n elements,\n rect,\n offsetParent,\n strategy\n } = _ref;\n const isFixed = strategy === 'fixed';\n const documentElement = getDocumentElement(offsetParent);\n const topLayer = elements ? isTopLayer(elements.floating) : false;\n if (offsetParent === documentElement || topLayer && isFixed) {\n return rect;\n }\n let scroll = {\n scrollLeft: 0,\n scrollTop: 0\n };\n let scale = createCoords(1);\n const offsets = createCoords(0);\n const isOffsetParentAnElement = isHTMLElement(offsetParent);\n if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {\n if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {\n scroll = getNodeScroll(offsetParent);\n }\n if (isHTMLElement(offsetParent)) {\n const offsetRect = getBoundingClientRect(offsetParent);\n scale = getScale(offsetParent);\n offsets.x = offsetRect.x + offsetParent.clientLeft;\n offsets.y = offsetRect.y + offsetParent.clientTop;\n }\n }\n const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);\n return {\n width: rect.width * scale.x,\n height: rect.height * scale.y,\n x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,\n y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y\n };\n}\n\nfunction getClientRects(element) {\n return Array.from(element.getClientRects());\n}\n\n// Gets the entire size of the scrollable document area, even extending outside\n// of the `` and `` rect bounds if horizontally scrollable.\nfunction getDocumentRect(element) {\n const html = getDocumentElement(element);\n const scroll = getNodeScroll(element);\n const body = element.ownerDocument.body;\n const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);\n const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);\n let x = -scroll.scrollLeft + getWindowScrollBarX(element);\n const y = -scroll.scrollTop;\n if (getComputedStyle(body).direction === 'rtl') {\n x += max(html.clientWidth, body.clientWidth) - width;\n }\n return {\n width,\n height,\n x,\n y\n };\n}\n\nfunction getViewportRect(element, strategy) {\n const win = getWindow(element);\n const html = getDocumentElement(element);\n const visualViewport = win.visualViewport;\n let width = html.clientWidth;\n let height = html.clientHeight;\n let x = 0;\n let y = 0;\n if (visualViewport) {\n width = visualViewport.width;\n height = visualViewport.height;\n const visualViewportBased = isWebKit();\n if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {\n x = visualViewport.offsetLeft;\n y = visualViewport.offsetTop;\n }\n }\n return {\n width,\n height,\n x,\n y\n };\n}\n\n// Returns the inner client rect, subtracting scrollbars if present.\nfunction getInnerBoundingClientRect(element, strategy) {\n const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');\n const top = clientRect.top + element.clientTop;\n const left = clientRect.left + element.clientLeft;\n const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);\n const width = element.clientWidth * scale.x;\n const height = element.clientHeight * scale.y;\n const x = left * scale.x;\n const y = top * scale.y;\n return {\n width,\n height,\n x,\n y\n };\n}\nfunction getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {\n let rect;\n if (clippingAncestor === 'viewport') {\n rect = getViewportRect(element, strategy);\n } else if (clippingAncestor === 'document') {\n rect = getDocumentRect(getDocumentElement(element));\n } else if (isElement(clippingAncestor)) {\n rect = getInnerBoundingClientRect(clippingAncestor, strategy);\n } else {\n const visualOffsets = getVisualOffsets(element);\n rect = {\n x: clippingAncestor.x - visualOffsets.x,\n y: clippingAncestor.y - visualOffsets.y,\n width: clippingAncestor.width,\n height: clippingAncestor.height\n };\n }\n return rectToClientRect(rect);\n}\nfunction hasFixedPositionAncestor(element, stopNode) {\n const parentNode = getParentNode(element);\n if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {\n return false;\n }\n return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);\n}\n\n// A \"clipping ancestor\" is an `overflow` element with the characteristic of\n// clipping (or hiding) child elements. This returns all clipping ancestors\n// of the given element up the tree.\nfunction getClippingElementAncestors(element, cache) {\n const cachedResult = cache.get(element);\n if (cachedResult) {\n return cachedResult;\n }\n let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');\n let currentContainingBlockComputedStyle = null;\n const elementIsFixed = getComputedStyle(element).position === 'fixed';\n let currentNode = elementIsFixed ? getParentNode(element) : element;\n\n // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block\n while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {\n const computedStyle = getComputedStyle(currentNode);\n const currentNodeIsContaining = isContainingBlock(currentNode);\n if (!currentNodeIsContaining && computedStyle.position === 'fixed') {\n currentContainingBlockComputedStyle = null;\n }\n const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);\n if (shouldDropCurrentNode) {\n // Drop non-containing blocks.\n result = result.filter(ancestor => ancestor !== currentNode);\n } else {\n // Record last containing block for next iteration.\n currentContainingBlockComputedStyle = computedStyle;\n }\n currentNode = getParentNode(currentNode);\n }\n cache.set(element, result);\n return result;\n}\n\n// Gets the maximum area that the element is visible in due to any number of\n// clipping ancestors.\nfunction getClippingRect(_ref) {\n let {\n element,\n boundary,\n rootBoundary,\n strategy\n } = _ref;\n const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);\n const clippingAncestors = [...elementClippingAncestors, rootBoundary];\n const firstClippingAncestor = clippingAncestors[0];\n const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {\n const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);\n accRect.top = max(rect.top, accRect.top);\n accRect.right = min(rect.right, accRect.right);\n accRect.bottom = min(rect.bottom, accRect.bottom);\n accRect.left = max(rect.left, accRect.left);\n return accRect;\n }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));\n return {\n width: clippingRect.right - clippingRect.left,\n height: clippingRect.bottom - clippingRect.top,\n x: clippingRect.left,\n y: clippingRect.top\n };\n}\n\nfunction getDimensions(element) {\n const {\n width,\n height\n } = getCssDimensions(element);\n return {\n width,\n height\n };\n}\n\nfunction getRectRelativeToOffsetParent(element, offsetParent, strategy) {\n const isOffsetParentAnElement = isHTMLElement(offsetParent);\n const documentElement = getDocumentElement(offsetParent);\n const isFixed = strategy === 'fixed';\n const rect = getBoundingClientRect(element, true, isFixed, offsetParent);\n let scroll = {\n scrollLeft: 0,\n scrollTop: 0\n };\n const offsets = createCoords(0);\n if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {\n if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {\n scroll = getNodeScroll(offsetParent);\n }\n if (isOffsetParentAnElement) {\n const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);\n offsets.x = offsetRect.x + offsetParent.clientLeft;\n offsets.y = offsetRect.y + offsetParent.clientTop;\n } else if (documentElement) {\n // If the scrollbar appears on the left (e.g. RTL systems). Use\n // Firefox with layout.scrollbar.side = 3 in about:config to test this.\n offsets.x = getWindowScrollBarX(documentElement);\n }\n }\n const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);\n const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;\n const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;\n return {\n x,\n y,\n width: rect.width,\n height: rect.height\n };\n}\n\nfunction isStaticPositioned(element) {\n return getComputedStyle(element).position === 'static';\n}\n\nfunction getTrueOffsetParent(element, polyfill) {\n if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {\n return null;\n }\n if (polyfill) {\n return polyfill(element);\n }\n let rawOffsetParent = element.offsetParent;\n\n // Firefox returns the element as the offsetParent if it's non-static,\n // while Chrome and Safari return the element. The element must\n // be used to perform the correct calculations even if the element is\n // non-static.\n if (getDocumentElement(element) === rawOffsetParent) {\n rawOffsetParent = rawOffsetParent.ownerDocument.body;\n }\n return rawOffsetParent;\n}\n\n// Gets the closest ancestor positioned element. Handles some edge cases,\n// such as table ancestors and cross browser bugs.\nfunction getOffsetParent(element, polyfill) {\n const win = getWindow(element);\n if (isTopLayer(element)) {\n return win;\n }\n if (!isHTMLElement(element)) {\n let svgOffsetParent = getParentNode(element);\n while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {\n if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {\n return svgOffsetParent;\n }\n svgOffsetParent = getParentNode(svgOffsetParent);\n }\n return win;\n }\n let offsetParent = getTrueOffsetParent(element, polyfill);\n while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {\n offsetParent = getTrueOffsetParent(offsetParent, polyfill);\n }\n if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {\n return win;\n }\n return offsetParent || getContainingBlock(element) || win;\n}\n\nconst getElementRects = async function (data) {\n const getOffsetParentFn = this.getOffsetParent || getOffsetParent;\n const getDimensionsFn = this.getDimensions;\n const floatingDimensions = await getDimensionsFn(data.floating);\n return {\n reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),\n floating: {\n x: 0,\n y: 0,\n width: floatingDimensions.width,\n height: floatingDimensions.height\n }\n };\n};\n\nfunction isRTL(element) {\n return getComputedStyle(element).direction === 'rtl';\n}\n\nconst platform = {\n convertOffsetParentRelativeRectToViewportRelativeRect,\n getDocumentElement,\n getClippingRect,\n getOffsetParent,\n getElementRects,\n getClientRects,\n getDimensions,\n getScale,\n isElement,\n isRTL\n};\n\nfunction rectsAreEqual(a, b) {\n return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;\n}\n\n// https://samthor.au/2021/observing-dom/\nfunction observeMove(element, onMove) {\n let io = null;\n let timeoutId;\n const root = getDocumentElement(element);\n function cleanup() {\n var _io;\n clearTimeout(timeoutId);\n (_io = io) == null || _io.disconnect();\n io = null;\n }\n function refresh(skip, threshold) {\n if (skip === void 0) {\n skip = false;\n }\n if (threshold === void 0) {\n threshold = 1;\n }\n cleanup();\n const elementRectForRootMargin = element.getBoundingClientRect();\n const {\n left,\n top,\n width,\n height\n } = elementRectForRootMargin;\n if (!skip) {\n onMove();\n }\n if (!width || !height) {\n return;\n }\n const insetTop = floor(top);\n const insetRight = floor(root.clientWidth - (left + width));\n const insetBottom = floor(root.clientHeight - (top + height));\n const insetLeft = floor(left);\n const rootMargin = -insetTop + \"px \" + -insetRight + \"px \" + -insetBottom + \"px \" + -insetLeft + \"px\";\n const options = {\n rootMargin,\n threshold: max(0, min(1, threshold)) || 1\n };\n let isFirstUpdate = true;\n function handleObserve(entries) {\n const ratio = entries[0].intersectionRatio;\n if (ratio !== threshold) {\n if (!isFirstUpdate) {\n return refresh();\n }\n if (!ratio) {\n // If the reference is clipped, the ratio is 0. Throttle the refresh\n // to prevent an infinite loop of updates.\n timeoutId = setTimeout(() => {\n refresh(false, 1e-7);\n }, 1000);\n } else {\n refresh(false, ratio);\n }\n }\n if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {\n // It's possible that even though the ratio is reported as 1, the\n // element is not actually fully within the IntersectionObserver's root\n // area anymore. This can happen under performance constraints. This may\n // be a bug in the browser's IntersectionObserver implementation. To\n // work around this, we compare the element's bounding rect now with\n // what it was at the time we created the IntersectionObserver. If they\n // are not equal then the element moved, so we refresh.\n refresh();\n }\n isFirstUpdate = false;\n }\n\n // Older browsers don't support a `document` as the root and will throw an\n // error.\n try {\n io = new IntersectionObserver(handleObserve, {\n ...options,\n // Handle