\n
\n \n {emptyText || I18n.t('shared.no_result')}\n
\n \n );\n};\n\nEmptyTableContent.defaultProps = {\n iconSize: 'medium',\n iconName: 'add',\n iconColor: 'tertiary',\n emptyText: null,\n fullHeight: false,\n showIconBackGround: true,\n};\n\nEmptyTableContent.propTypes = {\n iconSize: PropTypes.string,\n iconName: PropTypes.string,\n iconColor: PropTypes.string,\n emptyText: PropTypes.string,\n fullHeight: PropTypes.bool,\n showIconBackGround: PropTypes.bool,\n};\nexport default EmptyTableContent;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport { I18nText, EmphasisTag } from '@wtag/react-comp-lib';\nimport Button from '@wtag/rcl-button';\n\nimport ChannelCreateModal from './ChannelCreateModal';\nimport ChannelEditModal from './ChannelEditModal';\nimport ChannelDeleteModal from './ChannelDeleteModal';\nimport EmptyTableContent from '../../../shared/components/EmptyTableContent';\n\nconst ChannelTable = ({\n workspaceCredentials,\n workspaceOptions,\n supplierOptions,\n affiliateId,\n fetchCredentials,\n isLoading,\n actionDisabled,\n}) => {\n const [isSupplierSelected, setIsSupplierSelected] = useState(false);\n const [supplierSpecific, setSupplierSpecific] = useState(null);\n const [supplierParams, setSupplierParams] = useState([]);\n const [identifier, setIdentifier] = useState(null);\n const [forFlight, setForFlight] = useState(null);\n const [forHotel, setForHotel] = useState(null);\n const [forCar, setForCar] = useState(null);\n const [enabled, setEnabled] = useState(false);\n const [canEnableOrDisable, setCanEnableOrDisable] = useState(false);\n const [isFetching, setIsFetching] = useState(false);\n const [modalOpen, setModalOpen] = useState(false);\n\n const setSupplierSpecificAttributesOnFetch = data => {\n setIsSupplierSelected(data.isSupplierSelected);\n setSupplierSpecific(data.supplierSpecific);\n setSupplierParams(data.allowedFields);\n setIdentifier(data.supplierSpecific.accountIdentifier);\n setForFlight(data.supplierSpecific.forFlight);\n setForHotel(data.supplierSpecific.forHotel);\n setForCar(data.supplierSpecific.forCar);\n setEnabled(data.enabled);\n setCanEnableOrDisable(data.canEnableOrDisable);\n setIsFetching(false);\n };\n\n const setIdentifierOnChange = value => {\n setIdentifier(value);\n };\n\n const setForFlightOnChange = value => {\n setForFlight(value);\n };\n\n const setForHotelOnChange = value => {\n setForHotel(value);\n };\n\n const setForCarOnChange = value => {\n setForCar(value);\n };\n\n const setSupplierParamsOnChange = value => {\n setSupplierParams(value);\n };\n\n const setIsFetchingOnChange = value => {\n setIsFetching(value);\n };\n\n const clearStateOnModalClose = () => {\n setIsSupplierSelected(false);\n setSupplierSpecific(null);\n setSupplierParams([]);\n setIdentifier(null);\n setForFlight(null);\n setForHotel(null);\n setForCar(null);\n setIsFetching(false);\n setEnabled(false);\n setCanEnableOrDisable(false);\n };\n\n return (\n <>\n <>\n {workspaceCredentials?.length > 0 && (\n \n
\n )}\n \n
\n \n
\n \n {workspaceCredentials?.map(workspaceCredential => (\n
\n ))}\n \n \n \n
\n \n {workspaceCredential.workspaceIdentifier}\n
\n \n \n
\n ))\n ) : (\n \n
\n {isLoading ? (\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n {I18n.t(credential.supplier, {\n scope: 'components.channel.names',\n })}\n {credential.ndc && (\n \n
\n \n
\n \n {credential.accountIdentifier}\n
\n \n
\n \n {credential.enabled ? (\n
\n \n
\n \n
\n \n
\n \n setIsVisible(false)}\n content={
\n );\n};\n\nShowMore.defaultProps = {\n closePopover: false,\n};\n\nShowMore.propTypes = {\n options: PropTypes.arrayOf(\n PropTypes.shape({\n link: PropTypes.string,\n label: PropTypes.node,\n key: PropTypes.string,\n item: PropTypes.node,\n }),\n ).isRequired,\n closePopover: PropTypes.bool,\n};\n\nexport default ShowMore;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\n\nimport TransactionPDF from './TransactionPDF';\nimport ShowMore from '../ShowMore';\n\nconst TransactionsTableRowShowMore = ({ transaction }) => {\n const options = [\n {\n link: transaction.showDetailsUrl,\n label: - {list}
\n
\n );\n }\n\n const transactionTypes = {\n WireTransferPayment: 'wireTransfer',\n StripePayment: 'creditCard',\n WelltravelBookingTransaction: 'walletBalance',\n SubscriptionCharge: 'walletBalance',\n };\n\n const transactionTooltip = {\n WireTransferPayment: 'wire_transfer',\n StripePayment: 'stripe_payment',\n WelltravelBookingTransaction: 'wallet',\n SubscriptionCharge: 'wallet',\n };\n\n const transactionTable = () =>\n transactions.map(({ transaction, balance }) => {\n const { id, reference, lineItemTitle, amount } = transaction;\n const orderDetailsShowUrl = reference.workspace?.orderDetailsShowUrl;\n const transactionAmountCondition = amount >= 0;\n\n return (\n \n 
\n
\n \n
\n \n
\n \n );\n });\n\n return (\n \n \n \n {`${transactionAmountCondition ? '+' : '-'} `}\n
\n\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {showAll ? transactionTable() : transactionTable().slice(0, 5)}\n \n );\n};\n\nTransactionTable.defaultProps = {\n isOverview: false,\n showAll: true,\n};\n\nTransactionTable.propTypes = {\n transactions: PropTypes.arrayOf(\n PropTypes.shape({\n transaction: PropTypes.shape({\n id: PropTypes.number.isRequired,\n title: PropTypes.string.isRequired,\n amount: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n lineItemTitle: PropTypes.string.isRequired,\n showDetailsUrl: PropTypes.string.isRequired,\n reference: PropTypes.shape({\n workspace: PropTypes.shape({\n orderDetailsShowUrl: PropTypes.string,\n }),\n }).isRequired,\n }),\n balance: PropTypes.shape({\n before: PropTypes.string.isRequired,\n after: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }),\n }),\n ).isRequired,\n isOverview: PropTypes.bool,\n showAll: PropTypes.bool,\n};\n\nexport default TransactionTable;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport DatePicker from '@wtag/rcl-date-picker';\nimport { Amount, I18nText } from '@wtag/react-comp-lib';\nimport Modal from '@wtag/rcl-modal';\nimport { v4 as uuidv4 } from 'uuid';\nimport routes from '../../../shared/routes';\nimport httpClient from '../../../shared/libraries/httpClient';\n\nconst dateFormat = 'YYYY-MM-DD';\n\nconst RecordWireTransferModal = ({ invoice, isModalVisible, onModalClose }) => {\n const currentDate = moment().format(dateFormat);\n const [receivedAt, setReceivedAt] = useState(currentDate);\n const [transactionIdentifier, setTransactionIdentifier] = useState('');\n const [errors, setErrors] = useState({});\n const [focused, setFocused] = useState(false);\n\n const recordWireTransfer = async () => {\n try {\n await httpClient.post(\n routes.billing.wireTransferPayments.create({\n affiliate_id: invoice.affiliateId,\n }),\n {\n wire_transfer_payment: {\n invoice_id: invoice.id,\n received_at: receivedAt,\n transaction_identifier: transactionIdentifier,\n },\n },\n );\n\n window.location.reload();\n } catch (error) {\n const response = error.response;\n if (response && response.status === 422) {\n setErrors(response.data.error);\n } else {\n throw error;\n }\n }\n };\n\n const onDateChangeHandler = date => {\n if (date) setReceivedAt(moment(date, 'YYYY-MM-DD').format('YYYY-MM-DD'));\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n \n
\n \n \n onDateChangeHandler(date)}\n onFocusChange={setFocused}\n appendToBody={true}\n />\n setTransactionIdentifier(value)}\n touched={\n transactionIdentifier !== '' || !!errors.transactionIdentifier\n }\n error={errors.transactionIdentifier}\n />\n
\n \n
\n \n
\n {invoice.title}\n \n
\n );\n });\n\n return (\n \n
\n \n
\n \n
\n \n {invoice.lineItemTitle}\n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n};\n\nInvoicesTable.defaultProps = {\n canRecordWireTransfer: false,\n showAll: true,\n};\n\nInvoicesTable.propTypes = {\n canRecordWireTransfer: PropTypes.bool,\n invoices: PropTypes.arrayOf(\n PropTypes.shape({\n invoice: PropTypes.shape({\n id: PropTypes.number.isRequired,\n title: PropTypes.string.isRequired,\n amount: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n showDetailsUrl: PropTypes.string.isRequired,\n }).isRequired,\n balance: PropTypes.shape({\n after: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }).isRequired,\n }),\n ).isRequired,\n showAll: PropTypes.bool,\n};\n\nexport default InvoicesTable;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport { I18nText, PillTabs } from '@wtag/react-comp-lib';\nimport { StringParam, withDefault, useQueryParams } from 'use-query-params';\nimport withQueryParamsProvider from '../../../shared/components/withQueryParamsProvider';\nimport routes from '../../../shared/routes';\nimport httpClient from '../../../shared/libraries/httpClient';\nimport EmptyTableContent from '../../../shared/components/EmptyTableContent';\n\nimport TransactionTable from './TransactionTable';\nimport InvoicesTable from './InvoicesTable';\n\nconst TAB_MAPPER = {\n transactions: 0,\n invoices: 1,\n};\n\nconst TransactionListOverview = ({ affiliateId, canRecordWireTransfer, fromAffiliate360 }) => {\n const [transactions, setTransactions] = useState([]);\n const [invoices, setInvoices] = useState([]);\n const [isLoadingTransactions, setIsLoadingTransactions] = useState(true);\n const [isLoadingInvoices, setIsLoadingInvoices] = useState(true);\n const [selectedTabKey, setSelectedTabKey] = useState(TAB_MAPPER.transactions);\n\n const [query, setQuery] = useQueryParams({\n tab: withDefault(StringParam, ''),\n });\n\n const { tab } = query;\n\n const fetchTransactions = async () => {\n const { data } = await httpClient.get(\n routes.billing.transactions.list({ affiliate_id: affiliateId }),\n );\n setTransactions(data.transactions?.slice(0, 5));\n setIsLoadingTransactions(false);\n };\n\n const fetchOpenInvoices = async () => {\n const { data } = await httpClient.get(\n routes.billing.invoices.list({\n state: 'open',\n affiliate_id: affiliateId,\n }),\n );\n setInvoices(data.invoices.slice(0, 5));\n setIsLoadingInvoices(false);\n };\n\n useEffect(() => {\n fetchTransactions();\n }, []);\n\n useEffect(() => {\n if (selectedTabKey === 0) {\n setIsLoadingTransactions(true);\n fetchTransactions();\n } else {\n setIsLoadingInvoices(true);\n fetchOpenInvoices();\n }\n }, [selectedTabKey]);\n\n useEffect(() => {\n if (fromAffiliate360) {\n setQuery({ tab: 'payments' }, 'replaceIn');\n }\n }, [tab]);\n\n const pendingInvoicesContent = (\n \n
\n {showAll ? invoiceTable() : invoiceTable().slice(0, 5)}\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {isLoadingInvoices ? (\n
\n );\n\n const transactionContent = (\n \n {isLoadingTransactions ? (\n
\n );\n\n const setSelectedTabKeyOnClick = tabindex => {\n setSelectedTabKey(tabindex);\n };\n\n const tabs = [\n {\n key: 0,\n title: \n
\n \n );\n};\n\nTransactionListOverview.defaultProps = {\n canRecordWireTransfer: false,\n fromAffiliate360: false,\n};\n\nTransactionListOverview.propTypes = {\n affiliateId: PropTypes.number.isRequired,\n canRecordWireTransfer: PropTypes.bool,\n fromAffiliate360: PropTypes.bool,\n};\n\nexport default withQueryParamsProvider(TransactionListOverview);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport SanitizedHTML from '../../../../../shared/components/SanitizedHTML';\nimport DateTime from '../../../DateTime';\n\nconst AffiliateLog = ({ affiliateLog }) => (\n \n
\n);\n\nAffiliateLog.propTypes = {\n affiliateLog: PropTypes.shape({\n incidentAt: PropTypes.string.isRequired,\n loggerName: PropTypes.string.isRequired,\n summary: PropTypes.string.isRequired,\n body: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default AffiliateLog;\n","/* eslint-disable jsx-a11y/control-has-associated-label */\nimport React, { useRef, useMemo } from 'react';\nimport ReactQuill from 'react-quill';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport { v4 as uuidv4 } from 'uuid';\nimport httpClient from '../../../shared/libraries/httpClient';\n\nconst CustomToolbar = ({ error, toolbarId }) => (\n \n
\n \n \n
\n \n {I18n.t('components.affiliate_three_sixty.affiliate.log.by', {\n logger_name: affiliateLog.loggerName,\n })}\n
\n \n {I18n.t('components.affiliate_three_sixty.affiliate.log.summary', {\n summary: affiliateLog.summary,\n })}\n
\n \n
\n \n \n \n \n \n \n \n \n {error && (\n \n \n
\n);\n\nCustomToolbar.propTypes = {\n error: PropTypes.string,\n toolbarId: PropTypes.string.isRequired,\n};\n\nCustomToolbar.defaultProps = {\n error: null,\n};\n\nconst isTextFile = fileName =>\n ['pdf'].indexOf(\n fileName\n .split('.')\n .pop()\n .toLowerCase(),\n ) > -1;\n\nconst TextEditor = props => {\n const reactQuillRef = useRef();\n\n const handleOnChange = (html, _delta, source) => {\n if (source === 'user') {\n props.onChange(html);\n }\n };\n\n const insertAttachment = () => {\n const quillRef = reactQuillRef.current.getEditor();\n const range = quillRef.getSelection();\n\n const input = document.createElement('input');\n input.setAttribute('type', 'file');\n input.setAttribute('accept', 'image/*, application/pdf');\n input.click();\n\n input.onchange = async () => {\n const file = input.files[0];\n\n const formData = new FormData();\n formData.append('document', file);\n formData.append('document_name', file.name);\n\n const { data } = await httpClient.post('/attachments', formData);\n props.onAttachmentUpload(data.id);\n\n if (isTextFile(data.fileName)) {\n quillRef.insertText(\n range.index,\n data.fileName,\n 'link',\n data.url,\n 'user',\n );\n // Move cursor to right side of file name (easier to continue typing)\n quillRef.setSelection(range.index + data.fileNameLength);\n } else {\n quillRef.insertEmbed(range.index, 'image', data.url, 'user');\n // Move cursor to right side of image (easier to continue typing)\n quillRef.setSelection(range.index + 1);\n }\n };\n };\n\n const toolbarId = useMemo(() => `toolbar-${uuidv4()}`, []);\n\n const toolbarOptions = useMemo(\n () => ({\n toolbar: {\n container: `#${toolbarId}`,\n handlers: {\n insertAttachment,\n },\n },\n }),\n [],\n );\n\n return (\n \n
\n );\n};\n\nTextEditor.defaultProps = {\n onAttachmentUpload: () => {},\n};\n\nTextEditor.propTypes = {\n value: PropTypes.string,\n placeholder: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n onAttachmentUpload: PropTypes.func,\n error: PropTypes.string,\n};\n\nTextEditor.defaultProps = {\n value: '',\n placeholder: '',\n error: null,\n};\n\nexport default TextEditor;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport Icon from '@wtag/rcl-icon';\nimport Input from '@wtag/rcl-input';\nimport DatePicker from '@wtag/rcl-date-picker';\nimport moment from 'moment';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Modal from '@wtag/rcl-modal';\nimport ClassNames from 'classnames';\nimport routes from '../../../../../shared/routes';\nimport httpClient from '../../../../../shared/libraries/httpClient';\nimport TextEditor from '../../../TextEditor';\n\nconst AffiliateLogCreateModal = ({ affiliateId, fetchAffiliateLogs }) => {\n const [body, setBody] = useState(null);\n const [incidentAt, setIncidentAt] = useState(null);\n const [summary, setSummary] = useState('');\n const [modalOpen, setModalOpen] = useState(false);\n const [focused, setFocused] = useState(false);\n const [errors, setErrors] = useState({});\n\n const onModalClose = () => {\n setModalOpen(false);\n };\n\n const onModalOpen = () => {\n setModalOpen(true);\n };\n\n const createAffiliateLog = async () => {\n const params = {\n affiliate_log: {\n incident_at: incidentAt,\n summary,\n body,\n },\n };\n const { data } = await httpClient.post(\n routes.affiliates.logs.create({ affiliate_id: affiliateId }),\n params,\n );\n if (data.error === null) {\n fetchAffiliateLogs().then(setModalOpen(false));\n }\n };\n\n const handleCreateAffiliateLog = () => {\n createAffiliateLog().catch(({ response }) => {\n if (response.status === 422) {\n setErrors(response.data.error);\n }\n });\n };\n\n const onDateChangeHandler = date => {\n if (date) setIncidentAt(moment(date, 'YYYY-MM-DD').format('YYYY-MM-DD'));\n };\n\n return (\n \n \n
\n\n \n \n \n \n
\n \n
\n\n \n \n \n
\n \n \n onDateChangeHandler(date)}\n date={incidentAt}\n error={errors.incidentAt}\n required={true}\n />\n
\n\n \n setSummary(value)}\n placeholder={I18n.t(\n 'components.affiliate_three_sixty.affiliate.log.create.placeholder.summary',\n )}\n value={summary}\n isClearable={true}\n touched={!!errors.summary}\n error={errors.summary}\n required={true}\n />\n
\n\n \n
\n \n
\n \n );\n};\n\nAffiliateLogList.propTypes = {\n affiliateId: PropTypes.number.isRequired,\n};\n\nexport default AffiliateLogList;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { StringParam, withDefault, useQueryParams } from 'use-query-params';\nimport withQueryParamsProvider from '../../../../../shared/components/withQueryParamsProvider';\nimport AffiliateLogList from '../AffiliateLogList';\n\nconst LogTab = props => {\n const [query, setQuery] = useQueryParams({\n tab: withDefault(StringParam, ''),\n });\n\n const { tab } = query;\n\n useEffect(() => {\n setQuery({ tab: 'logs' }, 'replaceIn');\n }, [tab]);\n\n return \n
\n \n
\n \n
\n \n {isLoading ? (\n \n
\n \n {affiliateLogs.map((affiliateLog, index) => (\n \n
\n ))}\n \n \n
\n \n {I18n.t(\n 'components.affiliate_three_sixty.affiliate.log.summary',\n {\n summary: affiliateLog.summary,\n },\n )}\n
\n \n
\n \n {affiliateLog &&
\n \n )}\n \n )}\n {!isLoading && !affiliateLogs.length && \n {\n let newPermissions = [];\n if (checked) {\n newPermissions = [...selectedPermissions, permission];\n } else {\n newPermissions = selectedPermissions.filter(\n item => item !== permission,\n );\n }\n onChange(newPermissions);\n setPermissionTemplate(null);\n }}\n checked={selectedPermissions.indexOf(permission) >= 0}\n value={scope}\n />\n
\n );\n };\n\n return (\n \n
\n );\n };\n\n return (\n <>\n {I18n.t(`apps.${app}`)}
\n {permissionOptions[app].map(renderCheckbox)}\n \n \n \n
\n \n
\n \n
\n \n );\n};\n\nPermissionsSelection.defaultProps = {\n selectedPermissions: [],\n};\n\nPermissionsSelection.propTypes = {\n onChange: PropTypes.func.isRequired,\n permissionOptions: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string))\n .isRequired,\n permissionTemplateOptions: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.string.isRequired,\n permissions: PropTypes.arrayOf(PropTypes.string).isRequired,\n }),\n ).isRequired,\n selectedPermissions: PropTypes.arrayOf(PropTypes.string),\n};\nexport default PermissionsSelection;\n","import React, { useState } from 'react';\nimport Input from '@wtag/rcl-input';\nimport Button from '@wtag/rcl-button';\nimport SelectBox from '@wtag/rcl-select-box';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport Modal from '@wtag/rcl-modal';\nimport PropTypes from 'prop-types';\nimport { debounce } from 'throttle-debounce';\n\nimport PermissionsSelection from './PermissionsSelection';\n\nimport httpClient from '../../../shared/libraries/httpClient';\nimport routes from '../../../shared/routes';\n\nconst EditTable = props => {\n const {\n userInitialAttributes,\n previousSelectedTeam,\n affiliateId,\n permissionOptions,\n permissionTemplateOptions,\n submitURL,\n currentUserId,\n signedInAsSuperAdmin,\n isVisible,\n onModalClose,\n fetchUsers\n } = props;\n\n const [firstName, setFirstName] = useState(userInitialAttributes.firstName);\n const [lastName, setLastName] = useState(userInitialAttributes.lastName);\n const [email, setEmail] = useState(userInitialAttributes.email);\n const [password, setPassword] = useState(null);\n const [teams, setTeams] = useState([]);\n const [selectedTeam, setSelectedTeam] = useState(previousSelectedTeam);\n const [permissions, setPermissions] = useState(\n userInitialAttributes.permissions,\n );\n const [error, setError] = useState({});\n\n const fetchTeams = debounce(500, false, async inputValue => {\n if (inputValue.length > 1) {\n const { data } = await httpClient.get(\n routes.teams.list({ q: inputValue, affiliate_id: affiliateId }),\n );\n\n const teamOptions = data.teams.map(team => ({\n label: team.name,\n value: team.id,\n }));\n setTeams(teamOptions);\n }\n });\n\n const onTeamChange = selectedOption => {\n setSelectedTeam(selectedOption);\n };\n\n const isEditingSelf = currentUserId === userInitialAttributes.id;\n const isEditingSuperAdmin =\n !isEditingSelf && userInitialAttributes.superAdmin;\n\n const updateUser = async () => {\n const updateUserParams = {\n first_name: firstName,\n last_name: lastName,\n password,\n email,\n affiliate_id: affiliateId,\n team_ids: teams,\n };\n\n if (!isEditingSelf) {\n updateUserParams.permissions = permissions;\n }\n\n const { data } = await httpClient.put(\n submitURL({ id: userInitialAttributes.id }),\n {\n user: updateUserParams,\n },\n );\n\n if (data.error === null) {\n onModalClose();\n fetchUsers();\n }\n };\n\n const onUpdateUser = () =>\n updateUser().catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n\n return (\n \n
\n \n {renderPermissionCheckboxes('affiliates')}\n
\n \n {renderPermissionCheckboxes('agent')}\n
\n \n \n \n \n
\n \n \n
\n \n setFirstName(value)}\n placeholder={I18n.t('components.user.form.first_name')}\n error={error.firstName}\n />\n
\n \n setLastName(value)}\n placeholder={I18n.t('components.user.form.last_name')}\n error={error.lastName}\n />\n
\n \n setEmail(value)}\n placeholder={I18n.t('components.user.form.email')}\n error={error.email}\n />\n
\n {(signedInAsSuperAdmin ||\n userInitialAttributes.id === currentUserId) && (\n \n setPassword(value)}\n placeholder={I18n.t(\n 'components.user.form.password_placeholder',\n )}\n required={false}\n />\n
\n )}\n \n
\n {!isEditingSelf && (\n \n
\n )}\n \n
\n \n
\n \n
\n \n
\n {user.email}
\n \n {user.mobileNumber || (\n
\n \n {user.teams.length > 0 ? (\n <>\n {user.teams[0].name}\n {user.teams.length > 1 && (\n setIsPopoverVisible(false)}\n content={\n
\n \n {user.teams.length > 1 &&\n user.teams.slice(1).map((team) => (\n \n {team.name}\n \n ))}\n
\n }\n >\n \n {user.teams.length > 1 && `+${user.teams.length - 1}`}\n
\n \n )}\n \n ) : (\n \n \n
\n )}\n {status !== DEACTIVATED_STATE && (\n \n onResendInvitation(user)}\n onKeyDown={() => onResendInvitation(user)}\n tabIndex={0}\n >\n processVerification(user, true)}\n onKeyDown={() => processVerification(user, true)}\n tabIndex={0}\n >\n processVerification(user)}\n onKeyDown={() => processVerification(user)}\n tabIndex={0}\n >\n setModalOpen(true)}\n >\n onUserDeleteClick(user)}\n onKeyDown={() => onUserDeleteClick(user)}\n tabIndex={0}\n >\n {status === PENDING_STATE ? (\n
\n )}\n \n {selectedUser.email}\n
\n {!resendInvite && (\n \n {selectedUser.email}\n
\n {!resendInvite && (\n \n {\n setModalOpen(true);\n }}\n />\n setModalOpen(false)}\n >\n <>\n
\n \n {title} \n setModalOpen(false)}\n onKeyDown={() => setModalOpen(false)}\n role=\"presentation\"\n >\n
\n \n
\n \n \n \n
\n \n setFirstName(value)}\n placeholder={I18n.t('components.user.form.first_name')}\n value={firstName}\n error={error.firstName}\n touched={true}\n />\n
\n \n setLastName(value)}\n placeholder={I18n.t('components.user.form.last_name')}\n value={lastName}\n error={error.lastName}\n touched={true}\n />\n
\n \n setEmail(value)}\n placeholder={I18n.t('components.user.form.email')}\n value={email}\n error={error.email}\n touched={true}\n />\n
\n {showPasswordFields && (\n \n setPassword(value)}\n placeholder={I18n.t('components.user.form.password')}\n value={password}\n error={error.password}\n type=\"password\"\n touched={true}\n />\n
\n )}\n {showPasswordFields && (\n \n setConfirmPassword(value)}\n placeholder={I18n.t(\n 'components.user.form.confirm_password',\n )}\n value={confirmPassword}\n error={\n passwordNotMatching && (\n
\n )}\n {showAffiliateSelection && (\n \n
\n )}\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n};\n\nUserList.defaultProps = {\n permissionTemplateOptions: [],\n};\n\nUserList.propTypes = {\n id: PropTypes.number.isRequired,\n status: PropTypes.string.isRequired,\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n userAffiliateId: PropTypes.number.isRequired,\n urls: PropTypes.shape({\n users: PropTypes.string.isRequired,\n invites: PropTypes.string.isRequired,\n teams: PropTypes.string.isRequired,\n }).isRequired,\n permissionOptions: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string))\n .isRequired,\n permissionTemplateOptions: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.string.isRequired,\n permissions: PropTypes.arrayOf(PropTypes.string).isRequired,\n }),\n ),\n currentUserId: PropTypes.number.isRequired,\n};\n\nexport default withQueryParamsProvider(UserList);\n","import React, { useEffect } from 'react';\nimport { PillTabs, I18nText } from '@wtag/react-comp-lib';\nimport PropTypes from 'prop-types';\nimport { StringParam, withDefault, useQueryParams } from 'use-query-params';\nimport withQueryParamsProvider from '../../../../../../shared/components/withQueryParamsProvider';\nimport List from './UserList';\n\nconst UserTab = ({\n id,\n urls,\n currentUserId,\n signedInAsSuperAdmin,\n permissionTemplateOptions,\n permissionOptions,\n}) => {\n const [query, setQuery] = useQueryParams({\n tab: withDefault(StringParam, ''),\n });\n\n const { tab } = query;\n\n const getItems = () => [\n {\n key: 0,\n title: \n
\n \n \n \n setSortUser('name')}\n />\n \n \n setSortUser('email')}\n />\n \n \n \n \n
\n \n setQuery({ page: value })}\n />\n
\n )}\n \n
\n );\n};\n\nUserTab.defaultProps = {\n permissionTemplateOptions: [],\n};\n\nUserTab.propTypes = {\n id: PropTypes.number.isRequired,\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n urls: PropTypes.shape({\n users: PropTypes.string.isRequired,\n invites: PropTypes.string.isRequired,\n teams: PropTypes.string.isRequired,\n }).isRequired,\n permissionOptions: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string))\n .isRequired,\n permissionTemplateOptions: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.string.isRequired,\n permissions: PropTypes.arrayOf(PropTypes.string).isRequired,\n }),\n ),\n currentUserId: PropTypes.number.isRequired,\n};\n\nexport default withQueryParamsProvider(UserTab);\n","import React, { useEffect, useState } from 'react';\nimport Card from '@wtag/rcl-card';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport { I18nText, Link, EmphasisTag } from '@wtag/react-comp-lib';\nimport PropTypes from 'prop-types';\nimport { StringParam, withDefault, useQueryParams } from 'use-query-params';\nimport withQueryParamsProvider from '../../../../../shared/components/withQueryParamsProvider';\nimport routes from '../../../../../shared/routes';\nimport httpClient from '../../../../../shared/libraries/httpClient';\nimport EmptyTableContent from '../../../../../shared/components/EmptyTableContent';\n\nconst PlanTab = ({ id }) => {\n const [oldSubscriptions, setOldSubscriptions] = useState([]);\n const [currentPlan, setCurrentPlan] = useState(null);\n const [redirectionUrls, setRedirectionUrls] = useState({});\n const [isLoading, setIsLoading] = useState(true);\n const [query, setQuery] = useQueryParams({\n tab: withDefault(StringParam, ''),\n });\n\n const { tab } = query;\n\n const fetchOldSubscriptions = async () => {\n const { data } = await httpClient.get(\n routes.subscriptions.old.list({\n affiliate_id: id,\n }),\n );\n setOldSubscriptions(data.oldSubscriptions);\n setCurrentPlan(data.currentPlan);\n setRedirectionUrls(data.urls);\n setIsLoading(false);\n };\n\n useEffect(() => {\n fetchOldSubscriptions();\n }, []);\n\n useEffect(() => {\n setQuery({ tab: 'plans' }, 'replaceIn');\n }, [tab]);\n\n return (\n \n
\n \n \n
\n \n
\n \n
\n {isLoading ? (\n \n \n {I18n.t(currentPlan.name, {\n scope: 'components.plans',\n })}\n {' '}\n
\n \n {I18n.t(\n 'components.affiliate_three_sixty.affiliate.tabs.plans.upgraded_on',\n {\n date: currentPlan.startedAt,\n },\n )}\n
\n \n )\n )}\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {isLoading ? (\n \n
\n ))}\n \n )}\n {!isLoading && !oldSubscriptions.length && \n \n {I18n.t(oldSubscription.name, {\n scope: 'components.plans',\n })}\n {' '}\n
\n \n
\n \n {oldSubscription.startedAt}\n
\n \n
\n \n {oldSubscription.endedAt}\n
\n \n
\n \n
\n \n \n {value}\n
\n {unit}
\n {info}
\n \n \n
\n);\n\nInfoCard.propTypes = {\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n info: PropTypes.node.isRequired,\n};\n\nexport default InfoCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport TimeAgo from 'timeago-react';\nimport { register } from 'timeago.js';\nimport moment from 'moment';\nimport { DateTime } from '@wtag/react-comp-lib';\n\n// number: the timeago / timein number;\n// index: the index of array below;\n\nconst localeFunc = (_number, index) =>\n [\n [\n I18n.t('components.time_ago.index.just_now'),\n I18n.t('components.time_ago.index.right_now'),\n ],\n [\n I18n.t('components.time_ago.index.few_seconds_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_seconds', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_minute_ago'),\n I18n.t('components.time_ago.index.in_one_minute'),\n ],\n [\n I18n.t('components.time_ago.index.few_minutes_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_minutes', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_hour_ago'),\n I18n.t('components.time_ago.index.in_one_hour'),\n ],\n [\n I18n.t('components.time_ago.index.few_hours_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_hours', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_day_ago'),\n I18n.t('components.time_ago.index.in_one_day'),\n ],\n [\n I18n.t('components.time_ago.index.few_days_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_days', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_week_ago'),\n I18n.t('components.time_ago.index.in_one_week'),\n ],\n [\n I18n.t('components.time_ago.index.few_weeks_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_weeks', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_month_ago'),\n I18n.t('components.time_ago.index.in_one_month'),\n ],\n [\n I18n.t('components.time_ago.index.few_months_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_months', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_year_ago'),\n I18n.t('components.time_ago.index.in_one_year'),\n ],\n [\n I18n.t('components.time_ago.index.few_years_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_years', { time: _number }),\n ],\n ][index];\n\nregister(I18n.locale, localeFunc);\n\nconst WrappedTimeAgo = props => {\n const { datetime, withRclDateComponent, withShortFormat } = props;\n\n const mapLanguageCode = () => {\n const currentLocale = I18n.locale;\n return currentLocale.slice(0, 2);\n };\n\n const useFormattedDateTime = () => {\n const passedDate = moment(datetime);\n const currentDate = moment();\n const differenceBetweenDates = currentDate.diff(passedDate, 'days');\n let formattedDateTime;\n\n if (differenceBetweenDates <= 1) {\n const isSimilarDay =\n moment(datetime).format('L') === moment().format('L');\n\n if (isSimilarDay && withShortFormat) {\n formattedDateTime = {moment(datetime).format('LT')};\n } else if (!isSimilarDay && withShortFormat) {\n formattedDateTime = {moment(datetime).format('ddd, LT')};\n } else {\n formattedDateTime = (\n \n {value}\n
\n {info}
\n \n
\n \n
\n \n ) : (\n <>\n \n {noBriefingAvailableFromProps && noBriefingAvailableFromState ? (\n
\n \n )}\n \n
\n ) : (\n <>\n \n
\n \n
\n \n
\n \n {props.name}\n
\n \n
\n \n
\n {isLoading ? (\n \n
\n\n \n
\n \n {isLoading ? (\n
\n \n
\n \n
\n\n \n \n {cardData.map(({ key, value, info }) => (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {title} \n \n
\n \n\n \n \n \n \n \n
\n {subheaderText}
\n \n \n onInputChangeHandler(value, setWorkspaceName, 'name')\n }\n placeholder={I18n.t('components.workspace.placeholder.name')}\n error={error.name}\n touched={!!error.name}\n value={workspaceName}\n />\n
\n \n \n onInputChangeHandler(\n value,\n setWorkspaceIdentifier,\n 'identifier',\n )\n }\n placeholder={I18n.t(\n 'components.workspace.placeholder.identifier',\n )}\n error={error.identifier}\n touched={!!error.identifier}\n value={workspaceIdentifier}\n disabled={disableIdentifierField}\n />\n
\n \n
\n {workspace.name}
\n {workspace.identifier}
\n \n {workspace.agentUrl}\n \n \n \n
\n \n
\n ) : (\n \n {\n setModalOpen(true);\n setSelectedWorkspace(workspace);\n }}\n onKeyDown={() => setSelectedWorkspace(workspace)}\n >\n onDeactivateWorkspaceClick(workspace)}\n onKeyDown={() => onDeactivateWorkspaceClick(workspace)}\n tabIndex={0}\n >\n
\n )}\n \n setModalOpen(false)}\n isVisible={modalOpen}\n title={\n
\n );\n};\n\nWorkspaceList.propTypes = {\n id: PropTypes.number.isRequired,\n status: PropTypes.string.isRequired,\n userAffiliateId: PropTypes.number.isRequired,\n};\n\nexport default withQueryParamsProvider(WorkspaceList);\n","import React, { useEffect } from 'react';\nimport { PillTabs, I18nText } from '@wtag/react-comp-lib';\nimport PropTypes from 'prop-types';\nimport { StringParam, withDefault, useQueryParams } from 'use-query-params';\nimport withQueryParamsProvider from '../../../../../../shared/components/withQueryParamsProvider';\nimport List from './WorkspaceList';\n\nconst WorkspaceTab = ({ id, userAffiliateId }) => {\n const [query, setQuery] = useQueryParams({\n tab: withDefault(StringParam, ''),\n });\n\n const { tab } = query;\n\n const getItems = () => [\n {\n key: 0,\n title: \n
\n \n \n \n setSortWorkspace('name')}\n />\n \n \n setSortWorkspace('identifier')}\n />\n \n \n {isStateActive && (\n \n
\n \n setQuery({ page: value })}\n />\n
\n )}\n \n
\n );\n};\n\nWorkspaceTab.propTypes = {\n id: PropTypes.number.isRequired,\n userAffiliateId: PropTypes.number.isRequired,\n};\n\nexport default withQueryParamsProvider(WorkspaceTab);\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { StringParam, withDefault, useQueryParams } from 'use-query-params';\nimport { RTabs } from '@wtag/rcl-rtabs';\nimport { I18nText } from '@wtag/react-comp-lib';\n\nimport withQueryParamsProvider from '../../../../../shared/components/withQueryParamsProvider';\nimport Channels from '../../../Channel';\nimport TransactionListOverview from '../../../Billing/TransactionListOverview';\n\nimport LogTab from './LogTab';\nimport UserTab from './UserTab';\nimport PlanTab from './PlanTab';\nimport OverviewTab from './OverviewTab';\nimport WorkspaceTab from './WorkspaceTab';\n\nconst AffiliateTabs = props => {\n const tabRef = useRef(null);\n const [selectedTabKey, setSelectedTabKey] = useState(0);\n const [query] = useQueryParams({\n tab: withDefault(StringParam, ''),\n });\n\n const { tab } = query;\n\n const TAB_MAPPER = {\n overview: 0,\n users: 1,\n workspaces: 2,\n plans: 3,\n payments: 4,\n channels: 5,\n logs: 6,\n };\n\n const setSelectedTabKeyOnClick = tabIndex => {\n setSelectedTabKey(tabIndex);\n };\n\n const browseToAssociatedTab = newTab => {\n const currentTab = TAB_MAPPER[newTab] || TAB_MAPPER.overview;\n tabRef.current.onChangeTab(currentTab);\n };\n\n const items = [\n {\n title: (\n \n
\n ),\n },\n {\n title: (\n Support Tickets Coming Soon
,\n // },\n ];\n const getItems = () => {\n return items.map(({ title, content }, index) => ({\n key: index,\n title,\n content: {content}
,\n }));\n };\n\n useEffect(() => {\n browseToAssociatedTab(tab);\n }, []);\n\n return (\n \n
\n );\n};\n\nAffiliateTabs.defaultProps = {\n permissionTemplateOptions: [],\n};\n\nAffiliateTabs.propTypes = {\n id: PropTypes.number.isRequired,\n fetchAffiliate: PropTypes.func.isRequired,\n affiliate: PropTypes.shape({\n bookingsTotal: PropTypes.number,\n travelersTotal: PropTypes.number,\n currentWorkspacesSize: PropTypes.number,\n chargeableChannelCount: PropTypes.number,\n ndcChannelCount: PropTypes.number,\n clientName: PropTypes.string,\n briefing: PropTypes.string,\n briefingUpdatedAt: PropTypes.string,\n }).isRequired,\n updateAffiliate: PropTypes.func.isRequired,\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n userAffiliateId: PropTypes.number.isRequired,\n urls: PropTypes.shape({\n users: PropTypes.string.isRequired,\n invites: PropTypes.string.isRequired,\n teams: PropTypes.string.isRequired,\n }).isRequired,\n permissionOptions: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string))\n .isRequired,\n permissionTemplateOptions: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.string.isRequired,\n permissions: PropTypes.arrayOf(PropTypes.string).isRequired,\n }),\n ),\n currentUserId: PropTypes.number.isRequired,\n displayInvites: PropTypes.bool.isRequired,\n};\n\nexport default withQueryParamsProvider(AffiliateTabs);\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport SelectBox from '@wtag/rcl-select-box';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Modal from '@wtag/rcl-modal';\nimport { I18nText, Avatar } from '@wtag/react-comp-lib';\n\nimport selectBoxObjectMapper from '../../../../shared/helper/selectBoxObjectMapper';\n\nconst AffiliateAccountManager = ({\n accountManagerId,\n accountManagerName,\n accountManagerAvatar,\n accountManagerTitle,\n accountManagerOptions,\n hasAccountManager,\n updateAffiliate,\n}) => {\n const [modalOpen, setModalOpen] = useState(false);\n const [selectedAccountManagerId, setSelectedAccountManagerId] = useState(\n accountManagerId,\n );\n\n const onModalClose = () => {\n setModalOpen(false);\n };\n\n const onModalOpen = () => {\n setModalOpen(true);\n };\n\n const onSelectedAccountManagerIdChange = value => {\n const params = {\n affiliate: {\n account_manager_id: value,\n },\n };\n return updateAffiliate(params);\n };\n\n const onSelectedAccountManagerIdAssign = value => {\n onSelectedAccountManagerIdChange(value).then(() => onModalClose());\n };\n\n const onSelectedAccountManagerIdRemove = value => {\n setSelectedAccountManagerId(value);\n onSelectedAccountManagerIdChange(value);\n };\n\n return (\n \n
\n \n );\n};\n\nAffiliateAccountManager.defaultProps = {\n accountManagerId: null,\n accountManagerName: '',\n accountManagerAvatar: '',\n accountManagerTitle: '',\n};\n\nAffiliateAccountManager.propTypes = {\n hasAccountManager: PropTypes.bool.isRequired,\n accountManagerId: PropTypes.number,\n accountManagerName: PropTypes.string,\n accountManagerAvatar: PropTypes.string,\n accountManagerTitle: PropTypes.string,\n accountManagerOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n hintText: PropTypes.string,\n }),\n ).isRequired,\n updateAffiliate: PropTypes.func.isRequired,\n};\n\nexport default AffiliateAccountManager;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport {\n EmphasisTag,\n I18nText,\n BreadcrumbItem,\n Breadcrumbs,\n} from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport Card from '@wtag/rcl-card';\nimport routes from '../../../../shared/routes';\nimport httpClient from '../../../../shared/libraries/httpClient';\nimport planName from '../../../../shared/helper/planName';\nimport SupportTicketOverview from './SupportTicketOverview';\nimport AffiliateTabs from './AffiliateTabs';\nimport AffiliateAccountManager from './AffiliateAccountManager';\n\nconst Affiliate = props => {\n const [affiliate, setAffiliate] = useState(null);\n\n const fetchAffiliate = async id => {\n const { data } = await httpClient.get(\n routes.affiliates.fetch({\n id,\n }),\n );\n setAffiliate(data.affiliate);\n };\n\n const updateAffiliate = async params => {\n const { data } = await httpClient.put(\n routes.affiliates.update({ id: props.id }),\n params,\n );\n\n if (data.error === null) {\n fetchAffiliate(props.id);\n }\n };\n\n useEffect(() => {\n fetchAffiliate(props.id);\n }, []);\n\n const showPlan = () => {\n switch (affiliate.currentPlanName) {\n case planName.FREE_PLAN:\n return (\n \n {hasAccountManager ? (\n \n \n \n
\n \n
\n ) : (\n \n
\n \n
\n \n {accountManagerName}\n
\n \n {accountManagerTitle}\n
\n \n
\n \n
\n )}\n\n \n {hasAccountManager && (\n \n
\n\n \n {hasAccountManager ? (\n
\n\n \n \n {hasAccountManager ? (\n \n \n
\n \n \n \n
\n\n \n
\n \n \n setSelectedAccountManagerId(option ? option.value : null)\n }\n />\n
\n \n
\n \n
\n )\n );\n};\n\nAffiliate.defaultProps = {\n permissionTemplateOptions: [],\n};\n\nAffiliate.propTypes = {\n id: PropTypes.number.isRequired,\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n userAffiliateId: PropTypes.number.isRequired,\n urls: PropTypes.shape({\n affiliates: PropTypes.string.isRequired,\n affiliate: PropTypes.string.isRequired,\n users: PropTypes.string.isRequired,\n invites: PropTypes.string.isRequired,\n teams: PropTypes.string.isRequired,\n }).isRequired,\n permissionOptions: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string))\n .isRequired,\n permissionTemplateOptions: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.string.isRequired,\n permissions: PropTypes.arrayOf(PropTypes.string).isRequired,\n }),\n ),\n currentUserId: PropTypes.number.isRequired,\n displayInvites: PropTypes.bool.isRequired,\n};\n\nexport default Affiliate;\n","import httpClient from '../../../../../../shared/libraries/httpClient';\nimport routes from '../../../../../../shared/routes';\n\nconst deactivateAffiliate = async affiliateId => {\n const { data } = await httpClient.put(\n routes.affiliates.deactivate({\n id: affiliateId,\n }),\n );\n\n return data;\n};\n\nexport default deactivateAffiliate;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Popover from '@wtag/rcl-popover';\nimport IconButton from '@wtag/rcl-icon-button';\nimport { I18nText, Link, Spinner } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport ConfirmationModal from '../../../shared/components/ConfirmationModal';\nimport deactivateAffiliate from '../AffiliateThreeSixty/AffiliateList/helpers/api';\nimport {\n WARNING,\n SUCCESS,\n DANGER,\n} from '../../../shared/constants/commonStates';\nimport SanitizedHTML from '../../../shared/components/SanitizedHTML';\n\nconst ShowMoreAffiliates = ({\n deactivatedAffiliates,\n showDetailsUrl,\n affiliateId,\n affiliateName,\n onConfirmationModalDismiss,\n plan,\n subscriptionPeriod,\n workspaces,\n activeUsers,\n totalChannels,\n}) => {\n const [isDeactivationInProgress, setIsDeactivationInProgress] = useState(\n false,\n );\n const [confirmDeactivation, setConfirmDeactivation] = useState(false);\n const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);\n const [isSuccess, setIsSuccess] = useState(false);\n const [isPopoverVisible, setIsPopoverVisible] = useState(false);\n let timeoutKey = null;\n\n const onCloseConfirmationModal = () => {\n setConfirmationModalOpen(false);\n };\n\n const onOpenConfirmationModal = () => {\n setConfirmationModalOpen(true);\n };\n\n const onClosePopover = () => {\n setIsPopoverVisible(false);\n };\n\n const onTogglePopover = () => {\n setIsPopoverVisible(prev => !prev);\n };\n\n const handleDeactivationClick = () => {\n setConfirmDeactivation(true);\n onClosePopover();\n onOpenConfirmationModal();\n };\n\n const showMoreComponentOptions = () => {\n const options = [\n {\n link: showDetailsUrl,\n label: (\n \n
\n \n {affiliate.clientName || `Affiliate ${props.id}`}\n
\n \n \n \n \n \n {affiliate.clientName || `Affiliate ${props.id}`}\n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n {I18n.t(\n 'components.affiliate_three_sixty.affiliate.overview.membership',\n )}\n
\n \n {I18n.t(\n 'components.affiliate_three_sixty.affiliate.overview.online',\n {\n year: moment(affiliate.createdAt).format('YYYY'),\n },\n )}{' '}\n
\n {showPlan(affiliate.currentPlanName)}
\n \n
\n \n
\n \n fetchAffiliate(props.id)}\n affiliate={affiliate}\n updateAffiliate={updateAffiliate}\n urls={props.urls}\n currentUserId={props.currentUserId}\n signedInAsSuperAdmin={props.signedInAsSuperAdmin}\n permissionTemplateOptions={props.permissionTemplateOptions}\n permissionOptions={props.permissionOptions}\n displayInvites={props.displayInvites}\n userAffiliateId={props.userAffiliateId}\n />\n
\n - {list}
\n
\n );\n }\n\n if (confirmDeactivation) {\n return I18n.t(\n 'components.affiliate_three_sixty.affiliate.deactivate.confirmation_modal.confirmation_text',\n {\n affiliate_name: affiliateName,\n },\n );\n }\n\n if (isSuccess) {\n return I18n.t(\n 'components.affiliate_three_sixty.affiliate.deactivate.confirmation_modal.deactivation_successful_message',\n {\n affiliate_name: affiliateName,\n },\n );\n }\n\n return I18n.t(\n 'components.affiliate_three_sixty.affiliate.deactivate.confirmation_modal.deactivation_failed_message',\n {\n affiliate_name: affiliateName,\n },\n );\n };\n\n const getIconType = () => {\n if (isDeactivationInProgress) {\n return null;\n }\n\n if (confirmDeactivation) {\n return WARNING;\n }\n\n if (isSuccess) {\n return SUCCESS;\n }\n\n return DANGER;\n };\n\n const initiateAffiliateDeactivation = async affiliateId => {\n setIsDeactivationInProgress(true);\n\n try {\n const data = await deactivateAffiliate(affiliateId);\n\n if (data.error === null) {\n setIsSuccess(true);\n }\n } catch (error) {\n setIsSuccess(false);\n } finally {\n setIsDeactivationInProgress(false);\n }\n };\n\n const onConfirmDeactivation = () => {\n setConfirmDeactivation(false);\n initiateAffiliateDeactivation(affiliateId);\n };\n\n const handleConfirmationModalDismiss = () => {\n if (confirmationModalOpen) {\n onCloseConfirmationModal();\n onConfirmationModalDismiss();\n }\n };\n\n useEffect(() => {\n if (!(confirmDeactivation || isDeactivationInProgress)) {\n timeoutKey = setTimeout(handleConfirmationModalDismiss, 3000);\n }\n\n return () => {\n clearTimeout(timeoutKey);\n };\n }, [confirmDeactivation, isDeactivationInProgress]);\n\n return (\n \n {I18n.t(\n 'components.affiliate_three_sixty.affiliate.deactivate.confirmation_modal.success_subheader',\n {\n affiliate_name: affiliateName,\n },\n )}\n
\n\n \n
\n );\n};\n\nShowMoreAffiliates.defaultProps = {\n plan: '',\n subscriptionPeriod: '',\n totalChannels: 0,\n};\n\nShowMoreAffiliates.propTypes = {\n deactivatedAffiliates: PropTypes.bool.isRequired,\n showDetailsUrl: PropTypes.string.isRequired,\n affiliateId: PropTypes.number.isRequired,\n affiliateName: PropTypes.oneOfType([PropTypes.string, PropTypes.node])\n .isRequired,\n onConfirmationModalDismiss: PropTypes.func.isRequired,\n plan: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n subscriptionPeriod: PropTypes.string,\n workspaces: PropTypes.oneOfType([PropTypes.node, PropTypes.number])\n .isRequired,\n activeUsers: PropTypes.oneOfType([PropTypes.string, PropTypes.node])\n .isRequired,\n totalChannels: PropTypes.number,\n};\n\nexport default ShowMoreAffiliates;\n","export const WARNING = 'warning';\nexport const SUCCESS = 'success';\nexport const DANGER = 'danger';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag, I18nText } from '@wtag/react-comp-lib';\nimport {\n ENTERPRISE,\n FREE,\n LITE,\n GROWTH,\n CUSTOM,\n} from '../../../../shared/helper/plans';\n\nconst getPlanWithSubcriptionPeriod = (plan, subscriptionPeriod) => {\n if (plan) {\n return (\n \n \n \n {preIcon}\n {labelText}\n
\n }\n size=\"small\"\n onClick={() => {\n setIsVisible(previousIsVisibleState => !previousIsVisibleState);\n }}\n />\n \n \n );\n};\n\nDropDownFilter.defaultProps = {\n onInitialFetch: () => {},\n filterParams: {},\n onRestructuringDropDownOptions: null,\n};\n\nDropDownFilter.propTypes = {\n label: PropTypes.string.isRequired,\n preIcon: PropTypes.node.isRequired,\n type: PropTypes.string.isRequired,\n onInitialFetch: PropTypes.func,\n onChange: PropTypes.func.isRequired,\n filterParams: PropTypes.object, // eslint-disable-line react/forbid-prop-types\n selectedOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.number.isRequired,\n }),\n ).isRequired,\n onRestructuringDropDownOptions: PropTypes.func,\n};\n\nexport default DropDownFilter;\n","import React, { useEffect, useState, useRef } from 'react';\nimport { debounce } from 'throttle-debounce';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport Card from '@wtag/rcl-card';\nimport Button from '@wtag/rcl-button';\nimport { I18nText, SortingPill, Link } from '@wtag/react-comp-lib';\nimport { Header } from '@wtag/rcl-typography';\nimport {\n NumberParam,\n StringParam,\n useQueryParams,\n withDefault,\n ArrayParam,\n} from 'use-query-params';\nimport routes from '../../../../shared/routes';\nimport withQueryParamsProvider from '../../../../shared/components/withQueryParamsProvider';\nimport httpClient from '../../../../shared/libraries/httpClient';\nimport PaginationWithTranslation from '../../../../shared/components/Pagination/PaginationWithTranslation';\nimport AffiliateTable from './AffiliateTable';\nimport DropDownFilter from '../../../../shared/components/Filters/DropDownFilter';\n\nconst AffiliateList = () => {\n const [affiliates, setAffiliates] = useState([]);\n const [totalPages, setTotalPage] = useState(null);\n const [selectedWorkspaces, setSelectedWorkspaces] = useState([]);\n const [deactivatedScope, setDeactivatedScope] = useState(false);\n const [selectedPlans, setSelectedPlans] = useState([]);\n const [selectedAccountManagers, setSelectedAccountManagers] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [query, setQuery] = useQueryParams({\n q: withDefault(StringParam, ''),\n page: NumberParam,\n sortColumn: StringParam,\n sortDirection: StringParam,\n planIds: withDefault(ArrayParam, []),\n workspaceIds: withDefault(ArrayParam, []),\n accountManagerIds: withDefault(ArrayParam, []),\n });\n\n const {\n q,\n page,\n sortColumn,\n sortDirection,\n planIds,\n workspaceIds,\n accountManagerIds,\n } = query;\n\n const [localSearchQuery, setLocalSearchQuery] = useState(q);\n\n const setInitialParams = data => {\n // We only set the params onces when there is nothing in the url\n if (!query.page) {\n setQuery(\n {\n q: '',\n page: data.pagination.currentPage,\n sortColumn: data.sort.column,\n sortDirection: data.sort.direction,\n },\n 'replaceIn',\n // use replaceIn as we don't want another navigation to be added to the browser history\n );\n }\n };\n\n const hasFilterParams = [planIds, workspaceIds, accountManagerIds].some(\n value => value.length > 0,\n );\n\n const fetchAffiliates = async (\n searchQuery,\n newPage,\n column,\n direction,\n newPlanIds,\n deactivated,\n newWorkspaceIds,\n newAccountManagerIds,\n ) => {\n setIsLoading(true);\n const { data } = await httpClient.get(\n routes.affiliates.list({\n deactivated,\n q: searchQuery,\n page: newPage,\n column,\n direction,\n 'plan_ids[]': newPlanIds,\n 'workspace_ids[]': newWorkspaceIds,\n 'account_manager_ids[]': newAccountManagerIds,\n }),\n );\n\n setIsLoading(false);\n setAffiliates(data.affiliates);\n setInitialParams(data);\n setTotalPage(data.pagination.totalPages);\n };\n\n const setSearchQueryInParams = useRef(\n debounce(500, value => {\n setQuery({ q: value, page: 1 });\n }),\n ).current;\n\n const onSearchParamsChange = value => {\n // We keep a local state here as we don't want to do an AJAX call for each key the user presses\n // This allows us to keep the UI responsive and fetch new data with a delay\n setLocalSearchQuery(value);\n setSearchQueryInParams(value);\n };\n\n const toggleDirection = () => {\n if (sortDirection === 'up') {\n setQuery({ sortDirection: 'down' });\n } else {\n setQuery({ sortDirection: 'up' });\n }\n };\n\n const setSortOrder = chosenColumn => {\n if (sortColumn === chosenColumn) {\n toggleDirection();\n } else {\n setQuery({ sortColumn: chosenColumn, sortDirection: 'up' });\n }\n };\n\n const restructureAccounManagersOptions = (\n accountManagersOptions,\n callback,\n ) => {\n callback(\n accountManagersOptions.map(({ id, email, name }) => ({\n value: id,\n label: (\n \n
\n ),\n })),\n );\n };\n\n const restructureWorkspacesOptions = (workspacesOptions, callback) => {\n callback(\n workspacesOptions.map(workspace => ({\n value: workspace.id,\n label: (\n \n {name}\n
\n \n {email}\n
\n \n
\n ),\n })),\n );\n };\n\n const clearFilters = () => {\n setQuery(\n {\n planIds: [],\n workspaceIds: [],\n accountManagerIds: [],\n },\n 'replaceIn',\n );\n setSelectedPlans([]);\n setSelectedWorkspaces([]);\n setSelectedAccountManagers([]);\n };\n\n const resetQueryParams = () => {\n setQuery({\n q: '',\n page: 1,\n sortColumn: 'client_name',\n sortDirection: 'up',\n });\n setLocalSearchQuery('');\n clearFilters();\n };\n\n const getValues = optionsArray => optionsArray.map(option => option.value);\n const fetchAffiliatesWithParams = () => {\n fetchAffiliates(\n q,\n page,\n sortColumn,\n sortDirection,\n planIds,\n deactivatedScope,\n workspaceIds,\n accountManagerIds,\n );\n };\n\n const onConfirmationModalDismiss = () => {\n resetQueryParams();\n fetchAffiliatesWithParams();\n };\n useEffect(() => {\n fetchAffiliatesWithParams();\n }, [\n q,\n page,\n sortColumn,\n sortDirection,\n planIds,\n workspaceIds,\n accountManagerIds,\n ]);\n\n useEffect(() => {\n resetQueryParams();\n fetchAffiliatesWithParams();\n }, [deactivatedScope]);\n\n const handleAccountManagerChange = newSelectedAccountManagers => {\n setSelectedAccountManagers(newSelectedAccountManagers);\n setQuery({\n accountManagerIds: getValues(newSelectedAccountManagers),\n page: 1,\n });\n };\n\n return (\n \n {workspace.name}\n
\n \n {workspace.identifier}\n
\n \n
\n\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n setSortOrder('client_name')}\n />\n
\n \n setSortOrder('active_users')}\n />\n
\n \n setSortOrder('workspaces')}\n />\n
\n \n setSortOrder('last_login')}\n />\n
\n \n
\n )}\n \n {/* eslint-disable jsx-a11y/anchor-is-valid */}\n {deactivatedScope ? (\n setDeactivatedScope(false)}\n size=\"small\"\n type=\"button\"\n modifier=\"default\"\n >\n setDeactivatedScope(true)}\n size=\"small\"\n type=\"button\"\n modifier=\"default\"\n >\n
\n \n
\n \n
\n\n \n
\n\n {hasFilterParams && (\n \n \n
\n }\n onClick={clearFilters}\n />\n \n
\n \n setQuery({ page: value })}\n />\n
\n )}\n \n );\n};\n\nexport default withQueryParamsProvider(AffiliateList);\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Amount = ({ value, currency }) => {\n if (value === null || typeof value === 'undefined' || !currency) return '';\n\n const amount = new Intl.NumberFormat(I18n.locale, {\n style: 'currency',\n currency,\n }).format(value);\n\n return {amount};\n};\n\nAmount.propTypes = {\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n currency: PropTypes.string.isRequired,\n};\n\nexport default Amount;\n","const creditCardIconName = cardType => {\n switch (cardType) {\n case 'visa':\n return 'visa';\n\n case 'visa_corporate':\n return 'visaCorporate';\n\n case 'visa_electron':\n return 'visaElectron';\n\n case 'visa_debit':\n return 'visa';\n\n case 'visa_corporate_debit':\n return 'visaCorporate';\n\n case 'visa_electron_debit':\n return 'visaElectron';\n\n case 'master_card':\n return 'mastercard';\n\n case 'master_card_debit':\n return 'mastercard';\n\n case 'master_card_corporate':\n return 'mastercardCorporate';\n\n case 'master_card_corporate_debit':\n return 'mastercardCorporate';\n\n case 'uatp':\n return 'uatp';\n\n case 'uatp_debit':\n return 'uatp';\n\n case 'amex':\n return 'amex';\n\n case 'amex_debit':\n return 'amex';\n\n case 'amex_corporate':\n return 'amexCorporate';\n\n case 'amex_corporate_debit':\n return 'amexCorporate';\n\n case 'diners_club':\n return 'dinersClub';\n\n case 'diners_club_debit':\n return 'dinersClub';\n\n case 'diners_club_corporate':\n return 'dinersClubCorporate';\n\n case 'diners_club_corporate_debit':\n return 'dinersClubCorporate';\n\n case 'discover':\n return 'discover';\n\n case 'discover_debit':\n return 'discover';\n\n case 'discover_corporate':\n return 'discoverCorporate';\n\n case 'discover_corporate_debit':\n return 'discoverCorporate';\n\n case 'jcb':\n return 'jcb';\n\n case 'jcb_debit':\n return 'jcb';\n\n default:\n return 'visa';\n }\n}\n\nexport default creditCardIconName;\n","import React from 'react';\nimport Icon from '@wtag/rcl-icon';\nimport PropTypes from 'prop-types';\nimport creditCardIconName from './helpers/CreditCardHelper';\n\nconst CreditCardIcon = props => {\n const { cardType } = props;\n\n return (\n \n
\n \n );\n};\n\nCreditCard.defaultProps = {\n asSelected: false,\n primary: false,\n clickable: false,\n fetchCreditCards: () => {},\n};\n\nCreditCard.propTypes = {\n asSelected: PropTypes.bool,\n id: PrimaryShapeStringAndNumber.isRequired,\n lastFour: PropTypes.string.isRequired,\n cardType: PropTypes.string.isRequired,\n cardholderName: PropTypes.string.isRequired,\n disableAction: PropTypes.bool.isRequired,\n affiliateId: PrimaryShapeStringAndNumber.isRequired,\n fetchCreditCards: PropTypes.func,\n primary: PropTypes.bool,\n clickable: PropTypes.bool,\n};\n\nexport default CreditCard;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport { Text } from '@wtag/rcl-typography';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport { I18nText, Radio, Spinner } from '@wtag/react-comp-lib';\nimport Alert from '@wtag/rcl-alert';\nimport Modal from '@wtag/rcl-modal';\nimport routes from '../../../shared/routes';\nimport httpClient from '../../../shared/libraries/httpClient';\n\nimport Amount from './Amount';\nimport CreditCard from './CreditCard';\n\nconst PrimaryShapeStringAndBool = PropTypes.oneOfType([PropTypes.string, PropTypes.bool]);\nconst PrimaryShapeStringAndNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);\n\nconst TopUpModal = ({\n currentBalance,\n currency,\n affiliateId,\n disableCreditCardOption,\n primaryCreditCard,\n creditCards,\n stripeSuccessStatus,\n}) => {\n const [modalOpen, setModalOpen] = useState(false);\n const [amount, setAmount] = useState('');\n const [amountError, setAmountError] = useState(null);\n const [stripeError, setStripeError] = useState(null);\n const [disableSubmit, setDisableSubmit] = useState(false);\n const [paymentBy, setPaymentBy] = useState('');\n const [selectedCardId, setSelectedCardId] = useState(null);\n const [iframeSource, setIframeSource] = useState(null);\n const [paymentIntentId, setPaymentIntentId] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n\n const creditCardSelected = paymentBy === 'credit_card';\n const wireTransferSelected = paymentBy === 'wire_transfer';\n const selectedCard = creditCards.find(card => card.id === selectedCardId);\n const otherCards = creditCards.filter(card => card.id !== selectedCardId);\n\n const updateAmount = value => {\n setAmount(value);\n };\n\n const setCreditCardPayment = value => {\n if (value) {\n setPaymentBy('credit_card');\n }\n };\n\n const setWireTransferPayment = value => {\n if (value) {\n setPaymentBy('wire_transfer');\n }\n };\n\n const createInvoice = async () => {\n try {\n setAmountError(null);\n setStripeError(null);\n setDisableSubmit(true);\n const routeToHit = creditCardSelected\n ? routes.billing.invoices.chargeCreditCard\n : routes.billing.invoices.create;\n const { data } = await httpClient.post(routeToHit({ affiliate_id: affiliateId }), {\n invoice: {\n amount,\n currency,\n credit_card_id: creditCardSelected ? selectedCardId : null,\n },\n });\n\n setDisableSubmit(false);\n if (data.redirectUrl) {\n window.location.replace(data.redirectUrl);\n }\n if (data.requiresAction && data.challengeIframeSourceUrl) {\n setIframeSource(data.challengeIframeSourceUrl);\n setPaymentIntentId(data.paymentIntentId);\n }\n } catch (error) {\n setDisableSubmit(false);\n const response = error.response;\n if (response && response.status === 422) {\n setAmountError(response.data.error.amount);\n setStripeError(response.data.error.stripeError);\n } else {\n throw error;\n }\n }\n };\n\n const newBalance = parseFloat(currentBalance) + parseFloat(amount || 0);\n\n const messageListener = async event => {\n if (event.data.id !== paymentIntentId) {\n return;\n }\n\n const postUrl = event.data.postUrl;\n\n if (postUrl) {\n setIsLoading(true);\n window.removeEventListener('message', messageListener, true);\n const { data } = await httpClient.post(postUrl);\n\n if (data.status !== stripeSuccessStatus && data.error) {\n setStripeError(data.error);\n setIsLoading(false);\n } else if (data.status === stripeSuccessStatus && data.redirectUrl) {\n window.location.replace(data.redirectUrl);\n }\n }\n };\n\n useEffect(() => {\n if (!modalOpen) {\n setAmountError(null);\n setStripeError(null);\n setPaymentBy('');\n setAmount('');\n setIframeSource(null);\n setPaymentIntentId(null);\n if (primaryCreditCard) {\n setSelectedCardId(primaryCreditCard.id);\n } else {\n setSelectedCardId(null);\n }\n window.removeEventListener('message', messageListener, true);\n }\n }, [modalOpen]);\n\n useEffect(() => {\n if (primaryCreditCard && selectedCardId === null) {\n setSelectedCardId(primaryCreditCard.id);\n }\n }, [primaryCreditCard]);\n\n useEffect(() => {\n if (iframeSource && paymentIntentId) {\n window.addEventListener('message', messageListener, true);\n }\n }, [iframeSource, paymentIntentId]);\n\n return (\n <>\n \n
\n \n \n {`**** **** **** ${lastFour}`}\n \n {cardholderName}\n
\n \n {primary && (\n {\n setIsVisible(previousIsVisibleState => !previousIsVisibleState);\n }}\n icon={
\n \n \n \n setModalOpen(false)}\n onKeyDown={() => setModalOpen(false)}\n role=\"presentation\"\n >\n
\n \n \n \n {stripeError}\n \n\n
\n \n ) : (\n <>\n \n {I18n.t('components.billing.add_credit_card.step2_test_top_up')}\n
\n \n {I18n.t('components.billing.add_credit_card.step2_test_info')}\n
\n \n \n
\n {isLoading && (\n \n
\n )}\n \n \n \n \n \n \n {disableCreditCardOption ? (\n
\n \n \n \n \n \n \n {stripeError}\n \n {selectedCard && creditCardSelected && (\n
\n \n )}\n \n \n )}\n \n
\n
\n )}\n {creditCardSelected && otherCards.length > 0 && (\n <>\n \n
\n \n
\n \n {otherCards.map(card => (\n setSelectedCardId(card.id)}\n className=\"billing__top-up-modal-other-card\"\n >\n
\n ))}\n \n setModalOpen(false)}\n />\n
\n {I18n.t('components.billing.add_credit_card.error')}
;\n } else if (step === 1) {\n content = (\n\n
\n );\n } else if (step === 2) {\n content = (\n \n {I18n.t('components.billing.add_credit_card.step1')}\n
\n \n {I18n.t('components.billing.add_credit_card.step1_info')}\n
\n \n
\n \n setName(value)}\n error={formError.name}\n touched={true}\n required={true}\n placeholder={I18n.t(\n 'components.billing.add_credit_card.placeholders.name',\n )}\n />\n
\n \n setEmail(value)}\n error={formError.email}\n touched={true}\n required={true}\n placeholder={I18n.t(\n 'components.billing.add_credit_card.placeholders.email',\n )}\n />\n
\n \n
\n \n setPhone(inputParam)}\n onCountryCodeChange={setPhoneCountryCode}\n error={formError.phone}\n isInputTouched={true}\n />\n
\n \n
\n \n setLine1(value)}\n touched={true}\n error={formError.line1}\n required={true}\n placeholder={I18n.t(\n 'components.billing.add_credit_card.placeholders.line1',\n )}\n />\n
\n \n setLine2(value)}\n placeholder={I18n.t(\n 'components.billing.add_credit_card.placeholders.line2',\n )}\n />\n
\n \n
\n \n setPostalCode(value)}\n error={formError.postalCode}\n touched={true}\n required={true}\n placeholder={I18n.t(\n 'components.billing.add_credit_card.placeholders.postal_code',\n )}\n />\n
\n \n setCity(value)}\n error={formError.city}\n touched={true}\n required={true}\n placeholder={I18n.t(\n 'components.billing.add_credit_card.placeholders.city',\n )}\n />\n
\n \n
\n \n setState(value)}\n placeholder={I18n.t(\n 'components.billing.add_credit_card.placeholders.state',\n )}\n />\n
\n \n
\n \n
\n \n
\n\n \n \n \n {I18n.t('stripe.error_message.three_ds_not_supported')}\n \n \n {I18n.t('stripe.error_message.three_ds_failed')}\n \n
\n );\n }\n\n return <>{content};\n};\n\nAddNewCreditCard.propTypes = {\n fetchCreditCards: PropTypes.func.isRequired,\n affiliateIdentifier: PropTypes.string.isRequired,\n affiliateId: PropTypes.number.isRequired,\n ccvUrl: PropTypes.string.isRequired,\n ccvPublicToken: PropTypes.string.isRequired,\n closeModal: PropTypes.func.isRequired,\n};\n\nexport default AddNewCreditCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Spinner } from '@wtag/react-comp-lib';\nimport Modal from '@wtag/rcl-modal';\n\nconst SubscriptionWaitingModal = ({ isVisible, waitingText }) => {\n return (\n \n {!showChallenge && I18n.t('components.billing.add_credit_card.step2')}\n {showChallenge &&\n I18n.t('components.billing.add_credit_card.step2_test')}\n
\n \n {!showChallenge &&\n I18n.t('components.billing.add_credit_card.step2_info')}\n {showChallenge &&\n I18n.t('components.billing.add_credit_card.step2_test_info')}\n
\n \n {waitingText}\n
\n \n \n
\n );\n\n return (\n \n {I18n.t('components.subscription.subscription_feature_details_modal.downgrade.body.title')}\n
\n - \n {(downgradedFeatureDetails && downgradedFeatureDetails.lessWorkspaces === null) ||\n downgradedFeatureDetails?.lessWorkspaces > 0 ? (\n
- \n {downgradedFeatureDetails?.lessWorkspaces === null\n ? I18n.t(\n 'components.subscription.subscription_feature_details_modal.downgrade.body.unlimited_workspaces',\n )\n : I18n.t(\n 'components.subscription.subscription_feature_details_modal.downgrade.body.workspace',\n {\n count: downgradedFeatureDetails?.lessWorkspaces,\n },\n )}\n \n ) : null}\n {downgradedFeatureDetails?.lessChannels === null ||\n downgradedFeatureDetails?.lessChannels > 0 ? (\n
- \n {downgradedFeatureDetails?.lessChannels === null\n ? I18n.t(\n 'components.subscription.subscription_feature_details_modal.downgrade.body.unlimited_channels',\n )\n : I18n.t(\n 'components.subscription.subscription_feature_details_modal.downgrade.body.channel',\n {\n count: downgradedFeatureDetails?.lessChannels,\n },\n )}\n \n ) : null}\n {downgradedFeatureDetails?.lessPhoneSupport !== null ? (\n
- \n {I18n.t(\n 'components.subscription.subscription_feature_details_modal.downgrade.body.phone_support',\n {\n count: downgradedFeatureDetails?.lessPhoneSupport,\n },\n )}\n \n ) : null}\n {downgradedFeatureDetails?.customDomainNotSupported ? (\n
- \n {I18n.t(\n 'components.subscription.subscription_feature_details_modal.downgrade.body.custom_domain',\n )}\n \n ) : null}\n
{title}
\n {subTitle}
\n {featureDecreased ? downgradedFeatureListElement : null}\n \n {title}\n
\n \n {subTitle}\n
\n \n
\n \n );\n};\n\nPendingDowngradeAlert.defaultProps = {\n isVisible: true,\n scheduledDowngrade: null,\n onClick: () => {},\n};\n\nPendingDowngradeAlert.propTypes = {\n isVisible: PropTypes.bool,\n scheduledDowngrade: PropTypes.shape({\n plan: PropTypes.shape({}),\n downgradeAt: PropTypes.string,\n }),\n onClick: PropTypes.func,\n};\n\nexport default PendingDowngradeAlert;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Link from '@wtag/rcl-link';\nimport httpClient from '../../../../shared/libraries/httpClient';\nimport routes from '../../../../shared/routes';\nimport DateTime from '../../DateTime';\nimport SubscriptionWaitingModal from './SubscriptionWaitingModal';\nimport DowngradedFeatureDetailsModal from './DowngradedFeatureDetailsModal';\nimport ActionConfirmationModal from './ActionConfirmationModal';\nimport PendingDowngradeAlert from './PendingDowngradeAlert';\n\nconst CancelScheduledDowngradeModule = ({ affiliateId, scheduledDowngrade, redirectTo }) => {\n const [showWaitingModal, setShowWaitingModal] = useState(false);\n const [showDowngradedFeatureDetailsModal, setShowDowngradedFeatureDetailsModal] = useState(false);\n const [showConfirmationModal, setShowConfirmationModal] = useState(false);\n\n const cancelDowngrade = planId => {\n setShowDowngradedFeatureDetailsModal(false);\n setShowWaitingModal(true);\n\n httpClient\n .delete(\n routes.billing.subscriptions.downgrade.cancel({\n affiliate_id: affiliateId,\n id: planId,\n }),\n )\n .then(() => {\n setShowWaitingModal(false);\n setShowConfirmationModal(true);\n });\n };\n\n return (\n <>\n \n {I18n.t('components.subscription.pending_downgrade_alert.text', {\n newPlanName: I18n.t(scheduledDowngrade && scheduledDowngrade.plan?.name, {\n scope: 'components.plans',\n }),\n newPlanPeriod: scheduledDowngrade?.plan?.period,\n date: DateTime({\n dateTime: scheduledDowngrade?.downgradeAt,\n format: 'short',\n returnStringOnly: true,\n }),\n })}\n
\n \n \n
\n \n
\n \n \n \n
\n \n \n
\n \n
\n \n 
\n
\n \n
\n \n
\n {billingData.billingKpis.latestTopUps.map(paidInvoice => (\n \n \n
\n ))}\n \n
\n \n 
\n
\n \n
\n \n 
\n
\n \n
\n \n
\n \n );\n\n const primaryCreditCard =\n creditCards && creditCards.find(card => card.primary);\n const secondaryCreditCards =\n creditCards && creditCards.filter(card => !card.primary);\n const showShowLessButton =\n secondaryCreditCards &&\n secondaryCreditCards.length > INITIAL_NUMBER_OF_CARDS_TO_SHOW &&\n secondaryCreditCards &&\n secondaryCreditCards.length <= numberOfCardsToShow;\n\n return (\n <>\n \n \n
\n \n )}\n \n )}\n \n \n \n
\n \n
\n \n
\n \n {!billingData ? (\n smallCardLoader\n ) : (\n \n \n )}\n
\n \n \n
\n \n
\n \n
\n \n \n
\n {billingData.hasDefaultCurrency && (\n \n
\n )}\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {!billingData ? smallCardLoader : latestTopUpCard}\n
\n \n {!billingData ? smallCardLoader : pendingPaymentCard}\n
\n \n {!billingData ? (\n smallCardLoader\n ) : (\n \n
\n \n \n {I18n.t('components.billing.plan.link_view')}\n \n
\n \n {I18n.t('components.billing.plan.title')}\n
\n \n {billingData && billingData.currentPlan && (\n
\n \n {I18n.t(\n billingData &&\n billingData.currentPlan &&\n billingData.currentPlan.name,\n {\n scope: 'components.plans',\n },\n )}\n
\n )}\n {!billingData && billingData.automaticBillingDisabled && (\n \n
\n \n )}\n \n
\n \n {I18n.t('components.billing.plan.total_active_users')}\n
\n {billingData && billingData.totalActiveUsers}\n \n
\n \n {I18n.t('components.billing.plan.next_billing_on')}\n
\n {billingData && billingData.automaticBillingDisabled ? (\n \n {I18n.t(\n 'components.billing.plan.disabled_automatic_billing_text',\n )}\n
\n ) : (\n \n
\n )}\n \n \n 0,\n })}\n >\n
\n {secondaryCreditCards && secondaryCreditCards.length > 0 && (\n <>\n \n
\n {loading ? (\n \n
\n \n
\n \n )}\n \n
\n \n {secondaryCreditCards\n .slice(0, numberOfCardsToShow)\n .map(card => (\n
\n )}\n {showShowLessButton && (\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n \n \n
\n \n \n {billingData && billingData.affiliateIdentifier && (\n \n
\n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n )}\n \n );\n};\n\nBilling.propTypes = {\n transactionsUrl: PropTypes.string.isRequired,\n affiliateId: PropTypes.number.isRequired,\n billingUrl: PropTypes.string.isRequired,\n ccvPublicToken: PropTypes.string.isRequired,\n ccvUrl: PropTypes.string.isRequired,\n ccvIntegrityHash: PropTypes.string.isRequired,\n};\n\nexport default Billing;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport routes from '../../../shared/routes';\nimport { showAccountNumber, showCode } from '../../../shared/helper/commonBankDetails';\nimport httpClient from '../../../shared/libraries/httpClient';\n\nconst ShowBankDetails = ({ currency }) => {\n const [bankDetails, setBankDetails] = useState({});\n\n const fetchBankDetails = async () => {\n const { data } = await httpClient.get(routes.bankDetails.fetch({ currency_code: currency }));\n setBankDetails(data.bankDetails);\n };\n\n useEffect(() => {\n if (currency) {\n fetchBankDetails();\n }\n }, [currency]);\n\n return (\n \n
\n \n
\n );\n};\n\nShowBankDetails.defaultProps = {\n currency: 'usd',\n};\n\nShowBankDetails.propTypes = {\n currency: PropTypes.string,\n};\n\nexport default ShowBankDetails;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport Card from '@wtag/rcl-card';\nimport { Header, Text as Typography } from '@wtag/rcl-typography';\nimport { BreadcrumbItem, Breadcrumbs, I18nText, Stepper, Amount } from '@wtag/react-comp-lib';\nimport Alert from '@wtag/rcl-alert';\nimport bank from 'affiliateImages/bank.svg';\nimport DateTime from '../DateTime';\nimport ShowBankDetails from './ShowBankDetails';\nimport ContactPage from '../../../public/components/ContactPage';\n\nconst TransactionDetails = ({\n title,\n transactionType,\n lineItem,\n timestamp,\n balanceChange,\n urls,\n notification,\n signInRoutes,\n recaptchaKey,\n recaptchaWidgetSrc,\n cancelInvoiceModal,\n pdf,\n reference,\n reason,\n}) => {\n const dividerContent = ;\n\n const currencyName = balanceChange && balanceChange.currency;\n const WireTransferPaymentType = 'WireTransferPayment';\n const WelltravelBookingTransactionType = 'WelltravelBookingTransaction';\n const stepsContainer = [\n { stepName: \n {bankDetails.currencyCode}\n
\n \n {bankDetails.currencyName}\n
\n \n {showAccountNumber(bankDetails)}\n
\n \n {I18n.t('components.billing.invoices.bank_account_details.bank', {\n name: bankDetails.bankName,\n })}\n
\n \n {showCode(bankDetails)}\n
\n \n {I18n.t('components.billing.invoices.bank_account_details.beneficiary', {\n beneficiary: bankDetails.beneficiary,\n })}\n
\n \n {I18n.t('components.billing.invoices.bank_account_details.beneficiary_address', {\n beneficiary_address: bankDetails.beneficiaryAddress,\n })}\n
\n \n {reference?.workspace && (\n \n \n {`${reference?.workspace?.name} [${reference?.workspace?.identifier}]`}\n \n \n )}\n {reference?.workspace && (\n \n \n {reference?.workspace?.orderReference}\n \n \n )}\n \n \n {timestamp && \n \n {remarkType[reason] && !notification && (\n \n \n \n \n )}\n
\n {dividerContent}\n \n );\n\n const generalTransactionsContainer = (\n \n
\n \n
\n \n
\n \n
\n \n \n
\n );\n\n return (\n \n \n \n
\n );\n};\n\nTransactionDetails.defaultProps = {\n timestamp: null,\n balanceChange: null,\n notification: null,\n lineItem: null,\n cancelInvoiceModal: null,\n reference: null,\n};\n\nTransactionDetails.propTypes = {\n title: PropTypes.node.isRequired,\n timestamp: PropTypes.string,\n lineItem: PropTypes.node,\n balanceChange: PropTypes.shape({\n before: PropTypes.string.isRequired,\n amount: PropTypes.string.isRequired,\n after: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }),\n notification: PropTypes.node,\n urls: PropTypes.shape({\n billing: PropTypes.string.isRequired,\n transactions: PropTypes.string.isRequired,\n thisEntity: PropTypes.string.isRequired,\n }).isRequired,\n signInRoutes: PropTypes.shape({\n signInUrl: PropTypes.string.isRequired,\n }).isRequired,\n recaptchaKey: PropTypes.string.isRequired,\n recaptchaWidgetSrc: PropTypes.string.isRequired,\n cancelInvoiceModal: PropTypes.node,\n pdf: PropTypes.node.isRequired,\n transactionType: PropTypes.string.isRequired,\n reference: PropTypes.shape({\n workspace: PropTypes.shape({\n identifier: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n orderReference: PropTypes.string.isRequired,\n }),\n }),\n reason: PropTypes.string.isRequired,\n};\n\nexport default TransactionDetails;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Modal from '@wtag/rcl-modal';\nimport routes from '../../../shared/routes';\nimport httpClient from '../../../shared/libraries/httpClient';\n\nconst InvoiceCancelModal = ({ invoiceId, title }) => {\n const [modalOpen, setModalOpen] = useState(false);\n const [reason, setReason] = useState(null);\n const [reasonError, setReasonError] = useState(null);\n\n const onModalClose = () => {\n setModalOpen(false);\n };\n\n const onModalOpen = () => {\n setModalOpen(true);\n };\n\n const cancelInvoice = async () => {\n try {\n const { data } = await httpClient.delete(\n routes.billing.invoices.delete({\n id: invoiceId,\n cancellation_reason: reason,\n }),\n );\n\n if (data.redirectUrl) {\n window.location.replace(data.redirectUrl);\n }\n } catch (error) {\n const response = error.response;\n if (response && response.status === 422) {\n setReasonError(response.data.error.cancellationReason);\n } else {\n throw error;\n }\n }\n };\n\n const onChangeReason = value => {\n setReason(value);\n };\n\n return (\n <>\n \n
\n {notification ? (\n \n
\n \n \n \n \n \n \n {title} \n \n
\n \n
\n ) : (\n \n
\n )}\n \n
\n \n \n {title}\n \n
\n \n {pdf}\n {cancelInvoiceModal}\n
\n \n {transactionType === WelltravelBookingTransactionType || (notification && reason)\n ? walletTransactionsContainer\n : generalTransactionsContainer}\n
\n \n {notification && !reason ? (\n
\n \n
\n ) : (\n \n \n \n \n \n \n
\n \n
\n \n 
\n
\n \n
\n \n \n \n
\n )}\n \n
\n \n
\n \n
\n \n {balanceChange && (\n
\n \n
\n {title}
\n \n {balanceChange && (\n
\n \n
\n \n
\n \n {balanceChange && (\n
\n \n \n \n
\n \n \n {notification}\n \n
\n \n
\n \n \n {transactionType === WelltravelBookingTransactionType ? (\n
\n \n {balanceChange && (\n
\n \n
\n \n \n
\n \n {balanceChange && (\n
\n \n
\n \n \n {I18n.t('components.billing.invoices.cancel.header', {\n title,\n })}\n \n \n
\n \n
\n \n setModalOpen(false)}\n />\n
\n \n
\n }\n reason={reason}\n reference={reference}\n />\n );\n};\n\nInvoice.propTypes = {\n invoiceId: PropTypes.number.isRequired,\n urls: PropTypes.shape({\n billing: PropTypes.string.isRequired,\n transactions: PropTypes.string.isRequired,\n thisEntity: PropTypes.string.isRequired,\n }).isRequired,\n signInRoutes: PropTypes.shape({\n signInUrl: PropTypes.string.isRequired,\n }).isRequired,\n recaptchaKey: PropTypes.string.isRequired,\n recaptchaWidgetSrc: PropTypes.string.isRequired,\n};\n\nexport default Invoice;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport doneMark from '../../../../assets/images/done-24px.svg';\n\nconst tableHeader = [\n { id: 0, name: \n \n \n
\n
\n \n
\n | \n | \n {filterHeaders.map(({ name, id }) => (\n \n {name}\n | \n ))}\n||||
|---|---|---|---|---|---|
| {name} | \n\n | \n \n | \n \n | \n \n | \n {isSuperAdmin && (\n \n | \n )}\n
\n \n );\n};\n\nPricingTable.propTypes = {\n isSuperAdmin: PropTypes.bool.isRequired,\n};\n\nexport default PricingTable;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Toggle } from '@wtag/react-comp-lib';\nimport Tooltip from '@wtag/rcl-tooltip';\n\nconst SubscriptionModeSwitch = ({\n subscribeYearly,\n onModeChange,\n flippedHorizontaly,\n disabled,\n disabilityReasonText,\n}) => {\n return (\n
\n
\n \n );\n};\n\nPlans.defaultProps = {\n affiliateDeactivated: false,\n isSuperAdmin: false,\n downgradedInCurrentMonth: false,\n lastPlan: null,\n scheduledDowngrade: null,\n urls: {\n billing: '',\n plans: '',\n },\n};\n\nPlans.propTypes = {\n currentPlanId: PropTypes.number.isRequired,\n affiliateId: PropTypes.number.isRequired,\n affiliateDeactivated: PropTypes.bool,\n isSuperAdmin: PropTypes.bool,\n downgradedInCurrentMonth: PropTypes.bool,\n lastPlan: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n period: PropTypes.string,\n }),\n scheduledDowngrade: PropTypes.shape({\n id: PropTypes.number,\n plan: PropTypes.shape({}),\n downgradedFeatures: {\n lessWorkspaces: PropTypes.number,\n lessChannels: PropTypes.number,\n customDomainNotSupported: PropTypes.bool,\n lessPhoneSupport: PropTypes.bool,\n },\n downgradeAt: PropTypes.string,\n }),\n urls: PropTypes.shape({\n billing: PropTypes.string,\n plans: PropTypes.string,\n }),\n};\n\nexport default withQueryParamsProvider(Plans);\n","import React, { useEffect, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport { useQueryParams, withDefault, StringParam } from 'use-query-params';\nimport Card from '@wtag/rcl-card';\nimport Icon from '@wtag/rcl-icon';\nimport {\n BreadcrumbItem,\n Breadcrumbs,\n I18nText,\n SortingPill,\n RangeFilter,\n PillTabs,\n DropDownFilter,\n} from '@wtag/react-comp-lib';\nimport clipboard from 'affiliateIcons/clipboard-list.svg';\nimport routes from '../../../shared/routes';\nimport httpClient from '../../../shared/libraries/httpClient';\nimport PaginationWithTranslation from '../../../shared/components/Pagination/PaginationWithTranslation';\n\nimport TransactionTable from './TransactionTable';\nimport InvoicesTable from './InvoicesTable';\nimport withQueryParamsProvider from '../../../shared/components/withQueryParamsProvider';\n\nconst TAB_MAPPER = {\n transactions: 0,\n invoices: 1,\n};\n\n/* We use this constant to check that we will modify the maxThreshold state \nduring the initial render only if initialMaxAmount > maxThreshold */\nconst MAX_THRESHOLD_AMOUNT = 999_999_999_999_999;\n\nconst TransactionList = ({ urls, affiliateId }) => {\n const [transactions, setTransactions] = useState([]);\n const [invoices, setInvoices] = useState([]);\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPage] = useState(null);\n const [isLoadingTransactions, setIsLoadingTransactions] = useState(true);\n const [isLoadingInvoices, setIsLoadingInvoices] = useState(true);\n const [invoiceCurrentPage, setInvoiceCurrentPage] = useState(1);\n const [invoiceTotalPages, setInvoiceTotalPage] = useState(null);\n\n const [query] = useQueryParams({\n tab: withDefault(StringParam, 'transactions'),\n });\n const { tab } = query;\n const [selectedTabKey, setSelectedTabKey] = useState(\n TAB_MAPPER[tab] || TAB_MAPPER.transactions,\n );\n\n const [column, setColumn] = useState(null);\n const [direction, setDirection] = useState(null);\n const [minThreshold, setMinThreshold] = useState(0);\n const [minAmount, setMinAmount] = useState(null);\n const [maxAmount, setMaxAmount] = useState(null);\n const [maxThreshold, setMaxThreshold] = useState(MAX_THRESHOLD_AMOUNT);\n const [transactionType, setTransactionType] = useState(null);\n const isInitialRenderRef = useRef(true);\n\n const setSelectedTabKeyOnClick = tabindex => {\n setSelectedTabKey(tabindex);\n };\n\n const setInitialMinMaxThresholdAmount = range => {\n const initialMinAmount = range.minAmount || minThreshold;\n const initialMaxAmount = range.maxAmount || maxThreshold;\n\n if (!minAmount || initialMinAmount < minThreshold) {\n setMinThreshold(initialMinAmount);\n }\n\n if (!maxAmount || initialMaxAmount > maxThreshold) {\n setMaxThreshold(initialMaxAmount);\n }\n };\n\n const fetchTransactions = async page => {\n const { data } = await httpClient.get(\n routes.billing.transactions.list({\n page,\n affiliate_id: affiliateId,\n column,\n direction,\n min_amount: minAmount,\n max_amount: maxAmount,\n transaction_type: transactionType,\n }),\n );\n setTransactions(data.transactions);\n setCurrentPage(data.pagination.currentPage);\n setTotalPage(data.pagination.totalPages);\n setIsLoadingTransactions(false);\n\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n setInitialMinMaxThresholdAmount(data.amountRange);\n }\n };\n\n const fetchOpenInvoices = async page => {\n const { data } = await httpClient.get(\n routes.billing.invoices.list({\n state: 'open',\n page,\n affiliate_id: affiliateId,\n column,\n direction,\n min_amount: minAmount,\n max_amount: maxAmount,\n }),\n );\n\n setInvoices(data.invoices);\n setInvoiceCurrentPage(data.pagination.currentPage);\n setInvoiceTotalPage(data.pagination.totalPages);\n setIsLoadingInvoices(false);\n\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n setInitialMinMaxThresholdAmount(data.amountRange);\n }\n };\n\n useEffect(() => {\n if (selectedTabKey === 0) {\n setIsLoadingTransactions(true);\n fetchTransactions();\n } else {\n setIsLoadingInvoices(true);\n fetchOpenInvoices();\n }\n }, [selectedTabKey]);\n\n useEffect(() => {\n if (!isInitialRenderRef.current) {\n if (selectedTabKey === 0) {\n fetchTransactions();\n } else {\n fetchOpenInvoices();\n }\n }\n }, [minAmount, maxAmount, column, direction, transactionType]);\n\n const toggleDirection = () => {\n if (direction === null) {\n setDirection('up');\n } else if (direction === 'up') {\n setDirection('down');\n } else {\n setDirection(null);\n }\n };\n\n const setSortOrder = chosenColumn => {\n if (column === chosenColumn) {\n toggleDirection();\n } else {\n setColumn(chosenColumn);\n setDirection('up');\n }\n };\n\n const handleMinMaxAmount = ({ min, max }) => {\n setMinAmount(min);\n setMaxAmount(max);\n };\n\n const transactionTableContent = () => {\n return transactions.length ? (\n <>\n \n
\n \n {I18n.t('components.pricing.plans.title')}\n
\n {downgradedInCurrentMonth ? (\n\n \n {I18n.t(\n 'components.pricing.plans.plan_unavailability_alert_text',\n {\n planName: I18n.t(lastPlan.name, {\n scope: 'components.plans',\n }),\n planPeriod: lastPlan.period,\n },\n )}\n \n
\n ) : null}\n {scheduledDowngrade ? (\n \n
\n ) : null}\n {!currentlyInCustomPlan ? (\n \n \n setShowYearlySubscriptionFee(prevState => !prevState)\n }\n />\n
\n ) : null}\n \n
\n \n {plans.map(plan => {\n const subscriptionMode = subscriptionModeDetector({\n oldPlan: {\n name: currentPlan.name,\n period: currentPlan.period,\n },\n newPlan: {\n name: plan.name,\n period: plan.period,\n },\n });\n const isDowngrading =\n subscriptionMode === subscriptionModes.downgrade;\n const canChangePlan = downgradedInCurrentMonth\n ? lastPlan.id === plan.id\n : subscriptionMode !== subscriptionModes.notPossible;\n\n return (\n \n
\n );\n })}\n \n
\n \n 
\n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n \n \n \n \n
\n \n
\n \n \n
\n }\n onChange={onTypeFilterChange}\n options={typeOptions}\n popoverMenuPosition=\"bottom-right\"\n isSearchable={false}\n />\n \n
\n \n );\n};\n\nTransactionList.propTypes = {\n affiliateId: PropTypes.number.isRequired,\n urls: PropTypes.shape({\n billing: PropTypes.string.isRequired,\n transactions: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default withQueryParamsProvider(TransactionList);\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport routes from '../../../shared/routes';\nimport httpClient from '../../../shared/libraries/httpClient';\n\nimport TransactionDetails from './TransactionDetails';\nimport TransactionPDF from './TransactionPDF';\n\nconst Transaction = ({ transactionId, urls, signInRoutes, recaptchaKey, recaptchaWidgetSrc }) => {\n const [transactionBalance, setTransactionBalance] = useState(null);\n const [transaction, setTransaction] = useState(null);\n\n const fetchTransaction = async id => {\n const { data } = await httpClient.get(routes.billing.transactions.fetch({ id }));\n setTransaction(data.transaction);\n setTransactionBalance(data.balance);\n };\n\n useEffect(() => {\n fetchTransaction(transactionId);\n }, [transactionId]);\n\n let title = transactionId;\n let createdAt;\n let balanceChange;\n let lineItemTitle;\n let transactionType;\n let notification;\n let reference;\n let reason;\n\n if (transaction) {\n title = transaction.title;\n createdAt = transaction.createdAt;\n lineItemTitle = transaction.lineItemTitle;\n transactionType = transaction.transactionType;\n notification = transaction.notification;\n reference = transaction.reference;\n reason = transaction.reason;\n }\n\n if (transactionBalance) {\n balanceChange = {\n before: transactionBalance.before,\n after: transactionBalance.after,\n amount: transaction.amount,\n currency: transactionBalance.currency,\n };\n }\n\n return (\n \n
\n \n
\n);\n\nTweet.propTypes = {\n userName: PropTypes.string.isRequired,\n userHandle: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string.isRequired,\n mediaUrl: PropTypes.string.isRequired,\n tweetedAt: PropTypes.string.isRequired,\n};\n\nexport default Tweet\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ClassNames from 'classnames';\nimport Card from '@wtag/rcl-card';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport news from 'affiliateIcons/news-placeholder.svg';\nimport DateTime from '../DateTime';\n\nconst NewsCard = ({ teaser, imageUrl, newsLink, author, createdAt }) => {\n const image = imageUrl != null ? imageUrl : news;\n const isSmallScreen = window.innerWidth < 767;\n\n return (\n {props.profilePictureUrl && 
}
\n \n
\n \n {props.userName } \n {`@${props.userHandle}` } { props.tweetedAt }\n
\n \n {props.description}\n
\n { props.mediaUrl && 
}
\n \n
\n \n \n 
\n
\n \n
\n \n
\n {teaser}
\n\n \n {author && (\n \n
\n\n \n
\n \n
\n \n {author && (\n \n
\n \n
\n \n
\n \n \n \n
\n );\n};\n\nNewsBody.propTypes = {\n newsList: PropTypes.PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n teaser: PropTypes.string,\n image_url: PropTypes.shape({\n small: PropTypes.string,\n medium: PropTypes.string,\n large: PropTypes.string,\n }),\n url: PropTypes.string,\n }),\n ).isRequired,\n newsCategory: PropTypes.string.isRequired,\n};\n\nexport default NewsBody;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport Icon from '@wtag/rcl-icon';\nimport { I18nText, Avatar, KpiCard, Link, PillTabs } from '@wtag/react-comp-lib';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport meter from 'affiliateIcons/meter.svg';\nimport feed from 'affiliateIcons/feed.svg';\nimport twitterIcon from '../../../../assets/images/logo-X-black.png';\n\nimport Tweet from '../Tweet';\nimport NewsBody from './NewsBody';\nimport httpClient from '../../../shared/libraries/httpClient';\nimport routes from '../../../shared/routes';\n\nconst dashboard = ({\n userName,\n accountManagerFirstName,\n accountManagerLastName,\n accountManagerAvatar,\n profilesAddedKPI,\n searchesKPI,\n quotesKPI,\n bookingsKPI,\n travelerDeparting,\n travelerArriving,\n travelerTravelling,\n tweets,\n travelNews,\n welltravelNews,\n}) => {\n const [briefingTasks, setBriefingTasks] = useState([]);\n const [isTaskLoading, setIsTaskLoading] = useState(true);\n\n const allTravelNews = \n
\n \n
\n \n
\n \n 
\n
\n \n
\n \n \n {task.title}\n \n
\n ));\n\n const accountManagerSection = () => {\n return (\n \n
\n );\n };\n\n const emptySocialCard = () => {\n return (\n <>\n \n
\n \n
\n \n {I18n.t('activerecord.attributes.affiliate.account_manager')}\n
\n \n {accountManagerFirstName} {accountManagerLastName}\n
\n \n 
\n
\n \n
\n \n );\n };\n\n const kpiCards = () => {\n const isKpiDataAvailble =\n profilesAddedKPI.past +\n profilesAddedKPI.present +\n searchesKPI.past +\n searchesKPI.present +\n quotesKPI.past +\n quotesKPI.present +\n bookingsKPI.past +\n bookingsKPI.present >\n 0;\n\n return isKpiDataAvailble ? (\n <>\n \n
\n \n
\n \n ) : (\n <>\n \n
\n \n 
\n
\n \n
\n \n );\n };\n\n const emptyTaskCard = () => (\n \n
\n );\n };\n\n const fetchBriefingTasks = async () => {\n try {\n const { data } = await httpClient.get(routes.dashboard.briefingTasks());\n setBriefingTasks(data.briefingTasks);\n } catch (e) {\n setBriefingTasks([]);\n }\n\n setIsTaskLoading(false);\n };\n\n useEffect(() => {\n fetchBriefingTasks();\n }, []);\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n {/* uncomment the following and repalce with data from chat server - refer to AF-561 */}\n {/* 13\n
\n \n {/* uncomment the following and repalce with data from chat server - refer to AF-561 */}\n {/* 97\n
\n \n
\n \n
\n {isTravellerDataAvailable ? (\n \n
\n ) : (\n emptyActiveTravellerCard()\n )}\n \n {travelerArriving}\n
\n \n {travelerDeparting}\n
\n \n {travelerTravelling}\n
\n \n
\n \n
\n {isTaskLoading ? (\n \n {totalTasksCount()}\n
\n \n {briefingTasks.map(\n item =>\n item.tasks.length > 0 && (\n
\n \n ) : (\n \n \n {item.workspace}\n \n
\n ),\n )}\n \n {briefingTaskRows(item.tasks)}\n
\n \n {emptyTaskCard()}\n
\n )}\n \n )}\n \n
\n );\n};\n\ndashboard.defaultProps = {\n userName: null,\n accountManagerFirstName: null,\n accountManagerLastName: null,\n accountManagerAvatar: null,\n tweets: [],\n};\n\ndashboard.propTypes = {\n userName: PropTypes.string,\n accountManagerFirstName: PropTypes.string,\n accountManagerLastName: PropTypes.string,\n accountManagerAvatar: PropTypes.string,\n profilesAddedKPI: PropTypes.shape({\n past: PropTypes.number,\n present: PropTypes.number,\n }).isRequired,\n searchesKPI: PropTypes.shape({\n past: PropTypes.number,\n present: PropTypes.number,\n }).isRequired,\n quotesKPI: PropTypes.shape({\n past: PropTypes.number,\n present: PropTypes.number,\n }).isRequired,\n bookingsKPI: PropTypes.shape({\n past: PropTypes.number,\n present: PropTypes.number,\n }).isRequired,\n travelerDeparting: PropTypes.number.isRequired,\n travelerArriving: PropTypes.number.isRequired,\n travelerTravelling: PropTypes.number.isRequired,\n tweets: PropTypes.arrayOf(\n PropTypes.shape({\n userName: PropTypes.string.isRequired,\n userHandle: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string.isRequired,\n mediaUrl: PropTypes.string.isRequired,\n tweetedAt: PropTypes.string.isRequired,\n }),\n ),\n travelNews: PropTypes.PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n teaser: PropTypes.string,\n url: PropTypes.string,\n image_url: PropTypes.shape({\n small: PropTypes.string,\n medium: PropTypes.string,\n large: PropTypes.string,\n }),\n }),\n ).isRequired,\n welltravelNews: PropTypes.PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n teaser: PropTypes.string,\n url: PropTypes.string,\n image_url: PropTypes.shape({\n small: PropTypes.string,\n medium: PropTypes.string,\n large: PropTypes.string,\n }),\n }),\n ).isRequired,\n};\n\nexport default dashboard;\n","/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React from 'react';\nimport { Link } from '@wtag/react-comp-lib';\nimport PropTypes from 'prop-types';\n\nconst LanguageSettings = props => {\n const { availableLocales, saveLocale } = props;\n\n return (\n \n
\n \n \n \n
\n \n
\n \n {I18n.t('components.dashboard.header', { userName })}\n
\n \n \n
\n \n \n
\n \n {accountManagerFirstName ? (\n accountManagerSection()\n ) : (\n
\n \n \n
\n )}\n \n
\n {/* Remove this when Promotional Space is implemented */}\n {/* \n \n {kpiCards()}\n \n
\n \n \n {briefingCard()}\n \n
\n \n \n \n
\n \n
\n {tweets.length > 0 ? (\n <>\n \n {tweets.map(tweet => (\n
\n \n \n ) : (\n emptySocialCard()\n )}\n \n
\n ))}\n \n \n \n
*/}\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n {allTravelNews}\n \n
\n \n
\n \n
\n \n
\n {onlyWelltravelNews}\n \n
\n {/* Remove this when Promotional Space is implemented */}\n {/* \n
\n \n
\n \n
\n \n \n \n
*/}\n \n
\n \n
\n );\n};\n\nLanguageSettings.propTypes = {\n availableLocales: PropTypes.arrayOf(\n PropTypes.shape({\n code: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n humanName: PropTypes.string.isRequired,\n }).isRequired,\n ).isRequired,\n saveLocale: PropTypes.func.isRequired,\n};\n\nexport default LanguageSettings;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport { I18nText, AvatarUpload } from '@wtag/react-comp-lib';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Modal from '@wtag/rcl-modal';\nimport httpClient from '../../../shared/libraries/httpClient';\nimport routes from '../../../shared/routes';\n\nconst AvatarModal = props => {\n const [modalOpen, setModalOpen] = useState(false);\n\n const { userId } = props;\n\n const saveAvatar = async image => {\n const formData = new FormData();\n formData.append('avatar', image);\n\n const { data } = await httpClient.put(\n routes.users.update({\n id: userId,\n }),\n formData,\n );\n\n if (data.error === null) {\n setModalOpen(false);\n window.location.reload(false);\n }\n };\n\n const onAvatarSave = image => {\n const file = new File([image], image.name, { type: image.type });\n saveAvatar(file);\n };\n\n return (\n <>\n - \n {availableLocales.map(availableLocale => (\n
- \n saveLocale(availableLocale.code)}>\n {availableLocale.humanName}\n \n \n ))}\n
\n
\n \n \n \n setModalOpen(false)}\n onKeyDown={() => setModalOpen(false)}\n role=\"presentation\"\n >\n
\n \n \n
\n \n setModalOpen(false)}\n />\n
\n \n
\n \n
\n \n
\n \n
\n \n {firstName} {lastName}\n
\n \n
\n \n
\n\n \n {canChangeSettings && (\n
\n )}\n \n \n
\n }\n >\n \n
\n \n {isEditingGeneral && (\n
\n \n
\n )}\n \n
\n \n \n
\n {isEditingGeneral ? (\n \n setLegalName(value)}\n placeholder={I18n.t(\n 'components.settings.sub_sections.legal_name',\n )}\n value={legalName}\n error={generalError.clientName}\n touched={true}\n isClearable={false}\n />\n
\n ) : (\n {legalName}
\n )}\n \n
\n {isEditingGeneral ? (\n \n {' '}\n setLegalAddress(value)}\n placeholder={I18n.t(\n 'components.settings.sub_sections.legal_address',\n )}\n value={legalAddress}\n error={generalError.clientAddress}\n touched={true}\n isClearable={false}\n />\n
\n ) : (\n {legalAddress}
\n )}\n \n \n
\n }\n >\n \n
\n \n {isEditing && (\n
\n \n
\n )}\n \n
\n \n \n
\n {isEditing ? (\n <>\n \n setFirstName(value)}\n placeholder={I18n.t(\n 'components.settings.sub_sections.first_name',\n )}\n value={firstName}\n error={error.firstName}\n touched={true}\n isClearable={false}\n />\n
\n \n setLastName(value)}\n placeholder={I18n.t(\n 'components.settings.sub_sections.last_name',\n )}\n value={lastName}\n error={error.lastName}\n touched={true}\n isClearable={false}\n />\n
\n \n ) : (\n {`${firstName} ${lastName}`}
\n )}\n \n
\n {isEditing ? (\n \n setEmailAddress(value)}\n placeholder={I18n.t(\n 'components.settings.sub_sections.email',\n )}\n value={emailAddress}\n error={error.email}\n touched={true}\n isClearable={false}\n />\n
\n ) : (\n {emailAddress}
\n )}\n \n \n setIsVisible(false)}\n content={\n onPersonalSettingsSave(value)}\n />\n }\n >\n
\n }\n >\n \n
\n \n
\n \n \n
\n \n {currentLanguage}\n
\n \n
\n \n {!props.signedInAsSuperAdmin && canChangeChannels && (\n \n
\n \n \n
\n }\n >\n \n
\n \n {isEditingPassword && (\n
\n \n
\n )}\n \n {!isEditingPassword && (\n
\n \n \n
\n )}\n {isEditingPassword ? (\n <>\n \n setPassword(value)}\n placeholder={I18n.t(\n 'components.settings.placeholders.password',\n )}\n type=\"password\"\n value={password}\n touched={true}\n />\n
\n \n setConfirmPassword(value)}\n placeholder={I18n.t(\n 'components.settings.placeholders.confirm_password',\n )}\n type=\"password\"\n value={confirmPassword}\n error={\n password !== confirmPassword &&\n I18n.t(\n 'components.settings.error.confirm_password',\n )\n }\n touched={true}\n />\n
\n \n ) : (\n \n
\n )}\n \n *********\n {passwordLastUpdatedAt && (\n \n {I18n.t(\n 'components.settings.sub_sections.last_updated',\n )}{' '}\n {' - '}\n
\n \n
\n \n
\n \n
\n \n
\n {is2faSetUp ? (\n \n {scheduledDowngrade ? (\n
\n )}\n \n \n \n );\n};\n\nSettings.defaultProps = {\n canChangeSettings: false,\n canChangeChannels: false,\n scheduledDowngrade: null,\n urls: {\n settings: '',\n },\n};\n\nSettings.propTypes = {\n affiliateId: PropTypes.number.isRequired,\n canChangeSettings: PropTypes.bool,\n canChangeChannels: PropTypes.bool,\n currentLanguage: PropTypes.string.isRequired,\n availableLocales: PropTypes.shape({\n code: PropTypes.string.isRequired,\n localeUrl: PropTypes.string.isRequired,\n humanName: PropTypes.string.isRequired,\n }).isRequired,\n userId: PropTypes.number.isRequired,\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n scheduledDowngrade: PropTypes.shape({\n id: PropTypes.number,\n plan: PropTypes.shape({}),\n downgradedFeatures: {\n lessWorkspaces: PropTypes.number,\n lessChannels: PropTypes.number,\n customDomainNotSupported: PropTypes.bool,\n lessPhoneSupport: PropTypes.bool,\n },\n downgradeAt: PropTypes.string,\n }),\n urls: PropTypes.shape({\n settings: PropTypes.string.isRequired,\n loginUrl: PropTypes.string.isRequired,\n }),\n};\n\nexport default Settings;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag, I18nText } from '@wtag/react-comp-lib';\n\nconst colorStatusMap = {\n Submitted: {\n colorType: 'warning',\n text: \n
\n ) : null}\n \n
\n \n
\n \n
\n \n setSelectedTicketId(supportTicket.id)}\n role=\"presentation\"\n >\n
\n \n
\n \n \n {' '}\n
\n \n
\n \n {supportTicket.subject}\n
\n \n \n
\n \n ) : (\n \n \n \n setModalOpen(false)}\n onKeyDown={() => setModalOpen(false)}\n role=\"presentation\"\n >\n
\n \n \n
\n \n {signedInAsSuperAdmin && (\n
\n \n
\n )}\n\n {signedInAsSuperAdmin && onBehalfOfUser && (\n \n
\n )}\n\n {signedInAsSuperAdmin && onBehalfOfUser && (\n \n
\n )}\n\n \n
\n\n \n
\n\n \n {I18n.t(\n 'components.support.ticket.placeholder.issue_with_label',\n )}\n
\n \n
\n \n
\n \n setModalOpen(false)}\n label={
\n \n
\n \n setLeftPanelShow(!leftPanelShow)}\n role=\"presentation\"\n >\n
\n \n
\n \n
\n {isFiltering && (\n \n
\n \n
\n \n
\n \n
\n \n
\n )}\n \n
\n \n
\n {signedInAsSuperAdmin && (\n \n
\n )}\n {signedInAsSuperAdmin && (\n \n
\n )}\n \n {supportTickets.map(supportTicket => (\n leftPanelShow && setLeftPanelShow(!leftPanelShow)}\n role=\"presentation\"\n >\n
\n ))}\n \n \n );\n};\n\nLeftPanel.defaultProps = {\n selectedTicketId: null,\n affiliateId: null,\n assigneeId: null,\n};\n\nLeftPanel.propTypes = {\n fetchTickets: PropTypes.func.isRequired,\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n supportTickets: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n selectedTicketId: PropTypes.number,\n setSelectedTicketId: PropTypes.func.isRequired,\n searchParam: PropTypes.string.isRequired,\n setSearchParam: PropTypes.func.isRequired,\n affiliateId: PropTypes.number,\n setAffiliateId: PropTypes.func.isRequired,\n superAdmins: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n assigneeId: PropTypes.number,\n setAssigneeId: PropTypes.func.isRequired,\n statuses: PropTypes.arrayOf(PropTypes.string).isRequired,\n setStatuses: PropTypes.func.isRequired,\n leftPanelShow: PropTypes.bool.isRequired,\n setLeftPanelShow: PropTypes.func.isRequired,\n setStartDate: PropTypes.func.isRequired,\n setEndDate: PropTypes.func.isRequired,\n};\n\nexport default LeftPanel;\n","const addLazyLoadingToImages = htmlString => {\n return htmlString.replace(/\n
\n \n
\n \n \n
\n \n \n {ticketCreatedBy &&\n ticketCreatedBy.superAdmin &&\n I18n.t('components.support.ticket.created_by', {\n name: ticketCreatedBy.name,\n })}\n \n
\n \n {humanReadableTimeStamp()}\n
\n \n {isInternalMessage && (\n \n
\n \n
\n \n \n );\n};\n\nMessageCard.propTypes = {\n fetchMessages: PropTypes.func.isRequired,\n setMessageToEdit: PropTypes.func.isRequired,\n setMessageToEditId: PropTypes.func.isRequired,\n selectedSupportTicketId: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]).isRequired,\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n message: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n body: PropTypes.string,\n createdAt: PropTypes.string,\n state: PropTypes.string,\n internal: PropTypes.bool,\n emailSendsIn: PropTypes.string,\n seenByClient: PropTypes.bool,\n emailSent: PropTypes.bool,\n user: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n avatar: PropTypes.string,\n loggedIn: PropTypes.bool,\n name: PropTypes.string,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n }),\n }).isRequired,\n ticketCreatedBy: PropTypes.shape({\n name: PropTypes.string,\n superAdmin: PropTypes.bool,\n }),\n};\n\nMessageCard.defaultProps = {\n ticketCreatedBy: null,\n};\n\nexport default MessageCard;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport { debounce } from 'lodash';\nimport TextEditor from '../TextEditor';\nimport routes from '../../../shared/routes';\nimport httpClient from '../../../shared/libraries/httpClient';\n\nconst MessageTyper = props => {\n const {\n selectedSupportTicketId,\n fetchTickets,\n fetchMessages,\n uncommittedMessage,\n uncommittedMessageId,\n signedInAsSuperAdmin,\n editing,\n setMessageToEdit,\n setMessageToEditId,\n } = props;\n\n const [message, setMessage] = useState('');\n const [attachmentIds, setAttachmentIds] = useState([]);\n const [inputError, setInputError] = useState(null);\n\n useEffect(() => {\n setMessage(uncommittedMessage);\n }, [uncommittedMessage]);\n\n const params = {\n support_ticket_message: {\n body: message,\n attachment_ids: attachmentIds,\n },\n };\n\n const saveUncommittedMessageWithDebounce = useRef(\n debounce(async (ticketId, text, id, attachmentIds) => {\n const paramsToPass = {\n support_ticket_message: {\n body: text,\n attachment_ids: attachmentIds,\n },\n };\n\n try {\n await httpClient.put(\n routes.support.message.update({\n support_ticket_id: ticketId,\n id,\n }),\n paramsToPass,\n );\n } catch (e) {\n const statusCode = e?.status || e?.response?.status;\n const errorMessage =\n statusCode === 422\n ? I18n.t('components.support.ticket.errors.invalid_data_error')\n : I18n.t('components.support.ticket.errors.generic_error');\n setInputError(errorMessage);\n }\n }, 1000),\n ).current;\n\n const saveNewMessage = async () => {\n saveUncommittedMessageWithDebounce.flush();\n\n const route = signedInAsSuperAdmin\n ? routes.support.message.saveDraft({\n support_ticket_id: selectedSupportTicketId,\n id: uncommittedMessageId,\n })\n : routes.support.message.send({\n support_ticket_id: selectedSupportTicketId,\n id: uncommittedMessageId,\n });\n\n const response = await httpClient.put(route, params);\n\n if (response.data.error === null) {\n fetchMessages().then(() => {\n setMessage('');\n });\n\n fetchTickets();\n }\n };\n\n const saveInternalMessage = async () => {\n const { data } = await httpClient.put(\n routes.support.message.saveInternal({\n support_ticket_id: selectedSupportTicketId,\n id: uncommittedMessageId,\n }),\n params,\n );\n\n if (data.error === null) {\n fetchMessages().then(() => {\n setMessage('');\n });\n\n fetchTickets();\n }\n };\n\n const updateMessage = async () => {\n const { data } = await httpClient.put(\n routes.support.message.update({\n support_ticket_id: selectedSupportTicketId,\n id: uncommittedMessageId,\n }),\n params,\n );\n\n if (data.error === null) {\n setMessageToEditId(null);\n setMessageToEdit(null);\n fetchMessages().then(() => {\n setMessage('');\n });\n }\n };\n\n const onEditorMessageChange = text => {\n setMessage(text);\n\n if (!editing) {\n saveUncommittedMessageWithDebounce(\n selectedSupportTicketId,\n text,\n uncommittedMessageId,\n attachmentIds,\n );\n }\n };\n\n const disableSubmitButton = () => {\n return !message?.replace(/<(?!img)[^>]+>|[\\s]+/g, '');\n };\n\n const handleAttachmentId = id => {\n setAttachmentIds(ids => [...ids, id]);\n };\n\n return (\n <>\n \n {(isScheduledMessage || isInternalMessage) && (\n
\n \n {message.seenByClient ? (\n
\n \n {editing ? (\n <>\n {\n setMessageToEdit(null);\n }}\n label={
\n \n );\n};\n\nMessageTyper.propTypes = {\n selectedSupportTicketId: PropTypes.number.isRequired,\n fetchTickets: PropTypes.func.isRequired,\n fetchMessages: PropTypes.func.isRequired,\n uncommittedMessage: PropTypes.string.isRequired,\n uncommittedMessageId: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]).isRequired,\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n editing: PropTypes.bool.isRequired,\n setMessageToEdit: PropTypes.func.isRequired,\n setMessageToEditId: PropTypes.func.isRequired,\n};\n\nexport default MessageTyper;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport IconButton from '@wtag/rcl-icon-button';\nimport { Avatar, I18nText } from '@wtag/react-comp-lib';\n\nimport SanitizedHTML from '../../../shared/components/SanitizedHTML';\nimport httpClient from '../../../shared/libraries/httpClient';\nimport routes from '../../../shared/routes';\n\nconst DraftMessage = props => {\n const {\n message,\n selectedSupportTicketId,\n fetchTickets,\n fetchMessages,\n setMessageToEdit,\n setMessageToEditId,\n setUncommittedMessage,\n } = props;\n\n const params = {\n support_ticket_message: {\n body: message.body,\n },\n };\n\n const { avatar, firstName, lastName, name } = message.user;\n\n const editMessage = () => {\n setMessageToEdit(message.body);\n setMessageToEditId(message.id);\n };\n\n const deleteMessage = async () => {\n const { data } = await httpClient.delete(\n routes.support.message.delete({\n support_ticket_id: selectedSupportTicketId,\n id: message.id,\n }),\n );\n\n if (data.error === null) {\n fetchMessages().then(() => {\n setUncommittedMessage('');\n });\n }\n };\n\n const scheduleMessage = async () => {\n const { data } = await httpClient.put(\n routes.support.message.schedule({\n support_ticket_id: selectedSupportTicketId,\n id: message.id,\n }),\n params,\n );\n\n if (data.error === null) {\n fetchMessages().then(() => {\n setUncommittedMessage('');\n });\n fetchTickets();\n }\n };\n\n return (\n \n
\n );\n};\n\nDraftMessage.propTypes = {\n message: PropTypes.shape({\n id: PropTypes.number.isRequired,\n body: PropTypes.string.isRequired,\n user: PropTypes.shape({\n avatar: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n id: PropTypes.number.isRequired,\n loggedIn: PropTypes.bool.isRequired,\n name: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n selectedSupportTicketId: PropTypes.number.isRequired,\n fetchTickets: PropTypes.func.isRequired,\n fetchMessages: PropTypes.func.isRequired,\n setMessageToEdit: PropTypes.func.isRequired,\n setMessageToEditId: PropTypes.func.isRequired,\n setUncommittedMessage: PropTypes.func.isRequired,\n};\n\nexport default DraftMessage;\n","import React, { useEffect, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport routes from '../../../shared/routes';\nimport httpClient from '../../../shared/libraries/httpClient';\n\nimport MessageCard from './MessageCard';\nimport MessageTyper from './MessageTyper';\nimport DraftMessage from './DraftMessage';\n\nconst MessageThread = props => {\n const [messages, setMessages] = useState([]);\n const [messageToEdit, setMessageToEdit] = useState(null);\n const [messageToEditId, setMessageToEditId] = useState(null);\n const [uncommittedMessage, setUncommittedMessage] = useState('');\n const [uncommittedMessageId, setUncommittedMessageId] = useState('');\n const {\n selectedSupportTicketId,\n ticketCreatedBy,\n fetchTickets,\n signedInAsSuperAdmin,\n } = props;\n const messageThreadRef = useRef(null);\n const previousDraftMessageCount = useRef(0);\n const previousInternalMessageCount = useRef(0);\n\n const fetchMessages = async ticketId => {\n const { data } = await httpClient.get(\n routes.support.ticketMessages({\n support_ticket_id: ticketId || selectedSupportTicketId,\n }),\n );\n\n const threadMessages = data.messages.filter(\n message => message.state !== 'uncommitted',\n );\n\n setMessages(threadMessages);\n setUncommittedMessageId(data?.uncommittedMessage?.id);\n\n return data?.uncommittedMessage?.body;\n };\n\n const draftMessage = messages.filter(message => message.state === 'draft');\n const internalMessage = messages.filter(message => message.internal);\n const hasDraftMessage = draftMessage.length > 0;\n const showDraft = () =>\n hasDraftMessage && !messageToEdit && signedInAsSuperAdmin;\n\n const scrollToBottomOfMessageThread = () => {\n const scrollToBottom =\n messageThreadRef.current.scrollHeight -\n messageThreadRef.current.clientHeight;\n messageThreadRef.current.scrollTo(0, scrollToBottom);\n };\n\n useEffect(() => {\n if (\n typeof selectedSupportTicketId !== 'undefined' &&\n selectedSupportTicketId !== null\n ) {\n fetchMessages()\n .then(message => {\n setUncommittedMessage(message || '');\n })\n .catch(() => {\n setUncommittedMessage('');\n });\n }\n }, [selectedSupportTicketId]);\n\n useEffect(() => {\n const previousAndNextDraftMessageCountEquals =\n previousDraftMessageCount.current === draftMessage.length;\n const previousAndNextInternalMessageCountEquals =\n previousInternalMessageCount.current === internalMessage.length;\n\n if (\n messageThreadRef.current &&\n (!previousAndNextDraftMessageCountEquals ||\n !previousAndNextInternalMessageCountEquals)\n ) {\n previousDraftMessageCount.current = draftMessage.length;\n previousInternalMessageCount.current = internalMessage.length;\n scrollToBottomOfMessageThread();\n }\n }, [messages]);\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n};\n\nMessageThread.defaultProps = {\n selectedSupportTicketId: null,\n ticketCreatedBy: null,\n};\n\nMessageThread.propTypes = {\n selectedSupportTicketId: PropTypes.number,\n ticketCreatedBy: PropTypes.shape({\n name: PropTypes.string,\n superAdmin: PropTypes.bool,\n }),\n fetchTickets: PropTypes.func.isRequired,\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n};\n\nexport default MessageThread;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport SelectBox from '@wtag/rcl-select-box';\nimport IconButton from '@wtag/rcl-icon-button';\nimport { I18nText } from '@wtag/react-comp-lib';\n\nimport httpClient from '../../../shared/libraries/httpClient';\nimport routes from '../../../shared/routes';\nimport selectBoxObjectMapper from '../../../shared/helper/selectBoxObjectMapper';\n\nimport TicketStatus from './TicketStatus';\n\nconst statusOptions = [\n { value: 'Resolved', label: 'Resolved' },\n { value: 'Ready', label: 'Ready' },\n { value: 'Open', label: 'Open' },\n { value: 'Submitted', label: 'Submitted' },\n];\n\nconst RightPanel = props => {\n const {\n supportTicket,\n fetchTickets,\n rightPanelShow,\n setRightPanelShow,\n } = props;\n\n const [assignee, setAssignee] = useState(null);\n const [status, setStatus] = useState(null);\n const [editAssignee, setEditAssignee] = useState(false);\n const [editStatus, setEditStatus] = useState(null);\n const updatedAt = new Date(supportTicket.updatedAt);\n const createdOn = new Date(supportTicket.createdAt);\n\n const updatedAtString = updatedAt.toLocaleString(I18n.locale, {\n hour: '2-digit',\n month: 'short',\n day: 'numeric',\n minute: '2-digit',\n hour12: false,\n year: 'numeric',\n });\n\n const createdOnString = createdOn.toLocaleString(I18n.locale, {\n hour: '2-digit',\n month: 'short',\n day: 'numeric',\n minute: '2-digit',\n hour12: false,\n year: 'numeric',\n });\n\n const handleEditAssignee = () => {\n setEditAssignee(true);\n };\n\n const closeEditAssignee = () => {\n setEditAssignee(false);\n };\n\n const handleEditStatus = () => {\n setEditStatus(true);\n };\n\n const closeEditStatus = () => {\n setEditStatus(false);\n };\n\n const closeAssigneeAndStatusEdit = () => {\n setEditAssignee(false);\n setEditStatus(false);\n };\n\n const changeTicketState = async () => {\n const { data } = await httpClient.patch(\n routes.support.state.changeTicketState({\n support_ticket_id: supportTicket.id,\n }),\n {\n state: status.toLowerCase(),\n },\n );\n\n if (data.error === null) {\n fetchTickets();\n closeEditStatus();\n }\n };\n\n const assignTicket = async () => {\n const { data } = await httpClient.patch(\n routes.support.tickets.assign({\n support_ticket_id: supportTicket.id,\n }),\n {\n support_ticket: { assigned_to_id: assignee },\n },\n );\n\n if (data.error === null) {\n fetchTickets();\n closeEditAssignee();\n }\n };\n\n useEffect(() => {\n if (supportTicket.state) {\n setStatus(supportTicket.state);\n }\n }, [supportTicket.state]);\n\n useEffect(() => {\n if (supportTicket.assignedTo !== null) {\n setAssignee(supportTicket.assignedTo.id);\n } else {\n setAssignee(null);\n }\n }, [supportTicket.assignedTo]);\n\n useEffect(() => {\n closeAssigneeAndStatusEdit();\n }, [supportTicket.id]);\n\n const assignTicketButtonLabel = supportTicket.assignedTo ? (\n \n {messages\n .filter(message => message.state !== 'draft')\n .map(message => (\n
\n {showDraft() ? (\n \n
\n )\n )}\n \n
\n );\n\n const assigneeDetailsSection = (\n <>\n \n
\n \n
\n \n setAssignee(option ? option.value : null)}\n maxMenuHeight={220}\n />\n
\n \n
\n \n
\n \n
\n \n {supportTicket.assignedTo ? (\n `${supportTicket.assignedTo.firstName} ${supportTicket.assignedTo.lastName}`\n ) : (\n
\n \n
\n \n );\n\n const statusDetailsSection = (\n <>\n \n
\n \n
\n \n
\n \n {!editStatus && (\n
\n \n );\n\n const editStatusSection = (\n \n
\n );\n\n return (\n \n
\n \n
\n \n setStatus(option ? option.value : null)}\n maxMenuHeight={220}\n isClearable={false}\n isSearchable={false}\n />\n
\n \n
\n \n
\n );\n};\n\nRightPanel.propTypes = {\n fetchTickets: PropTypes.func.isRequired,\n rightPanelShow: PropTypes.bool.isRequired,\n setRightPanelShow: PropTypes.func.isRequired,\n supportTicket: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n affiliate: PropTypes.shape({\n clientName: PropTypes.string,\n }),\n app: PropTypes.string.isRequired,\n createdBy: PropTypes.shape({\n name: PropTypes.string.isRequired,\n }).isRequired,\n createdAt: PropTypes.string.isRequired,\n updatedAt: PropTypes.string.isRequired,\n state: PropTypes.string.isRequired,\n subject: PropTypes.string.isRequired,\n assignedTo: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n }),\n assigneeOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n ).isRequired,\n }).isRequired,\n};\n\nexport default RightPanel;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport ClassNames from 'classnames';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport routes from '../../../shared/routes';\nimport httpClient from '../../../shared/libraries/httpClient';\nimport LeftPanel from './LeftPanel';\nimport MessageThread from './MessageThread';\nimport RightPanel from './RightPanel';\n\nconst Support = props => {\n const { signedInAsSuperAdmin, superAdmins } = props;\n const [searchParam, setSearchParam] = useState('');\n const [supportTickets, setSupportTickets] = useState([]);\n const [selectedTicketId, setSelectedTicketId] = useState(null);\n const [affiliateId, setAffiliateId] = useState(null);\n const [assigneeId, setAssigneeId] = useState(null);\n const [statuses, setStatuses] = useState([]);\n const [startDate, setStartDate] = useState(null);\n const [endDate, setEndDate] = useState(null);\n const [leftPanelShow, setLeftPanelShow] = useState(false);\n const [rightPanelShow, setRightPanelShow] = useState(false);\n\n const fetchTickets = async () => {\n const { data } = await httpClient.get(\n routes.support.tickets.list({\n q: searchParam,\n affiliate_id: affiliateId,\n assigned_to_id: assigneeId,\n start_date: startDate,\n end_date: endDate,\n 'statuses[]': statuses,\n }),\n );\n setSupportTickets(data.supportTickets);\n };\n\n useEffect(() => {\n fetchTickets();\n }, [searchParam, affiliateId, assigneeId, statuses, startDate, endDate]);\n\n const selectedSupportTicket = supportTickets.filter(\n supportTicket => supportTicket.id === selectedTicketId,\n );\n\n const supportTicketToShow =\n selectedSupportTicket.length > 0 ? selectedSupportTicket[0] : null;\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n {supportTicket.subject}\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {supportTicket.app}\n
\n \n
\n \n {editAssignee ? editAssigneeSection : assigneeDetailsSection}\n
\n \n
\n \n {editStatus ? editStatusSection : statusDetailsSection}\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n {supportTicketToShow && (\n \n setLeftPanelShow(!leftPanelShow)}\n role=\"presentation\"\n >\n
\n \n
\n )}\n \n \n {withLink && (\n
\n);\n\nWorkspaceTableText.defaultProps = {\n withLink: '',\n title: '',\n};\n\nWorkspaceTableText.propTypes = {\n title: PropTypes.string,\n label: PropTypes.node.isRequired,\n withLink: PropTypes.string,\n};\n\nexport default WorkspaceTableText;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst WorkspaceCard = ({ children }) => (\n \n {withLink}\n \n \n 
\n \n \n
\n )}\n {title && {title}
}\n {label}
\n {children}
\n);\n\nWorkspaceCard.propTypes = {\n children: PropTypes.node.isRequired,\n};\n\nexport default WorkspaceCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport WorkspaceTableText from './WorkspaceTableText';\nimport WorkspaceTag from '../WorkspaceTag';\nimport WorkspaceCard from '../WorkspaceCard';\n\nconst WorkspaceTableRow = ({\n workspace,\n index,\n toggleDeletable,\n toggleEditable,\n actionDisabled,\n}) => {\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n setWorkspaceName(value)}\n placeholder={I18n.t('components.workspace.placeholder.name')}\n error={error.name}\n touched={touched}\n />\n
\n \n
\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n {workspaces.length > 0 ? (\n workspaces.map((workspace, index) => (\n \n \n )}\n
\n );\n};\n\nWorkspaceTable.defaultProps = {\n rowActionDisabled: false,\n};\n\nWorkspaceTable.propTypes = {\n workspaces: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n identifier: PropTypes.string.isRequired,\n agentUrl: PropTypes.string.isRequired,\n }),\n ).isRequired,\n affiliateId: PropTypes.number.isRequired,\n updateWorkspace: PropTypes.func.isRequired,\n modifyWorkspaces: PropTypes.func.isRequired,\n fetchWorkspaces: PropTypes.func.isRequired,\n deleteWorkspace: PropTypes.bool.isRequired,\n rowActionDisabled: PropTypes.bool,\n};\n\nexport default WorkspaceTable;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { debounce } from 'throttle-debounce';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Alert from '@wtag/rcl-alert';\nimport Link from '@wtag/rcl-link';\nimport ConfirmationModal from '../../../shared/components/ConfirmationModal';\nimport PaginationWithTranslation from '../../../shared/components/Pagination/PaginationWithTranslation';\nimport routes from '../../../shared/routes';\nimport httpClient from '../../../shared/libraries/httpClient';\nimport WorkspaceTable from './WorkspaceTable';\nimport WorkSpaceModal from './WorkSpaceModal';\nimport CancelScheduledDowngradeModule from '../Billing/Subcription/CancelScheduledDowngradeModule';\n\nconst Workspaces = ({\n affiliateId,\n workspacesLimitReached,\n scheduledDowngrade,\n urls,\n}) => {\n const [workspaces, setWorkspaces] = useState({});\n const [creatable, setCreatable] = useState(false);\n const [searchParam, setSearchParam] = useState('');\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPage] = useState(1);\n const [workspaceName, setWorkspaceName] = useState('');\n const [workspaceIdentifier, setWorkspaceIdentifier] = useState('');\n const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(\n false,\n );\n const [\n isWorkspaceCreationModalOpen,\n setIsWorkspaceCreationModalOpen,\n ] = useState(false);\n const [\n isWorkspaceDeletionModalOpen,\n setIsWorkspaceDeletionModalOpen,\n ] = useState(false);\n const ACTIVE_STATE = 'active';\n\n const isConfirmationModalOpen =\n isWorkspaceDeletionModalOpen || isWorkspaceCreationModalOpen;\n const confirmationModalSubheaderText = isWorkspaceCreationModalOpen ? (\n \n {renderRow(workspace, index)}\n
\n ))\n ) : (\n \n
\n \n
\n \n {\n setCurrentPage(value);\n fetchWorkspaces(value, searchParam);\n }}\n />\n
\n );\n};\n\nWorkspaces.defaultProps = {\n urls: {\n plans: '',\n workspaces: '',\n },\n scheduledDowngrade: null,\n};\n\nWorkspaces.propTypes = {\n affiliateId: PropTypes.number.isRequired,\n workspacesLimitReached: PropTypes.bool.isRequired,\n scheduledDowngrade: PropTypes.shape({\n id: PropTypes.number,\n plan: PropTypes.shape({}),\n downgradedFeatures: {\n lessWorkspaces: PropTypes.number,\n lessChannels: PropTypes.number,\n customDomainNotSupported: PropTypes.bool,\n lessPhoneSupport: PropTypes.bool,\n },\n downgradeAt: PropTypes.string,\n }),\n urls: PropTypes.shape({\n plans: PropTypes.string,\n workspaces: PropTypes.string,\n }),\n};\n\nexport default Workspaces;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport Card from '@wtag/rcl-card';\nimport IconButton from '@wtag/rcl-icon-button';\nimport { Avatar, I18nText } from '@wtag/react-comp-lib';\nimport Alert from '@wtag/rcl-alert';\nimport EditTable from './EditTable';\nimport DateTime from '../DateTime';\nimport routes from '../../../shared/routes';\nimport ConfirmationModal from '../../../shared/components/ConfirmationModal';\n\nconst ListTable = props => {\n const [resendInProgress, setResendInProgress] = useState({});\n const [verificationInProgress, setVerificationInProgress] = useState({});\n const [alertType, setAlertType] = useState('success');\n const [deleteInProgress, setDeleteInProgress] = useState({});\n const [reactivateInProgress, setReactivateInProgress] = useState({});\n const [flashText, setFlashText] = useState('');\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [userToDelete, setUserToDelete] = useState(null);\n\n const {\n users,\n affiliateId,\n fetchUsers,\n displayInvites,\n resendInvite,\n deleteUser,\n reactivateUser,\n permissionOptions,\n permissionTemplateOptions,\n currentUserId,\n verifyEmail,\n reverifyEmail,\n fetchUsersByAffiliate,\n } = props;\n\n const mapUserTeams = teams =>\n teams.map(team => ({\n value: team.id,\n label: team.name,\n }));\n\n const resetUserListsForVerificationSuccess = user => {\n setVerificationInProgress(prevState => ({\n ...prevState,\n [user.id]: false,\n }));\n setFlashText(\n I18n.t('components.user.actions.verified', {\n name: user.name,\n }),\n );\n setAlertType('success');\n };\n\n const resetUserListsForVerificationFailure = (user, error) => {\n setVerificationInProgress(prevState => ({\n ...prevState,\n [user.id]: false,\n }));\n setFlashText(error);\n fetchUsersByAffiliate();\n setAlertType('danger');\n };\n\n const processVerification = (user, reverification = false) => {\n setFlashText('');\n setVerificationInProgress(prevState => ({\n ...prevState,\n [user.id]: true,\n }));\n\n let verificationAction;\n if (reverification) {\n verificationAction = reverifyEmail;\n } else {\n verificationAction = verifyEmail;\n }\n verificationAction(user.id)\n .then(({ data }) => {\n if (data.error === null) {\n resetUserListsForVerificationSuccess(user);\n }\n })\n .catch(({ response }) => {\n if (response.status === 422) {\n resetUserListsForVerificationFailure(user, response.data.error);\n }\n });\n };\n\n const processResendingInvitation = user => {\n setFlashText('');\n setResendInProgress(prevState => ({\n ...prevState,\n [user.id]: true,\n }));\n resendInvite(user.id).then(() => {\n setResendInProgress(prevState => ({\n ...prevState,\n [user.id]: false,\n }));\n setFlashText(\n I18n.t('components.user.status.resend_invite_successful', {\n name: user.name,\n }),\n );\n setAlertType('success');\n });\n };\n\n const onUserDelete = user => {\n setFlashText('');\n setDeleteInProgress(prevState => ({\n ...prevState,\n [user.id]: true,\n }));\n deleteUser(user.id).then(({ data }) => {\n setFlashText(data.message);\n setAlertType('success');\n setDeleteInProgress(prevState => ({\n ...prevState,\n [user.id]: false,\n }));\n });\n };\n\n const onUserReactivate = user => {\n setFlashText('');\n setReactivateInProgress(prevState => ({\n ...prevState,\n [user.id]: true,\n }));\n reactivateUser(user.id).then(({ data }) => {\n setFlashText(data.message);\n setAlertType('success');\n setReactivateInProgress(prevState => ({\n ...prevState,\n [user.id]: false,\n }));\n });\n };\n\n const handleUserDelete = user => {\n setUserToDelete(user);\n setIsModalOpen(true);\n };\n\n const handleConfirmDelete = () => {\n if (userToDelete) {\n onUserDelete(userToDelete);\n }\n\n setIsModalOpen(false);\n setUserToDelete(null);\n };\n\n const handleRejectDelete = () => {\n setIsModalOpen(false);\n setUserToDelete(null);\n };\n\n return (\n \n setShowCreateWorkspaceModal(false)}\n title={\n
\n {scheduledDowngrade ? (\n \n
\n ) : null}\n {workspacesLimitReached ? (\n \n \n
\n ) : null}\n \n \n {I18n.t('components.billing.plan.link_view')}\n \n
\n \n \n {I18n.t('components.workspace.workspace_limit_alert_text')}\n
\n \n
\n \n \n \n {flashText}\n \n\n {users.length > 0 ? (\n <>\n \n
\n );\n};\n\nListTable.defaultProps = {\n displayInvites: false,\n permissionTemplateOptions: [],\n};\n\nListTable.propTypes = {\n users: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n avatar: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n email: PropTypes.string.isRequired,\n teamsAsSentence: PropTypes.string.isRequired,\n lastActive: PropTypes.string.isRequired,\n deactivated: PropTypes.bool.isRequired,\n verifiable: PropTypes.bool,\n reVerifiable: PropTypes.bool,\n }).isRequired,\n ).isRequired,\n resendInvite: PropTypes.func.isRequired,\n verifyEmail: PropTypes.func.isRequired,\n reverifyEmail: PropTypes.func.isRequired,\n deleteUser: PropTypes.func.isRequired,\n reactivateUser: PropTypes.func.isRequired,\n displayInvites: PropTypes.bool,\n fetchUsersByAffiliate: PropTypes.func.isRequired,\n fetchUsers: PropTypes.func.isRequired,\n affiliateId: PropTypes.number.isRequired,\n permissionOptions: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string))\n .isRequired,\n permissionTemplateOptions: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.string.isRequired,\n permissions: PropTypes.arrayOf(PropTypes.string).isRequired,\n }),\n ),\n currentUserId: PropTypes.number.isRequired,\n};\n\nexport default ListTable;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport ClassNames from 'classnames';\nimport Popover from '@wtag/rcl-popover';\nimport Button from '@wtag/rcl-button';\nimport { CheckBox } from '@wtag/react-comp-lib';\n\nconst CheckBoxFilter = props => {\n const { label, options, onChange } = props;\n const [isVisible, setIsVisible] = useState(false);\n const [activeOptions, setActiveOptions] = useState([]);\n\n const labelText = activeOptions.length\n ? activeOptions.map((option, index) => (\n <>\n {option.label}\n {index < activeOptions.length - 1 && ', '}\n \n ))\n : label;\n\n const optionChecked = selectedOption =>\n activeOptions.some(option => option.value === selectedOption.value);\n\n const handleSelectedOption = selectedOption => {\n // copy the state\n let activeOptionsCopy = activeOptions.slice();\n // check if selected option is already present in the state\n if (optionChecked(selectedOption)) {\n // if yes, then filter out the entry\n activeOptionsCopy = activeOptionsCopy.filter(\n option => option.value !== selectedOption.value,\n );\n } else {\n // if not, push it in the state\n activeOptionsCopy.push(selectedOption);\n }\n\n setActiveOptions(activeOptionsCopy);\n onChange(activeOptionsCopy);\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {!displayInvites && (\n \n
\n )}\n {displayInvites && (\n \n
\n )}\n {!displayInvites && (\n \n
\n )}\n \n
\n \n {users.map(user => (\n \n \n ))}\n
\n \n ) : (\n \n
\n \n
\n \n
\n \n {user.name}\n
\n \n
\n \n
\n \n {displayInvites && (\n
\n \n {user.email}\n
\n \n
\n \n {user.teamsAsSentence || (\n
\n {!displayInvites && (\n \n
\n \n {user.lastActive ? (\n
\n )}\n {displayInvites && (\n \n
\n \n
\n )}\n {!displayInvites && (\n \n
\n \n {user.deactivated ? (\n
\n )}\n \n
\n \n
\n )}\n \n setIsVisible(false)}\n direction=\"bottom-right\"\n content={\n setIsVisible(!isVisible)}\n />\n \n
\n );\n};\n\nCheckBoxFilter.defaultProps = {\n label: 'Filter Menu',\n options: [],\n};\n\nCheckBoxFilter.propTypes = {\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n options: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.node,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n }),\n ),\n onChange: PropTypes.func.isRequired,\n};\n\nexport default CheckBoxFilter;\n","import React, { useEffect, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport {\n BreadcrumbItem,\n Breadcrumbs,\n I18nText,\n SortingPill,\n CheckBoxFilter as RCLCheckBoxFilter,\n} from '@wtag/react-comp-lib';\nimport { debounce } from 'throttle-debounce';\nimport PaginationWithTranslation from '../../../shared/components/Pagination/PaginationWithTranslation';\nimport httpClient from '../../../shared/libraries/httpClient';\nimport routes from '../../../shared/routes';\nimport ListTable from './ListTable';\nimport UserModal from './UserModal';\nimport CheckBoxFilter from '../../../shared/components/Filters/CheckBoxFilter';\n\nconst UserIndex = props => {\n const {\n currentUserId,\n permissionTemplateOptions,\n permissionOptions,\n urls,\n displayInvites,\n userAffiliateId,\n } = props;\n\n const [searchParam, setSearchParam] = useState('');\n const [users, setUsers] = useState({});\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n const [alphabetical, setAlphabetical] = useState(null);\n const [lastSeen, setLastSeen] = useState(null);\n\n const [statuses, setStatuses] = useState([]);\n const [teams, setTeams] = useState([]);\n const [selectedTeams, setSelectedTeams] = useState([]);\n const [teamIds, setTeamIds] = useState([]);\n\n const fetchUsers = async (\n page,\n searchParam,\n alphabetical,\n lastSeen,\n statuses,\n teamIds,\n ) => {\n let column;\n let direction;\n let url;\n\n if (alphabetical) {\n column = 'first_name';\n direction = alphabetical;\n } else if (lastSeen) {\n column = 'last_login';\n direction = lastSeen;\n }\n\n if (displayInvites) {\n url = routes.users.listInvites;\n } else {\n url = routes.users.list;\n }\n const { data } = await httpClient.get(\n url({\n q: searchParam,\n page,\n affiliate_id: userAffiliateId,\n column,\n direction,\n 'state': statuses,\n 'teams[]': teamIds,\n }),\n );\n setUsers(prevState => {\n const newState = { ...prevState };\n newState[userAffiliateId] = data.users;\n return newState;\n });\n if (typeof data.pagination !== 'undefined') {\n setCurrentPage(data.pagination.currentPage);\n setTotalPages(data.pagination.totalPages);\n }\n };\n\n const fetchUsersByAffiliateWithDebounce = useRef(\n debounce(\n 500,\n false,\n (\n currentPage,\n searchParam,\n alphabetical,\n lastSeen,\n statuses,\n teamIds,\n ) => {\n fetchUsers(\n currentPage[userAffiliateId],\n searchParam,\n alphabetical,\n lastSeen,\n statuses,\n teamIds,\n );\n },\n ),\n ).current;\n\n const [teamSearchParam, setTeamSearchParam] = useState('');\n const fetchTeams = debounce(500, false, async inputValue => {\n if (inputValue.length > 1) {\n const { data } = await httpClient.get(\n routes.teams.list({ q: inputValue }),\n );\n\n const teamOptions = data.teams.map(team => ({\n label: team.name,\n value: team.id,\n }));\n setTeams(teamOptions);\n }\n });\n\n const teamSearchHandler = (param, value) => {\n setTeamSearchParam(param);\n fetchTeams(value);\n };\n\n const onTeamsChange = newSelectedTeam => {\n const remainingTeams = [...selectedTeams];\n\n if (remainingTeams.includes(newSelectedTeam)) {\n const indexOfNewSelectedTeam = selectedTeams.indexOf(newSelectedTeam);\n remainingTeams.splice(indexOfNewSelectedTeam, 1);\n } else {\n remainingTeams.push(newSelectedTeam);\n }\n\n setSelectedTeams(remainingTeams);\n setTeamIds(remainingTeams.map(team => team.value));\n };\n\n const setAlphabeticalSortOrder = () => {\n if (alphabetical === null) {\n setAlphabetical('up');\n } else if (alphabetical === 'up') {\n setAlphabetical('down');\n } else {\n setAlphabetical(null);\n }\n setLastSeen(null);\n };\n\n const setLastSeenSortOrder = () => {\n if (lastSeen === null) {\n setLastSeen('up');\n } else if (lastSeen === 'up') {\n setLastSeen('down');\n } else {\n setLastSeen(null);\n }\n setAlphabetical(null);\n };\n\n useEffect(() => {\n fetchUsers();\n }, []);\n\n useEffect(() => {\n fetchUsersByAffiliateWithDebounce(\n currentPage,\n searchParam,\n alphabetical,\n lastSeen,\n statuses,\n teamIds,\n );\n }, [searchParam, alphabetical, lastSeen, statuses, teamIds]);\n\n const fetchUsersByAffiliate = () => {\n fetchUsersByAffiliateWithDebounce(\n currentPage,\n searchParam,\n alphabetical,\n lastSeen,\n statuses,\n teamIds,\n );\n };\n\n const onStatusFilterChange = selectedOption => {\n setStatuses(selectedOption && selectedOption.map(status => status.value));\n };\n\n const statusOptions = [\n {\n label: - \n {options.map(option => (\n
\n
\n \n
\n \n
\n {displayInvites && (\n \n \n \n \n \n \n \n
\n )}\n \n
\n \n
\n \n setSearchParam(value)}\n preIcon={
\n \n \n \n {displayInvites ? (\n
\n \n
\n )}\n {!displayInvites && (\n \n \n
\n }\n options={statusOptions}\n onChange={onStatusFilterChange}\n />\n \n teamSearchHandler(p, e)}\n searchParam={teamSearchParam}\n options={teams}\n label={\n
\n )}\n \n
\n }\n selectedOptions={selectedTeams}\n />\n \n {\n setCurrentPage(value);\n fetchUsers(\n value,\n searchParam,\n alphabetical,\n lastSeen,\n statuses,\n teamIds,\n displayInvites,\n );\n }}\n />\n
\n\n \n );\n};\n\nUserIndex.defaultProps = {\n permissionTemplateOptions: [],\n displayInvites: false,\n};\n\nUserIndex.propTypes = {\n displayInvites: PropTypes.bool,\n userAffiliateId: PropTypes.number.isRequired,\n urls: PropTypes.shape({\n users: PropTypes.string.isRequired,\n invites: PropTypes.string.isRequired,\n teams: PropTypes.string.isRequired,\n }).isRequired,\n permissionOptions: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string))\n .isRequired,\n permissionTemplateOptions: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.string.isRequired,\n permissions: PropTypes.arrayOf(PropTypes.string).isRequired,\n }),\n ),\n currentUserId: PropTypes.number.isRequired,\n};\n\nexport default UserIndex;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { debounce } from 'throttle-debounce';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport SelectBox from '@wtag/rcl-select-box';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Modal from '@wtag/rcl-modal';\nimport httpClient from '../../../shared/libraries/httpClient';\nimport routes from '../../../shared/routes';\n\nconst TeamModal = props => {\n const {\n signedInAsSuperAdmin,\n currentUsersAffiliateId,\n fetchTeamsByAffiliates,\n isNewRecord,\n teamInitialAttributes,\n buttonText,\n buttonClass,\n header,\n } = props;\n\n const [modalOpen, setModalOpen] = useState(false);\n const [name, setName] = useState(teamInitialAttributes.name);\n const [affiliate, setAffiliate] = useState(teamInitialAttributes.affiliate);\n const [users, setUsers] = useState(teamInitialAttributes.users);\n const [affiliatesList, setAffiliatesList] = useState([]);\n const [usersList, setUsersList] = useState([]);\n const [error, setError] = useState({});\n\n const fetchUsers = debounce(500, async inputValue => {\n if (inputValue.length > 1) {\n let requestRoute;\n\n if (signedInAsSuperAdmin) {\n requestRoute = routes.users.list({\n q: inputValue,\n affiliate_id: affiliate.value,\n });\n } else {\n requestRoute = routes.users.list({\n q: inputValue,\n affiliate_id: currentUsersAffiliateId,\n });\n }\n const { data } = await httpClient.get(requestRoute);\n\n const users = data.users.map(user => ({\n label: user.name,\n value: user.id,\n }));\n setUsersList(users);\n }\n });\n\n const fetchAffiliates = debounce(500, async inputValue => {\n if (inputValue.length > 1) {\n const { data } = await httpClient.get(\n routes.affiliates.list({ q: inputValue }),\n );\n\n const affiliates = data.affiliates.map(affiliate => ({\n label: affiliate.clientName,\n value: affiliate.id,\n }));\n setAffiliatesList(affiliates);\n }\n });\n\n const onAffiliateChange = selectedOption => {\n setAffiliate(selectedOption);\n };\n\n const onUserChange = selectedOptions => {\n setUsers(selectedOptions);\n };\n\n const onSubmitForm = async () => {\n let affiliateId;\n if (signedInAsSuperAdmin) {\n affiliateId = affiliate && affiliate.value;\n } else {\n affiliateId = currentUsersAffiliateId;\n }\n\n const teamParams = {\n name,\n affiliate_id: affiliateId,\n user_ids: (users && users.map(user => user.value)) || [],\n };\n\n let requestRoute;\n\n if (!isNewRecord) {\n const teamId = teamInitialAttributes.id;\n requestRoute = httpClient.put(\n routes.teams.update({ id: teamId }),\n teamParams,\n );\n } else {\n requestRoute = httpClient.post(routes.teams.create(), teamParams);\n }\n\n try {\n const { data } = await requestRoute;\n\n if (data.error === null) {\n setModalOpen(false);\n fetchTeamsByAffiliates();\n }\n } catch (error) {\n const response = error.response;\n if (response && response.status === 422) {\n setError(response.data.error);\n } else {\n throw error;\n }\n }\n };\n\n return (\n <>\n \n {header} \n setModalOpen(false)}\n onKeyDown={() => setModalOpen(false)}\n role=\"presentation\"\n >\n
\n \n \n
\n \n setName(value)}\n placeholder={I18n.t('components.team.form.placeholders.name')}\n error={error.name}\n touched={true}\n isClearable={false}\n />\n
\n {signedInAsSuperAdmin && (\n \n
\n )}\n\n \n
\n \n
\n \n
\n\n \n \n \n {flashText}\n \n {teams.length > 0 ? (\n <>\n \n
\n );\n};\n\nListTable.defaultProps = {\n sortDirection: null,\n};\n\nListTable.propTypes = {\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n currentUsersAffiliateId: PropTypes.number.isRequired,\n fetchTeamsByAffiliates: PropTypes.func.isRequired,\n teams: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n membersCount: PropTypes.number,\n affiliate: PropTypes.shape({\n id: PropTypes.number,\n clientName: PropTypes.string,\n }),\n users: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n avatar: PropTypes.string,\n name: PropTypes.string,\n email: PropTypes.string,\n teamsAsSentence: PropTypes.string,\n lastActive: PropTypes.string,\n deactivated: PropTypes.bool,\n }),\n ),\n }),\n ).isRequired,\n affiliateId: PropTypes.number.isRequired,\n searchParam: PropTypes.string.isRequired,\n sortDirection: PropTypes.string,\n currentPage: PropTypes.number.isRequired,\n totalPages: PropTypes.number.isRequired,\n setCurrentPage: PropTypes.func.isRequired,\n fetchTeams: PropTypes.func.isRequired,\n deleteTeam: PropTypes.func.isRequired,\n};\n\nexport default ListTable;\n","import React, { useEffect, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { debounce } from 'throttle-debounce';\n\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport {\n BreadcrumbItem,\n Breadcrumbs,\n I18nText,\n SortingPill,\n} from '@wtag/react-comp-lib';\n\nimport PaginationWithTranslation from '../../../shared/components/Pagination/PaginationWithTranslation';\nimport httpClient from '../../../shared/libraries/httpClient';\nimport routes from '../../../shared/routes';\n\nimport ListTable from './ListTable';\nimport TeamModal from './TeamModal';\n\nconst TeamIndex = props => {\n const [affiliates, setAffiliates] = useState([]);\n const [searchParam, setSearchParam] = useState('');\n const [sortDirection, setSortDirection] = useState(null);\n const [currentAffiliatePage, setCurrentAffiliatePage] = useState(1);\n const [totalAffiliatePages, setTotalAffiliatePage] = useState(null);\n\n const [teams, setTeams] = useState({});\n const [currentPage, setCurrentPage] = useState({});\n const [totalPages, setTotalPages] = useState({});\n\n const { signedInAsSuperAdmin, currentUsersAffiliateId, urls } = props;\n\n const teamInitialAttributes = {\n name: null,\n affiliate: null,\n users: [],\n };\n\n const fetchAffiliates = async page => {\n const { data } = await httpClient.get(routes.affiliates.list({ page }));\n setAffiliates(data.affiliates);\n if (typeof data.pagination !== 'undefined') {\n setCurrentAffiliatePage(data.pagination.currentPage);\n setTotalAffiliatePage(data.pagination.totalPages);\n }\n data.affiliates.forEach(affiliate => {\n setTeams(prevState => {\n const newState = { ...prevState };\n newState[affiliate.id] = [];\n return newState;\n });\n setCurrentPage(prevState => {\n const newState = { ...prevState };\n newState[affiliate.id] = 1;\n return newState;\n });\n setTotalPages(prevState => {\n const newState = { ...prevState };\n newState[affiliate.id] = null;\n return newState;\n });\n });\n };\n\n const fetchTeams = async (page, searchParam, affiliateId, direction) => {\n const { data } = await httpClient.get(\n routes.teams.list({\n q: searchParam,\n page,\n affiliate_id: affiliateId,\n direction,\n }),\n );\n\n setTeams(prevState => {\n const newState = { ...prevState };\n newState[affiliateId] = data.teams;\n return newState;\n });\n\n if (typeof data.pagination !== 'undefined') {\n setCurrentPage(prevState => {\n const newState = { ...prevState };\n newState[affiliateId] = data.pagination.currentPage;\n return newState;\n });\n setTotalPages(prevState => {\n const newState = { ...prevState };\n newState[affiliateId] = data.pagination.totalPages;\n return newState;\n });\n }\n };\n\n const fetchTeamsByAffiliateWithDebounce = useRef(\n debounce(500, (affiliates, currentPage, searchParam, direction) => {\n affiliates.forEach(affiliate => {\n fetchTeams(\n currentPage[affiliate.id],\n searchParam,\n affiliate.id,\n direction,\n );\n });\n }),\n ).current;\n\n const fetchTeamsByAffiliates = () => {\n fetchTeamsByAffiliateWithDebounce(\n affiliates,\n currentPage,\n searchParam,\n sortDirection,\n );\n };\n\n const onSortDirectionChange = () => {\n if (sortDirection === null) {\n setSortDirection('up');\n } else if (sortDirection === 'up') {\n setSortDirection('down');\n } else {\n setSortDirection(null);\n }\n };\n\n useEffect(() => {\n fetchAffiliates();\n }, []);\n\n useEffect(() => {\n fetchTeamsByAffiliates();\n }, [affiliates, searchParam, sortDirection]);\n\n const deleteTeam = async teamId => {\n const response = await httpClient.delete(routes.teams.destroy({ teamId }));\n fetchTeamsByAffiliates();\n return response;\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {teams.map(team => (\n \n \n ))}\n
\n \n ) : (\n \n
\n \n
\n \n {team.id}\n
\n \n
\n \n {team.name}\n
\n \n
\n \n {team.membersCount}\n
\n \n
\n \n
\n \n
\n )}\n \n {\n setCurrentPage(prevState => {\n const newState = { ...prevState };\n newState[affiliateId] = value;\n return newState;\n });\n fetchTeams(value, searchParam, affiliateId, sortDirection);\n }}\n />\n
\n \n
\n );\n};\n\nTeamIndex.propTypes = {\n signedInAsSuperAdmin: PropTypes.bool.isRequired,\n currentUsersAffiliateId: PropTypes.number.isRequired,\n urls: PropTypes.shape({\n users: PropTypes.string,\n teams: PropTypes.string,\n }).isRequired,\n};\n\nexport default TeamIndex;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ClassNames from 'classnames';\nimport { I18nText, BreadcrumbItem, Breadcrumbs } from '@wtag/react-comp-lib';\nimport Link from '@wtag/rcl-link';\nimport newsIcon from 'affiliateIcons/news-placeholder.svg';\nimport newspaperIcon from 'affiliateIcons/newspaper.svg';\nimport DateTime from '../DateTime';\nimport SanitizedHTML from '../../../shared/components/SanitizedHTML';\n\nconst NewsDetails = ({ isTravelNews, news, urls }) => {\n const image =\n news && news.image_urls.medium ? news.image_urls.medium : newsIcon;\n const header = isTravelNews ? (\n \n
\n \n
\n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n setSearchParam(value)}\n preIcon={
\n \n \n
\n \n
\n \n {affiliates.map(affiliate => (\n \n {signedInAsSuperAdmin && (\n \n ))}\n {signedInAsSuperAdmin && (\n {\n setCurrentAffiliatePage(value);\n fetchAffiliates(value);\n }}\n />\n )}\n
\n \n {affiliate.clientName}\n
\n )}\n \n
\n {news ? (\n {header}
\n \n \n \n \n {header} \n \n \n \n
\n {news.title}
\n \n
\n \n {isTravelNews && news.author && (\n <>\n
\n
\n {news.author}
\n \n )}\n \n
\n \n \n \n
\n \n
\n \n ) : (\n \n
\n \n {isTravelNews && news.author && (\n <>\n
\n
\n {news.author}
\n \n )}\n \n
\n \n \n
\n \n
\n {news.external_link && (\n <>\n \n
\n \n \n {news.external_link}\n \n
\n \n
\n \n \n
\n \n )}\n \n
\n )}\n \n );\n};\n\nNewsDetails.defaultProps = {\n news: null,\n};\n\nNewsDetails.propTypes = {\n isTravelNews: PropTypes.bool.isRequired,\n news: PropTypes.shape({\n id: PropTypes.number,\n title: PropTypes.string,\n author: PropTypes.string,\n content: PropTypes.string,\n external_link: PropTypes.string,\n created_at: PropTypes.string,\n source: PropTypes.string,\n country: PropTypes.shape({\n name: PropTypes.string,\n }),\n image_urls: PropTypes.shape({\n medium: PropTypes.string,\n }),\n }),\n urls: PropTypes.shape({\n newsUrl: PropTypes.string,\n newsListUrl: PropTypes.string.isRequired,\n dashboardUrl: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default NewsDetails;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SubscriptionPageLayout = ({ title, children, footer }) => (\n \n 
\n
\n \n
\n \n
\n);\n\nSubscriptionPageLayout.defaultProps = {\n title: null,\n children: null,\n footer: null,\n};\n\nSubscriptionPageLayout.propTypes = {\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n};\n\nexport default SubscriptionPageLayout;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Amount } from '@wtag/react-comp-lib';\nimport SubscriptionModeSwitch from '../SubscriptionModeSwitch';\n\nconst NewPlanDetails = ({\n className,\n plan,\n period,\n onSubscriptionPeriodChange,\n hidePeriodToggler,\n disableToggle,\n toggleDisabilityReasonText,\n}) => {\n const isFree = parseFloat(plan?.price) <= 0;\n const isYearly = period === 'yearly';\n const isMonthly = period === 'monthly';\n\n return (\n \n
\n \n
\n {title}
\n\n
\n \n {children}\n
\n {footer}
\n \n
\n );\n};\n\nNewPlanDetails.defaultProps = {\n className: '',\n hidePeriodToggler: false,\n plan: null,\n period: () => {},\n onSubscriptionPeriodChange: () => {},\n disableToggle: true,\n toggleDisabilityReasonText: '',\n};\n\nNewPlanDetails.propTypes = {\n className: PropTypes.string,\n plan: PropTypes.shape({\n name: PropTypes.string,\n price: PropTypes.string,\n currency_code: PropTypes.string,\n }),\n period: PropTypes.string,\n hidePeriodToggler: PropTypes.bool,\n onSubscriptionPeriodChange: PropTypes.func,\n disableToggle: PropTypes.bool,\n toggleDisabilityReasonText: PropTypes.string,\n};\n\nexport default NewPlanDetails;\n","import React, { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst SubscriptionDivider = ({ className }) => (\n \n);\n\nSubscriptionDivider.defaultProps = {\n className: '',\n};\n\nSubscriptionDivider.propTypes = {\n className: PropTypes.string,\n};\n\nexport default memo(SubscriptionDivider);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport DateTime from '../../DateTime';\n\nconst ActiveUsersDetails = ({ className, activeUsers, nextBillingDate }) => (\n \n
\n {!hidePeriodToggler ? (\n Selected Plan
\n {plan ? (\n \n {I18n.t(plan.name, {\n scope: 'components.plans',\n })}{' '}\n -{' '}\n
\n ) : null}\n \n {isFree && I18n.t('components.subscription.free_price_text')}\n {!isFree &&\n isMonthly &&\n I18n.t('components.subscription.per_month_price_text')}\n {!isFree &&\n isYearly &&\n I18n.t('components.subscription.per_year_price_text')}\n
\n \n
\n ) : null}\n \n
\n);\n\nActiveUsersDetails.defaultProps = {\n className: '',\n nextBillingDate: null,\n activeUsers: 0,\n};\n\nActiveUsersDetails.propTypes = {\n className: PropTypes.string,\n activeUsers: PropTypes.number,\n nextBillingDate: PropTypes.string,\n};\n\nexport default ActiveUsersDetails;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Amount } from '@wtag/react-comp-lib';\n\nconst CostsListItem = ({\n className,\n title,\n hint,\n amount,\n highlighted,\n currency,\n showItem,\n}) =>\n showItem ? (\n \n {I18n.t('components.subscription.active_users_title')}\n
\n {nextBillingDate ? (\n {activeUsers}
\n \n
\n {title}
\n {hint && (\n {hint}
\n )}\n - \n {items.map((item, index) => (\n
\n
\n);\n\nNoteList.defaultProps = {\n className: '',\n items: [],\n termsOfUseUrl: '',\n};\n\nNoteList.propTypes = {\n className: PropTypes.string,\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n note: PropTypes.string,\n }),\n ),\n termsOfUseUrl: PropTypes.string,\n};\n\nexport default NoteList;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport CreditCardIcon from '../CreditCardIcon';\n\nconst CreditCard = ({ className, creditCard }) =>\n creditCard ? (\n - \n {items\n .filter(item => item)\n .map(item => (\n
\n {I18n.t('components.subscription.learn_more')}{' '}\n \n {I18n.t('components.subscription.term_of_use')}\n \n
\n \n
\n ) : null;\n\nCreditCard.defaultProps = {\n className: '',\n};\n\nCreditCard.propTypes = {\n className: PropTypes.string,\n creditCard: PropTypes.shape({\n cardType: PropTypes.string.isRequired,\n cardholderName: PropTypes.string.isRequired,\n lastFour: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default CreditCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Amount } from '@wtag/react-comp-lib';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport Icon from '@wtag/rcl-icon';\nimport Alert from '@wtag/rcl-alert';\nimport SanitizedHTML from '../../../../shared/components/SanitizedHTML';\nimport CreditCard from './CreditCard';\n\nconst PaymentSection = ({\n className,\n currentBalance,\n workflow,\n currency,\n paymentAlert,\n creditCard,\n}) => {\n const isCurrentBalanceEmpty =\n parseFloat(currentBalance?.amountInPlanCurrency) <= 0;\n const hasEnoughBalanceToPay = workflow === 'balance_charge';\n\n return (\n \n
\n \n
\n \n {creditCard.cardholderName}\n
\n \n ****{creditCard.lastFour}\n
\n \n
\n \n {I18n.t('components.subscription.payment_title')}\n
\n \n {I18n.t('components.subscription.payment_description')}\n
\n \n \n
\n \n {I18n.t('components.subscription.current_balance_title')}\n
\n \n \n
\n ) : null}\n \n
\n );\n\n return (\n \n {I18n.t(\n 'components.subscription.subscription_feature_details_modal.upgrade.body.title',\n )}\n
\n - \n {upgradedFeatureDetails?.moreWorkspaces > 0 ? (\n
- \n {I18n.t(\n 'components.subscription.subscription_feature_details_modal.upgrade.body.workspace',\n {\n count: upgradedFeatureDetails?.moreWorkspaces,\n },\n )}\n \n ) : null}\n {upgradedFeatureDetails?.moreChannels > 0 ? (\n
- \n {I18n.t(\n 'components.subscription.subscription_feature_details_modal.upgrade.body.channel',\n {\n count: upgradedFeatureDetails?.moreChannels,\n },\n )}\n \n ) : null}\n {upgradedFeatureDetails?.morePhoneSupport ? (\n
- \n {I18n.t(\n 'components.subscription.subscription_feature_details_modal.upgrade.body.phone_support',\n {\n phoneSupportQuantity: upgradedFeatureDetails.morePhoneSupport,\n },\n )}\n \n ) : null}\n {upgradedFeatureDetails?.customDomainSupported ? (\n
- \n {I18n.t(\n 'components.subscription.subscription_feature_details_modal.upgrade.body.custom_domain',\n )}\n \n ) : null}\n
\n {greetingText}\n
\n \n {successText}\n {featureIncreased ? (\n <>\n {' '}\n {I18n.t(\n 'components.subscription.subscription_feature_details_modal.upgrade.success_text.more_features_text',\n )}\n \n ) : null}\n
\n {featureIncreased ? upgradedFeatureListElement : null}\n \n {errorText}
\n \n \n
\n);\n\nEntityManagementSection.defaultProps = {\n className: '',\n outOfLimit: false,\n title: '',\n limitText: '',\n limitAlertText: '',\n entityListTable: null,\n};\n\nEntityManagementSection.propTypes = {\n className: PropTypes.string,\n outOfLimit: PropTypes.bool,\n title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n limitText: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n limitAlertText: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n entityListTable: PropTypes.node,\n};\n\nexport default EntityManagementSection;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {\n Table,\n TableHead,\n TableRow,\n TableHeader,\n TableData,\n TableBody,\n} from '@wtag/rcl-table';\nimport { Toggle } from '@wtag/react-comp-lib';\nimport EntityManagementSection from './EntityManagementSection';\n\nconst WorkspaceManagementSection = ({\n className,\n workspaces,\n outOfLimit,\n limit,\n activeWorkspacesCount,\n setDeactivateWorkspacesIDs,\n}) => {\n const handleToggleChange = workspaces => {\n setDeactivateWorkspacesIDs(prevState => {\n const newState = [...prevState];\n const workspaceId = workspaces.id;\n const newWorkspaceState = !workspaces.active;\n const indexOfWorkspace = newState.indexOf(workspaceId);\n const storedInPrevState = indexOfWorkspace !== -1;\n\n if (!newWorkspaceState && !storedInPrevState) {\n newState.push(workspaceId);\n\n return newState;\n }\n\n if (newWorkspaceState && storedInPrevState) {\n newState.splice(indexOfWorkspace, 1);\n\n return newState;\n }\n\n return newState;\n });\n };\n\n return (\n {title}
\n {limitText}
\n \n {limitAlertText}\n
\n \n {entityListTable}\n