= 256}\n helperText={companyName.length >= 256 ? t`Too long!` : \" \"}\n onChange={(event) =>\n this.setState({\n companyName: event.target.value,\n })\n }\n onKeyPress={(event) => {\n if (event.key === \"Enter\") {\n this.setCompanyInfo()\n }\n }}\n style={{\n width: \"100%\",\n }}\n InputLabelProps={companyName ? { shrink: true } : {}}\n InputProps={{\n endAdornment: companyName && (\n \n \n this.setState({\n companyName: \"\",\n })\n }\n tabIndex=\"-1\"\n size=\"large\">\n \n \n \n ),\n }}\n />\n \n \n );\n }\n }\n)\n","import React, { PureComponent } from \"react\"\nimport { withStyles } from \"@mui/styles\"\n\nconst styles = () => ({\n root: {\n width: \"100%\",\n padding: \"6px 0 7px\",\n cursor: \"text\",\n },\n})\n\nexport default withStyles(styles, { withTheme: true })(\n class extends PureComponent {\n static displayName = \"StripeInput\"\n\n render() {\n const {\n classes: c,\n theme,\n component: Component,\n onFocus,\n onBlur,\n handleChange,\n } = this.props\n\n return (\n \n )\n }\n }\n)\n","import React, { Component } from \"react\"\nimport FormControl from \"@mui/material/FormControl\"\nimport FormHelperText from \"@mui/material/FormHelperText\"\nimport OutlinedInput from \"@mui/material/OutlinedInput\"\nimport InputLabel from \"@mui/material/InputLabel\"\nimport { withTranslation } from \"react-i18next\"\nimport StripeInput from \"./StripeInput\"\n\nexport default withTranslation()(\n class StripeElementWrapper extends Component {\n state = {\n focused: false,\n empty: true,\n error: false,\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.stripeError !== this.props.stripeError) {\n this.setState({ error: { message: nextProps.stripeError } })\n }\n }\n\n render() {\n const { component, label, setComplete, setError, isLastElement, t } =\n this.props\n const { error, focused, empty } = this.state\n\n return (\n \n \n \n {label}\n \n this.setState({ focused: true })}\n onBlur={() => this.setState({ focused: false })}\n inputProps={{\n component,\n handleChange: ({ error, empty, complete }) => {\n this.setState({\n error: empty\n ? new Error(t`This field is required`)\n : error && new Error(t(error.message.replace(\".\", \"\"))),\n empty,\n })\n setComplete(complete)\n setError(error)\n },\n }}\n style={{\n height: \"19px\",\n padding: \"28px 14px\",\n }}\n error={!!error}\n />\n \n {error ? error.message : \" \"}\n \n \n
\n )\n }\n }\n)\n","import React, { Component } from \"react\";\nimport {\n injectStripe,\n CardNumberElement,\n CardExpiryElement,\n CardCVCElement,\n} from \"react-stripe-elements\";\nimport { GenericDialog } from \"@igloocloud/igloosharedui\";\nimport { withTranslation } from \"react-i18next\";\nimport StripeElementWrapper from \"./stripe/StripeElementWrapper\";\nimport ClientContext from \"../ClientContext\";\n\nexport default withTranslation()(\n injectStripe(\n class PaymentInfoDialog extends Component {\n state = {\n numberComplete: false,\n expiryComplete: false,\n cvcComplete: false,\n numberError: false,\n expiryError: false,\n cvcError: false,\n anchorEl: null,\n loading: false,\n };\n\n static contextType = ClientContext;\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.open !== this.props.open && nextProps.open) {\n this.setState({\n loading: false,\n numberComplete: false,\n expiryComplete: false,\n cvcComplete: false,\n numberError: false,\n expiryError: false,\n cvcError: false,\n });\n }\n }\n\n render() {\n const { open, close, stripe, elements, t } = this.props;\n const {\n numberComplete,\n expiryComplete,\n cvcComplete,\n stripeError,\n numberError,\n expiryError,\n cvcError,\n loading,\n } = this.state;\n\n const setupPayment = async () => {\n this.setState({ loading: true });\n\n this.context.mutation\n .initiateBillingSetup()\n .then((secret) =>\n stripe\n .handleCardSetup(secret, elements.getElement(\"cardNumber\"))\n .then(({ error, setupIntent }) => {\n if (error) {\n this.setState({\n stripeError:\n error.code === \"card_declined\"\n ? t`Your card was declined`\n : t`Error`,\n });\n\n throw new Error(\"Error\"); //Do not remove: allows react-stripe-elements to display the error below the textfield\n } else {\n this.context.mutation.updatePaymentMethod({\n stripePaymentMethod: setupIntent.payment_method,\n });\n }\n })\n )\n .then(close)\n .finally(() => this.setState({ loading: false }))\n .catch(() => {}); //Do not remove: allows react-stripe-elements to display the error below the textfield\n };\n\n return (\n \n \n this.setState({ numberComplete })\n }\n setError={(numberError) => this.setState({ numberError })}\n stripeError={stripeError}\n />\n \n this.setState({ expiryComplete })\n }\n setError={(expiryError) => this.setState({ expiryError })}\n />\n this.setState({ cvcComplete })}\n setError={(cvcError) => this.setState({ cvcError })}\n isLastElement\n />\n \n );\n }\n }\n )\n);\n","import React, { useState } from \"react\"\nimport Alert from \"@mui/material/Alert\"\nimport Button from \"@mui/material/Button\"\nimport SvgIcon from \"@mui/material/SvgIcon\"\nimport Collapse from \"@mui/material/Collapse\"\nimport IconButton from \"@mui/material/IconButton\"\nimport { GenericDialog } from \"@igloocloud/igloosharedui\"\nimport { withTranslation } from \"react-i18next\"\n\nexport default withTranslation()(({ visible, mobile, t }) => {\n const [upgradeDialogOpen, setUpgradeDialogOpen] = useState(false)\n const openUpgradeDialog = () => setUpgradeDialogOpen(true)\n const closeUpgradeDialog = () => setUpgradeDialogOpen(false)\n\n return (\n <>\n \n \n \n \n \n \n \n \n ) : (\n \n )\n }\n style={{\n display: \"flex\",\n alignItems: \"center\",\n }}\n >\n {t`Need more? Upgrade to Igloo Business`}\n \n \n \n {\n closeUpgradeDialog()\n }}\n containedButtonProps={{\n component: \"a\",\n href:\n \"mailto:sales@igloo.ooo?subject=\" +\n t`Upgrading to Igloo Business` +\n \"&body=\" +\n t`Please describe your project and we'll reply with an offer tailored to your needs` +\n \".\",\n }}\n >\n {t`Thank you for considering upgrading to Igloo Business!`}
\n
\n {t`By clicking \"Upgrade\" you'll be able to get in touch with our sales team and get an offer tailored to your needs` +\n \".\"}\n \n \n )\n})\n","import React, { Component } from \"react\"\nimport IconButton from \"@mui/material/IconButton\"\nimport InputAdornment from \"@mui/material/InputAdornment\"\nimport TextField from \"@mui/material/TextField\"\nimport Clear from \"@mui/icons-material/Clear\"\nimport { GenericDialog } from \"@igloocloud/igloosharedui\"\nimport ClientContext from \"../ClientContext\"\nimport { withTranslation } from \"react-i18next\"\n\nexport default withTranslation()(\n class BillingSettings extends Component {\n constructor(props) {\n super(props)\n\n this.state = {\n vatNumber: props.user.vatNumber || \"\",\n }\n }\n\n static contextType = ClientContext\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.open !== this.props.open && nextProps.open) {\n this.setState({\n vatNumber: nextProps.user.vatNumber || \"\",\n })\n }\n }\n\n setVatInfo = async () => {\n this.setState({ loading: true })\n\n await this.context.mutation\n .updateUser({\n vatNumber: this.state.vatNumber || null,\n })\n .then(this.props.close)\n .finally(() => this.setState({ loading: false }))\n }\n\n render() {\n const { open, close, t } = this.props\n const { loading, vatNumber } = this.state\n\n return (\n = 256 ||\n loading\n }\n containedButtonLoading={loading}\n >\n = 256}\n helperText={vatNumber.length >= 256 ? t`Too long!` : \" \"}\n onChange={(event) =>\n this.setState({\n vatNumber: event.target.value,\n })\n }\n onKeyPress={(event) => {\n if (event.key === \"Enter\") {\n this.setVatInfo()\n }\n }}\n style={{\n width: \"100%\",\n }}\n InputLabelProps={vatNumber ? { shrink: true } : {}}\n InputProps={{\n endAdornment: vatNumber && (\n \n \n this.setState({\n vatNumber: \"\",\n })\n }\n tabIndex=\"-1\"\n size=\"large\">\n \n \n \n ),\n }}\n />\n \n );\n }\n }\n)\n","import React, { Component } from \"react\"\nimport Typography from \"@mui/material/Typography\"\nimport Table from \"@mui/material/Table\"\nimport TableRow from \"@mui/material/TableRow\"\nimport TableCell from \"@mui/material/TableCell\"\nimport IconButton from \"@mui/material/IconButton\"\nimport Menu from \"@mui/material/Menu\"\nimport MenuItem from \"@mui/material/MenuItem\"\nimport ListItemIcon from \"@mui/material/ListItemIcon\"\nimport ListItemText from \"@mui/material/ListItemText\"\nimport Paper from \"@mui/material/Paper\"\nimport Collapse from \"@mui/material/Collapse\"\nimport Skeleton from \"@mui/material/Skeleton\"\nimport Alert from \"@mui/material/Alert\"\nimport MoreVert from \"@mui/icons-material/MoreVert\"\nimport Add from \"@mui/icons-material/Add\"\nimport Edit from \"@mui/icons-material/Edit\"\nimport InfoOutlined from \"@mui/icons-material/InfoOutlined\"\nimport RemoveCircleOutline from \"@mui/icons-material/RemoveCircleOutline\"\nimport moment from \"moment\"\nimport Moment from \"react-moment\"\nimport { withTranslation } from \"react-i18next\"\nimport {\n ErrorScreen,\n GenericDialog,\n debounce,\n countries,\n euroCountries,\n poundCountries,\n} from \"@igloocloud/igloosharedui\"\nimport PaymentError from \"./PaymentError\"\nimport BillingAddress from \"./BillingAddress\"\nimport CompanyInfo from \"./CompanyInfo\"\nimport CreditCardInfo from \"./CreditCardInfo\"\nimport UpgradeAlert from \"./UpgradeAlert\"\nimport VAT from \"./VAT\"\nimport ClientContext from \"../ClientContext\"\nimport i18n from \"../i18n\"\n\nconst {\n REACT_APP_MAIN_BACKGROUND_COLOR: backgroundColor,\n REACT_APP_TEXT_ON_MAIN_BACKGROUND_COLOR: textOnBackgroundColor,\n REACT_APP_ERROR_COLOR: errorColor,\n REACT_APP_LIGHT_COLOR: lightColor,\n} = process.env\n\nexport default withTranslation()(\n class Payments extends Component {\n state = {\n alertOpen: false,\n throughputPickerOpen: false,\n storagePickerOpen: false,\n item: \"\",\n price: \"\",\n vatRate: null,\n anchorEl: null,\n target: null,\n addressOpen: false,\n creditCardOpen: false,\n companyOpen: false,\n vatOpen: false,\n removeItemOpen: false,\n loading: false,\n width: 0,\n }\n\n static contextType = ClientContext\n\n updateDimensions = () => {\n if (this.state.width !== window.innerWidth) {\n this.setState({ width: window.innerWidth })\n }\n }\n\n componentDidMount() {\n this.updateDimensions()\n window.addEventListener(\"resize\", debounce(this.updateDimensions))\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", debounce(this.updateDimensions))\n }\n\n render() {\n const { mobile, userProps, t } = this.props\n const {\n anchorEl,\n target,\n addressOpen,\n creditCardOpen,\n companyOpen,\n vatOpen,\n removeItemOpen,\n loading,\n width,\n } = this.state\n const cellStyle = { height: \"32px\" }\n\n const subscriptionPrice = userProps.data\n ? userProps.data.billingPlan === \"BUSINESS\" &&\n userProps.data.businessPricing.price !== 0\n ? userProps.data\n ? userProps.data.businessPricing.price / 100\n : \"\"\n : 0\n : null\n const vatRate = userProps.data ? userProps.data.vatRate / 100 : null\n const vat = vatRate ? subscriptionPrice * vatRate : null\n const total = vat ? subscriptionPrice + vat : subscriptionPrice\n\n const currency = userProps.data\n ? euroCountries.includes(userProps.data.addressCountryOrTerritory)\n ? \"€\"\n : poundCountries.includes(userProps.data.addressCountryOrTerritory)\n ? \"£\"\n : \"$\"\n : \"\"\n\n const tableCellStyle = {\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n }\n\n const summaryLoaded =\n userProps.data && vatRate !== null && vatRate !== undefined\n\n const formatPrice = (price) =>\n price.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")\n\n return (\n <>\n \n \n {userProps.error ? (\n {\n userProps.refetch()\n }}\n error={userProps.error}\n />\n ) : (\n <>\n \n {t`Billing details`}\n \n = 0 &&\n subscriptionPrice !== 0\n }\n >\n \n }\n >\n {userProps.data &&\n (moment\n .utc()\n .diff(\n moment.utc(userProps.data.nextBillingDate),\n \"days\"\n ) === 0 ? (\n t`Your next payment is today`\n ) : (\n t`Your next payment is ` + date}\n >\n {moment.utc(userProps.data.nextBillingDate)}\n \n ))}\n \n \n \n \n \n \n \n {userProps.data &&\n vatRate !== null &&\n vatRate !== undefined ? (\n t`Credit card`\n ) : (\n \n )}\n \n \n {userProps.data &&\n vatRate !== null &&\n vatRate !== undefined ? (\n userProps.data.cardLast4Digits ? (\n width > 450 ? (\n \"•••• •••• •••• \" + userProps.data.cardLast4Digits\n ) : (\n \"•••• \" + userProps.data.cardLast4Digits\n )\n ) : (\n {t`Required`}\n )\n ) : (\n \n )}\n \n \n {userProps.data &&\n vatRate !== null &&\n vatRate !== undefined ? (\n userProps.data.cardLast4Digits ? (\n userProps.data.billingPlan === \"BASIC\" ||\n (userProps.data.billingPlan === \"BUSINESS\" &&\n !userProps.data.businessPricing.price) ? (\n \n this.setState({\n anchorEl: event.currentTarget,\n target: \"creditCard\",\n })\n }\n size=\"large\"\n >\n \n \n ) : (\n \n this.setState({\n creditCardOpen: true,\n anchorEl: null,\n })\n }\n size=\"large\"\n >\n \n \n )\n ) : (\n \n this.setState({ creditCardOpen: true })\n }\n size=\"large\"\n >\n \n \n )\n ) : (\n \n )}\n \n \n \n \n {userProps.data &&\n vatRate !== null &&\n vatRate !== undefined ? (\n t`Address`\n ) : (\n \n )}\n \n \n {userProps.data ? (\n userProps.data.addressLine1 &&\n userProps.data.addressPostalCode &&\n userProps.data.addressCity &&\n userProps.data.addressState &&\n userProps.data.addressCountryOrTerritory ? (\n `${userProps.data.addressLine1}, ${\n userProps.data.addressCity\n }, ${\n i18n.language === \"en\"\n ? countries.find(\n (country) =>\n country.code ===\n userProps.data.addressCountryOrTerritory\n ).en\n : countries.find(\n (country) =>\n country.code ===\n userProps.data.addressCountryOrTerritory\n ).it\n }`\n ) : (\n {t`Required`}\n )\n ) : (\n \n )}\n \n \n {userProps.data &&\n vatRate !== null &&\n vatRate !== undefined ? (\n userProps.data.addressLine1 &&\n userProps.data.addressPostalCode &&\n userProps.data.addressCity &&\n userProps.data.addressState &&\n userProps.data.addressCountryOrTerritory ? (\n userProps.data.billingPlan === \"BASIC\" ||\n (userProps.data.billingPlan === \"BUSINESS\" &&\n !userProps.data.price) ? (\n \n this.setState({\n anchorEl: event.currentTarget,\n target: \"address\",\n })\n }\n size=\"large\"\n >\n \n \n ) : (\n \n this.setState({\n addressOpen: true,\n anchorEl: null,\n })\n }\n size=\"large\"\n >\n \n \n )\n ) : (\n \n this.setState({ addressOpen: true })\n }\n size=\"large\"\n >\n \n \n )\n ) : (\n \n )}\n \n \n \n \n {userProps.data &&\n vatRate !== null &&\n vatRate !== undefined ? (\n t`Company`\n ) : (\n \n )}\n \n \n {userProps.data &&\n vatRate !== null &&\n vatRate !== undefined ? (\n userProps.data.companyName\n ) : (\n \n )}\n \n \n {userProps.data &&\n vatRate !== null &&\n vatRate !== undefined ? (\n userProps.data.companyName ? (\n \n this.setState({\n anchorEl: event.currentTarget,\n target: \"company\",\n })\n }\n size=\"large\"\n >\n \n \n ) : (\n \n this.setState({ companyOpen: true })\n }\n size=\"large\"\n >\n \n \n )\n ) : (\n \n )}\n \n \n \n \n {userProps.data &&\n vatRate !== null &&\n vatRate !== undefined ? (\n t`VAT number`\n ) : (\n \n )}\n \n \n {userProps.data &&\n vatRate !== null &&\n vatRate !== undefined ? (\n userProps.data.vatNumber\n ) : (\n \n )}\n \n \n {userProps.data ? (\n userProps.data.vatNumber &&\n vatRate !== null &&\n vatRate !== undefined ? (\n \n this.setState({\n anchorEl: event.currentTarget,\n target: \"vat\",\n })\n }\n size=\"large\"\n >\n \n \n ) : (\n this.setState({ vatOpen: true })}\n size=\"large\"\n >\n \n \n )\n ) : (\n \n )}\n \n \n \n \n \n {t`Your bill`}\n \n \n \n \n \n \n {summaryLoaded ? (\n \"Igloo \" +\n userProps.data.billingPlan[0] +\n userProps.data.billingPlan.slice(1).toLowerCase()\n ) : (\n \n )}\n \n \n {summaryLoaded ? (\n currency + formatPrice(subscriptionPrice.toFixed(2))\n ) : (\n \n )}\n \n \n \n \n {summaryLoaded ? (\n t`VAT` + ` (${userProps.data.vatRate}%)`\n ) : (\n \n )}\n \n \n {summaryLoaded ? (\n currency + formatPrice(vat.toFixed(2))\n ) : (\n \n )}\n \n \n \n \n {summaryLoaded ? t`Total` : }\n \n \n {summaryLoaded ? (\n currency + formatPrice(total.toFixed(2))\n ) : (\n \n )}\n \n \n
\n \n \n )}\n \n