\r\n
\r\n )}\r\n \r\n \r\n {this.props.header}{' '}\r\n {this.props.count !== undefined && \r\n {this.props.subheader} \r\n
\r\n {this.getCustomContent()}
}\r\n \r\n Sorry.. there was an error! This page is broken!\r\n
\r\n \r\n
\r\n )}\r\n {!this.state.editing && (\r\n \r\n \r\n {t('contact.name')} \r\n \r\n {props.account?.firstName} {props.account?.lastName}\r\n \r\n \r\n \r\n Email \r\n {props.account?.email} \r\n \r\n \r\n {t('myArxis.Organization')} \r\n \r\n {props.account?.organizationName}\r\n \r\n {t('account.myOrganization')} > \r\n \r\n \r\n \r\n \r\n {t('account.password')} \r\n \r\n ••••••••••\r\n this.setState({ editing: true })}>\r\n {t('account.changePass')} >\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n {props.image && 
}\r\n { props.message && }\r\n
\r\n { props.message}
{props.children}
\r\n \r\n {(this.props.buttonCancelText || this.props.buttonSaveText) && (\r\n
\r\n )}\r\n \r\n \r\n {this.props.buttonCancelText && (\r\n \r\n {this.props.buttonCancelText}\r\n \r\n )}\r\n {this.props.buttonSaveText && (\r\n \r\n {this.props.buttonSaveText}\r\n \r\n )}\r\n \r\n
\r\n )}\r\n {this.props.bottomContent && this.props.bottomContent}\r\n \r\n 
\r\n \r\n {t => \r\n
\r\n {props.message ?? t('notification.errWhileLoading')}
}\r\n \r\n this.changeFile(e)}\r\n />\r\n {this.state.editing && image ? (\r\n \r\n \r\n {t => (\r\n \r\n \r\n \r\n this.setState({ scale: this.state.scale * 0.9 })}\r\n />\r\n \r\n \r\n this.setState({ scale: this.state.scale * 1.1 })} />\r\n \r\n \r\n \r\n \r\n this.setState({ rotate: this.state.rotate - 15 })}\r\n />\r\n \r\n \r\n this.setState({ rotate: this.state.rotate + 15 })}\r\n />\r\n \r\n \r\n \r\n \r\n this.fileSelect.click()} />\r\n \r\n \r\n \r\n \r\n this.cancel()} />\r\n \r\n \r\n await this.save()}\r\n />\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n ) : (\r\n \r\n {\r\n e.target.onError = null;\r\n e.target.src = backupImage;\r\n }}\r\n />\r\n {this.state.editable && (\r\n this.toEdit()}>\r\n {t => {t('tooltip.edit')} } \r\n \r\n )}\r\n \r\n )}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default XImageEditor;\r\n\r\nconst ImageCropperWrapperControls = styled.div`\r\n display: flex;\r\n flex-wrap: wrap;\r\n`;\r\n\r\nconst ImageCropperWrapper = styled.div``;\r\n\r\nconst ImageControl = styled.div`\r\n flex: 1;\r\n text-align: center;\r\n min-width: 72px;\r\n & > svg {\r\n margin: 4px;\r\n cursor: pointer;\r\n }\r\n`;\r\n\r\nconst CommitControl = styled(ImageControl)``;\r\n\r\nconst EditOverlay = styled.div`\r\n position: absolute;\r\n right: 0;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n z-index: 2;\r\n opacity: 0;\r\n background: #000000;\r\n transition: opacity 0.2s ease;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n`;\r\n\r\nconst EditText = styled.div`\r\n flex: 1;\r\n text-align: center;\r\n color: #fff;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n position: relative;\r\n & > img {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n &:hover > div {\r\n opacity: 0.8;\r\n }\r\n`;\r\n","import { css } from '@emotion/core';\r\nimport styled from '@emotion/styled';\r\nimport { withTheme } from 'emotion-theming';\r\nimport * as React from 'react';\r\nimport { Link, RouteComponentProps, withRouter } from 'react-router-dom';\r\nimport XBadge from './XBadge';\r\nimport ArrowLeftIcon from '@material-ui/icons/ArrowLeft';\r\nimport i18n from 'src/i18n';\r\nimport SettingsIcon from 'src/style/images/icons/setting.svg';\r\nimport UserPlusIcon from 'src/style/images/icons/user-plus.svg';\r\nimport MessageIcon from 'src/style/images/icons/message.svg';\r\nimport ClipBoaardIcon from 'src/style/images/icons/clipboard-notes.svg';\r\n\r\nexport interface ILink {\r\n name: string;\r\n route: string;\r\n subRoutes?: ILink[];\r\n style?: any;\r\n badge?: number;\r\n defaultActive?: boolean;\r\n dividerTop?: boolean;\r\n}\r\n\r\ntype OwnProps = {\r\n routes: ILink[];\r\n callback: any;\r\n};\r\n\r\ntype AllProps = OwnProps & RouteComponentProps;\r\n\r\nconst XNavigation: React.FC\r\n {route.dividerTop &&
}\r\n\r\n {route.name}\r\n {route.badge !== undefined && route.badge > 0 && (\r\n \r\n )}\r\n {route.name === activeRoute?.name && \r\n {getIcon(subRoute.name, subRoute.route === activeRoute?.route)}\r\n\r\n \r\n {subRoute.name}\r\n {subRoute.badge !== undefined && subRoute.badge > 0 && (\r\n \r\n )}\r\n \r\n {subRoute.route === activeRoute?.route && \r\n ))}\r\n
\r\n ))}\r\n }\r\n
{props.organization.name}
\r\n \r\n {props.readOnly ? (\r\n props.checked ? (\r\n
\r\n );\r\n};\r\n\r\nexport default XCheckbox;\r\n\r\nconst Label = styled('label')({\r\n marginTop: '4px',\r\n cursor: 'pointer',\r\n userSelect: 'none'\r\n});\r\n\r\nconst StyledCheckbox = styled(Checkbox)({\r\n marginRight: '5px',\r\n width: '28px',\r\n height: '28px'\r\n});\r\n","import { apiClient, ApiResult } from 'src/helpers/apiClient';\r\n\r\nexport const listMessages = async (organizationId: string): Promise\r\n
\r\n );\r\n};\r\n\r\nexport default XDatePicker;\r\n\r\nconst StyledDatePicker = styled(DatePicker)({\r\n marginBottom: '10px'\r\n});\r\n","import { IField } from 'src/components/layout/XForm';\r\nimport { InterfaceMethod, InterfaceType } from 'src/models/Organization';\r\nimport i18n from '../../i18n'\r\n\r\n\r\nexport function getFtpForm(): IField[] {\r\n return [\r\n { title: 'Ftp Url', name: 'FtpAddress', readonly: false, required: true, maxLength: 255 },\r\n { title: 'Ftp Gebruikersnaam', name: 'FtpUsername', fullWidth: false, required: true, maxLength: 255 },\r\n { title: 'Ftp Wachtwoord', name: 'FtpPassword', type: 'password', fullWidth: false, required: true, maxLength: 255 }\r\n ];\r\n}\r\n\r\nexport function getSftpForm(): IField[] {\r\n return [\r\n { title: 'Sftp Url', name: 'SftpAddress', readonly: false, required: true, maxLength: 255 },\r\n { title: 'Sftp Gebruikersnaam', name: 'SftpUsername', fullWidth: false, required: true, maxLength: 255 },\r\n { title: 'Sftp Wachtwoord', name: 'SftpPassword', type: 'password', fullWidth: false, required: true, maxLength: 255 }\r\n ];\r\n}\r\n\r\nexport function getEmailForm(): IField[] {\r\n return [\r\n { title: 'Emailadres', name: 'EmailAddress', required: true, maxLength: 255 }\r\n ];\r\n}\r\n\r\nexport const interfaceMethods = [\r\n { key: InterfaceMethod.LtxFtp, description: 'Arxis FTP' },\r\n { key: InterfaceMethod.Ftp, description: 'Jouw FTP' },\r\n { key: InterfaceMethod.Sftp, description: 'Jouw SFTP' },\r\n { key: InterfaceMethod.Email, description: 'E-mail' },\r\n { key: InterfaceMethod.Manual, description: i18n.t('tooltip.Manual')}\r\n];\r\n\r\n","module.exports = __webpack_public_path__ + \"static/media/arxisdef.348bccec.svg\";","import styled from '@emotion/styled';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps, withRouter } from 'react-router';\r\nimport { XActionButton, XSecActionButton } from 'src/components/layout/XActionButton';\r\nimport { XActionStrip } from 'src/components/layout/XActionStrip';\r\nimport { XFailPanel, XPanel, XSuccessPanel } from 'src/components/layout/XPanel';\r\nimport { XPaper, XPaperTitle } from 'src/components/layout/XPaper';\r\nimport { XSubTitle, XTitle } from 'src/components/layout/XPaperHeader';\r\nimport { XRow, XRowCell } from 'src/components/layout/XRow';\r\nimport { interfaceMethods } from 'src/constants/OrganizationInterface/InterfaceSetting';\r\nimport { InterfaceMethod, InterfaceType, OrganizationInterface } from 'src/models/Organization';\r\nimport ErrorIcon from '@material-ui/icons/Warning';\r\nimport SuccessIcon from '@material-ui/icons/Check';\r\nimport { Translation } from 'react-i18next';\r\nimport i18n from '../../../i18n';\r\n\r\ntype OwnProps = {\r\n title: string;\r\n subTitle: string;\r\n interface?: OrganizationInterface;\r\n type: InterfaceType;\r\n editPath?: string;\r\n deleteVisible: boolean;\r\n onDelete: (id: string) => void;\r\n};\r\n\r\ntype AllProps = OwnProps & RouteComponentProps;\r\n\r\nconst InterfaceCard: React.SFC\r\n {s.desc}: •••••••••\r\n
\r\n );\r\n }\r\n return (\r\n \r\n {s.desc}: {props.interface?.settings[s.key]}\r\n
\r\n );\r\n });\r\n };\r\n\r\n const onInterfaceDelete = () => {\r\n if (props.interface != null) {\r\n props.onDelete(props.interface.id);\r\n } \r\n };\r\n\r\n const renderSettings = () => {\r\n switch (props.interface?.method) {\r\n case InterfaceMethod.Ftp:\r\n return viewSettings([\r\n { key: 'FtpAddress', desc: i18n.t('software.FtpLocation') },\r\n { key: 'FtpUsername', desc: i18n.t('account.userName') },\r\n { key: 'LtxPassword', desc: i18n.t('account.password') }\r\n ]);\r\n case InterfaceMethod.Sftp:\r\n return viewSettings([\r\n { key: 'SftpAddress', desc: i18n.t('software.SftpLocation') },\r\n { key: 'SftpUsername', desc: i18n.t('account.userName') },\r\n { key: 'SftpPassword', desc: i18n.t('account.password') }\r\n ]);\r\n case InterfaceMethod.LtxFtp:\r\n return viewSettings([\r\n { key: 'LtxFtpAddress', desc: i18n.t('software.FtpLocation') },\r\n { key: 'LtxFtpUsername', desc: i18n.t('account.userName') },\r\n { key: 'LtxFtpPassword', desc: i18n.t('account.password') }\r\n ]);\r\n case InterfaceMethod.Email:\r\n return viewSettings([{ key: 'EmailAddress', desc: 'E-mailadres' }]);\r\n case InterfaceMethod.Manual:\r\n return viewSettings([]);\r\n }\r\n return null;\r\n };\r\n\r\n return (\r\n \r\n configure()}>\r\n {t('adminOrganizations.Edit')}\r\n \r\n {props.deleteVisible == true && ( onInterfaceDelete()}>\r\n {'Delete'}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n {t => \r\n
\r\n ) : (\r\n {t('adminOrganizations.notSetUpYet')}
}\r\n \r\n \r\n \r\n {t => (\r\n \r\n {interfaceMethods.map(x =>\r\n x.key === props.interface?.method\r\n ? x.key === InterfaceMethod.Manual\r\n ? t('tooltip.Manual')\r\n : x.description\r\n : ''\r\n )}\r\n \r\n )}\r\n \r\n {renderSettings()}\r\n \r\n \r\n \r\n {t => (\r\n \r\n {props.interface?.settings?.['FileFormat']} {t('software.Format')}\r\n \r\n )}\r\n \r\n \r\n \r\n\r\n {props.interface?.method === InterfaceMethod.LtxFtp ? (\r\n props.interface?.settings?.['LtxFtpIsActive'] ? (\r\n \r\n \r\n {t => \r\n \r\n ) : (\r\n \r\n \r\n {t => \r\n \r\n )\r\n ) : null}\r\n
\r\n )}\r\n \r\n
\r\n {t('adminOrganizations.thisFTPHasBeenPreparedByArxis')}
}\r\n \r\n
\r\n {t('adminOrganizations.thisFTPWillSoonBePreparedByArxis')}
}\r\n \r\n {validCatalogs.length ? (\r\n
\r\n );\r\n }\r\n\r\n const pdfFileFormat = this.props.fileFormats.find(f => f.name === 'PDF');\r\n\r\n const lastVersion = props.catalog.versions.find(\r\n version => version.id === props.catalog?.catalog.currentVersionId\r\n );\r\n\r\n if (!lastVersion) {\r\n return null;\r\n }\r\n\r\n const StatsLine = (\r\n \r\n \r\n \r\n Meer van deze leverancier \r\n \r\n \r\n \r\n {props.loadingCatalog || props.loadingOrganization ? (\r\n \r\n
\r\n ) : (\r\n undefined\r\n )}\r\n \r\n {this.state.processing ? (\r\n
\r\n \r\n\r\n \r\n
\r\n ) : (\r\n \r\n Download verzoek aan het verwerken\r\n
\r\n \r\n this.handleFormChange(name, value)}\r\n />\r\n {this.state.errorMessage && (\r\n
\r\n )}\r\n \r\n {this.state.errorMessage}\r\n
\r\n )}\r\n \r\n {StatsLine}\r\n \r\n \r\n \r\n \r\n {props.loadingCatalog || props.loadingOrganization ? (\r\n \r\n {\r\n e.target.onError = null;\r\n e.target.src = generateAvatar(\r\n props.catalog?.catalog.title ?? '',\r\n 145\r\n );\r\n }}\r\n />\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {props.loadingCatalog || props.loadingOrganization ? (\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n\r\n {bottomContent}\r\n \r\n \r\n \r\n {props.loadingCatalog || props.loadingOrganization ? (\r\n \r\n \r\n {props.loadingCatalog || props.loadingOrganization ? (\r\n \r\n {lastVersion.endDate !== undefined && (\r\n \r\n {props.loadingCatalog || props.loadingOrganization ? (\r\n \r\n )}\r\n \r\n {props.loadingCatalog || props.loadingOrganization ? (\r\n \r\n
\r\n \r\n } "\\"Arxis\\"")
\r\n
\r\n \r\n Oooooooooops page not found!
\r\n\r\n {' '}\r\n \r\n {this.state.currentOffset > 0 ? (\r\n this.scroll(-1)}>\r\n \r\n ) : null}\r\n {!this.state.contentFits && !this.state.atEnd ? (\r\n this.scroll(1)}>\r\n \r\n ) : null}\r\n \r\n ) : null}\r\n
\r\n );\r\n if (this.props.horizontal) {\r\n return - \r\n {this.props.children}\r\n
\r\n {totalCount > 0 &&
\r\n );\r\n case '/app/inbox':\r\n return (\r\n \r\n
\r\n );\r\n }\r\n return null;\r\n }\r\n\r\n public render() {\r\n const pages = NavPortalPages.filter(\r\n p =>\r\n p.shouldShowCallback === undefined ||\r\n p.shouldShowCallback(this.props.account.isAdmin, this.props.account.organizationType)\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n {this.getIcon(route.path, active)}\r\n {route.title && this.getName(route.title)} \r\n \r\n \r\n {active && (\r\n
\r\n \r\n \r\n {portalPages.map((route, index) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {t => (\r\n \r\n
\r\n \r\n {t('help.contact')}:
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {t => (\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {this.props.myAccount?.firstName} {this.props.myAccount?.lastName}\r\n \r\n
\r\n {this.props.myAccount?.organizationName}\r\n
\r\n \r\n {this.props.myAccount?.organizationName}\r\n
\r\n \r\n {portalPages.map((route, index) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n {PublicPages.map((route, index) => {\r\n return (\r\n \r\n \r\n this.props.hideNotification()}\r\n type={this.props.notification.type}\r\n message={this.props.notification.message}\r\n />\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state: ApplicationState): StateProps => {\r\n return {\r\n snackbar: state.layout.snackbar,\r\n notification: state.layout.notification,\r\n isAuthenticated: state.authentication.isAuthenticated\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({\r\n showSnackbar: (message: string) => {\r\n dispatch(showSnackbar(message));\r\n },\r\n showNotification: (message: string) => {\r\n dispatch(showNotification(message));\r\n },\r\n hideNotification: () => {\r\n dispatch(hideNotification());\r\n }\r\n});\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(PublicLayout) as any);\r\n","import styled from '@emotion/styled';\r\nimport * as React from 'react';\r\n\r\ntype OwnProps = {\r\n onClick?: any;\r\n text?: string;\r\n};\r\n\r\ntype AllProps = OwnProps;\r\n\r\nconst XSmallButton: React.SFC\r\n \r\n {props.text}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default XSmallButton;\r\n\r\nconst SmallButton = styled('button')`\r\n width: 100%;\r\n cursor: pointer;\r\n border: none;\r\n background: #3280c3;\r\n border-radius: 4px;\r\n padding: 2px 10px;\r\n font-weight: 600;\r\n color: #ffffff;\r\n`;\r\n","import * as React from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport styled from '@emotion/styled';\r\nimport { Link } from 'react-router-dom';\r\nimport XCatalog from 'src/components/domain/XCatalog';\r\nimport XNoContent from 'src/components/domain/XNoContent';\r\nimport XGrid from 'src/components/layout/XGrid';\r\nimport XSmallButton from 'src/components/layout/XSmallButton';\r\nimport XPageContent from 'src/components/layout/XPageContent';\r\nimport { XPaper } from 'src/components/layout/XPaper';\r\nimport { Catalog, PublicationStatus } from 'src/models/Catalog';\r\nimport { ApplicationState } from 'src/store';\r\nimport { AuthenticationAccount } from 'src/store/authentication/types';\r\nimport { CatalogSort, getCatalogsThunk } from 'src/store/catalogs/actions';\r\n\r\nimport GridIcon from '@material-ui/icons/Apps';\r\nimport ListIcon from '@material-ui/icons/FormatListBulleted';\r\nimport { XImage, XImageContainer, XImageOverlay } from 'src/components/layout/XImage';\r\nimport XPaperHeader from 'src/components/layout/XPaperHeader';\r\nimport XScrollView from 'src/components/layout/XScrollView';\r\nimport { generateAvatar } from 'src/helpers/avatarGenerator';\r\nimport { formatDateToString, getImageUrl } from 'src/helpers/formatHelpers';\r\nimport { changeView } from 'src/store/layout/actions';\r\nimport { ViewType } from 'src/store/layout/types';\r\nimport EmptyImage from '../../style/images/empty.svg';\r\nimport { LinearProgress, Switch, Tooltip } from '@material-ui/core';\r\nimport { CloudDownload } from '@material-ui/icons';\r\nimport { XSecActionButton } from 'src/components/layout/XActionButton';\r\nimport { XFilterBar } from 'src/components/layout/XFilterBar';\r\nimport XSearchBar from 'src/components/layout/XSearchBar';\r\nimport { Translation } from 'react-i18next';\r\nimport { Skeleton } from '@material-ui/lab';\r\nimport ErrorBoundary from 'src/components/shared/ErrorBoundary';\r\n\r\ntype StateProps = {\r\n catalogs: Catalog[];\r\n account: AuthenticationAccount;\r\n loading: boolean;\r\n view: ViewType;\r\n};\r\n\r\ntype DispatchProps = {\r\n getCatalogs(sort: CatalogSort): () => void;\r\n changeView(type: ViewType): () => void;\r\n};\r\n\r\ntype OwnProps = {};\r\n\r\ntype State = {\r\n currentOffset: number;\r\n search: string;\r\n};\r\n\r\ntype AllProps = StateProps & DispatchProps & OwnProps;\r\n\r\nclass CatalogsPage extends React.Component\r\n \r\n {t => (\r\n \r\n this.setState({ search: e.target.value.toLowerCase() })\r\n }>\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n Je hebt nog geen beschikbare catalogi\r\n
\r\n\r\n
\r\n \r\n Waarom zie ik geen catalogi?\r\n
\r\n 1. Je hebt nog geen connectie met 1 of meerdere leveranciers
\r\n 2. Je levanciers hebben nog geen catalogi gepubliceerd
\r\n 3. Je hebt nog geen toegang gekregen tot 1 of meerdere catalogi
\r\n \r\n Wat kan ik doen?\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t => \r\n \r\n
\r\n \r\n {this.props.loading ? (\r\n Array.from({ length: 6 }).map((_, idx) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n ))\r\n ) : (\r\n <>\r\n {paged.map(c => (\r\n \r\n \r\n \r\n {\r\n e.target.onError = null;\r\n e.target.src = generateAvatar(c.title, 60);\r\n }}\r\n />\r\n {c.downloaded && (\r\n \r\n {t => (\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n \r\n {c.title}\r\n \r\n \r\n \r\n {c.organizationName}\r\n \r\n \r\n {c.downloads} downloads \r\n {formatDateToString(c.lastCreationDate)} \r\n \r\n ))}{' '}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {props.organization.street} {props.organization.houseNumber}\r\n
\r\n {props.organization.postalCode},{props.organization.city}\r\n
\r\n {Countries.find(c => c.value === props.organization.country)?.name}\r\n \r\n \r\n {props.organization.telephoneNumber}\r\n
\r\n {props.organization.website}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default XOrganizationAddress;\r\n","import styled from '@emotion/styled';\r\nimport React from 'react';\r\nimport MediaQuery from 'react-responsive';\r\nimport { Link } from 'react-router-dom';\r\nimport { Catalog, PublicationStatus } from 'src/models/Catalog';\r\nimport { MyOrganizationModel, OrganizationModel } from 'src/models/Organization';\r\nimport { RequestModel } from 'src/models/Request';\r\nimport { CatalogRequestStatus } from 'src/store/requests/api';\r\nimport XButton from '../layout/XButton';\r\nimport { XContainer } from '../layout/XContainer';\r\nimport XFormButtons from '../layout/XFormButtons';\r\nimport XGrid from '../layout/XGrid';\r\nimport { XImageContainer } from '../layout/XImage';\r\nimport { XImage } from '../layout/XImage';\r\nimport { XPaperContainer, XPaperLabel, XPaperText } from '../layout/XPaper';\r\nimport { XRow, XRowCell } from '../layout/XRow';\r\nimport XSelectItem from '../layout/XSelectItem';\r\nimport XCatalog from './XCatalog';\r\nimport XOrganizationAddress from './XOrganizationAddress';\r\n\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { generateAvatar } from 'src/helpers/avatarGenerator';\r\nimport { getImageUrl } from 'src/helpers/formatHelpers';\r\nimport XPopup from '../layout/XPopup';\r\nimport XCatalogRow from './XCatalogRow';\r\nimport XOrganizationTitle from './XOrganizationTitle';\r\nimport XGoBack from '../shared/XGoBack';\r\nimport { EmailOutlined } from '@material-ui/icons';\r\nimport { XActionButton, XSecActionButton } from '../layout/XActionButton';\r\nimport { XActionStrip } from '../layout/XActionStrip';\r\nimport Skeleton from '@material-ui/lab/Skeleton';\r\nimport { Translation } from 'react-i18next';\r\nimport i18n from 'src/i18n';\r\n\r\ntype OwnProps = {\r\n loadingOrganization: boolean;\r\n loadingRequest: boolean;\r\n organization: OrganizationModel;\r\n myOrganization: MyOrganizationModel;\r\n catalogViewOffer?: RequestModel;\r\n history?: any;\r\n offerViewCatalogs: (catalogIds: string[]) => void;\r\n editViewCatalogRequest: (state: CatalogRequestStatus) => void;\r\n cancelRequest: () => void;\r\n};\r\n\r\ntype AllProps = OwnProps;\r\ntype State = {\r\n showConnectPopup: boolean;\r\n availableCatalogs: string[];\r\n};\r\n\r\nclass XRetailerDetails extends React.Component\r\n {props.organization.postalCode},{props.organization.city}\r\n
\r\n {Countries.find(c => c.value === props.organization.country)?.name}\r\n
\r\n {props.organization.website}\r\n
\r\n Selecteer catalogi die deze retailer meteen mag inzien na connectie\r\n
\r\n {this.props.myOrganization.catalogs\r\n .filter(catalog => catalog.publicationStatus == PublicationStatus.Published)\r\n .map(catalog => (\r\n \r\n this.toggleCatalog(catalog, e)}>\r\n
\r\n ))}\r\n \r\n \r\n
\r\n {this.props.loadingOrganization ? (\r\n \r\n \r\n {t => t('connections.sendEmail')} \r\n \r\n
\r\n )}\r\n \r\n {\r\n if (buttonState.onClick) buttonState.onClick();\r\n }}>\r\n {buttonState.text} {this.props.loadingRequest ? '...' : ''}\r\n \r\n
\r\n )}{' '}\r\n {incommingRequest && (\r\n \r\n {this.props.organization.organization.name} heeft een connectie verzoek\r\n verstuurd\r\n
\r\n \r\n {\r\n this.props.editViewCatalogRequest('disapprove');\r\n }}>\r\n Afwijzen{this.props.loadingRequest ? '...' : ''}\r\n \r\n
\r\n \r\n \r\n {this.props.loadingOrganization ? (\r\n \r\n\r\n \r\n {this.props.loadingOrganization ? (\r\n \r\n\r\n \r\n {this.props.loadingOrganization ? (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n \r\n GLN:\r\n \r\n {this.props.loadingOrganization ? (\r\n \r\n
\r\n \r\n Arxis ID:\r\n \r\n {this.props.loadingOrganization ? (\r\n \r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n {props.loadingOrganization ? (\r\n \r\n \r\n {t => t('connections.sendEmail')} \r\n \r\n
\r\n )}\r\n \r\n {\r\n if (buttonState.onClick) buttonState.onClick();\r\n }}>\r\n {buttonState.text}\r\n {props.loadingRequest ? '...' : ''}\r\n \r\n
\r\n )}\r\n {incommingRequest && (\r\n \r\n {props.organization.organization.name} heeft een connectie verzoek verstuurd\r\n
\r\n \r\n {\r\n props.editCatalogOffer('disapprove');\r\n }}>\r\n Afwijzen{props.loadingRequest ? '...' : ''}\r\n \r\n
\r\n \r\n \r\n {props.loadingOrganization ? (\r\n \r\n \r\n {props.loadingOrganization ? (\r\n \r\n\r\n \r\n {props.loadingOrganization ? (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n \r\n GLN:\r\n \r\n {props.loadingOrganization ? (\r\n \r\n
\r\n \r\n Arxis ID:\r\n \r\n {props.loadingOrganization ? (\r\n \r\n
\r\n \r\n \r\n
\r\n )}\r\n Upgrade
\r\n\r\n You need more connections?
\r\n Uprade your subsription from Free to\r\n Premium\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n )}\r\n \r\n Welkom bij Arxis!\r\n
\r\n\r\n
\r\n \r\n this.setState({ search: e.target.value.toLowerCase() })\r\n }> \r\n
\r\n \r\n \r\n
\r\n \r\n ))}\r\n\r\n {!this.props.loading && (\r\n \r\n
\r\n \r\n
\r\n {this.state.organizationType === OrganizationType.Supplier ? (\r\n {organization.name}
\r\n\r\n {organization.city} - {organization.country}\r\n
\r\n \r\n
) : ()}\r\n \r\n c.value === organization.accountStatus)?.color,\r\n minWidth: '115px',\r\n height: '25px',\r\n textAlign: 'center',\r\n margin: '5px',\r\n borderRadius: '10px',\r\n color: '#fff',\r\n fontWeight: 'bold',\r\n fontSize: '12px',\r\n alignSelf: 'center'\r\n }}>\r\n {OrganizationReadinessStatusList.find(c => c.value === organization.accountStatus)?.name}\r\n
\r\n \r\n {this.state.organizationType === OrganizationType.Supplier ? (\r\n \r\n \r\n this.props.history.push(\r\n `/app/explore/connections/organization/${organization.id}`\r\n )\r\n }>\r\n Connect\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n ) : ()\r\n }\r\n\r\n \r\n {t('orgAcc.youCanDoBusinessWith')} {organization.name}{' '}\r\n {t('orgAcc.viaArxis')} {t('orgAcc.erpOrCashRegister')}\r\n
\r\n\r\n\r\n {organization.name} {t('orgAcc.supportsThroughArxis')}\r\n
\r\n\r\n {organization.supportsCatalogData ===\r\n OrganizationReadinessStatus.Ready || this.state.organizationType === OrganizationType.Retailer ? (\r\n \r\n \r\n ) : (\r\n \r\n \r\n )}\r\n {organization.supportsOrderData ===\r\n OrganizationReadinessStatus.Ready || this.state.organizationType === OrganizationType.Retailer ? (\r\n \r\n \r\n ) : (\r\n \r\n \r\n )}\r\n {organization.supportsStockData ===\r\n OrganizationReadinessStatus.Ready || this.state.organizationType === OrganizationType.Retailer ? (\r\n \r\n \r\n ) : (\r\n \r\n \r\n )}\r\n
\r\n\r\n \r\n \r\n {t => (\r\n \r\n this.setState({ search: e.target.value.toLowerCase() })\r\n }>\r\n )}\r\n \r\n
\r\n \r\n \r\n {paged.map(c => (\r\n \r\n \r\n \r\n {\r\n e.target.onError = null;\r\n e.target.src = generateAvatar(c.title, 60);\r\n }}\r\n />\r\n \r\n \r\n \r\n {/* {c.title} */}\r\n {c.title}\r\n \r\n \r\n {/* \r\n {c.organizationName}\r\n */}\r\n {c.organizationName}\r\n \r\n \r\n ))}\r\n
\r\n )}\r\n \r\n \r\n {t('contact.success')}\r\n
\r\n \r\n );\r\n else\r\n return (\r\n \r\n );\r\n }}\r\n \r\n
\r\n \r\n \r\n )}\r\n \r\n
{' '}\r\n \r\n \r\n \r\n \r\n \r\n {this.renderForm()}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
{t('contact.contactUs')}
\r\n\r\n
- \r\n
- \r\n
})
\r\n \r\n Piet Heinkade 55 , 1019 GM Amsterdam\r\n \r\n \r\n - \r\n
})
\r\n info@arxis.io\r\n \r\n - \r\n
})
\r\n +31 (0) 88 2400 110\r\n \r\n
\r\n {'>'}}\r\n leftChevron={{'<'} }\r\n outsideChevron\r\n chevronWidth={chevronWidth}>\r\n {users.map(u => (\r\n
\r\n );\r\n};\r\n\r\nconst Bttn = styled('span')({\r\n display: 'inline-block',\r\n padding: '7px 14px',\r\n borderRadius: '50%',\r\n boxShadow: '0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08)',\r\n fontSize: '20px'\r\n});\r\n\r\nconst Img = styled('img')({\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n maxHeight: '100%',\r\n maxWidth: '100%'\r\n});\r\n\r\nconst users = [\r\n {\r\n title: 'DeEekhoorn',\r\n img: require('../pages/images/users/DeEekhoorn.jpg')\r\n },\r\n {\r\n title: 'Artex',\r\n img: require('../pages/images/users/Artex.png')\r\n },\r\n {\r\n title: 'Cotap',\r\n img: require('../pages/images/users/cotap.png')\r\n },\r\n {\r\n title: 'Van Dyck',\r\n img: require('../pages/images/users/VanDyck.png')\r\n },\r\n {\r\n title: 'Eijerkamp',\r\n img: require('../pages/images/users/logo-eijerkamp.jpg')\r\n },\r\n {\r\n title: 'Maxfurn',\r\n img: require('../pages/images/users/Maxfurn.png')\r\n },\r\n {\r\n title: 'Bopita',\r\n img: require('../pages/images/users/Bopita.png')\r\n },\r\n {\r\n title: 'Gero Wonen',\r\n img: require('../pages/images/users/Gero wonen.jpg')\r\n },\r\n {\r\n title: 'Livingfurn',\r\n img: require('../pages/images/users/Livingfurn.jpg')\r\n },\r\n {\r\n title: 'Feelings',\r\n img: require('../pages/images/users/Feelings.png')\r\n },\r\n {\r\n title: 'LS Bedding',\r\n img: require('../pages/images/users/LS bedding.png')\r\n },\r\n {\r\n title: 'Groter in Wonen',\r\n img: require('../pages/images/users/Groterinwonen.png')\r\n },\r\n {\r\n title: 'Hjort Knudsen',\r\n img: require('../pages/images/users/HjortKnudsen.jpg')\r\n },\r\n {\r\n title: 'LABEL51',\r\n img: require('../pages/images/users/LABEL51.png')\r\n },\r\n {\r\n title: 'TMC Wonen',\r\n img: require('../pages/images/users/TMCwonen.png')\r\n },\r\n {\r\n title: 'HK Living',\r\n img: require('../pages/images/users/HKLiving.png')\r\n },\r\n {\r\n title: 'Woonland',\r\n img: require('../pages/images/users/Woonland.png')\r\n },\r\n {\r\n title: 'Odrada',\r\n img: require('../pages/images/users/odrada.png')\r\n },\r\n {\r\n title: 'Presenttime',\r\n img: require('../pages/images/users/presenttime.png')\r\n },\r\n {\r\n title: 'Jansen Totaal Wonen',\r\n img: require('../pages/images/users/Jansentotaalwonen.png')\r\n },\r\n {\r\n title: 'Perfecta',\r\n img: require('../pages/images/users/perfecta-01.png')\r\n },\r\n {\r\n title: 'DTP Interiors',\r\n img: require('../pages/images/users/DTPInteriors.png')\r\n },\r\n {\r\n title: 'Lucide',\r\n img: require('../pages/images/users/Lucide.png')\r\n },\r\n {\r\n title: 'Veldeman',\r\n img: require('../pages/images/users/veldeman.png')\r\n },\r\n {\r\n title: 'Light - Living',\r\n img: require('../pages/images/users/Light-living.jpg')\r\n },\r\n {\r\n title: 'Verberckmoes',\r\n img: require('../pages/images/users/verberckmoes.png')\r\n },\r\n {\r\n title: 'Bodilson',\r\n img: require('../pages/images/users/Bodilson.png')\r\n },\r\n {\r\n title: 'Den Ouden Wonen',\r\n img: require('../pages/images/users/denouden.jpg')\r\n },\r\n {\r\n title: 'IMS Benelux',\r\n img: require('../pages/images/users/IMSBenelux.png')\r\n },\r\n {\r\n title: 'Its about RoMi',\r\n img: require('../pages/images/users/itsaboutromi.png')\r\n },\r\n {\r\n title: 'Kayori',\r\n img: require('../pages/images/users/Kayori.png')\r\n },\r\n {\r\n title: 'Bonsnijder',\r\n img: require('../pages/images/users/bronsnijder.jpg')\r\n },\r\n {\r\n title: 'Vinke Beilen',\r\n img: require('../pages/images/users/vinke_beilen.jpg')\r\n },\r\n {\r\n title: 'Van der Linde voor Wonen en Slapen',\r\n img: require('../pages/images/users/linde_wonen_slapen.jpg')\r\n },\r\n {\r\n title: 'De Korte Woonsfeer',\r\n img: require('../pages/images/users/korte_woonsfeer.jpg')\r\n },\r\n {\r\n title: 'Hasker Kroon',\r\n img: require('../pages/images/users/hasker_kroon.jpg')\r\n },\r\n {\r\n title: 'Jacbos thuis en interieur',\r\n img: require('../pages/images/users/jacobs_thuis_interieur.jpg')\r\n }\r\n];\r\n\r\n//export default LTXUsers;\r\n","import styled from '@emotion/styled';\r\nimport React from 'react';\r\nimport { useState } from 'react';\r\nimport { Collapse } from 'react-collapse';\r\nimport { Translation } from 'react-i18next';\r\nfunction Question(props) {\r\n const [opened, setOpen] = useState(false);\r\n return (\r\n \r\n
\r\n ))}\r\n \r\n \r\n 
\r\n
\r\n \r\n setOpen(!opened)}>\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default () => {\r\n return (\r\n \r\n {opened ? '- ' : '+ '}\r\n {props.question}\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {t('faq.general')}
\r\n\r\n
\r\n {t('faq.operation')}
\r\n\r\n
\r\n {t('faq.safety')}
\r\n\r\n
\r\n \r\n
\r\n {t('faq.formats')}
\r\n\r\n
\r\n {t('faq.customService')}
\r\n\r\n
\r\n {t('faq.pricing')}
\r\n\r\n
\r\n \r\n
\r\n {' '}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('header.headline1')}\r\n
\r\n \r\n
\r\n \r\n {t('header.headline1')}\r\n
\r\n {t('header.headline2')}\r\n
\r\n \r\n {t('header.text')}
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('common.tryFree')}\r\n \r\n Whitepaper\r\n
\r\n \r\n {t('catalogs.downloadCatalogForMoreInfo')}\r\n \r\n {t('common.tryNow')}
\r\n \r\n {t('common.wantDemo')}\r\n
\r\n \r\n {t('common.scheduleDemo')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {t('benefits.title')}
\r\n\r\n
\r\n \r\n
\r\n ))}\r\n \r\n \r\n {t('common.retailer')}\r\n
\r\n \r\n {['retailer1', 'retailer2', 'retailer3'].map(key => (\r\n\r\n \r\n {t('benefits.' + key)}\r\n
\r\n \r\n \r\n })
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n ))}\r\n \r\n {t('common.supplier')}\r\n
\r\n \r\n {['supplier1', 'supplier2', 'supplier3'].map(key => (\r\n\r\n \r\n {t('benefits.' + key)}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n ))}\r\n \r\n {t('safety.title')}
\r\n \r\n {['controlConnections', 'protectedCatalogs', 'exclusiveCatalogs'].map(key => (\r\n\r\n \r\n {t('safety.' + key)}\r\n
\r\n \r\n \r\n })
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {' '}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n ))}\r\n \r\n {t('pricing.headline')}\r\n {t('pricing.title')}\r\n
\r\n\r\n
\r\n
\r\n - \r\n
\r\n
\r\n ))}\r\n \r\n {prices[this.state.priceTabe].map(p => (\r\n
\r\n\r\n {i}\r\n
\r\n \r\n \r\n \r\n {t('common.tryNow')}\r\n
\r\n \r\n {p.name}
\r\n {Number.isInteger(p.price) && (\r\n \r\n
\r\n )}\r\n {!Number.isInteger(p.price) && (\r\n €{p.price},-
\r\n {t('pricing.perMonth')}
\r\n \r\n \r\n
\r\n )}\r\n {p.price}
\r\n \r\n
\r\n {p.items.map(i => (\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n {t('join.headline')}\r\n {t('join.forRetailer.title')}\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n 1. {t('join.createAccount')}\r\n
\r\n \r\n \r\n 
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n 2. {t('join.connect')}\r\n
\r\n \r\n \r\n 
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n 3. {t('join.forRetailer.receive')}\r\n \r\n
\r\n \r\n \r\n 
\r\n \r\n
\r\n \r\n \r\n \r\n
{t('join.forSupplier.title')}
\r\n \r\n\r\n
\r\n \r\n \r\n 1. {t('join.createAccount')}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n 2. {t('join.connect')}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n 3. {t('join.forSupplier.publish')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n 
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n window.location.assign(`${window.location.href}register`)\r\n }\r\n to={'/register'}\r\n title=\"Maak een account\"\r\n className=\"button start try\">\r\n {t('join.startNow')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n
\r\n {' '}\r\n \r\n )}\r\n \r\n );\r\n }}\r\n \r\n
\r\n {t('faq.title')}
\r\n\r\n
\r\n LTX is nu Arxis
\r\nU wordt over enkele seconden doorgestuurd
\r\n\r\n \r\n
\r\n \r\n {' '}\r\n {/* Brand and toggle get grouped for better mobile display */}\r\n this.setState({ nav: !this.state.nav })}\r\n data-toggle=\"collapse\"\r\n data-target=\"#bs-example-navbar-collapse-1\"\r\n aria-controls=\"bs-example-navbar-collapse-1\"\r\n aria-expanded=\"false\"\r\n aria-label=\"Toggle navigation\">\r\n {/* */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n window.location.assign(`${window.location.href}login`)}\r\n to={'/login'}\r\n title={t('menu.goToAppButton')}\r\n className=\"button my-ltx d-none d-md-inline-block\">\r\n {t('menu.goToAppButton')}\r\n \r\n
\r\n \r\n {' '}\r\n
\r\n \r\n \r\n \r\n
{' '}\r\n \r\n \r\n\r\n \r\n
\r\n {this.state.whitePaperPopUp && (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Contact
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n E-mail\r\n
\r\n info@arxis.io\r\n
\r\n
\r\n \r\n
\r\n \r\n Telefoon\r\n
\r\n +31 (0) 88 2400 110\r\n
\r\n
\r\n \r\n
\r\n \r\n {t('footer.address')}\r\n
\r\n \r\n Piet Heinkade 55\r\n
\r\n 1019 GM Amsterdam\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n 0 && this.state.valid\r\n ? 'button'\r\n : 'button disable'\r\n }\r\n onClick={this.sendEmailDowloadNotification}>\r\n Download\r\n
\r\n \r\n ) : (\r\n \r\n \r\n
\r\n Whitepaper
\r\n\r\n
\r\n \r\n {t('whitepaper.enterEmailToDownloadWhitepaper')}\r\n
\r\n \r\n \r\n\r\n {this.state.email.length > 0 && !this.state.valid && (\r\n Invalid e-mail address\r\n )}\r\n
\r\n {this.state.email.length > 0 && this.state.valid ? (\r\n \r\n Download\r\n
\r\n )}\r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n Piet Heinkade 55\r\n \r\n
\r\n \r\n \r\n 1019 GM Amsterdam, Nederland\r\n \r\n
\r\n \r\n info@arxis.io \r\n
\r\n \r\n +31 (0) 88 2400 110 \r\n
\r\n \r\n \r\n {t => {t('login.login')} }\r\n \r\n \r\n
\r\n {this.props.authentication.authenticationError !== undefined && (\r\n \r\n {this.props.authentication.authenticationError}\r\n
\r\n )}\r\n \r\n })
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n {t => {t('login.notAvailableForMobile')} }\r\n \r\n
\r\n \r\n
\r\n
{t('login.loggedOutS')}
}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport const XDragAndDropFileUpload: FCYou can add a new version by dragging your files(max 3) here
\r\n\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst Container = styled.div`\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 20px;\r\n border-width: 2px;\r\n border-radius: 2px;\r\n border-color: ${props => getColor(props)};\r\n border-style: dashed;\r\n background-color: #fafafa;\r\n color: #bdbdbd;\r\n outline: none;\r\n transition: border 0.24s ease-in-out;\r\n\r\n & p {\r\n cursor: pointer;\r\n }\r\n`;\r\n","import styled from '@emotion/styled';\r\nimport React from 'react';\r\nimport { Translation } from 'react-i18next';\r\nimport { Organization } from 'src/models/Organization';\r\nimport { XContainer } from '../layout/XContainer';\r\nimport XField from '../layout/XField';\r\nimport XPopup from '../layout/XPopup';\r\nimport XSelectItem from '../layout/XSelectItem';\r\nimport XOrganizationRow from './XOrganizationRow';\r\n\r\ntype OwnProps = {\r\n organizations: Organization[];\r\n title: string;\r\n open: boolean;\r\n saveText?: string;\r\n allowEmpty?: boolean;\r\n onSave: (selectedOrganizations: Organization[]) => void;\r\n onCancel: () => void;\r\n clearOnClose: boolean;\r\n};\r\n\r\ntype AllProps = OwnProps;\r\ntype State = {\r\n selected: Organization[];\r\n search: string;\r\n};\r\n\r\nclass XOrganizationSelectPopup extends React.ComponentYou can add a new version by dragging a file here
\r\n {t('organizations.noOrgAvailable')}
}\r\n {organizations.map(org => (\r\n
\r\n \r\n )}\r\n \r\n o.id === org.id) !== undefined}\r\n onToggle={state => this.toggleOrganization(org, state)}>\r\n
\r\n ))}\r\n Column Header
\r\nSample data
\r\nType
\r\n\r\n this.publishCatalog()}>Publiceer \r\n
\r\n )}\r\n \r\n \r\n this.cancelEdit()}\r\n style={{ marginRight: '10px', verticalAlign: 'middle' }}\r\n />\r\n \r\n \r\n await this.saveEdit()}\r\n style={{ verticalAlign: 'middle' }}\r\n />\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n this.setState({ editing: true })}\r\n style={{ marginRight: '10px', verticalAlign: 'middle' }}\r\n />\r\n \r\n \r\n this.deleteCatalog()}\r\n style={{ verticalAlign: 'middle' }}\r\n />\r\n \r\n
\r\n )}\r\n \r\n {props.catalog.catalog.description}\r\n
\r\n )}\r\n \r\n \r\n {t => (\r\n this.toggleDateLimit(e.target.checked)}\r\n />\r\n )}\r\n \r\n {this.state.dateLimit && (\r\n \r\n van\r\n this.formChange('startDate', e.toDate())}\r\n />\r\n tot\r\n this.formChange('endDate', e.toDate())}\r\n />\r\n \r\n )}\r\n
\r\n ) : (\r\n \r\n {(latestVersion?.startDate !== undefined ||\r\n latestVersion?.endDate !== undefined) && (\r\n \r\n \r\n van {formatDateToString(latestVersion?.startDate)} tot{' '}\r\n {formatDateToString(latestVersion?.endDate)}\r\n \r\n \r\n )}\r\n {latestVersion?.endDate !== undefined &&\r\n new Date(latestVersion?.endDate).getTime() < new Date().getTime() && (\r\n \r\n Let op; deze catalogi is niet meer beschikbaar\r\n \r\n )}\r\n
\r\n )}\r\n Format:
\r\n \r\n {this.getFileFormat(\r\n this.props.catalog?.catalog.fileFormatId || '',\r\n this.props.catalog?.catalog.fileFormatVersionId || ''\r\n )}\r\n
\r\n {this.props.catalog?.catalog?.mappingId &&\r\n !!this.props.catalog?.interfaces.length &&\r\n !!this.props.catalog?.catalog.currentVersionId &&\r\n this.props.fileFormats.find(\r\n f => f.id === this.props.catalog?.catalog.fileFormatId\r\n )?.name === 'CSV' && (\r\n <>\r\n Mapping
\r\n \r\n
\r\n )}\r\n\r\n {props.catalog?.interfaces[0]?.method === 'Manual' &&\r\n this.props.fileFormats.find(f => f.id === this.props.catalog?.catalog.fileFormatId)?.name !== 'CSV' &&(\r\n \r\n
\r\n )}\r\n\r\n {this.state.files?.length !== 0 && this.state.files && (\r\n \r\n Upload \r\n ) : (\r\n \r\n Uploading..{' '}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n this.setState({ files: null })}\r\n />\r\n
\r\n {!this.state.fetchLoading ? (\r\n {this.state.files?.map((files) => {return `${files.name} \\n`})}
\r\n \r\n \r\n props.history.push(\r\n `/app/my/catalogs/catalog-interface/${props.catalog?.catalog.id}`\r\n )\r\n }>\r\n Instellingen\r\n \r\n
\r\n Beheer instellingen omtrent het aanbieden van deze catalogs
\r\n\r\n \r\n {t => (\r\n this.setState({ search: e.toLowerCase() })}\r\n icons={[\r\n {\r\n icon: AddCircleIcon,\r\n toolTip: t('tooltip.add'),\r\n name: 'add',\r\n action: () => this.setState({ showAddAvailablePopup: true })\r\n }\r\n ]}\r\n />\r\n )}\r\n \r\n {props.connections.length === 0 ? (\r\n \r\n {t => (\r\n \r\n \r\n )}\r\n \r\n ) : (\r\n
\r\n \r\n {t('catalogs.youDontHaveAnyRetailers')}\r\n
\r\n \r\n \r\n {t('catalogs.findInterestingRetailers')}\r\n \r\n
\r\n \r\n {paged.length === 0 ? (\r\n \r\n {t => (\r\n \r\n {paged.map(obj => {\r\n return (\r\n this.toggleAvailability([obj.organization], false)}\r\n dataConnection={obj.dataConnection}\r\n catalogMessages={this.props.catalogMessages}\r\n link={'/app/my/connections/' + obj.organization.id}\r\n organization={obj.organization}\r\n />\r\n );\r\n })}\r\n \r\n )}\r\n \r\n )}\r\n {data.length > pageSize && (\r\n this.setState({ currentOffset: i })}\r\n />\r\n )}\r\n
\r\n )}\r\n \r\n Deze catalog is niet beschikbaar voor retailers\r\n
\r\n ) : (\r\n \r\n \r\n \r\n {`${c.column}`.substr(0, 20)}\r\n {`${c.column}`.length > 20 && '...'}\r\n {`${c.column}`.length > 20 && {c.column} }\r\n \r\n\r\n {!!c.sampleData.length ? (\r\n \r\n {`${c.sampleData[0]}`.substr(0, 20)}\r\n {`${c.sampleData[0]}`.length > 20 && '...'}\r\n {`${c.sampleData[0]}`.length > 20 && {c.sampleData[0]} }\r\n \r\n ) : (\r\n \r\n \r\n \r\n {Object.keys(CSVMappingTypes).map(t => (\r\n \r\n ))}\r\n \r\n \r\n \r\n
\r\n ))}\r\n \r\n );\r\n});\r\n\r\nexport default XStockCSVMapping;\r\n\r\nconst XSelectionRow = styled.div`\r\n display: flex;\r\n align-items: center;\r\n`;\r\n\r\nconst XSelect = styled(Select)`\r\n margin: 1.5rem 0.5rem 1rem 0;\r\n width: 14rem;\r\n height: 2rem;\r\n`;\r\n\r\nconst ToolTipText = styled('span')({\r\n visibility: 'hidden',\r\n backgroundColor: '#333333',\r\n color: '#fff',\r\n textAlign: 'center',\r\n borderRadius: '6px',\r\n padding: '5px 0',\r\n position: 'absolute',\r\n zIndex: 1,\r\n bottom: '150%',\r\n left: '50%',\r\n marginLeft: '-60px',\r\n ':after': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n top: '100%',\r\n left: '50%',\r\n marginLeft: '-5px',\r\n borderWidth: '5px',\r\n borderStyle: 'solid',\r\n borderColor: 'black transparent transparent transparent'\r\n }\r\n});\r\n\r\nconst XCell = styled('div')({\r\n position: 'relative',\r\n display: 'inline-block',\r\n width: '14rem',\r\n ':hover span': {\r\n visibility: 'visible'\r\n }\r\n});\r\n","import React, { FC, useState, useCallback } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport styled from '@emotion/styled';\r\nimport XScrollView from 'src/components/layout/XScrollView';\r\nimport { XActionButton, XSecActionButton } from '../layout/XActionButton';\r\nimport { saveStockMapping } from 'src/store/stocks/api';\r\nimport { Mapping } from 'src/store/stocks/types';\r\nimport { ApplicationState } from 'src/store';\r\nimport { showNotification } from 'src/store/layout/actions';\r\nimport { MessageType } from 'src/store/layout/types';\r\nimport { mapError } from 'src/helpers/errorMap';\r\nimport XStockCSVMapping from './XStockCSVMapping';\r\nimport i18n from 'src/i18n';\r\n\r\ntype OwnProps = {\r\n mappingData: Mapping;\r\n stockId: string;\r\n stockMappingId: string;\r\n close: () => void;\r\n};\r\n\r\ntype DispatchProps = {\r\n showNotification: (message: string, type?: MessageType) => void;\r\n};\r\n\r\ntype AllProps = OwnProps & DispatchProps;\r\n\r\nconst XStockCSVModel: FCColumn Header
\r\nSample data
\r\nType
\r\n\r\n \r\n this.cancelEdit()}\r\n style={{ marginRight: '10px', verticalAlign: 'middle' }}\r\n />\r\n \r\n \r\n await this.saveEdit()}\r\n style={{ verticalAlign: 'middle' }}\r\n />\r\n \r\n
\r\n )}\r\n \r\n {/* \r\n \r\n */}\r\n \r\n this.setState({ editing: true })}\r\n style={{ marginRight: '10px', verticalAlign: 'middle' }}\r\n />\r\n \r\n \r\n this.deleteStock()}\r\n style={{ verticalAlign: 'middle' }}\r\n />\r\n \r\n
\r\n )}\r\n Format:
\r\n \r\n {this.getFileFormat(\r\n this.props.stock?.stock.fileFormatId || '',\r\n this.props.stock?.stock.fileFormatVersionId || ''\r\n )}\r\n
\r\n {!!this.props.stock?.stock?.mappingId && (\r\n <>\r\n Mapping
\r\n \r\n Upload \r\n ) : (\r\n \r\n Uploading..{' '}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n this.setState({ files: null })}\r\n />\r\n
\r\n {!this.state.fetchLoading ? (\r\n {this.state.files?.map((files) => {return `${files.name} \\n`})}
\r\n \r\n \r\n {t => (\r\n this.setState({ search: e.toLowerCase() })}\r\n icons={[\r\n {\r\n icon: AddCircleIcon,\r\n toolTip: t('tooltip.add'),\r\n name: 'add',\r\n action: () => this.setState({ showAddAvailablePopup: true })\r\n }\r\n ]}\r\n />\r\n )}\r\n \r\n {props.connections.length === 0 ? (\r\n \r\n {t => (\r\n \r\n \r\n )}\r\n \r\n ) : (\r\n
\r\n \r\n \r\n Find Retailers\r\n \r\n
\r\n \r\n {paged.length === 0 ? (\r\n \r\n {t => (\r\n \r\n {paged.map(obj => {\r\n return (\r\n this.toggleAvailability([obj.organization], false)}\r\n dataConnection={obj.dataConnection}\r\n link={'/app/my/connections/' + obj.organization.id}\r\n organization={obj.organization}\r\n />\r\n );\r\n })}\r\n \r\n )}\r\n \r\n )}\r\n {data.length > pageSize && (\r\n this.setState({ currentOffset: i })}\r\n />\r\n )}\r\n
\r\n )}\r\n \r\n Deze stock is niet beschikbaar voor retailers\r\n
\r\n ) : (\r\n \r\n \r\n props.history.push(`/app/my/stocks/stock-interface/${props.stock?.stock?.id}`)\r\n }>\r\n {t('myArxis.Settings')}\r\n \r\n
\r\n Beheer instellingen omtrent het aanbieden van deze voorraad
\r\n\r\n \r\n {t => (\r\n \r\n this.setState({ searchNewCatalogs: e.target.value.toLowerCase() })\r\n }>\r\n )}\r\n \r\n
\r\n \r\n \r\n {paged.map(c => (\r\n \r\n \r\n \r\n {\r\n e.target.onError = null;\r\n e.target.src = generateAvatar(c.title, 60);\r\n }}\r\n />\r\n \r\n \r\n \r\n {c.title}\r\n \r\n \r\n \r\n {c.organizationName}\r\n \r\n \r\n {c.downloads} downloads \r\n {formatDateToString(c.lastCreationDate)} \r\n \r\n ))}\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n {t('catalogs.dnthSubscriptions')}
\r\n \r\n\r\n {t => \r\n
\r\n )}\r\n {t('catalogs.noCatalogsSub')}
}{t('catalogs.noCatalogsFound')}
\r\n ) : (\r\n \r\n
\r\n )}\r\n {t('catalogs.notPublishedAnyCatalogs')}
\r\n\r\n \r\n
\r\n \r\n \r\n {t => (\r\n \r\n this.setState({ searchNewStocks: e.target.value.toLowerCase() })\r\n }>\r\n )}\r\n \r\n
\r\n \r\n \r\n {paged.map(c => (\r\n \r\n \r\n \r\n {\r\n e.target.onError = null;\r\n e.target.src = generateAvatar(c.title, 60);\r\n }}\r\n />\r\n \r\n \r\n \r\n {/* {c.title} */}\r\n {c.title}\r\n \r\n \r\n {/* \r\n {c.organizationName}\r\n */}\r\n {c.organizationName}\r\n \r\n {c.downloads} downloads \r\n {formatDateToString(c.creationDate)} \r\n \r\n ))}\r\n
\r\n )}\r\n Stock not found
\r\n ) : (\r\n \r\n
\r\n )}\r\n You have not published any stock yet
\r\n\r\n \r\n this.handleNewConnectionIdentifierChange(name, value)\r\n }\r\n fields={[\r\n // {\r\n // title: 'Software',\r\n // name: 'softwareId',\r\n // required: false,\r\n // type: 'select',\r\n // options: props.software.map(t => {\r\n // return { name: t.name, value: t.id };\r\n // })\r\n // },\r\n { title: t('tooltip.number'), name: 'value', required: true, maxLength: 255 }\r\n ]}\r\n />\r\n
\r\n \r\n )}\r\n \r\n \r\n {t => {t('catalogs.catalogsAvailability')} }\r\n \r\n {props.myOrganization.catalogs.length === 0 ? (\r\n \r\n {t => (\r\n \r\n {t('catalogs.dontHaveAnyCatalogsToMakeAvailable')}{' '}\r\n {t('catalogs.publishCatalogNow')}\r\n \r\n )}\r\n \r\n ) : (\r\n undefined\r\n )}\r\n \r\n \r\n {props.myOrganization.catalogs\r\n .filter(c => c.publicationStatus == PublicationStatus.Published)\r\n .map(obj => {\r\n const dataConnection = props.myOrganization?.catalogConnections.find(\r\n c =>\r\n c.targetOrganizationId === props.organizationModel?.organization.id &&\r\n c.catalogId === obj.id\r\n );\r\n const catalogMessage = props.catalogMessages?.find(\r\n x =>\r\n x.catalogVersionId === obj.currentVersionId &&\r\n x.toOrganizationId === props.organizationModel?.organization.id\r\n );\r\n return (\r\n {\r\n this.toggleAvailableCatalog(obj, c);\r\n }}>\r\n \r\n \r\n
\r\n {cId.value}
\r\n \r\n this.removeConnectionIdentifier(cId)}\r\n />\r\n
\r\n \r\n \r\n {t('connections.findRelationships')} {'>'}\r\n \r\n \r\n }\r\n />\r\n )}\r\n
{t('connections.noRelFound')}
}\r\n
\r\n )}\r\n \r\n
\r\n \r\n {t('connections.dontHaveRel')}\r\n
\r\n\r\n
\r\n \r\n Wat kan ik doen?\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {t => (\r\n \r\n props.onDisapprove()}>\r\n {t('traffic.Reject')}\r\n \r\n props.onApprove()}>\r\n {t('traffic.Approve')}\r\n \r\n \r\n )}\r\n \r\n
\r\n ) : (\r\n \r\n this.handleDateFormChange(val, 'startDate')}\r\n />\r\n\r\n this.handleDateFormChange(val, 'endDate')}\r\n />\r\n
\r\n );\r\n\r\n return (\r\n \r\n this.handleFormChange(e, v)}\r\n />\r\n\r\n {this.state.inputData.accessibility === CatalogAccessibility.SelectedConnections && (\r\n
\r\n\r\n \r\n this.setState({ showAddAvailablePopup: true })}\r\n colorscheme={XButtonStyle.Secondary}>\r\n {this.state.inputData.retailers.length === 0\r\n ? 'Selecteer retailers'\r\n : this.state.inputData.retailers.length + ' geselecteerd'}\r\n \r\n\r\n this.setState({ showAddAvailablePopup: false })}\r\n saveText=\"selecteren\"\r\n open={this.state.showAddAvailablePopup}\r\n clearOnClose={false}\r\n organizations={this.props.connections}\r\n onSave={organizations => this.toggleRetailers(organizations)}\r\n />\r\n
\r\n )}\r\n \r\n hiddenFileSelectRef.click()} {...props}>\r\n {props.children}\r\n {props.loading === true ? (\r\n \r\n {hiddenFileSelect}\r\n
\r\n );\r\n};\r\n\r\nexport default XFileSelectButton;\r\n\r\nconst ActiveButton = styled(Button)(\r\n {\r\n borderRadius: '0px',\r\n textTransform: 'uppercase',\r\n fontWeight: 'bold',\r\n letterSpacing: '2px',\r\n fontSize: '11px',\r\n position: 'relative',\r\n transition: 'all 0.2s ease-in-out'\r\n },\r\n (props: AllProps) => ({\r\n padding:\r\n props.padding === false\r\n ? undefined\r\n : props.colorscheme !== undefined\r\n ? '13px 46px 13px 30px'\r\n : '13px 30px',\r\n color: props.textcolor || '#fff',\r\n width: props.width || '',\r\n boxShadow:\r\n props.colorscheme === XButtonStyle.Primary\r\n ? '0 15px 30px 0 rgba(0,0,0,.11), 0 5px 15px 0 rgba(0,0,0,.08)'\r\n : '',\r\n background: props.staticcolor ? props.staticcolor : gradientSwitch(props.colorscheme, props),\r\n '&::after':\r\n props.colorscheme !== undefined\r\n ? {\r\n content: '\"▶\"',\r\n position: 'absolute',\r\n opacity: 1,\r\n right: '22px',\r\n transition: 'all 0.2s ease-in-out'\r\n }\r\n : {},\r\n\r\n '&:hover::after': {\r\n opacity: 0,\r\n right: '50px'\r\n },\r\n '&:hover': {\r\n padding: props.colorscheme !== undefined ? '13px 38px 13px 38px' : undefined\r\n }\r\n })\r\n);\r\n\r\nconst NonActiveButton = styled(Button)(\r\n {\r\n backgroundColor: 'lightgrey',\r\n borderRadius: '0px',\r\n textTransform: 'none',\r\n padding: '13px 46px 13px 30px',\r\n fontFamily: 'Montserrat-Bold'\r\n },\r\n (props: AllProps) => ({\r\n color: props.textcolor\r\n })\r\n);\r\n","import * as React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\n\r\nimport styled from '@emotion/styled';\r\nimport { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';\r\nimport { XButtonStyle } from 'src/components/layout/XButton';\r\nimport { XContainer } from 'src/components/layout/XContainer';\r\nimport XField from 'src/components/layout/XField';\r\nimport XFileSelectButton from 'src/components/layout/XFileSelectButton';\r\nimport XFormButtons from 'src/components/layout/XFormButtons';\r\nimport XImageEditor from 'src/components/layout/XImageEditor';\r\nimport { ApiResult } from 'src/helpers/apiClient';\r\nimport { Organization, OrganizationModel, OrganizationType } from 'src/models/Organization';\r\nimport { AuthenticationAccount } from 'src/store/authentication/types';\r\nimport * as catalogActions from 'src/store/catalogs/actions';\r\nimport * as organizationActions from 'src/store/organizations/actions';\r\nimport { ApplicationState } from '../../../store';\r\nimport * as catalogSelects from '../../../store/catalogs/selectors';\r\nimport { CatalogFormData, EmptyCatalogFormData } from '../../../store/catalogs/types';\r\nimport { FileRoute } from './WizardRouter';\r\nimport { Translation } from 'react-i18next';\r\n\r\ntype StateProps = {\r\n data: CatalogFormData;\r\n myOrganization?: OrganizationModel;\r\n targetOrganization?: OrganizationModel;\r\n account: AuthenticationAccount;\r\n};\r\n\r\ntype DispatchProps = {\r\n storeInformation: (data: CatalogFormData) => void;\r\n getMyOrganization: () => void;\r\n getOrganization: (id: string) => Promise\r\n