init

react/features/salesforce/components/web/RecordItem.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import { RECORD_TYPE } from '../../constants';
+
+/**
+ * The type of the React {@code Component} props of {@link RecordItem}.
+ */
+interface IProps {
+
+    /**
+     * The id of the record.
+     */
+    id?: string;
+
+    /**
+     * The name of the record.
+     */
+    name?: string;
+
+    /**
+     * The handler for the click event.
+     */
+    onClick?: (e?: React.MouseEvent) => void;
+
+    /**
+     * The type of the record.
+     */
+    type?: string;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        recordItem: {
+            display: 'flex',
+            alignItems: 'center'
+        },
+        recordTypeIcon: {
+            borderRadius: theme.shape.borderRadius,
+            height: '40px',
+            marginRight: '16px',
+            width: '40px'
+        },
+        recordDetails: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            justifyContent: 'space-around',
+            overflow: 'hidden',
+            padding: '12px 0',
+            textOverflow: 'ellipsis'
+        },
+        recordName: {
+            fontSize: '1rem',
+            fontWeight: 400,
+            lineHeight: '1.25rem',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        },
+        recordType: {
+            fontSize: '0.875rem',
+            fontWeight: 400,
+            lineHeight: '1.125rem'
+        }
+    };
+});
+
+/**
+ * Component to render Record data.
+ *
+ * @param {IProps} props - The props of the component.
+ * @returns {React$Element<any>}
+ */
+export const RecordItem = ({
+    id,
+    name,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onClick = () => {},
+    type
+}: IProps) => {
+    const { t } = useTranslation();
+    const Icon = RECORD_TYPE[type as keyof typeof RECORD_TYPE].icon;
+    const { classes } = useStyles();
+
+    return (
+        <li
+            className = { classes.recordItem }
+            key = { `record-${id}` }
+            onClick = { onClick }
+            title = { name }>
+            <div className = { classes.recordTypeIcon }>{Icon && <Icon />}</div>
+            <div className = { classes.recordDetails }>
+                <div
+                    className = { classes.recordName }
+                    key = { name }>
+                    {name}
+                </div>
+                <div
+                    className = { classes.recordType }
+                    key = { type }>
+                    {t(RECORD_TYPE[type ?? ''].label)}
+                </div>
+            </div>
+        </li>
+    );
+};

react/features/salesforce/components/web/SalesforceLinkDialog.tsx

@@ -0,0 +1,284 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { hideDialog } from '../../../base/dialog/actions';
+import Icon from '../../../base/icons/components/Icon';
+import { IconSearch } from '../../../base/icons/svg';
+import { getFieldValue } from '../../../base/react/functions';
+import Dialog from '../../../base/ui/components/web/Dialog';
+import Spinner from '../../../base/ui/components/web/Spinner';
+import { NOTES_MAX_LENGTH } from '../../constants';
+import { useSalesforceLinkDialog } from '../../useSalesforceLinkDialog';
+
+import { RecordItem } from './RecordItem';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            height: '450px',
+            overflowY: 'auto',
+            position: 'relative'
+        },
+        recordsSearchContainer: {
+            position: 'relative',
+            padding: '1px'
+        },
+        searchIcon: {
+            display: 'block',
+            position: 'absolute',
+            color: theme.palette.text03,
+            left: 16,
+            top: 10,
+            width: 20,
+            height: 20
+        },
+        resultLabel: {
+            fontSize: '1rem',
+            margin: '16px 0 8px'
+        },
+        recordsSearch: {
+            backgroundColor: theme.palette.field01,
+            border: '1px solid',
+            borderRadius: theme.shape.borderRadius,
+            borderColor: theme.palette.ui05,
+            color: theme.palette.text01,
+            padding: '10px 16px 10px 44px',
+            width: '100%',
+            height: 40,
+            '&::placeholder': {
+                color: theme.palette.text03,
+                ...theme.typography.bodyShortRegular
+            }
+        },
+        spinner: {
+            alignItems: 'center',
+            display: 'flex',
+            height: 'calc(100% - 70px)',
+            justifyContent: 'center',
+            width: '100%',
+
+            '@media (max-width: 448px)': {
+                height: 'auto',
+                marginTop: '24px'
+            }
+        },
+        noRecords: {
+            height: 'calc(100% - 150px)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+
+            '@media (max-width: 448px)': {
+                height: 'auto',
+                marginTop: '24px'
+            }
+        },
+        recordsError: {
+            height: 'calc(100% - 42px)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+
+            '@media (max-width: 448px)': {
+                height: 'auto',
+                marginTop: '24px'
+            }
+        },
+        recordList: {
+            listStyle: 'none',
+            margin: '10px 0',
+            padding: 0
+        },
+        recordInfo: {
+            backgroundColor: theme.palette.ui03,
+            padding: '0 16px',
+            borderRadius: theme.shape.borderRadius,
+            marginBottom: '28px'
+        },
+        detailsError: {
+            padding: '10px 0'
+        },
+        addNote: {
+            padding: '10px 0'
+        },
+        notes: {
+            lineHeight: '1.125rem',
+            minHeight: '130px',
+            resize: 'vertical',
+            width: '100%',
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            border: '1px solid',
+            borderColor: theme.palette.ui05,
+            backgroundColor: theme.palette.field01,
+            color: theme.palette.text01,
+            borderRadius: theme.shape.borderRadius,
+            padding: '10px 16px'
+        }
+    };
+});
+
+
+/**
+ * Component that renders the Salesforce link dialog.
+ *
+ * @returns {React$Element<any>}
+ */
+function SalesforceLinkDialog() {
+    const { t } = useTranslation();
+    const { classes, theme } = useStyles();
+    const dispatch = useDispatch();
+    const {
+        hasDetailsErrors,
+        hasRecordsErrors,
+        isLoading,
+        linkMeeting,
+        notes,
+        records,
+        searchTerm,
+        selectedRecord,
+        selectedRecordOwner,
+        setNotes,
+        setSearchTerm,
+        setSelectedRecord,
+        showNoResults,
+        showSearchResults
+    } = useSalesforceLinkDialog();
+
+    const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = getFieldValue(event);
+
+        setSearchTerm(value);
+    }, [ getFieldValue ]);
+
+    const handleSubmit = useCallback(() => {
+        dispatch(hideDialog());
+        selectedRecord && linkMeeting();
+    }, [ hideDialog, linkMeeting ]);
+
+    const renderSpinner = () => (
+        <div className = { classes.spinner }>
+            <Spinner />
+        </div>
+    );
+
+    const renderDetailsErrors = () => (
+        <div className = { classes.detailsError }>
+            {t('dialog.searchResultsDetailsError')}
+        </div>
+    );
+
+    const renderSelection = () => (
+        <div>
+            <div className = { classes.recordInfo }>
+                <RecordItem { ...selectedRecord } />
+                {selectedRecordOwner && <RecordItem { ...selectedRecordOwner } />}
+                {hasDetailsErrors && renderDetailsErrors()}
+            </div>
+            <div className = { classes.addNote }>{t('dialog.addOptionalNote')}</div>
+            <textarea
+                autoFocus = { true }
+                className = { classes.notes }
+                maxLength = { NOTES_MAX_LENGTH }
+                /* eslint-disable-next-line react/jsx-no-bind */
+                onChange = { e => setNotes(e.target.value) }
+                placeholder = { t('dialog.addMeetingNote') }
+                rows = { 4 }
+                value = { notes } />
+        </div>
+    );
+
+    const renderRecordsSearch = () => !selectedRecord && (
+        <div className = { classes.recordsSearchContainer }>
+            <Icon
+                className = { classes.searchIcon }
+                color = { theme.palette.icon03 }
+                src = { IconSearch } />
+            <input
+                autoComplete = 'off'
+                autoFocus = { false }
+                className = { classes.recordsSearch }
+                name = 'recordsSearch'
+                onChange = { handleChange }
+                placeholder = { t('dialog.searchInSalesforce') }
+                tabIndex = { 0 }
+                value = { searchTerm ?? '' } />
+            {(!isLoading && !hasRecordsErrors) && (
+                <div className = { classes.resultLabel }>
+                    {showSearchResults
+                        ? t('dialog.searchResults', { count: records.length })
+                        : t('dialog.recentlyUsedObjects')
+                    }
+                </div>
+            )}
+        </div>
+    );
+
+    const renderNoRecords = () => showNoResults && (
+        <div className = { classes.noRecords }>
+            <div>{t('dialog.searchResultsNotFound')}</div>
+            <div>{t('dialog.searchResultsTryAgain')}</div>
+        </div>
+    );
+
+    const renderRecordsError = () => (
+        <div className = { classes.recordsError }>
+            {t('dialog.searchResultsError')}
+        </div>
+    );
+
+    const renderContent = () => {
+        if (isLoading) {
+            return renderSpinner();
+        }
+        if (hasRecordsErrors) {
+            return renderRecordsError();
+        }
+        if (showNoResults) {
+            return renderNoRecords();
+        }
+        if (selectedRecord) {
+            return renderSelection();
+        }
+
+        return (
+            <ul className = { classes.recordList }>
+                {records.map((item: any) => (
+                    <RecordItem
+                        key = { `record-${item.id}` }
+                        /* eslint-disable-next-line react/jsx-no-bind */
+                        onClick = { () => setSelectedRecord(item) }
+                        { ...item } />
+                ))}
+            </ul>
+        );
+    };
+
+    return (
+        <Dialog
+            back = {{
+                hidden: !selectedRecord,
+                onClick: () => setSelectedRecord(null),
+                translationKey: 'dialog.Back'
+            }}
+            cancel = {{ hidden: true }}
+            disableEnter = { true }
+            ok = {{
+                translationKey: 'dialog.linkMeeting',
+                hidden: !selectedRecord
+            }}
+            onSubmit = { handleSubmit }
+            titleKey = 'dialog.linkMeetingTitle'>
+            <div className = { classes.container } >
+                {renderRecordsSearch()}
+                {renderContent()}
+            </div>
+        </Dialog>
+    );
+}
+
+export default SalesforceLinkDialog;