})
@@ -64,7 +64,7 @@ browser. This authenticates the chat plugin and enables you to send messages
immediately:
```
-http://airy.core/chatplugin/ui/example?channel_id=})
diff --git a/docs/docs/guides/contributing.md b/docs/docs/guides/contributing.md
index 4828ea12b7..e2223662d7 100644
--- a/docs/docs/guides/contributing.md
+++ b/docs/docs/guides/contributing.md
@@ -163,6 +163,7 @@ Branches must abide to the following format:
- `feature` or `feat` are used for feature branches
- `bug`, `fix`, `hotfix` are used for bug fixes
+- `enhancement` is used for improvements of existing features
- `doc` or `docs` are used for documentation changes
- `chore` is used for maintenance tasks on the repo
@@ -174,6 +175,7 @@ Given these conventions here are a few examples:
feat/42-the-meaning-of-life
bug/24-say-the-vat-is-good
hotfix/4242-til-json-is-not-a-subset-of-js
+enhancement/3333-speed-up-airy-instance-creation
```
### Commits
@@ -182,7 +184,7 @@ To keep a clean track of what is being released, every feature must contain only
one commit when merged. The commit message of the squashed commit is very
important, since it will be used to keep track of the features in a release.
-The conventional format is: `[#issue] - description`. For the example, if your
+The conventional format is: `[#issue] Description` (`Description` must start with a capital letter). For the example, if your
pull request refers to the issue "Introduce meaning of life" with number 42,
the squashed commit message must be:
diff --git a/docs/docs/integrations/rasa-assistant.md b/docs/docs/integrations/rasa-assistant.md
index 6f367378bc..09172f34f6 100644
--- a/docs/docs/integrations/rasa-assistant.md
+++ b/docs/docs/integrations/rasa-assistant.md
@@ -91,7 +91,7 @@ Add the configuration values to your existing Rasa `credentials.yml`:
```yaml
channels.airy.AiryInput:
- api_host: "http://airy.core"
+ api_host: "http://localhost"
system_token: "the system api token for Airy Core"
```
diff --git a/docs/docs/integrations/rasa-suggested-replies.md b/docs/docs/integrations/rasa-suggested-replies.md
index d4dc73f82d..d046f6b39f 100644
--- a/docs/docs/integrations/rasa-suggested-replies.md
+++ b/docs/docs/integrations/rasa-suggested-replies.md
@@ -96,5 +96,5 @@ Now we need to stop the server and retrain the model:
rasa train
```
-Finally, we start the Rasa server, open the Airy Inbox (at `http://airy.core` for local deployments), where we should
+Finally, we start the Rasa server, open the Airy Inbox (at `http://localhost` for local deployments), where we should
see the suggested replies whenever a contact greets us (see gif above).
diff --git a/docs/docs/sources/chatplugin/installation.md b/docs/docs/sources/chatplugin/installation.md
index 150c8f3ae0..4b21d91e83 100644
--- a/docs/docs/sources/chatplugin/installation.md
+++ b/docs/docs/sources/chatplugin/installation.md
@@ -24,14 +24,14 @@ the `` section:
You must replace `CHANNEL_ID` with the channel ID obtained when
[connecting](#connecting-a-channel) the source and `SCRIPT_HOST` with the host
of your Chat Plugin server. When using the local minikube environment
-`SCRIPT_HOST` must be set to `airy.core`.
+`SCRIPT_HOST` must be set to `localhost`.
:::note
-`airy.core` is not publicly accessible. The setup will only work for local web pages.
+`localhost` is not publicly accessible. The setup will only work for local web pages.
:::
To test the setup, replace the `CHANNEL_ID` in the URL
-`http://airy.core/chatplugin/ui/example?channel_id=CHANNEL_ID` and open it in your
+`http://localhost/chatplugin/ui/example?channel_id=CHANNEL_ID` and open it in your
browser.
diff --git a/docs/docs/sources/chatplugin/quickstart.md b/docs/docs/sources/chatplugin/quickstart.md
index 65b822e1b1..901b593fa7 100644
--- a/docs/docs/sources/chatplugin/quickstart.md
+++ b/docs/docs/sources/chatplugin/quickstart.md
@@ -62,7 +62,7 @@ import ConnectChatPlugin from '../../api/endpoints/connect-chatPlugin.mdx'
curl -H "Content-Type: application/json" -d \
"{
\"name\": \"chat plugin source\"
-}" http://airy.core/channels.chatplugin.connect
+}" http://localhost/channels.chatplugin.connect
```
})
@@ -111,7 +111,7 @@ browser. This authenticates the chat plugin and enables you to send messages
immediately:
```
-http://airy.core/chatplugin/ui/example?channel_id=```sh -curl -XPOST http://airy.core/conversations.list | jq . +curl -XPOST http://localhost/conversations.list | jq . ``` The [Inbox UI](/ui/inbox/introduction) lists all your [conversations](/getting-started/glossary/#conversation), across all [sources](/getting-started/glossary/#source). diff --git a/docs/docs/sources/introduction.md b/docs/docs/sources/introduction.md index e0e188ac53..d57ebdfe7f 100644 --- a/docs/docs/sources/introduction.md +++ b/docs/docs/sources/introduction.md @@ -39,7 +39,7 @@ icon={
+
+ );
+ }
+ };
const OverviewSection = () => (
@@ -112,41 +150,57 @@ const ChatPluginConnect = (props: ConnectedProps) => {
);
- const PageContent = () => {
- if (channelId === 'new') {
- return
-
-
{t('chatpluginTitle')}
- {channelId == null && ( -
-
-
- )}
+
+ , state: () => StateMo
);
};
+//deleteContact is disabled in the Contacts page (temporarily)
export const deleteContact = (id: string) => (dispatch: Dispatch) => {
HttpClientInstance.deleteContact(id).then(() => {
dispatch(deleteContactAction(id));
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ContactIcon.tsx b/frontend/inbox/src/components/ContactDetails/ContactIcon.tsx
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ContactIcon.tsx
rename to frontend/inbox/src/components/ContactDetails/ContactIcon.tsx
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ContactInfoPoint.tsx b/frontend/inbox/src/components/ContactDetails/ContactInfoPoint.tsx
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ContactInfoPoint.tsx
rename to frontend/inbox/src/components/ContactDetails/ContactInfoPoint.tsx
diff --git a/frontend/inbox/src/components/ContactDetails/ConversationsForContact.tsx b/frontend/inbox/src/components/ContactDetails/ConversationsForContact.tsx
new file mode 100644
index 0000000000..fbaf942d80
--- /dev/null
+++ b/frontend/inbox/src/components/ContactDetails/ConversationsForContact.tsx
@@ -0,0 +1,58 @@
+import React, {useEffect, useState} from 'react';
+import {Link} from 'react-router-dom';
+import {INBOX_CONVERSATIONS_ROUTE} from '../../routes/routes';
+import {Source} from 'model';
+import {ConnectorAvatar} from 'components';
+import {useTranslation} from 'react-i18next';
+import {ConversationInfoForContact} from './index';
+import {cyConversationsListForContact, cyConversationForContactButton} from 'handles';
+import styles from './index.module.scss';
+
+type ConversationsForContactsProps = {
+ conversationId: string;
+ conversationsForContact: {[conversationId: string]: Source};
+};
+
+export const ConversationsForContact = (props: ConversationsForContactsProps) => {
+ const {conversationId, conversationsForContact} = props;
+ const {t} = useTranslation();
+ const [conversationsForContactFormatted, setConversationsForContactFormatted] = useState([]);
+
+ useEffect(() => {
+ formatConversationsForContact();
+ }, []);
+
+ const formatConversationsForContact = () => {
+ const conversationsIdForContactArr = Object?.entries(conversationsForContact);
+ const conversationsForContactArr = [];
+
+ if (conversationsIdForContactArr.length > 0) {
+ for (const idProperty in conversationsForContact) {
+ const convInfo = {} as ConversationInfoForContact;
+
+ if (idProperty !== conversationId) {
+ convInfo.id = idProperty;
+ convInfo.connector = conversationsForContact[idProperty];
+ conversationsForContactArr.push(convInfo);
+ }
+ }
+ setConversationsForContactFormatted(conversationsForContactArr);
+ }
+ };
+
+ return (
+ >;
} & ConnectedProps;
-export interface ConversationInfoForContact {
- id: string;
- connector: string;
-}
-
const ContactDetails = (props: ContactDetailsProps) => {
const {
contact,
@@ -67,8 +66,7 @@ const ContactDetails = (props: ContactDetailsProps) => {
const [organization, setOrganization] = useState(contacts[contact?.id]?.organizationName || `${t('companyName')}`);
const [newContactCollapsed, setNewContactCollapsed] = useState(existingContact);
const [existingContactCollapsed, setExistingContactCollapsed] = useState(existingContact);
- const [conversationsForContact, setConversationsForContact] = useState([]);
- const [areOthersConversationForContact, setAreOthersConversationForContact] = useState(false);
+ const [areAvailableConversationForContact, setAreAvailableConversationForContact] = useState(false);
const [expanded, setExpanded] = useState(false);
const totalInfoPoints = 6;
const visibleInfoPointsNewContact = 1;
@@ -78,24 +76,12 @@ const ContactDetails = (props: ContactDetailsProps) => {
: totalInfoPoints - visibleInfoPointsExistingContact;
useEffect(() => {
- getContactId();
+ fetchContactDetailsAndStoreId();
setExpanded(false);
- setAreOthersConversationForContact(false);
- setConversationsForContact([]);
+ setAreAvailableConversationForContact(false);
+ setContactId('');
}, [conversationId, contact?.id]);
- const getContactId = async () => {
- try {
- const contactId = conversationId
- ? await getContactDetails({conversationId: conversationId})
- : await getContactDetails({id: contact?.id});
- setContactId(contactId);
- setContactIdConvMetadata(contactId);
- } catch (error) {
- return error;
- }
- };
-
useEffect(() => {
if (contacts && contacts[contact?.id || contactId]) {
fillContactInfo(
@@ -108,9 +94,8 @@ const ContactDetails = (props: ContactDetailsProps) => {
setOrganization
);
updateContactType(contacts[contact?.id || contactId]);
- setConversationsForContact(formatConversationsForContact(contacts[contact?.id || contactId].conversations));
}
- }, [contact?.id, conversationId, contactId]);
+ }, [conversationId, contactId]);
useEffect(() => {
if (isEditing) removeDefaultTextWhenEditing();
@@ -131,20 +116,28 @@ const ContactDetails = (props: ContactDetailsProps) => {
}
}, [editingCanceled]);
- const formatConversationsForContact = (convObj: {[key: string]: string}) => {
- const conversationsForContactArr = [];
-
- for (const idProperty in convObj) {
- if (Object?.entries(contacts[contact?.id || contactId]?.conversations).length > 1) {
- setAreOthersConversationForContact(true);
- const convInfo = {} as ConversationInfoForContact;
- convInfo.id = idProperty;
- convInfo.connector = convObj[idProperty];
- conversationsForContactArr.push(convInfo);
+ useEffect(() => {
+ const currentContact = contacts[contactId] || contact;
+ if (contactId && currentContact && currentContact?.conversations) {
+ if (setContactIdConvMetadata) setContactIdConvMetadata(contactId);
+ const conversationsForContactArr = Object.entries(currentContact?.conversations);
+ if (conversationId && conversationsForContactArr.length > 2) {
+ setAreAvailableConversationForContact(true);
+ }
+ if (!conversationId && conversationsForContactArr.length >= 1) {
+ setAreAvailableConversationForContact(true);
}
}
+ }, [contacts, contactId]);
- return conversationsForContactArr;
+ const fetchContactDetailsAndStoreId = async () => {
+ if (conversationId && !contact?.id) {
+ const contactId = await getContactDetails({conversationId: conversationId});
+ setContactId(contactId);
+ } else {
+ await getContactDetails({id: contact.id});
+ setContactId(contact.id);
+ }
};
const removeDefaultTextWhenEditing = () => {
@@ -249,19 +242,11 @@ const ContactDetails = (props: ContactDetailsProps) => {
)}
- {areOthersConversationForContact && conversationsForContact && (
- ;
-
-const ContactDetails = (props: ContactDetailsProps) => {
- const {contact, isEditing, cancelEditing, updateContactDetails} = props;
- const {t} = useTranslation();
- const [email, setEmail] = useState(contact?.via?.email || 'email');
- const [phone, setPhone] = useState(contact?.via?.phone || 'phone');
- const [title, setTitle] = useState(contact.title || 'title');
- const [address, setAddress] = useState(contact?.address?.addressLine1 || 'address');
- const [city, setCity] = useState(contact?.address?.city || 'city');
- const [organization, setOrganization] = useState(contact?.organizationName || 'company name');
- const [editModeOn, setEditModeOn] = useState(isEditing || false);
-
- useEffect(() => {
- setEmail(contact?.via?.email || 'email');
- setPhone(contact?.via?.phone || 'phone');
- setTitle(contact?.title || 'title');
- setAddress(contact?.address?.addressLine1 || 'address');
- setCity(contact?.address?.city || 'city');
- setOrganization(contact?.organizationName || 'company name');
- setEditModeOn(false);
- }, [contact.id]);
-
- useEffect(() => {
- setEditModeOn(isEditing);
- }, [isEditing]);
-
- useEffect(() => {
- cancelEditing &&
- (setEmail(contact?.via?.email),
- setPhone(contact?.via?.phone),
- setTitle(contact?.title),
- setAddress(contact?.address?.addressLine1),
- setCity(contact?.address?.city),
- setOrganization(contact?.organizationName));
- }, [cancelEditing]);
-
- const handleUpdateContact = () => {
- updateContactDetails({id: contact.id, via: {email, phone}, title, organizationName: organization});
- };
-
- return (
- >;
+ contactInformationVisible: boolean;
} & ConnectedProps;
const ContactInformation = (props: ContactInformationProps) => {
@@ -52,6 +56,8 @@ const ContactInformation = (props: ContactInformationProps) => {
editModeOn,
cancelEdit,
setEditModeOn,
+ setContactInformationVisible,
+ contactInformationVisible,
} = props;
const {t} = useTranslation();
const [showEditDisplayName, setShowEditDisplayName] = useState(false);
@@ -119,8 +125,15 @@ const ContactInformation = (props: ContactInformationProps) => {
return (
<>
- {(contact || conversationId) && (
+ {(contact || conversationId) && contactInformationVisible && (
({
contacts: state.data.contacts.all.items,
@@ -30,10 +31,21 @@ type ContactListItemProps = {
setContact: (contact: Contact) => void;
setEditModeOn: (editOn: boolean) => void;
setCancelEdit: (cancel: boolean) => void;
+ setCurrentVisibleContactId: React.Dispatch>;
+ currentVisibleContactId: string;
} & ConnectedProps;
const ContactListItem = (props: ContactListItemProps) => {
- const {contacts, contact, setConversationId, setContact, setEditModeOn, setCancelEdit} = props;
+ const {
+ contacts,
+ contact,
+ setConversationId,
+ setContact,
+ setEditModeOn,
+ setCancelEdit,
+ setCurrentVisibleContactId,
+ currentVisibleContactId,
+ } = props;
const {t} = useTranslation();
const conversationId = contact.conversations && Object.keys(contact?.conversations)[0];
const [showDeleteContactModal, setShowDeleteContactModal] = useState(false);
@@ -77,20 +89,25 @@ const ContactListItem = (props: ContactListItemProps) => {
setContact(contact);
setCancelEdit(true);
setEditModeOn(false);
+ setCurrentVisibleContactId(contact.id);
};
const handleShowModal = (show: boolean) => {
setShowDeleteContactModal(show);
};
- const handleEditMode = (event: any) => {
+ const handleEditMode = (event: React.MouseEvent) => {
setContact(contact);
setEditModeOn(true);
event.stopPropagation();
};
return (
-
-
+
-
+ navigate(-1)} type="button">
+
+
+ {t('chatpluginTitle')}
+
+
- navigate(-1)} type="button">
-
+
);
};
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/ConnectNewChatPlugin.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/ConnectNewChatPlugin.module.scss
index a63e9aace3..3c4f80aa7e 100644
--- a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/ConnectNewChatPlugin.module.scss
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/ConnectNewChatPlugin.module.scss
@@ -10,6 +10,12 @@
.formRow {
margin-bottom: 16px;
+
+ &:hover {
+ .actionToolTip {
+ display: block;
+ }
+ }
}
.settings {
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/ConnectNewChatPlugin.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/ConnectNewChatPlugin.tsx
index fcd8b9b88c..8bbdf9108a 100644
--- a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/ConnectNewChatPlugin.tsx
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/ConnectNewChatPlugin.tsx
@@ -18,7 +18,6 @@ export const ConnectNewChatPlugin = ({createNewConnection}: ConnectNewChatPlugin
return (
+
-
+
+
+
+ {channelId === 'new' ? t('create') : t('update')}
+
+ {channelId !== 'new' && (
+
+ {t('customize')}
+
+ )}
+ {channelId !== 'new' && (
+
+ {t('install')}
+
+ )}
+
+
+
+
-
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CreateUpdateSection/CreateUpdateSection.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CreateUpdateSection/CreateUpdateSection.module.scss
new file mode 100644
index 0000000000..8627ca430b
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CreateUpdateSection/CreateUpdateSection.module.scss
@@ -0,0 +1,8 @@
+.formWrapper {
+ align-self: center;
+ display: flex;
+}
+
+.settings {
+ width: 20rem;
+}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CreateUpdateSection/CreateUpdateSection.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CreateUpdateSection/CreateUpdateSection.tsx
new file mode 100644
index 0000000000..0252e2c500
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CreateUpdateSection/CreateUpdateSection.tsx
@@ -0,0 +1,99 @@
+import React, {useState} from 'react';
+import {Button, Input} from 'components';
+import styles from './CreateUpdateSection.module.scss';
+import {cyChannelsChatPluginFormNameInput} from 'handles';
+import {useTranslation} from 'react-i18next';
+import {updateChannel} from '../../../../../../../actions/channel';
+import {connect, ConnectedProps} from 'react-redux';
+import {useNavigate} from 'react-router-dom';
+import {Channel} from 'model';
+
+import {CATALOG_CONNECTED_ROUTE, CONNECTORS_CONNECTED_ROUTE} from '../../../../../../../routes/routes';
+
+const mapDispatchToProps = {
+ updateChannel,
+};
+
+const connector = connect(null, mapDispatchToProps);
+
+type InstallUpdateSectionProps = {
+ channel: Channel;
+ displayName: string;
+ imageUrl: string;
+} & ConnectedProps;
+
+const CreateUpdateSection = (props: InstallUpdateSectionProps) => {
+ const {channel, displayName, imageUrl} = props;
+ const [submit, setSubmit] = useState(false);
+ const [newDisplayName, setNewDisplayName] = useState(displayName || channel?.metadata?.name);
+ const [newImageUrl, setNewImageUrl] = useState(imageUrl || channel?.metadata?.imageUrl);
+ const {t} = useTranslation();
+ const navigate = useNavigate();
+ const CONNECTED_ROUTE = location.pathname.includes('connectors')
+ ? CONNECTORS_CONNECTED_ROUTE
+ : CATALOG_CONNECTED_ROUTE;
+
+ const updateConnection = (displayName: string, imageUrl?: string) => {
+ props.updateChannel({channelId: channel.id, name: displayName, imageUrl: imageUrl}).then(() => {
+ navigate(CONNECTED_ROUTE + '/chatplugin', {replace: true});
+ });
+ };
+
+ return (
+ ('closingOption', CloseOption.full);
- const [bubbleState, setBubbleState] = useLocalState('bubbleState', BubbleState.expanded);
-
- const codeAreaRef = createRef();
-
- useEffect(() => {
- hideImages && hideVideos && hideFiles ? setHideAttachments(true) : setHideAttachments(false);
- }, [hideImages, hideVideos, hideFiles]);
-
- useEffect(() => {
- useCustomFont ? setCustomFont(customFont) : setCustomFont('Arial');
- useCustomFont && customFont === 'Arial' && setCustomFont('Lato');
- }, [useCustomFont]);
-
- const toggleShowHeaderTextColorPicker = () => {
- setShowHeaderTextColorPicker(!showHeaderTextColorPicker);
- };
-
- const toggleShowSubtitleTextColorPicker = () => {
- setShowSubtitleTextColorPicker(!showSubtitleTextColorPicker);
- };
-
- const toggleShowPrimaryColorPicker = () => {
- setShowPrimaryColorPicker(!showPrimaryColorPicker);
- };
-
- const toggleShowAccentColorPicker = () => {
- setShowAccentColorPicker(!showAccentColorPicker);
- };
-
- const toggleShowBackgroundColorPicker = () => {
- setShowBackgroundColorPicker(!showBackgroundColorPicker);
- };
-
- const toggleShowInboundMessageColorPicker = () => {
- setShowInboundMessageColorPicker(!showInboundMessageColorPicker);
- };
-
- const toggleShowInboundMessageTextColorPicker = () => {
- setShowInboundMessageTextColorPicker(!showInboundMessageTextColorPicker);
- };
-
- const toggleShowOutboundMessageColorPicker = () => {
- setShowOutboundMessageColorPicker(!showOutboundMessageColorPicker);
- };
-
- const toggleShowOutboundMessageTextColorPicker = () => {
- setShowOutboundMessageTextColorPicker(!showOutboundMessageTextColorPicker);
- };
- const toggleShowUnreadMessageDotColorPicker = () => {
- setShowUnreadMessageDotColorPicker(!showUnreadMessageDotColorPicker);
- };
-
- const getTemplateConfig = () => {
- const config = [
- headerText && `headerText: '${headerText}'`,
- subtitleText && `subtitleText: '${subtitleText}'`,
- startNewConversationText && `startNewConversationText: '${startNewConversationText}'`,
- bubbleIconUrl && `bubbleIcon: '${bubbleIconUrl}'`,
- sendMessageIconUrl && `sendMessageIcon: '${sendMessageIconUrl}'`,
- headerTextColor && `headerTextColor: '${headerTextColor}'`,
- subtitleTextColor && `subtitleTextColor: '${subtitleTextColor}'`,
- primaryColor && `primaryColor: '${primaryColor}'`,
- accentColor && `accentColor: '${accentColor}'`,
- backgroundColor && `backgroundColor: '${backgroundColor}'`,
- inboundMessageBackgroundColor && `inboundMessageColor: '${inboundMessageBackgroundColor}'`,
- inboundMessageTextColor && `inboundMessageTextColor: '${inboundMessageTextColor}'`,
- outboundMessageBackgroundColor && `outboundMessageColor: '${outboundMessageBackgroundColor}'`,
- outboundMessageTextColor && `outboundMessageTextColor: '${outboundMessageTextColor}'`,
- unreadMessageDotColor && `unreadMessageDotColor: '${unreadMessageDotColor}'`,
- height && `height: '${height}'`,
- width && `width: '${width}'`,
- `closeMode: '${closingOption}'`,
- `bubbleState: '${bubbleState}'`,
- `disableMobile: '${disableMobile}'`,
- `hideInputBar: '${hideInputBar}'`,
- `hideEmojis: '${hideEmojis}'`,
- `useCustomFont: '${useCustomFont}'`,
- `customFont: '${customFont}'`,
- `hideAttachments: '${hideAttachments}'`,
- `hideImages: '${hideImages}'`,
- `hideVideos: '${hideVideos}'`,
- `hideFiles: '${hideFiles}'`,
- ];
-
- return `w[n].config = {${'\n '}${config.filter(it => it !== '').join(',\n ')}\n };`;
- };
-
- const demoConfig: AiryChatPluginConfiguration = {
- apiHost: env.API_HOST,
- channelId,
- config: {
- showMode: true,
- ...(headerText && {headerText}),
- ...(subtitleText && {subtitleText}),
- ...(startNewConversationText && {startNewConversationText}),
- ...(headerTextColor && {headerTextColor}),
- ...(subtitleTextColor && {subtitleTextColor}),
- ...(primaryColor && {primaryColor}),
- ...(accentColor && {accentColor}),
- ...(backgroundColor && {backgroundColor}),
- ...(outboundMessageBackgroundColor && {outboundMessageColor: outboundMessageBackgroundColor}),
- ...(outboundMessageTextColor && {outboundMessageTextColor}),
- ...(inboundMessageBackgroundColor && {inboundMessageColor: inboundMessageBackgroundColor}),
- ...(inboundMessageTextColor && {inboundMessageTextColor}),
- ...(unreadMessageDotColor && {unreadMessageDotColor}),
- ...(bubbleIconUrl && {bubbleIcon: bubbleIconUrl}),
- ...(sendMessageIconUrl && {sendMessageIcon: sendMessageIconUrl}),
- ...(width && {width: parseInt(width) < 200 ? 350 : parseInt(width)}),
- ...(height && {height: parseInt(height) < 200 ? 700 : parseInt(height)}),
- ...(closingOption && {closeMode: closingOption}),
- ...(bubbleState && {bubbleState: bubbleState}),
- ...(disableMobile && {disableMobile: disableMobile}),
- ...(hideInputBar && {hideInputBar: hideInputBar}),
- ...(hideEmojis && {hideEmojis: hideEmojis}),
- ...(useCustomFont && {useCustomFont: useCustomFont}),
- ...(customFont && {customFont: customFont}),
- ...(hideAttachments && {hideAttachments: hideAttachments}),
- ...(hideImages && {hideImages: hideImages}),
- ...(hideVideos && {hideVideos: hideVideos}),
- ...(hideFiles && {hideFiles: hideFiles}),
- },
- };
- const copyToClipboard = () => {
- codeAreaRef.current?.select();
- document.execCommand('copy');
- };
-
- const getCode = () =>
- ``;
-
- return (
- <>
- >;
+ toggle: () => void;
+};
+
+export const ModalColorPicker = (props: ModalColorPickerProps) => {
+ const {color, setColor, toggle} = props;
+
+ return (
+
+
+ {
+ setColor(color.hex.toUpperCase());
+ }}
+ />
+
+
+ );
+};
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/SampleInput/index.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/SampleInput/index.module.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/SampleInput/index.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/SampleInput/index.tsx
new file mode 100644
index 0000000000..1ee644f0ce
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/SampleInput/index.tsx
@@ -0,0 +1,36 @@
+import {Input} from 'components';
+import React, {Dispatch, SetStateAction} from 'react';
+
+type SampleInputProps = {
+ value: string;
+ setValue: Dispatch>;
+ name: string;
+ placeholder: string;
+};
+
+export const SampleInput = (props: SampleInputProps) => {
+ const {value, setValue, name, placeholder} = props;
+
+ return (
+ ) => {
+ setValue(e.target.value);
+ }}
+ onBlur={(e: React.ChangeEvent) => {
+ const value = e.target.value;
+ if (value !== '') {
+ const newColor = value.startsWith('#') ? value : '#' + value;
+ setValue(newColor.toUpperCase());
+ } else {
+ setValue(placeholder);
+ }
+ }}
+ placeholder={placeholder}
+ height={32}
+ fontClass="font-base"
+ />
+ );
+};
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/index.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/index.module.scss
new file mode 100644
index 0000000000..4652d4453a
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/index.module.scss
@@ -0,0 +1,54 @@
+@import 'assets/scss/fonts.scss';
+@import 'assets/scss/colors.scss';
+@import 'assets/scss/animations.scss';
+@import 'assets/scss/z-index.scss';
+
+.stepTextDropdown {
+ button {
+ line-height: 24px;
+ width: auto;
+ margin-bottom: 8px;
+ border: none;
+ }
+}
+
+.colorContainer {
+ display: flex;
+}
+
+.dropdownInputContainer {
+ display: flex;
+ flex-direction: column;
+}
+
+.colorPickerContainer {
+ display: flex;
+ align-items: center;
+}
+
+.colorPickers {
+ display: flex;
+ height: 32px;
+ align-items: center;
+ padding-left: 8px;
+}
+
+.inputsContainer {
+ display: flex;
+ flex-direction: column;
+}
+
+.hexTitle {
+ margin-top: 6px;
+ margin-bottom: 5px;
+}
+
+.colorSample {
+ display: flex;
+ flex-direction: column;
+}
+
+.sampleTitle {
+ margin-top: 6px;
+ margin-bottom: 12px;
+}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/index.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/index.tsx
new file mode 100644
index 0000000000..91e6790f9d
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/index.tsx
@@ -0,0 +1,455 @@
+import {useLocalState} from '../../../../../../../../services';
+import {DefaultColors} from 'model';
+import React, {Dispatch, SetStateAction} from 'react';
+import {useTranslation} from 'react-i18next';
+import {ColorPicker} from './ColorPicker';
+import {ColorPickerSample} from './ColorPickerSample';
+import {ModalColorPicker} from './ModalColorPicker';
+import {SampleInput} from './SampleInput';
+import styles from './index.module.scss';
+import {Dropdown} from 'components';
+
+type ColorSectionProps = {
+ headerTextColor: string;
+ setHeaderTextColor: Dispatch>;
+ subtitleTextColor: string;
+ setSubtitleTextColor: Dispatch>;
+ primaryColor: string;
+ setPrimaryColor: Dispatch>;
+ accentColor: string;
+ setAccentColor: Dispatch>;
+ backgroundColor: string;
+ setBackgroundColor: Dispatch>;
+ inboundMessageColor: string;
+ setInboundMessageColor: Dispatch>;
+ inboundMessageTextColor: string;
+ setInboundMessageTextColor: Dispatch>;
+ outboundMessageColor: string;
+ setOutboundMessageColor: Dispatch>;
+ outboundMessageTextColor: string;
+ setOutboundMessageTextColor: Dispatch>;
+ unreadMessageDotColor: string;
+ setUnreadMessageDotColor: Dispatch>;
+ setColorStepText: Dispatch>;
+};
+
+export const ColorSection = (props: ColorSectionProps) => {
+ const {
+ headerTextColor,
+ subtitleTextColor,
+ primaryColor,
+ accentColor,
+ backgroundColor,
+ inboundMessageColor,
+ inboundMessageTextColor,
+ outboundMessageColor,
+ outboundMessageTextColor,
+ unreadMessageDotColor,
+ setHeaderTextColor,
+ setSubtitleTextColor,
+ setPrimaryColor,
+ setAccentColor,
+ setBackgroundColor,
+ setInboundMessageColor,
+ setInboundMessageTextColor,
+ setOutboundMessageColor,
+ setOutboundMessageTextColor,
+ setUnreadMessageDotColor,
+ } = props;
+
+ const {t} = useTranslation();
+ const [activeColorStep, setActiveColorStep] = useLocalState('activeColorStep', 0);
+ const [colorStepText, setColorStepText] = useLocalState('colorStepText', `${t('headerTextColor')}`);
+ const colorStepsArr = [
+ t('headerTextColor'),
+ t('subtitleTextColor'),
+ t('primaryColor'),
+ t('accentColor'),
+ t('backgroundColor'),
+ t('inboundBackgroundColor'),
+ t('inboundMessageTextColor'),
+ t('outboundBackgroundColor'),
+ t('outboundMessageTextColor'),
+ t('unreadMessageDotColor'),
+ ];
+
+ const [showHeaderTextColorPicker, setShowHeaderTextColorPicker] = useLocalState('showHeaderTextColorPicker', false);
+ const [showSubtitleTextColorPicker, setShowSubtitleTextColorPicker] = useLocalState(
+ 'showSubtitleTextColorPicker',
+ false
+ );
+ const [showPrimaryColorPicker, setShowPrimaryColorPicker] = useLocalState('showPrimaryColorPicker', false);
+ const [showAccentColorPicker, setShowAccentColorPicker] = useLocalState('showAccentColorPicker', false);
+
+ const [showBackgroundColorPicker, setShowBackgroundColorPicker] = useLocalState('showBackgroundColorPicker', false);
+ const [showInboundMessageColorPicker, setShowInboundMessageColorPicker] = useLocalState(
+ 'showInboundMessageColorPicker',
+ false
+ );
+ const [showInboundMessageTextColorPicker, setShowInboundMessageTextColorPicker] = useLocalState(
+ 'showInboundMessageTextColorPicker',
+ false
+ );
+ const [showOutboundMessageColorPicker, setShowOutboundMessageColorPicker] = useLocalState(
+ 'showOutboundMessageColorPicker',
+ false
+ );
+ const [showOutboundMessageTextColorPicker, setShowOutboundMessageTextColorPicker] = useLocalState(
+ 'showOutboundMessageTextColorPicker',
+ false
+ );
+ const [showUnreadMessageDotColorPicker, setShowUnreadMessageDotColorPicker] = useLocalState(
+ 'showUnreadMessageDotColorPicker',
+ false
+ );
+
+ const toggleShowHeaderTextColorPicker = () => {
+ setShowHeaderTextColorPicker(!showHeaderTextColorPicker);
+ };
+
+ const toggleShowSubtitleTextColorPicker = () => {
+ setShowSubtitleTextColorPicker(!showSubtitleTextColorPicker);
+ };
+
+ const toggleShowPrimaryColorPicker = () => {
+ setShowPrimaryColorPicker(!showPrimaryColorPicker);
+ };
+
+ const toggleShowAccentColorPicker = () => {
+ setShowAccentColorPicker(!showAccentColorPicker);
+ };
+
+ const toggleShowBackgroundColorPicker = () => {
+ setShowBackgroundColorPicker(!showBackgroundColorPicker);
+ };
+
+ const toggleShowInboundMessageColorPicker = () => {
+ setShowInboundMessageColorPicker(!showInboundMessageColorPicker);
+ };
+
+ const toggleShowInboundMessageTextColorPicker = () => {
+ setShowInboundMessageTextColorPicker(!showInboundMessageTextColorPicker);
+ };
+
+ const toggleShowOutboundMessageColorPicker = () => {
+ setShowOutboundMessageColorPicker(!showOutboundMessageColorPicker);
+ };
+
+ const toggleShowOutboundMessageTextColorPicker = () => {
+ setShowOutboundMessageTextColorPicker(!showOutboundMessageTextColorPicker);
+ };
+ const toggleShowUnreadMessageDotColorPicker = () => {
+ setShowUnreadMessageDotColorPicker(!showUnreadMessageDotColorPicker);
+ };
+
+ const handleColorStepChange = (stepText: string) => {
+ switch (stepText) {
+ case t('headerTextColor'):
+ setActiveColorStep(0);
+ setColorStepText(`${t('headerTextColor')}`);
+ props.setColorStepText(`${t('headerTextColor')}`);
+ break;
+ case t('subtitleTextColor'):
+ setActiveColorStep(1);
+ setColorStepText(`${t('subtitleTextColor')}`);
+ props.setColorStepText(`${t('subtitleTextColor')}`);
+ break;
+ case t('primaryColor'):
+ setActiveColorStep(2);
+ setColorStepText(`${t('primaryColor')}`);
+ props.setColorStepText(`${t('primaryColor')}`);
+ break;
+ case t('accentColor'):
+ setActiveColorStep(3);
+ setColorStepText(`${t('accentColor')}`);
+ props.setColorStepText(`${t('accentColor')}`);
+ break;
+ case t('backgroundColor'):
+ setActiveColorStep(4);
+ setColorStepText(`${t('backgroundColor')}`);
+ props.setColorStepText(`${t('backgroundColor')}`);
+ break;
+ case t('inboundBackgroundColor'):
+ setActiveColorStep(5);
+ setColorStepText(`${t('inboundBackgroundColor')}`);
+ props.setColorStepText(`${t('inboundBackgroundColor')}`);
+ break;
+ case t('inboundMessageTextColor'):
+ setActiveColorStep(6);
+ setColorStepText(`${t('inboundMessageTextColor')}`);
+ props.setColorStepText(`${t('inboundMessageTextColor')}`);
+ break;
+ case t('outboundBackgroundColor'):
+ setActiveColorStep(7);
+ setColorStepText(`${t('outboundBackgroundColor')}`);
+ props.setColorStepText(`${t('outboundBackgroundColor')}`);
+ break;
+ case t('outboundMessageTextColor'):
+ setActiveColorStep(8);
+ setColorStepText(`${t('outboundMessageTextColor')}`);
+ props.setColorStepText(`${t('outboundMessageTextColor')}`);
+ break;
+ case t('unreadMessageDotColor'):
+ setActiveColorStep(9);
+ setColorStepText(`${t('unreadMessageDotColor')}`);
+ props.setColorStepText(`${t('unreadMessageDotColor')}`);
+ break;
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/CustomiseSection.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/CustomiseSection.module.scss
new file mode 100644
index 0000000000..d539e298a1
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/CustomiseSection.module.scss
@@ -0,0 +1,194 @@
+@import 'assets/scss/fonts.scss';
+@import 'assets/scss/colors.scss';
+@import 'assets/scss/animations.scss';
+@import 'assets/scss/z-index.scss';
+
+.customiseContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ margin-right: 16px;
+ label {
+ white-space: nowrap;
+ margin-right: 30px;
+ min-width: 240px;
+ }
+}
+
+.customiseContainerInputs {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.customiseContainerToggles {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.customiseContainerDropdowns {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.extraOptions {
+ margin: 16px 20px 24px 0;
+ min-width: 300px;
+}
+
+.stepTextDropdown {
+ button {
+ line-height: 24px;
+ width: auto;
+ margin-bottom: 8px;
+ border: none;
+ }
+}
+
+.codeAreaContainer {
+ margin-right: 16px;
+}
+
+.installHint {
+ font-weight: bold;
+ margin-bottom: 8px;
+ code {
+ color: var(--color-red-alert);
+ background-color: var(--color-background-gray);
+ padding: 2px;
+ }
+}
+
+.codeArea {
+ @media screen and (max-width: 1600px) {
+ max-width: 32em;
+ }
+ @include font-base;
+ width: 40em;
+ height: 19.2em;
+ background-color: var(--color-background-gray);
+ color: var(--color-text-contrast);
+ border-radius: 8px;
+ border: 1px solid var(--color-dark-elements-gray);
+ resize: none;
+ padding: 8px;
+ margin-bottom: 16px;
+}
+
+.pluginWrapper {
+ display: flex;
+ flex-flow: column-reverse;
+ background-color: var(--color-background-gray);
+ border-radius: 10px;
+ padding: 0 24px 0 24px;
+ margin: 32px 0 0 24px;
+ min-width: 350px;
+ min-height: 700px;
+ position: fixed;
+ right: 0px;
+ bottom: 0px;
+ background: transparent;
+ z-index: $popup + 1;
+ pointer-events: none;
+}
+
+.pluginContainer {
+ bottom: 0px;
+ right: 0px;
+ position: absolute;
+}
+
+.titleContainer {
+ display: flex;
+ flex-direction: column;
+ margin-left: 8px;
+ h1 {
+ @include font-l;
+ font-weight: 700;
+ }
+ h2 {
+ @include font-base;
+ color: var(--color-text-gray);
+ margin-bottom: 18px;
+ }
+
+ span {
+ @include font-base;
+ font-weight: 700;
+ }
+}
+
+.buttonContainer {
+ display: flex;
+ height: 26px;
+ align-self: flex-end;
+ align-items: center;
+ button {
+ border: 1px solid green;
+ @include font-base;
+ border: none;
+ background: transparent;
+ color: var(--color-airy-blue);
+ margin: 0 8px;
+ &:hover {
+ cursor: pointer;
+ text-decoration: underline;
+ }
+ }
+ a {
+ @include font-base;
+ text-decoration: none;
+ color: var(--color-airy-blue);
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
+
+.colorContainer {
+ display: flex;
+}
+
+.dropdownInputContainer {
+ display: flex;
+ flex-direction: column;
+}
+
+.colorPickerContainer {
+ display: flex;
+ align-items: center;
+}
+
+.colorPickers {
+ display: flex;
+ height: 32px;
+ align-items: center;
+ padding-left: 8px;
+}
+
+.inputsContainer {
+ display: flex;
+ flex-direction: column;
+}
+
+.hexTitle {
+ margin-top: 6px;
+ margin-bottom: 5px;
+}
+
+.colorSample {
+ display: flex;
+ flex-direction: column;
+}
+
+.sampleTitle {
+ margin-top: 6px;
+ margin-bottom: 12px;
+}
+
+.borderLine {
+ height: 1px;
+ width: 80%;
+ background-color: var(--color-light-gray);
+ margin: 18px 0;
+}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/CustomiseSection.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/CustomiseSection.tsx
new file mode 100644
index 0000000000..e0c34f693b
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/CustomiseSection.tsx
@@ -0,0 +1,329 @@
+import React, {Dispatch, SetStateAction, useEffect} from 'react';
+import {Dropdown} from 'components';
+import styles from './CustomiseSection.module.scss';
+import {AiryChatPlugin, AiryChatPluginConfiguration} from 'chat-plugin';
+import {env} from '../../../../../../../env';
+import {getUseLocalState} from '../../../../../../../services/hooks/localState';
+import {fetchGoogleFonts} from '../../../../../../../api/index';
+import {useTranslation} from 'react-i18next';
+import {useParams} from 'react-router-dom';
+import {BubbleState, ChatpluginConfig, CloseOption, DefaultColors, DefaultConfig} from 'model';
+import {isEqual} from 'lodash-es';
+import {ColorSection} from './ColorSection';
+import {InputToggleSection} from './InputToggleSection';
+
+type CustomiseSectionProps = {
+ channelId: string;
+ host: string;
+ setChatpluginConfig: Dispatch>;
+};
+
+let CurrentConfig: ChatpluginConfig = {};
+
+export const CustomiseSection = ({channelId, host, setChatpluginConfig}: CustomiseSectionProps) => {
+ const {channelIdParams} = useParams();
+ const useLocalState = getUseLocalState(channelId || channelIdParams);
+ const {t} = useTranslation();
+ const [customHost, setCustomHost] = useLocalState('customHost', host);
+ const [headerText, setHeaderText] = useLocalState('headerText', DefaultConfig.headerText);
+ const [subtitleText, setSubtitleText] = useLocalState('subTitleText', DefaultConfig.subtitleText);
+ const [startNewConversationText, setStartNewConversationText] = useLocalState(
+ 'startNewConversationText',
+ DefaultConfig.startNewConversationText
+ );
+ const [bubbleIcon, setBubbleIcon] = useLocalState('bubbleIcon', DefaultConfig.bubbleIcon);
+ const [sendMessageIcon, setSendMessageIcon] = useLocalState('sendMessageIcon', DefaultConfig.sendMessageIcon);
+ const [headerTextColor, setHeaderTextColor] = useLocalState('headerTextColor', `${DefaultConfig.headerTextColor}`);
+ const [subtitleTextColor, setSubtitleTextColor] = useLocalState(
+ 'subtitleTextColor',
+ `${DefaultColors.subtitleTextColor}`
+ );
+ const [primaryColor, setPrimaryColor] = useLocalState('primaryColor', `${DefaultColors.primaryColor}`);
+ const [accentColor, setAccentColor] = useLocalState('accentColor', `${DefaultColors.accentColor}`);
+ const [backgroundColor, setBackgroundColor] = useLocalState('backgroundColor', `${DefaultColors.backgroundColor}`);
+ const [inboundMessageColor, setInboundMessageColor] = useLocalState(
+ 'inboundMessageColor',
+ `${DefaultColors.inboundMessageColor}`
+ );
+ const [inboundMessageTextColor, setInboundMessageTextColor] = useLocalState(
+ 'inboundMessageTextColor',
+ `${DefaultColors.inboundMessageTextColor}`
+ );
+ const [outboundMessageColor, setOutboundMessageColor] = useLocalState(
+ 'outboundMessageColor',
+ `${DefaultColors.outboundMessageColor}`
+ );
+ const [outboundMessageTextColor, setOutboundMessageTextColor] = useLocalState(
+ 'outboundMessageTextColor',
+ `${DefaultColors.outboundMessageTextColor}`
+ );
+ const [unreadMessageDotColor, setUnreadMessageDotColor] = useLocalState(
+ 'unreadMessageDotColor',
+ `${DefaultColors.unreadMessageDotColor}`
+ );
+
+ const [height, setHeight] = useLocalState('height', `${DefaultConfig.height}`);
+ const [width, setWidth] = useLocalState('width', `${DefaultConfig.width}`);
+ const [disableMobile, setDisableMobile] = useLocalState('disableMobile', DefaultConfig.disableMobile);
+ const [hideInputBar, setHideInputBar] = useLocalState('hideInputBar', DefaultConfig.hideInputBar);
+ const [hideEmojis, setHideEmojis] = useLocalState('hideEmojis', DefaultConfig.hideEmojis);
+ const [hideAttachments, setHideAttachments] = useLocalState('hideAttachments', DefaultConfig.hideAttachments);
+ const [hideImages, setHideImages] = useLocalState('hideImages', DefaultConfig.hideImages);
+ const [hideVideos, setHideVideos] = useLocalState('hideVideos', DefaultConfig.hideVideos);
+ const [hideFiles, setHideFiles] = useLocalState('hideFiles', DefaultConfig.hideFiles);
+ const [useCustomFont, setUseCustomFont] = useLocalState('useCustomFont', DefaultConfig.useCustomFont);
+ const [customFont, setCustomFont] = useLocalState('customFont', DefaultConfig.customFont);
+ const [closeMode, setCloseMode] = useLocalState('closeMode', DefaultConfig.closeMode);
+ const [bubbleState, setBubbleState] = useLocalState('bubbleState', DefaultConfig.bubbleState);
+ const [colorStepText, setColorStepText] = useLocalState('colorStepText', `${t('headerTextColor')}`);
+
+ const NewConfig: ChatpluginConfig = {
+ welcomeMessage: '',
+ startNewConversationText: '',
+ headerText,
+ subtitleText,
+ headerTextColor,
+ subtitleTextColor,
+ primaryColor,
+ accentColor,
+ backgroundColor,
+ inboundMessageColor,
+ inboundMessageTextColor,
+ outboundMessageColor,
+ outboundMessageTextColor,
+ unreadMessageDotColor,
+ sendMessageIcon,
+ showMode: false,
+ height,
+ width,
+ disableMobile,
+ bubbleState,
+ bubbleIcon,
+ closeMode,
+ hideInputBar,
+ hideEmojis,
+ useCustomFont,
+ customFont,
+ hideAttachments,
+ hideImages,
+ hideVideos,
+ hideFiles,
+ };
+
+ const areEqual = isEqual(CurrentConfig, NewConfig);
+ const noChanges = isEqual(NewConfig, DefaultConfig) && isEqual(CurrentConfig, DefaultConfig);
+
+ useEffect(() => {
+ hideImages && hideVideos && hideFiles ? setHideAttachments(true) : setHideAttachments(false);
+ }, [hideImages, hideVideos, hideFiles]);
+
+ useEffect(() => {
+ useCustomFont ? setCustomFont(customFont) : setCustomFont('Arial');
+ useCustomFont && customFont === 'Arial' && setCustomFont('Lato');
+ }, [useCustomFont]);
+
+ const handleResetConfig = () => {
+ setHeaderText('');
+ setHeaderTextColor(DefaultColors.headerTextColor);
+ setSubtitleText('');
+ setSubtitleTextColor(DefaultColors.subtitleTextColor);
+ setPrimaryColor(DefaultColors.primaryColor);
+ setAccentColor(DefaultColors.accentColor);
+ setBackgroundColor(DefaultColors.backgroundColor);
+ setInboundMessageColor(DefaultColors.inboundMessageColor);
+ setInboundMessageTextColor(DefaultColors.inboundMessageTextColor);
+ setOutboundMessageColor(DefaultColors.outboundMessageColor);
+ setOutboundMessageTextColor(DefaultColors.outboundMessageTextColor);
+ setUnreadMessageDotColor(DefaultColors.unreadMessageDotColor);
+ setHeight('700');
+ setWidth('380');
+ setDisableMobile(false);
+ setBubbleState(BubbleState.expanded);
+ setCloseMode(CloseOption.full);
+ setHideInputBar(false);
+ setHideEmojis(false);
+ setUseCustomFont(true);
+ setCustomFont('Lato');
+ setHideAttachments(false);
+ setHideImages(false);
+ setHideVideos(false);
+ setHideFiles(false);
+ setSendMessageIcon('');
+ setBubbleIcon('');
+ };
+
+ const handleSaveConfig = () => {
+ CurrentConfig = NewConfig;
+ setChatpluginConfig(NewConfig);
+ };
+
+ const demoConfig: AiryChatPluginConfiguration = {
+ apiHost: env.API_HOST,
+ channelId,
+ config: {
+ showMode: true,
+ ...(headerText && {headerText}),
+ ...(subtitleText && {subtitleText}),
+ ...(startNewConversationText && {startNewConversationText}),
+ ...(headerTextColor && {headerTextColor}),
+ ...(subtitleTextColor && {subtitleTextColor}),
+ ...(primaryColor && {primaryColor}),
+ ...(accentColor && {accentColor}),
+ ...(backgroundColor && {backgroundColor}),
+ ...(outboundMessageColor && {outboundMessageColor: outboundMessageColor}),
+ ...(outboundMessageTextColor && {outboundMessageTextColor}),
+ ...(inboundMessageColor && {inboundMessageColor: inboundMessageColor}),
+ ...(inboundMessageTextColor && {inboundMessageTextColor}),
+ ...(unreadMessageDotColor && {unreadMessageDotColor}),
+ ...(bubbleIcon && {bubbleIcon: bubbleIcon}),
+ ...(sendMessageIcon && {sendMessageIcon: sendMessageIcon}),
+ ...(width && {width: parseInt(width) < 200 ? 380 : parseInt(width)}),
+ ...(height && {height: parseInt(height) < 200 ? 700 : parseInt(height)}),
+ ...(closeMode && {closeMode: closeMode}),
+ ...(bubbleState && {bubbleState: bubbleState}),
+ ...(disableMobile && {disableMobile: disableMobile}),
+ ...(hideInputBar && {hideInputBar: hideInputBar}),
+ ...(hideEmojis && {hideEmojis: hideEmojis}),
+ ...(useCustomFont && {useCustomFont: useCustomFont}),
+ ...(customFont && {customFont: customFont}),
+ ...(hideAttachments && {hideAttachments: hideAttachments}),
+ ...(hideImages && {hideImages: hideImages}),
+ ...(hideVideos && {hideVideos: hideVideos}),
+ ...(hideFiles && {hideFiles: hideFiles}),
+ },
+ };
+
+ return (
+ <>
+ >;
+ subtitleText: string;
+ setSubtitleText: Dispatch>;
+ startNewConversationText: string;
+ setStartNewConversationText: Dispatch>;
+ bubbleIcon: string;
+ setBubbleIcon: Dispatch>;
+ sendMessageIcon: string;
+ setSendMessageIcon: Dispatch>;
+ customHost: string;
+ setCustomHost: Dispatch>;
+ height: string;
+ setHeight: Dispatch>;
+ width: string;
+ setWidth: Dispatch>;
+ disableMobile: boolean;
+ setDisableMobile: Dispatch>;
+ hideInputBar: boolean;
+ setHideInputBar: Dispatch>;
+ hideEmojis: boolean;
+ setHideEmojis: Dispatch>;
+ useCustomFont: boolean;
+ setUseCustomFont: Dispatch>;
+ hideImages: boolean;
+ setHideImages: Dispatch>;
+ hideVideos: boolean;
+ setHideVideos: Dispatch>;
+ hideFiles: boolean;
+ setHideFiles: Dispatch>;
+};
+
+export const InputToggleSection = (props: InputToggleSectionProps) => {
+ const {
+ headerText,
+ setHeaderText,
+ subtitleText,
+ setSubtitleText,
+ startNewConversationText,
+ setStartNewConversationText,
+ bubbleIcon,
+ setBubbleIcon,
+ sendMessageIcon,
+ setSendMessageIcon,
+ customHost,
+ setCustomHost,
+ height,
+ setHeight,
+ width,
+ setWidth,
+ disableMobile,
+ setDisableMobile,
+ hideInputBar,
+ setHideInputBar,
+ hideEmojis,
+ setHideEmojis,
+ useCustomFont,
+ setUseCustomFont,
+ hideImages,
+ setHideImages,
+ hideVideos,
+ setHideVideos,
+ hideFiles,
+ setHideFiles,
+ } = props;
+
+ const currentLanguage = localStorage.getItem('language');
+ const {t} = useTranslation();
+
+ return (
+ ) => {
- event.preventDefault();
- setCurrentPage('settings');
- };
-
- const showCustomization = (event: React.MouseEvent) => {
- event.preventDefault();
- setCurrentPage('install-customization');
- };
-
- const ConnectContent = () => {
- const [displayName, setDisplayName] = useState(channel?.metadata?.name || '');
- const [imageUrl, setImageUrl] = useState(channel?.metadata?.imageUrl || '');
-
- switch (currentPage) {
- case 'settings':
- return (
- ();
+ const codeAreaRefNpm = createRef();
+
+ const getTemplateConfig = (isNpm: boolean) => {
+ const config = [
+ headerText ? `headerText: '${headerText}'` : `headerText: ''`,
+ subtitleText ? `subtitleText: '${subtitleText}'` : `subtitleText: '${subtitleText}'`,
+ startNewConversationText && `startNewConversationText: '${startNewConversationText}'`,
+ bubbleIcon && `bubbleIcon: '${bubbleIcon}'`,
+ sendMessageIcon && `sendMessageIcon: '${sendMessageIcon}'`,
+ headerTextColor && `headerTextColor: '${headerTextColor}'`,
+ subtitleTextColor && `subtitleTextColor: '${subtitleTextColor}'`,
+ primaryColor && `primaryColor: '${primaryColor}'`,
+ accentColor && `accentColor: '${accentColor}'`,
+ backgroundColor && `backgroundColor: '${backgroundColor}'`,
+ inboundMessageColor && `inboundMessageColor: '${inboundMessageColor}'`,
+ inboundMessageTextColor && `inboundMessageTextColor: '${inboundMessageTextColor}'`,
+ outboundMessageColor && `outboundMessageColor: '${outboundMessageColor}'`,
+ outboundMessageTextColor && `outboundMessageTextColor: '${outboundMessageTextColor}'`,
+ unreadMessageDotColor && `unreadMessageDotColor: '${unreadMessageDotColor}'`,
+ height && `height: '${height}'`,
+ width && `width: '${width}'`,
+ `closeMode: '${closeMode}'`,
+ `bubbleState: '${bubbleState}'`,
+ `disableMobile: '${disableMobile}'`,
+ `hideInputBar: '${hideInputBar}'`,
+ `hideEmojis: '${hideEmojis}'`,
+ `useCustomFont: '${useCustomFont}'`,
+ `customFont: '${customFont}'`,
+ `hideAttachments: '${hideAttachments}'`,
+ `hideImages: '${hideImages}'`,
+ `hideVideos: '${hideVideos}'`,
+ `hideFiles: '${hideFiles}'`,
+ ];
+
+ return isNpm
+ ? `${config.filter(it => it !== '').join(',\n ')}`
+ : `w[n].config = {${'\n '}${config.filter(it => it !== '').join(',\n ')}\n };`;
+ };
+
+ const copyToClipboard = (isNpm: boolean) => {
+ isNpm ? codeAreaRefNpm.current?.select() : codeAreaRef.current?.select();
+ document.execCommand('copy');
+ };
+
+ const getCodeScript = () =>
+ ``;
+
+ const getCodeNpm = () =>
+ `
+ import React from "react";
+ import {AiryChatPlugin, AiryChatPluginConfiguration} from "@airyhq/chat-plugin";
+
+ const Component = () => {
+ const config: AiryChatPluginConfiguration = {
+ apiHost: '${host}',
+ channelId: '${channelId}',
+ ${getTemplateConfig(true)}
+ };
+
+ return (
+ ) => {
const channels = useSelector((state: StateModel) => Object.values(allChannelsConnected(state)));
@@ -34,11 +30,11 @@ const Connectors = (props: ConnectedProps) => {
}, []);
useEffect(() => {
- if (props.channels.length === 0) {
+ if (channels.length === 0) {
props.listChannels();
}
setPageTitle(pageTitle);
- }, [props.channels.length]);
+ }, [channels.length]);
return (
{
+ setEnablePopupVisible(false);
+ setIsPopUpOpen(false);
+ }}
+ >
+
+ )}
);
};
+
+export default connector(ItemInfo);
diff --git a/frontend/control-center/src/pages/Status/ComponentListItem/index.module.scss b/frontend/control-center/src/pages/Status/ComponentListItem/index.module.scss
index 03eb302df6..19d0cc15ef 100644
--- a/frontend/control-center/src/pages/Status/ComponentListItem/index.module.scss
+++ b/frontend/control-center/src/pages/Status/ComponentListItem/index.module.scss
@@ -108,3 +108,33 @@
.blankSpace {
width: 60px;
}
+
+.enableModalContainerWrapper {
+ width: 50%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.enableModalContainer {
+ @include font-l;
+ flex-direction: column;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.enableModalContainer div {
+ @include font-xl;
+}
+
+.popUpSubtitle {
+ color: var(--color-text-gray);
+}
+
+.enableModalContainer p {
+ @include font-l;
+ margin-bottom: 30px;
+}
diff --git a/frontend/control-center/src/pages/Status/ComponentListItem/index.tsx b/frontend/control-center/src/pages/Status/ComponentListItem/index.tsx
index ae5d8deb25..7fa2ac59ba 100644
--- a/frontend/control-center/src/pages/Status/ComponentListItem/index.tsx
+++ b/frontend/control-center/src/pages/Status/ComponentListItem/index.tsx
@@ -1,5 +1,5 @@
import React, {useState, useEffect, useRef} from 'react';
-import {ItemInfo} from './ItemInfo';
+import ItemInfo from './ItemInfo';
import styles from './index.module.scss';
type ComponentsListProps = {
@@ -12,6 +12,7 @@ type ComponentsListProps = {
export const ComponentListItem = (props: ComponentsListProps) => {
const {healthy, componentName, enabled, services} = props;
const [isExpanded, setIsExpanded] = useState(false);
+ const [isPopUpOpen, setIsPopUpOpen] = useState(false);
const wrapperSection = useRef(null);
const defaultHeight = 50;
@@ -27,11 +28,20 @@ export const ComponentListItem = (props: ComponentsListProps) => {
}
}, [isExpanded]);
- const toggleExpanded = () => setIsExpanded(!isExpanded);
+ const toggleExpanded = () => {
+ if (!isPopUpOpen) setIsExpanded(!isExpanded);
+ };
return (
- {
itemName={service.name}
isComponent={false}
isExpanded={isExpanded}
+ setIsPopUpOpen={setIsPopUpOpen}
key={index}
/>
))}
diff --git a/frontend/control-center/src/pages/Status/index.tsx b/frontend/control-center/src/pages/Status/index.tsx
index 288b26b7cb..69b48f3a5c 100644
--- a/frontend/control-center/src/pages/Status/index.tsx
+++ b/frontend/control-center/src/pages/Status/index.tsx
@@ -52,19 +52,15 @@ const Status = (props: ConnectedProps) => {
{t('addChatplugin')}
+
+ );
+};
+
+export default connector(CreateUpdateSection);
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection.module.scss
deleted file mode 100644
index 0a53688299..0000000000
--- a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection.module.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@import 'assets/scss/fonts.scss';
-
-.customiseContainer {
- margin-top: 28px;
- margin-right: 16px;
-}
-
-.colorPickerWrapper {
- position: absolute;
- padding: 46px 24px 46px 0px;
-}
-
-.colorPicker {
- display: flex;
- place-items: flex-end;
-}
-
-.colorPickerSample {
- background-color: var(--color-airy-blue);
- box-shadow: lightgray 0px 0px 3px 0px;
- height: 34px;
- width: 40px;
- border-radius: 20%;
- margin-right: 4px;
- margin-bottom: 8px;
-}
-
-.extraOptions {
- margin: 16px 0 24px 0;
-}
-
-.codeAreaContainer {
- margin-right: 16px;
-}
-
-.installHint {
- font-weight: bold;
- margin-bottom: 8px;
- code {
- color: var(--color-red-alert);
- background-color: var(--color-background-gray);
- padding: 2px;
- }
-}
-
-.codeArea {
- @media screen and (max-width: 1600px) {
- max-width: 32em;
- }
- @include font-base;
- width: 40em;
- height: 19.2em;
- background-color: var(--color-background-gray);
- color: var(--color-text-contrast);
- border-radius: 8px;
- border: 1px solid var(--color-dark-elements-gray);
- resize: none;
- padding: 8px;
- margin-bottom: 16px;
-}
-
-.pluginWrapper {
- position: relative;
- display: flex;
- flex-flow: column-reverse;
- background-color: var(--color-background-gray);
- border: 1px solid var(--color-dark-elements-gray);
- border-radius: 10px;
- padding: 0 24px 0 24px;
- margin: 32px 0 0 24px;
- min-width: 350px;
- min-height: 700px;
-}
-
-.pluginContainer {
- bottom: 0px;
- right: 0px;
- position: absolute;
-}
-
-.copyButtonHostName {
- display: flex;
-}
-
-.fontDropdownContainer {
- margin: 34px 0 0 24px;
-}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection.tsx
deleted file mode 100644
index a973939e7b..0000000000
--- a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection.tsx
+++ /dev/null
@@ -1,876 +0,0 @@
-import React, {createRef, useEffect} from 'react';
-import {Button, Dropdown, ErrorNotice, Input, ListenOutsideClick, Toggle} from 'components';
-import styles from './CustomiseSection.module.scss';
-import {SketchPicker} from 'react-color';
-import {AiryChatPlugin, AiryChatPluginConfiguration} from 'chat-plugin';
-import {env} from '../../../../../../env';
-import {getUseLocalState} from '../../../../../../services/hooks/localState';
-import {fetchGoogleFonts} from '../../../../../../api/index';
-import {useTranslation} from 'react-i18next';
-
-enum CloseOption {
- basic = 'basic',
- medium = 'medium',
- full = 'full',
-}
-
-enum BubbleState {
- minimized = 'minimized',
- expanded = 'expanded',
-}
-
-interface CustomiseSectionProps {
- channelId: string;
- host: string;
-}
-
-export const CustomiseSection = ({channelId, host}: CustomiseSectionProps) => {
- const useLocalState = getUseLocalState(channelId);
- const {t} = useTranslation();
- const [customHost, setCustomHost] = useLocalState('customHost', host);
- const [headerText, setHeaderText] = useLocalState('headerText', '');
- const [subtitleText, setSubtitleText] = useLocalState('subTitleText', '');
- const [startNewConversationText, setStartNewConversationText] = useLocalState('startNewConversationText', '');
- const [bubbleIconUrl, setBubbleIconUrl] = useLocalState('bubbleIconUrl', '');
- const [sendMessageIconUrl, setSendMessageIconUrl] = useLocalState('sendMessageIconUrl', '');
- const [headerTextColor, setHeaderTextColor] = useLocalState('headerTextColor', '');
- const [subtitleTextColor, setSubtitleTextColor] = useLocalState('subtitleTextColor', '');
- const [showHeaderTextColorPicker, setShowHeaderTextColorPicker] = useLocalState('showHeaderTextColorPicker', false);
- const [showSubtitleTextColorPicker, setShowSubtitleTextColorPicker] = useLocalState(
- 'showSubtitleTextColorPicker',
- false
- );
- const [primaryColor, setPrimaryColor] = useLocalState('primaryColor', '');
- const [showPrimaryColorPicker, setShowPrimaryColorPicker] = useLocalState('showPrimaryColorPicker', false);
- const [accentColor, setAccentColor] = useLocalState('accentColor', '');
- const [showAccentColorPicker, setShowAccentColorPicker] = useLocalState('showAccentColorPicker', false);
-
- const [backgroundColor, setBackgroundColor] = useLocalState('backgroundColor', '');
- const [showBackgroundColorPicker, setShowBackgroundColorPicker] = useLocalState('showBackgroundColorPicker', false);
-
- const [inboundMessageBackgroundColor, setInboundMessageBackgroundColor] = useLocalState(
- 'inboundMessageBackgroundColor',
- ''
- );
- const [showInboundMessageColorPicker, setShowInboundMessageColorPicker] = useLocalState(
- 'showInboundMessageColorPicker',
- false
- );
-
- const [inboundMessageTextColor, setInboundMessageTextColor] = useLocalState('inboundMessageTextColor', '');
- const [showInboundMessageTextColorPicker, setShowInboundMessageTextColorPicker] = useLocalState(
- 'showInboundMessageTextColorPicker',
- false
- );
-
- const [outboundMessageBackgroundColor, setOutboundMessageBackgroundColor] = useLocalState(
- 'outboundMessageBackgroundColor',
- ''
- );
- const [showOutboundMessageColorPicker, setShowOutboundMessageColorPicker] = useLocalState(
- 'showOutboundMessageColorPicker',
- false
- );
-
- const [outboundMessageTextColor, setOutboundMessageTextColor] = useLocalState('outboundMessageTextColor', '');
- const [showOutboundMessageTextColorPicker, setShowOutboundMessageTextColorPicker] = useLocalState(
- 'showOutboundMessageTextColorPicker',
- false
- );
- const [unreadMessageDotColor, setUnreadMessageDotColor] = useLocalState('unreadMessageDotColor', '');
- const [showUnreadMessageDotColorPicker, setShowUnreadMessageDotColorPicker] = useLocalState(
- 'showUnreadMessageDotColorPicker',
- false
- );
-
- const [height, setHeight] = useLocalState('height', '700');
- const [width, setWidth] = useLocalState('width', '350');
- const [disableMobile, setDisableMobile] = useLocalState('disableMobile', false);
- const [hideInputBar, setHideInputBar] = useLocalState('hideInputBar', false);
- const [hideEmojis, setHideEmojis] = useLocalState('hideEmojis', false);
- const [hideAttachments, setHideAttachments] = useLocalState('hideAttachments', false);
- const [hideImages, setHideImages] = useLocalState('hideImages', false);
- const [hideVideos, setHideVideos] = useLocalState('hideVideos', false);
- const [hideFiles, setHideFiles] = useLocalState('hideFiles', false);
- const [useCustomFont, setUseCustomFont] = useLocalState('useCustomFont', true);
- const [customFont, setCustomFont] = useLocalState('customFont', 'Lato');
- const [closingOption, setClosingOption] = useLocalState
+
+
+
-
-
- {t('addCodeTagHead')}
-
- <head>:
-
-
-
-
-
- {customHost.length == 0 && (
-
-
- You need to add a Host URL
-
- )}
-
-
- {t('headTextColor')}
-
- {showHeaderTextColorPicker && (
-
- {
- setHeaderTextColor(color.hex.toUpperCase());
- }}
- />
-
- )}
-
- ) => {
- setHeaderTextColor(e.target.value);
- }}
- onBlur={(e: React.ChangeEvent) => {
- const value = e.target.value;
- if (value !== '') {
- const newHeaderTextColor = value.startsWith('#') ? value : '#' + value;
- setHeaderTextColor(newHeaderTextColor.toUpperCase());
- } else {
- setHeaderTextColor('');
- }
- }}
- placeholder="#FFFFFF"
- height={32}
- fontClass="font-base"
- />
-
- {t('subtitleTextColor')}
-
- {showSubtitleTextColorPicker && (
-
- {
- setSubtitleTextColor(color.hex.toUpperCase());
- }}
- />
-
- )}
-
- ) => {
- setSubtitleTextColor(e.target.value);
- }}
- onBlur={(e: React.ChangeEvent) => {
- const value = e.target.value;
- if (value !== '') {
- const newSubtitleTextColor = value.startsWith('#') ? value : '#' + value;
- setSubtitleTextColor(newSubtitleTextColor.toUpperCase());
- } else {
- setSubtitleTextColor('');
- }
- }}
- placeholder="#FFFFFF"
- height={32}
- fontClass="font-base"
- />
-
- {t('primaryColor')}
-
- {showPrimaryColorPicker && (
-
- {
- setPrimaryColor(color.hex.toUpperCase());
- }}
- />
-
- )}
-
- ) => {
- setPrimaryColor(e.target.value);
- }}
- onBlur={(e: React.ChangeEvent) => {
- const value = e.target.value;
- if (value !== '') {
- const newPrimaryColor = value.startsWith('#') ? value : '#' + value;
- setPrimaryColor(newPrimaryColor.toUpperCase());
- } else {
- setPrimaryColor('');
- }
- }}
- placeholder="#FFFFFF"
- height={32}
- fontClass="font-base"
- />
-
- {t('accentColor')}
-
- {showAccentColorPicker && (
-
- {
- setAccentColor(color.hex.toUpperCase());
- }}
- />
-
- )}
-
-
- ) => {
- setAccentColor(e.target.value);
- }}
- onBlur={(e: React.ChangeEvent) => {
- const value = e.target.value;
- if (value !== '') {
- const newAccentColor = value.startsWith('#') ? value : '#' + value;
- setAccentColor(newAccentColor.toUpperCase());
- } else {
- setAccentColor('');
- }
- }}
- placeholder="#FFFFFF"
- height={32}
- fontClass="font-base"
- />
-
- {t('backgroundColor')}
-
- {showBackgroundColorPicker && (
-
- {
- setBackgroundColor(color.hex.toUpperCase());
- }}
- />
-
- )}
-
- ) => {
- setBackgroundColor(e.target.value);
- }}
- onBlur={(e: React.ChangeEvent) => {
- const value = e.target.value;
- if (value !== '') {
- const newBackgroundColor = value.startsWith('#') ? value : '#' + value;
- setBackgroundColor(newBackgroundColor.toUpperCase());
- } else {
- setBackgroundColor('');
- }
- }}
- placeholder="#FFFFFF"
- height={32}
- fontClass="font-base"
- />
-
- {t('inboundBackgroundColor')}
-
- {showInboundMessageColorPicker && (
-
- {
- setInboundMessageBackgroundColor(color.hex.toUpperCase());
- }}
- />
-
- )}
-
- ) => {
- setInboundMessageBackgroundColor(e.target.value);
- }}
- onBlur={(e: React.ChangeEvent) => {
- const value = e.target.value;
- if (value !== '') {
- const newBackgroundColor = value.startsWith('#') ? value : '#' + value;
- setInboundMessageBackgroundColor(newBackgroundColor.toUpperCase());
- } else {
- setInboundMessageBackgroundColor('');
- }
- }}
- placeholder="#FFFFFF"
- height={32}
- fontClass="font-base"
- />
-
- {t('inboundTextColor')}
-
- {showInboundMessageTextColorPicker && (
-
- {
- setInboundMessageTextColor(color.hex.toUpperCase());
- }}
- />
-
- )}
-
- ) => {
- setInboundMessageTextColor(e.target.value);
- }}
- onBlur={(e: React.ChangeEvent) => {
- const value = e.target.value;
- if (value !== '') {
- const newBackgroundColor = value.startsWith('#') ? value : '#' + value;
- setInboundMessageTextColor(newBackgroundColor.toUpperCase());
- } else {
- setInboundMessageTextColor('');
- }
- }}
- placeholder="#FFFFFF"
- height={32}
- fontClass="font-base"
- />
-
- {t('outboundBackgroundColor')}
-
- {showOutboundMessageColorPicker && (
-
- {
- setOutboundMessageBackgroundColor(color.hex.toUpperCase());
- }}
- />
-
- )}
-
- ) => {
- setOutboundMessageBackgroundColor(e.target.value);
- }}
- onBlur={(e: React.ChangeEvent) => {
- const value = e.target.value;
- if (value !== '') {
- const newBackgroundColor = value.startsWith('#') ? value : '#' + value;
- setOutboundMessageBackgroundColor(newBackgroundColor.toUpperCase());
- } else {
- setOutboundMessageBackgroundColor('');
- }
- }}
- placeholder="#FFFFFF"
- height={32}
- fontClass="font-base"
- />
-
- {t('outboundTextColor')}
-
- {showOutboundMessageTextColorPicker && (
-
- {
- setOutboundMessageTextColor(color.hex.toUpperCase());
- }}
- />
-
- )}
-
- ) => {
- setOutboundMessageTextColor(e.target.value);
- }}
- onBlur={(e: React.ChangeEvent) => {
- const value = e.target.value;
- if (value !== '') {
- const newBackgroundColor = value.startsWith('#') ? value : '#' + value;
- setOutboundMessageTextColor(newBackgroundColor.toUpperCase());
- } else {
- setOutboundMessageTextColor('');
- }
- }}
- placeholder="#FFFFFF"
- height={32}
- fontClass="font-base"
- />
-
- {t('unreadMessageDotColor')}
-
- {showUnreadMessageDotColorPicker && (
-
- {
- setUnreadMessageDotColor(color.hex.toUpperCase());
- }}
- />
-
- )}
-
- ) => {
- setUnreadMessageDotColor(e.target.value);
- }}
- onBlur={(e: React.ChangeEvent) => {
- const value = e.target.value;
- if (value !== '') {
- const newBackgroundColor = value.startsWith('#') ? value : '#' + value;
- setUnreadMessageDotColor(newBackgroundColor.toUpperCase());
- } else {
- setUnreadMessageDotColor('');
- }
- }}
- placeholder="#FFFFFF"
- height={32}
- fontClass="font-base"
- />
-
-
- {
- setClosingOption(option);
- }}
- />
-
-
- {
- setBubbleState(option);
- }}
- />
-
-
- ) => setHeaderText(e.target.value)}
- label={t('headerText')}
- placeholder={t('addTextOptional')}
- height={32}
- fontClass="font-base"
- maxLength={30}
- />
- ) => setSubtitleText(e.target.value)}
- label={t('subtitleText')}
- placeholder={t('addTextOptional')}
- height={32}
- fontClass="font-base"
- maxLength={50}
- />
- ) => setStartNewConversationText(e.target.value)}
- label={t('startNewConversationText')}
- placeholder={t('addTextOptional')}
- height={32}
- fontClass="font-base"
- />
- ) => setBubbleIconUrl(e.target.value)}
- label={t('chatpluginIconUrl')}
- placeholder={t('addImageurlOptional')}
- height={32}
- fontClass="font-base"
- showErrors={false}
- />
- ) => setSendMessageIconUrl(e.target.value)}
- label={t('inputIconUrl')}
- placeholder={t('addImageurlOptional')}
- height={32}
- fontClass="font-base"
- showErrors={false}
- />
- ) => setCustomHost(e.target.value)}
- label={t('customHostUrl')}
- placeholder="http://airy.core"
- required={true}
- height={32}
- fontClass="font-base"
- showErrors={false}
- />
- ) => {
- if (e.target.value === '') {
- setHeight('0');
- } else {
- setHeight(e.target.value);
- }
- }}
- onKeyDown={e => {
- let intHeight = parseInt(height);
- if (e.key === 'ArrowUp') {
- intHeight += 1;
- setHeight(intHeight.toString());
- e.preventDefault();
- } else if (e.key === 'ArrowDown') {
- intHeight -= 1;
- setHeight(intHeight.toString());
- e.preventDefault();
- }
- }}
- label={t('heightPx')}
- placeholder={t('customHeightPlaceholder')}
- height={32}
- fontClass="font-base"
- showErrors={false}
- />
- ) => {
- if (e.target.value === '') {
- setWidth('0');
- } else {
- setWidth(e.target.value);
- }
- }}
- onKeyDown={e => {
- let intWidth = parseInt(width);
- if (e.key === 'ArrowUp') {
- intWidth += 1;
- setWidth(intWidth.toString());
- e.preventDefault();
- } else if (e.key === 'ArrowDown') {
- intWidth -= 1;
- setWidth(intWidth.toString());
- e.preventDefault();
- }
- }}
- label={t('widthPx')}
- placeholder={t('customWidthPlaceholder')}
- height={32}
- fontClass="font-base"
- showErrors={false}
- />
-
-
- setDisableMobile(value)}
- />
-
-
- setHideInputBar(value)}
- />
-
-
- setHideEmojis(value)} />
-
-
- setUseCustomFont(value)}
- />
-
-
-
- {t('supportedFileTypes')}
-
- setHideImages(value)}
- />
-
-
- setHideVideos(value)}
- />
-
-
- setHideFiles(value)} />
-
-
-
-
- );
-};
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPicker/index.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPicker/index.module.scss
new file mode 100644
index 0000000000..302c7d4131
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPicker/index.module.scss
@@ -0,0 +1,28 @@
+@import 'assets/scss/colors.scss';
+
+.activeColorStep {
+ position: relative;
+ height: 34px;
+ width: 34px;
+ left: -6px;
+ top: -6px;
+ border-radius: 32px;
+ border: 2px solid var(--color-airy-logo-blue);
+ background-color: transparent;
+}
+
+.inactiveColorStep {
+ height: 26px;
+ width: 26px;
+ border-radius: 26px;
+ border: 2px solid black;
+ margin-right: 18px;
+ margin-left: 3px;
+ &:hover {
+ cursor: pointer;
+ }
+
+ div:last-child {
+ margin-right: 32px;
+ }
+}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPicker/index.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPicker/index.tsx
new file mode 100644
index 0000000000..7b2f281544
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPicker/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './index.module.scss';
+
+type ColorPickerProps = {
+ setColorStep: () => void;
+ background: string;
+ activeColorStep: number;
+ colorStep: number;
+};
+
+export const ColorPicker = (props: ColorPickerProps) => {
+ const {setColorStep, background, activeColorStep, colorStep} = props;
+ return (
+
-
- {useCustomFont && (
-
-
-
- {
- setCustomFont(font);
- }}
- />
-
- )}
-
+ {activeColorStep === colorStep && }
+
+ );
+};
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPickerSample/index.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPickerSample/index.module.scss
new file mode 100644
index 0000000000..72fee3af50
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPickerSample/index.module.scss
@@ -0,0 +1,12 @@
+.colorPickerSample {
+ background-color: white;
+ box-shadow: lightgray 0px 0px 3px 0px;
+ height: 34px;
+ width: 40px;
+ border-radius: 20%;
+ margin-right: 4px;
+ margin-bottom: 8px;
+ &:hover {
+ cursor: pointer;
+ }
+}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPickerSample/index.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPickerSample/index.tsx
new file mode 100644
index 0000000000..ce03ecd81d
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ColorPickerSample/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './index.module.scss';
+
+type ColorPickerSampleProps = {
+ value: string;
+ toggle: () => void;
+};
+
+export const ColorPickerSample = (props: ColorPickerSampleProps) => {
+ const {value, toggle} = props;
+
+ return ;
+};
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ModalColorPicker/index.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ModalColorPicker/index.module.scss
new file mode 100644
index 0000000000..b19e7b0b03
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ModalColorPicker/index.module.scss
@@ -0,0 +1,18 @@
+@import 'assets/scss/z-index.scss';
+
+.content {
+ position: fixed;
+ top: calc(50% - 150px);
+ left: calc(50% - 110px);
+ transition: top 0.5s;
+}
+
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: $popup;
+ background-color: rgba(0, 0, 0, 0.75);
+}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ModalColorPicker/index.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ModalColorPicker/index.tsx
new file mode 100644
index 0000000000..c61bd9d12e
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/ColorSection/ModalColorPicker/index.tsx
@@ -0,0 +1,35 @@
+import {ListenOutsideClick} from 'components';
+import React, {Dispatch, SetStateAction} from 'react';
+import Modal from 'react-modal';
+import {SketchPicker} from 'react-color';
+import styles from './index.module.scss';
+
+type ModalColorPickerProps = {
+ color: string;
+ setColor: Dispatch
+
+ //
+
+
+ {
+ handleColorStepChange(stepText);
+ }}
+ />
+
+
+
+ {showHeaderTextColorPicker && (
+
+ handleColorStepChange(colorStepsArr[0])}
+ activeColorStep={activeColorStep}
+ colorStep={0}
+ />
+ handleColorStepChange(colorStepsArr[1])}
+ activeColorStep={activeColorStep}
+ colorStep={1}
+ />
+ handleColorStepChange(colorStepsArr[2])}
+ activeColorStep={activeColorStep}
+ colorStep={2}
+ />
+ handleColorStepChange(colorStepsArr[3])}
+ activeColorStep={activeColorStep}
+ colorStep={3}
+ />
+ handleColorStepChange(colorStepsArr[4])}
+ activeColorStep={activeColorStep}
+ colorStep={4}
+ />
+ handleColorStepChange(colorStepsArr[5])}
+ activeColorStep={activeColorStep}
+ colorStep={5}
+ />
+ handleColorStepChange(colorStepsArr[6])}
+ activeColorStep={activeColorStep}
+ colorStep={6}
+ />
+ handleColorStepChange(colorStepsArr[7])}
+ activeColorStep={activeColorStep}
+ colorStep={7}
+ />
+ handleColorStepChange(colorStepsArr[8])}
+ activeColorStep={activeColorStep}
+ colorStep={8}
+ />
+ handleColorStepChange(colorStepsArr[9])}
+ activeColorStep={activeColorStep}
+ colorStep={9}
+ />
+
+
+
+ Hex
+ {activeColorStep === 0 && ( +
+
+ {t('sample')}
+ {activeColorStep === 0 && ( +
+
+
+
+
+
+ {!noChanges && (
+ <>
+ {areEqual ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+ {t('preview')}
+
+
+ {t('chatpluginTitle')}
+{t('chatpluginCustomize')}
+
+ {useCustomFont && (
+
+
+ {
+ setCustomFont(font);
+ }}
+ />
+
+ )}
+
+ {
+ setCloseMode(option);
+ }}
+ />
+
+
+ {
+ setBubbleState(option);
+ }}
+ />
+
+
+
+
+ );
+};
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/InputToggleSection/index.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/InputToggleSection/index.module.scss
new file mode 100644
index 0000000000..d39f1b2fa7
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/InputToggleSection/index.module.scss
@@ -0,0 +1,38 @@
+@import 'assets/scss/fonts.scss';
+@import 'assets/scss/colors.scss';
+@import 'assets/scss/animations.scss';
+@import 'assets/scss/z-index.scss';
+
+.customiseContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ margin-right: 16px;
+ label {
+ white-space: nowrap;
+ margin-right: 30px;
+ min-width: 240px;
+ }
+}
+
+.customiseContainerInputs {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.customiseContainerToggles {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.extraOptions {
+ margin: 16px 20px 24px 0;
+ min-width: 300px;
+}
+
+.borderLine {
+ height: 1px;
+ width: 80%;
+ background-color: var(--color-light-gray);
+ margin: 18px 0;
+}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/InputToggleSection/index.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/InputToggleSection/index.tsx
new file mode 100644
index 0000000000..a918d7e112
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/CustomiseSection/InputToggleSection/index.tsx
@@ -0,0 +1,283 @@
+import {Input, Toggle} from 'components';
+import {Language} from 'model';
+import React, {Dispatch, SetStateAction} from 'react';
+import {useTranslation} from 'react-i18next';
+import styles from './index.module.scss';
+
+type InputToggleSectionProps = {
+ headerText: string;
+ setHeaderText: Dispatch
+
+
+
+ );
+};
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/EditChatPlugin.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/EditChatPlugin.module.scss
deleted file mode 100644
index ff2d7142ca..0000000000
--- a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/EditChatPlugin.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.formWrapper {
- align-self: center;
- display: flex;
-}
-
-.settings {
- width: 20rem;
-}
-
-.updatePageParagraph {
- margin: 24px 0;
- color: var(--color-text-gray);
-}
-
-.tabView {
- display: flex;
- margin-bottom: 16px;
- list-style-type: none;
-
- li {
- margin-right: 16px;
- }
-}
-
-.tabEntrySelected {
- border-bottom: 2px solid var(--color-airy-blue);
- a {
- color: var(--color-text-contrast);
- font-weight: bold;
- text-decoration: none;
- }
-}
-
-.tabEntry {
- a {
- color: var(--color-airy-blue);
- text-decoration: none;
- }
-}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/EditChatPlugin.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/EditChatPlugin.tsx
deleted file mode 100644
index 2878cdf968..0000000000
--- a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/EditChatPlugin.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, {useEffect, useState} from 'react';
-
-import {Button, Input} from 'components';
-import {Channel} from 'model';
-
-import {CustomiseSection} from './CustomiseSection';
-
-import styles from './EditChatPlugin.module.scss';
-
-import {cyChannelsChatPluginFormNameInput} from 'handles';
-import {useTranslation} from 'react-i18next';
-
-interface EditChatPluginProps {
- channel: Channel;
- host: string;
- updateConnection(displayName: string, imageUrl?: string): void;
-}
-
-export const EditChatPlugin = ({channel, host, updateConnection}: EditChatPluginProps) => {
- const [currentPage, setCurrentPage] = useState('settings');
- const {t} = useTranslation();
-
- useEffect(() => {
- setCurrentPage('settings');
- }, []);
-
- const showSettings = (event: React.MouseEvent
+ ) => setHeaderText(e.target.value)}
+ label={t('headerText')}
+ placeholder={t('addTextOptional')}
+ height={32}
+ fontClass="font-base"
+ maxLength={30}
+ minWidth={currentLanguage !== Language.english && 350}
+ />
+ ) => setSubtitleText(e.target.value)}
+ label={t('subtitleText')}
+ placeholder={t('addTextOptional')}
+ height={32}
+ fontClass="font-base"
+ maxLength={50}
+ minWidth={currentLanguage !== Language.english && 350}
+ />
+ ) => setStartNewConversationText(e.target.value)}
+ label={t('startNewConversationText')}
+ placeholder={t('addTextOptional')}
+ height={32}
+ fontClass="font-base"
+ minWidth={currentLanguage !== Language.english && 350}
+ />
+ ) => setBubbleIcon(e.target.value)}
+ label={t('chatpluginIconUrl')}
+ placeholder={t('addImageurlOptional')}
+ height={32}
+ fontClass="font-base"
+ showErrors={false}
+ minWidth={currentLanguage !== Language.english && 350}
+ />
+ ) => setSendMessageIcon(e.target.value)}
+ label={t('inputIconUrl')}
+ placeholder={t('addImageurlOptional')}
+ height={32}
+ fontClass="font-base"
+ showErrors={false}
+ minWidth={currentLanguage !== Language.english && 350}
+ />
+ ) => setCustomHost(e.target.value)}
+ label={t('customHostUrl')}
+ placeholder="http://airy.core"
+ required={true}
+ height={32}
+ fontClass="font-base"
+ showErrors={false}
+ minWidth={currentLanguage !== Language.english && 350}
+ />
+ ) => {
+ if (e.target.value === '') {
+ setHeight('700');
+ }
+ }}
+ onChange={(e: React.ChangeEvent) => {
+ setHeight(e.target.value);
+ }}
+ onKeyDown={e => {
+ let intHeight = parseInt(height);
+ if (e.key === 'ArrowUp') {
+ intHeight += 1;
+ setHeight(intHeight.toString());
+ e.preventDefault();
+ } else if (e.key === 'ArrowDown') {
+ intHeight -= 1;
+ setHeight(intHeight.toString());
+ e.preventDefault();
+ }
+ }}
+ label={t('heightPx')}
+ placeholder={t('customHeightPlaceholder')}
+ height={32}
+ fontClass="font-base"
+ showErrors={false}
+ minWidth={currentLanguage !== Language.english && 350}
+ />
+ ) => {
+ if (e.target.value === '') {
+ setWidth('380');
+ }
+ }}
+ onChange={(e: React.ChangeEvent) => {
+ setWidth(e.target.value);
+ }}
+ onKeyDown={e => {
+ let intWidth = parseInt(width);
+ if (e.key === 'ArrowUp') {
+ intWidth += 1;
+ setWidth(intWidth.toString());
+ e.preventDefault();
+ } else if (e.key === 'ArrowDown') {
+ intWidth -= 1;
+ setWidth(intWidth.toString());
+ e.preventDefault();
+ }
+ }}
+ label={t('widthPx')}
+ placeholder={t('customWidthPlaceholder')}
+ height={32}
+ fontClass="font-base"
+ showErrors={false}
+ minWidth={currentLanguage !== Language.english && 350}
+ />
+
+
+
+
+
+ setDisableMobile(value)}
+ minWidth={(currentLanguage === Language.german || currentLanguage === Language.french) && 350}
+ />
+
+
+ setHideInputBar(value)}
+ minWidth={(currentLanguage === Language.german || currentLanguage === Language.french) && 350}
+ />
+
+
+ setHideEmojis(value)}
+ minWidth={(currentLanguage === Language.german || currentLanguage === Language.french) && 350}
+ />
+
+
+ setUseCustomFont(value)}
+ minWidth={(currentLanguage === Language.german || currentLanguage === Language.french) && 350}
+ />
+
+
+ setHideImages(value)}
+ minWidth={(currentLanguage === Language.german || currentLanguage === Language.french) && 350}
+ />
+
+
+ setHideVideos(value)}
+ minWidth={(currentLanguage === Language.german || currentLanguage === Language.french) && 350}
+ />
+
+
+ setHideFiles(value)}
+ minWidth={(currentLanguage === Language.german || currentLanguage === Language.french) && 350}
+ />
+
+
-
- );
- case 'install-customization':
- return (
-
-
-
-
-
- );
- }
- };
-
- return (
-
- );
-};
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/InstallSection/InstallSection.module.scss b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/InstallSection/InstallSection.module.scss
new file mode 100644
index 0000000000..425b195c33
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/InstallSection/InstallSection.module.scss
@@ -0,0 +1,70 @@
+@import 'assets/scss/fonts.scss';
+@import 'assets/scss/colors.scss';
+
+.container {
+ h1 {
+ @include font-xl;
+ font-weight: 700;
+ }
+ h2 {
+ @include font-base;
+ font-weight: 700;
+ color: var(--color-text-gray);
+ margin-top: 16px;
+ margin-bottom: 16px;
+ }
+}
+
+.codeAreaContainer {
+ display: flex;
+}
+
+.codeAreaBox {
+ margin-right: 64px;
+}
+
+.installHint {
+ @include font-base;
+ font-weight: bold;
+ margin-bottom: 8px;
+ color: var(--color-text-gray);
+
+ span {
+ color: var(--color-text-contrast);
+ font-weight: 900;
+ }
+
+ code {
+ color: var(--color-red-alert);
+ background-color: var(--color-background-gray);
+ padding: 2px;
+ }
+}
+
+.codeArea {
+ @media screen and (max-width: 1600px) {
+ max-width: 32em;
+ }
+ @include font-base;
+ width: 40em;
+ height: 500px;
+ background-color: var(--color-background-gray);
+ color: var(--color-text-contrast);
+ border-radius: 8px;
+ border: 1px solid var(--color-dark-elements-gray);
+ resize: none;
+ padding: 8px;
+ margin-bottom: 16px;
+}
+
+.copyButtonHostName {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ margin-bottom: 80px;
+ button {
+ @include font-base;
+ width: 176px;
+ height: 40px;
+ }
+}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/InstallSection/InstallSection.tsx b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/InstallSection/InstallSection.tsx
new file mode 100644
index 0000000000..74443bdd49
--- /dev/null
+++ b/frontend/control-center/src/pages/Connectors/Providers/Airy/ChatPlugin/sections/InstallSection/InstallSection.tsx
@@ -0,0 +1,172 @@
+import {Button, ErrorNotice} from 'components';
+import {ChatpluginConfig} from 'model';
+import React, {createRef} from 'react';
+import {useTranslation} from 'react-i18next';
+import styles from './InstallSection.module.scss';
+
+type InstallSectionProps = {
+ channelId: string;
+ host: string;
+ chatpluginConfig: ChatpluginConfig;
+};
+
+export const InstallSection = (props: InstallSectionProps) => {
+ const {channelId, host, chatpluginConfig} = props;
+ const {
+ headerText,
+ subtitleText,
+ startNewConversationText,
+ bubbleIcon,
+ sendMessageIcon,
+ headerTextColor,
+ subtitleTextColor,
+ primaryColor,
+ accentColor,
+ backgroundColor,
+ inboundMessageColor,
+ inboundMessageTextColor,
+ outboundMessageColor,
+ outboundMessageTextColor,
+ unreadMessageDotColor,
+ height,
+ width,
+ closeMode,
+ bubbleState,
+ disableMobile,
+ hideInputBar,
+ hideEmojis,
+ useCustomFont,
+ customFont,
+ hideAttachments,
+ hideImages,
+ hideVideos,
+ hideFiles,
+ } = chatpluginConfig;
+ const {t} = useTranslation();
+ const codeAreaRef = createRef
+
+ );
+ };`;
+
+ return (
+
+
+ );
+};
diff --git a/frontend/control-center/src/pages/Connectors/index.tsx b/frontend/control-center/src/pages/Connectors/index.tsx
index d29e7e6018..6e0d5084df 100644
--- a/frontend/control-center/src/pages/Connectors/index.tsx
+++ b/frontend/control-center/src/pages/Connectors/index.tsx
@@ -16,11 +16,7 @@ const mapDispatchToProps = {
listChannels,
};
-const mapStateToProps = (state: StateModel) => ({
- channels: Object.values(allChannelsConnected(state)),
-});
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
+const connector = connect(null, mapDispatchToProps);
const Connectors = (props: ConnectedProps{t('chatpluginTitle')}
+{t('chatpluginInstallText')}
+
+
+
+
+
+ {t('addCodeTagHead')}
+
+ <head>:
+
+
+
+
+
+ {host.length == 0 && (
+
+
+ You need to add a Host URL
+
+ )}
+
+
+
+ {t('installCodeNpm1')}
+ NPM
+ {t('installCodeNpm2')}
+
+
+
+
+
+
+ {host.length == 0 && (
+
+
+ You need to add a Host URL
+
+ )}
+
diff --git a/frontend/control-center/src/pages/Status/ComponentListItem/ItemInfo.tsx b/frontend/control-center/src/pages/Status/ComponentListItem/ItemInfo.tsx
index 0d75403b15..5d9269c852 100644
--- a/frontend/control-center/src/pages/Status/ComponentListItem/ItemInfo.tsx
+++ b/frontend/control-center/src/pages/Status/ComponentListItem/ItemInfo.tsx
@@ -1,12 +1,16 @@
import React, {useState} from 'react';
+
+import {enableDisableComponent} from '../../../actions';
import {ReactComponent as CheckmarkIcon} from 'assets/images/icons/checkmarkFilled.svg';
import {ReactComponent as UncheckedIcon} from 'assets/images/icons/serviceUnhealthy.svg';
import {ReactComponent as ArrowRight} from 'assets/images/icons/arrowRight.svg';
import {getChannelAvatar} from '../../../components/ChannelAvatar';
import {getComponentName} from '../../../services';
import {getSourceForComponent} from 'model';
-import {Toggle} from 'components';
+import {SettingsModal, Button, Toggle} from 'components';
import styles from './index.module.scss';
+import {connect, ConnectedProps} from 'react-redux';
+import {useTranslation} from 'react-i18next';
type ComponentInfoProps = {
healthy: boolean;
@@ -14,14 +18,41 @@ type ComponentInfoProps = {
isComponent: boolean;
isExpanded: boolean;
enabled?: boolean;
+ setIsPopUpOpen: (value: boolean) => void;
+} & ConnectedProps;
+
+const mapDispatchToProps = {
+ enableDisableComponent,
};
-export const ItemInfo = (props: ComponentInfoProps) => {
- const {healthy, itemName, isComponent, isExpanded, enabled} = props;
+const connector = connect(null, mapDispatchToProps);
+
+const ItemInfo = (props: ComponentInfoProps) => {
+ const {healthy, itemName, isComponent, isExpanded, enabled, setIsPopUpOpen, enableDisableComponent} = props;
const [channelSource] = useState(itemName && getSourceForComponent(itemName));
const [componentName] = useState(itemName && getComponentName(itemName));
const [componentEnabled, setComponentEnabled] = useState(enabled);
+ const [enablePopupVisible, setEnablePopupVisible] = useState(false);
const isVisible = isExpanded || isComponent;
+ const {t} = useTranslation();
+
+ const triggerEnableDisableAction = (enabled: boolean) => {
+ enableDisableComponent({components: [{name: itemName, enabled: enabled}]});
+ setComponentEnabled(enabled);
+ setEnablePopupVisible(false);
+ setIsPopUpOpen(false);
+ };
+
+ const onEnableComponent = (enabled: boolean) => {
+ if (enabled) {
+ triggerEnableDisableAction(enabled);
+ setIsPopUpOpen(false);
+ return;
+ }
+
+ setEnablePopupVisible(true);
+ setIsPopUpOpen(true);
+ };
return (
<>
@@ -54,11 +85,35 @@ export const ItemInfo = (props: ComponentInfoProps) => {
{isComponent && (
)}
+
+ {enablePopupVisible && (
+
-
)}
{t('disableComponentText')}
+ +
- {components
- .filter(component => {
- return component[1].enabled;
- })
- .map((component, index) => (
-
);
diff --git a/frontend/control-center/src/pages/Webhooks/index.tsx b/frontend/control-center/src/pages/Webhooks/index.tsx
index ea2f51efbd..df8dc3cd47 100644
--- a/frontend/control-center/src/pages/Webhooks/index.tsx
+++ b/frontend/control-center/src/pages/Webhooks/index.tsx
@@ -31,7 +31,7 @@ const Webhooks = (props: WebhooksProps) => {
const [isLoading, setIsLoading] = useState(false);
const [errorOccurred, setErrorOccurred] = useState(false);
const [showSuccessNotification, setShowSuccessNotification] = useState(false);
- const [notificationText, setNotificatioNText] = useState('');
+ const [notificationText, setNotificationText] = useState('');
const [notifcationColor, setNotifcationColor] = useState('');
const {t} = useTranslation();
@@ -45,8 +45,8 @@ const Webhooks = (props: WebhooksProps) => {
const handleNotification = (show: boolean, error: boolean) => {
error
- ? (setNotificatioNText(t('errorOccurred')), setNotifcationColor('#d51548'))
- : (setNotificatioNText(t('successfullySubscribed')), setNotifcationColor('#0da36b'));
+ ? (setNotificationText(t('errorOccurred')), setNotifcationColor('#d51548'))
+ : (setNotificationText(t('successfullySubscribed')), setNotifcationColor('#0da36b'));
setShowSuccessNotification(show);
};
diff --git a/frontend/inbox/handles/index.ts b/frontend/inbox/handles/index.ts
index 7df9c0536b..e302ac220e 100644
--- a/frontend/inbox/handles/index.ts
+++ b/frontend/inbox/handles/index.ts
@@ -35,12 +35,16 @@ export const cyConnectorsAddNewButton = 'connectorsAddNewButton';
export const cyChannelsChatPluginFormNameInput = 'channelsChatPluginFormNameInput';
export const cyChannelsChatPluginFormSubmitButton = 'channelsChatPluginFormSubmitButton';
export const cyChannelsFormBackButton = 'channelsFormBackButton';
+
export const cyOpenStateButton = 'openStateButton';
export const cyClosedStateButton = 'closedStateButton';
export const cyConversationListItemInfo = 'conversationListItemInfo';
export const cyConversationStatus = 'conversationStatus';
+
export const cySuggestionsButton = 'suggestionsButton';
export const cySuggestionsList = 'suggestionsList';
+
+//contact details
export const cyEditDisplayNameIcon = 'editDisplayNameIcon';
export const cyDisplayName = 'displayName';
export const cyDisplayNameInput = 'displayNameInput';
@@ -58,3 +62,9 @@ export const cyContactSaveButton = 'contactSaveButton';
export const cyClickableListItem = 'clickableListItem';
export const cyChannelsInstagramAddButton = 'cyChannelsInstagramAddButton';
export const cyChannelsInstagramList = 'cyChannelsInstagramList';
+
+//conversations for contact
+export const cyConversationsListForContact = 'conversationsListForContact';
+export const cyConversationForContactButton = 'conversationForContactButton';
+export const cyContactItem = 'contactItem';
+export const cyContactsCollapseIcon = 'contactsCollapseIcon';
diff --git a/frontend/inbox/src/actions/contacts/index.ts b/frontend/inbox/src/actions/contacts/index.ts
index d02c5e1083..75e3857e78 100644
--- a/frontend/inbox/src/actions/contacts/index.ts
+++ b/frontend/inbox/src/actions/contacts/index.ts
@@ -39,6 +39,7 @@ export const listContacts = () => (dispatch: Dispatch
+ {conversationId ? t('otherConversationsContact') : t('conversationsContact')}
+
+ );
+};
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/Expandable.tsx b/frontend/inbox/src/components/ContactDetails/Expandable.tsx
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/Expandable.tsx
rename to frontend/inbox/src/components/ContactDetails/Expandable.tsx
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.module.scss b/frontend/inbox/src/components/ContactDetails/index.module.scss
similarity index 100%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.module.scss
rename to frontend/inbox/src/components/ContactDetails/index.module.scss
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.tsx b/frontend/inbox/src/components/ContactDetails/index.tsx
similarity index 75%
rename from frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.tsx
rename to frontend/inbox/src/components/ContactDetails/index.tsx
index 0cebcb894f..4cc407cdf1 100644
--- a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.tsx
+++ b/frontend/inbox/src/components/ContactDetails/index.tsx
@@ -1,19 +1,23 @@
import React, {useState, useEffect, SetStateAction} from 'react';
import _, {connect, ConnectedProps} from 'react-redux';
-import {getContactDetails, updateContactDetails} from '../../../../../actions';
-import {StateModel} from '../../../../../reducers';
+import {getContactDetails, updateContactDetails} from '../../actions';
+import {StateModel} from '../../reducers';
import {getInfoDetailsPayload, fillContactInfo} from './util';
import {UpdateContactDetailsRequestPayload} from 'httpclient/src';
-import {Contact, Source} from 'model';
+import {Contact} from 'model';
import {ContactInfoPoint} from './ContactInfoPoint';
import {Expandable} from './Expandable';
-import {Button, ConnectorAvatar} from 'components';
-import {Link} from 'react-router-dom';
-import {INBOX_CONVERSATIONS_ROUTE} from '../../../../../routes/routes';
+import {Button} from 'components';
+import {ConversationsForContact} from './ConversationsForContact';
import styles from './index.module.scss';
import {cyContactSaveButton} from 'handles';
import {useTranslation} from 'react-i18next';
+export interface ConversationInfoForContact {
+ id: string;
+ connector: string;
+}
+
const mapDispatchToProps = {
getContactDetails,
updateContactDetails,
@@ -29,7 +33,7 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
type ContactDetailsProps = {
contact?: Contact;
- conversationId: string;
+ conversationId?: string;
isEditing: boolean;
getUpdatedInfo: () => void;
editingCanceled: boolean;
@@ -37,11 +41,6 @@ type ContactDetailsProps = {
setContactIdConvMetadata?: React.Dispatch
+ {conversationsForContactFormatted.length > 0 &&
+ conversationsForContactFormatted.map((conversationInfo: ConversationInfoForContact) => (
+
+ ))}
+
+
- {t('otherConversationsContact')}
-
+ {contacts && contactId && contacts[contactId] && areAvailableConversationForContact && (
+
- {conversationsForContact.map((conversationInfo: ConversationInfoForContact) => (
-
- ))}
-
-
-
-
- {editModeOn && (
-
- )}
-
- );
-};
-
-export default connector(ContactDetails);
diff --git a/frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss b/frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss
index eb1b32662b..7a2aa603c5 100644
--- a/frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss
+++ b/frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss
@@ -199,3 +199,21 @@
fill: var(--color-text-gray);
}
}
+
+.contactsDetailsCollapseIcon {
+ position: absolute;
+ left: 20px;
+ top: 20px;
+ width: 20px;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ transition: opacity 0.3s;
+ svg {
+ fill: var(--color-airy-blue);
+ }
+}
+
+.contactsDetailsCollapseIcon:hover {
+ opacity: 0.5;
+}
diff --git a/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx b/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx
index 992849403f..82caaa5359 100644
--- a/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx
+++ b/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx
@@ -3,7 +3,7 @@ import React, {useEffect, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {connect, ConnectedProps} from 'react-redux';
import styles from './index.module.scss';
-import ContactDetails from '../../Inbox/Messenger/ConversationMetadata/ContactDetails';
+import ContactDetails from '../../../components/ContactDetails';
import {useAnimation} from 'render';
import {Contact} from 'model';
import {Avatar} from 'components/message/Avatar';
@@ -13,6 +13,7 @@ import {ReactComponent as CloseIcon} from 'assets/images/icons/close.svg';
import {ReactComponent as CheckmarkCircleIcon} from 'assets/images/icons/checkmark.svg';
import {ReactComponent as EditIcon} from 'assets/images/icons/pen.svg';
import {ReactComponent as CancelIcon} from 'assets/images/icons/cancelCross.svg';
+import {ReactComponent as CollapseRightArrowsIcon} from 'assets/images/icons/collapseRightArrows.svg';
import {StateModel} from '../../../reducers';
import {
cyCancelEditContactIcon,
@@ -21,6 +22,7 @@ import {
cyEditContactIcon,
cyEditDisplayNameCheckmark,
cyEditDisplayNameIcon,
+ cyContactsCollapseIcon,
} from 'handles';
const mapStateToProps = (state: StateModel) => ({
@@ -40,6 +42,8 @@ type ContactInformationProps = {
editModeOn: boolean;
cancelEdit: boolean;
setEditModeOn: (editing: boolean) => void;
+ setContactInformationVisible: React.Dispatch
+
{!isEditing ? (
+
setShowDeleteContactModal(false)} title="">
diff --git a/frontend/inbox/src/pages/Contacts/index.module.scss b/frontend/inbox/src/pages/Contacts/index.module.scss
index 6c6a2174f1..7b39e2f589 100644
--- a/frontend/inbox/src/pages/Contacts/index.module.scss
+++ b/frontend/inbox/src/pages/Contacts/index.module.scss
@@ -71,6 +71,14 @@
flex-direction: column;
}
-.animateIn {
+.paginationContainer {
+ margin: 0 32px 32px 32px;
+}
+
+.contactColumnAnimateIn {
animation: contactsInformationIn 300ms ease;
}
+
+.contactColumnAnimateOut {
+ animation: contactsInformationOut 300ms ease;
+}
diff --git a/frontend/inbox/src/pages/Contacts/index.tsx b/frontend/inbox/src/pages/Contacts/index.tsx
index 86a59d5b09..822a292f06 100644
--- a/frontend/inbox/src/pages/Contacts/index.tsx
+++ b/frontend/inbox/src/pages/Contacts/index.tsx
@@ -31,6 +31,7 @@ const Contacts = (props: ContactsProps) => {
const [editModeOn, setEditModeOn] = useState(false);
const [cancelEdit, setCancelEdit] = useState(false);
const [contactInformationVisible, setContactInformationVisible] = useState(false);
+ const [currentVisibleContactId, setCurrentVisibleContactId] = useState('');
const listPageSize = 9;
const fetchNextPage = 5;
@@ -51,6 +52,13 @@ const Contacts = (props: ContactsProps) => {
return contacts.sort(contactSorter).slice(firstPageIndex, lastPageIndex);
}, [currentPage, pageSize, contacts.length]);
+ useEffect(() => {
+ if (currentTableData?.[0]?.id) {
+ setCurrentVisibleContactId(currentTableData[0].id);
+ setCurrentContact(currentTableData[0]);
+ }
+ }, [currentTableData]);
+
useEffect(() => {
lastPage % fetchNextPage == 0 && listContacts();
}, [currentPage]);
@@ -99,11 +107,13 @@ const Contacts = (props: ContactsProps) => {
setConversationId={handleConversationId}
setEditModeOn={handleEditMode}
setCancelEdit={handleCancelEditing}
+ setCurrentVisibleContactId={setCurrentVisibleContactId}
+ currentVisibleContactId={currentVisibleContactId}
/>
))}
- handleEditMode(event)}>
- setShowDeleteContactModal(true)}>
+ {/*
*/}
setShowDeleteContactModal(true)}>
+
+
{
+
{
+ createChatPluginConversation(): Chainable;
+ editContactDetails(): Chainable;
+ connectChatPluginConnector(): Chainable;
+ editDisplayName(): Chainable;
+ listConversationsForContact(): Chainable;
+ }
+ }
+}
+
+Cypress.Commands.add('createChatPluginConversation', createChatPluginConversation);
+Cypress.Commands.add('editContactDetails', editContactDetails);
+Cypress.Commands.add('connectChatPluginConnector', connectChatPluginConnector);
+Cypress.Commands.add('editDisplayName', editDisplayName);
+Cypress.Commands.add('listConversationsForContact', listConversationsForContact);
diff --git a/integration/commands/listConversationsForContact.ts b/integration/commands/listConversationsForContact.ts
new file mode 100644
index 0000000000..0a505a068b
--- /dev/null
+++ b/integration/commands/listConversationsForContact.ts
@@ -0,0 +1,7 @@
+import {cyConversationsListForContact, cyConversationForContactButton} from 'handles';
+
+export const listConversationsForContact = (): void => {
+ cy.get(`[data-cy=${cyConversationsListForContact}]`).should('be.visible');
+ cy.get(`[data-cy=${cyConversationForContactButton}]`).first().click();
+ cy.url().should('include', '/conversations');
+};
diff --git a/integration/cypress.config.ts b/integration/cypress.config.ts
new file mode 100644
index 0000000000..bf45b999ad
--- /dev/null
+++ b/integration/cypress.config.ts
@@ -0,0 +1,24 @@
+import {defineConfig} from 'cypress';
+
+export default defineConfig({
+ e2e: {
+ baseUrl: 'http://airy.core',
+ specPattern: 'integration/**/*.spec.?s',
+ supportFile: 'integration/commands/index.ts',
+ },
+ env: {
+ chatPluginName: 'Cypress Chatplugin',
+ tagName: 'Cypress Tag',
+ searchQuery: 'Cypress Filter',
+ messageInbox: 'Hello from Cypress Inbox!',
+ messageChatplugin: 'Hello from Cypress ChatPlugin!',
+ newMessageChatplugin: 'Hello once again from Cypress ChatPlugin!',
+ websocketMessage: 'Websocket Test Message',
+ channelId: '1cd1b148-0cea-47af-801c-ae65baf3012e',
+ messageId: '683e32bf-42f7-48c0-a701-d8e66f252c7b',
+ conversationId: '05e86332-e6cd-4de5-9e1f-6c7c84994e03',
+ },
+ viewportHeight: 800,
+ viewportWidth: 1280,
+ video: false,
+});
diff --git a/integration/cypress.json b/integration/cypress.json
deleted file mode 100644
index 652087a47a..0000000000
--- a/integration/cypress.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
- "baseUrl": "http://airy.core",
- "integrationFolder": "integration",
- "testFiles": "**/*.spec.?s",
- "env": {
- "chatPluginName": "Cypress Chatplugin",
- "tagName": "Cypress Tag",
- "searchQuery": "Cypress Filter",
- "messageInbox": "Hello from Cypress Inbox!",
- "messageChatplugin": "Hello from Cypress ChatPlugin!",
- "newMessageChatplugin": "Hello once again from Cypress ChatPlugin!",
- "websocketMessage": "Websocket Test Message",
- "channelId": "8bb1aede-7d6f-4cd5-bf3a-c17764a9689a",
- "messageId": "683e32bf-42f7-48c0-a701-d8e66f252c7b",
- "conversationId": "6f683a3d-ec9a-4fe1-beef-88745155b5d0"
- },
- "viewportHeight": 800,
- "viewportWidth": 1280,
- "video": false
-}
diff --git a/integration/ui/BUILD b/integration/ui/BUILD
index f8f12ca51f..64897dfe9e 100644
--- a/integration/ui/BUILD
+++ b/integration/ui/BUILD
@@ -14,7 +14,10 @@ ts_web_library(
"esnext",
"dom",
],
- "types": ["cypress"],
+ "types": [
+ "cypress",
+ "node",
+ ],
},
},
deps = [
diff --git a/integration/ui/connect_chatplugin.spec.ts b/integration/ui/connect_chatplugin.spec.ts
index f20d29c6f5..9b92b575cb 100644
--- a/integration/ui/connect_chatplugin.spec.ts
+++ b/integration/ui/connect_chatplugin.spec.ts
@@ -1,21 +1,24 @@
-import {
- cyChannelsChatPluginAddButton,
- cyConnectorsAddNewButton,
- cyChannelsChatPluginFormNameInput,
- cyChannelsChatPluginFormSubmitButton,
- cyChannelsFormBackButton,
- cyChannelsChatPluginList,
-} from 'handles';
+import {cyChannelsFormBackButton, cyChannelsChatPluginList} from 'handles';
+
+declare global {
+ namespace Cypress {
+ interface Chainable {
+ createChatPluginConversation(): Chainable;
+ editContactDetails(): Chainable;
+ connectChatPluginConnector(): Chainable;
+ editDisplayName(): Chainable;
+ listConversationsForContact(): Chainable;
+ }
+ }
+}
describe('Connect chatplugin channel', () => {
it('Connect chatplugin channel', () => {
cy.visit('/control-center/connectors');
cy.wait(500);
cy.url().should('include', '/control-center/connectors');
- cy.get(`[data-cy=${cyChannelsChatPluginAddButton}]`).click();
- cy.get(`[data-cy=${cyConnectorsAddNewButton}]`).click();
- cy.get(`[data-cy=${cyChannelsChatPluginFormNameInput}]`).type(Cypress.env('chatPluginName'));
- cy.get(`[data-cy=${cyChannelsChatPluginFormSubmitButton}]`).click();
+ cy.connectChatPluginConnector();
+
cy.url().should('include', '/control-center/connectors/connected');
cy.get(`[data-cy=${cyChannelsFormBackButton}]`).click();
cy.get(`[data-cy=${cyChannelsChatPluginList}]`).filter(`:contains("${Cypress.env('chatPluginName')}")`);
diff --git a/integration/ui/contact_edit.spec.ts b/integration/ui/contact_edit.spec.ts
index 344759e3f0..137372e547 100644
--- a/integration/ui/contact_edit.spec.ts
+++ b/integration/ui/contact_edit.spec.ts
@@ -1,16 +1,4 @@
-import {
- cyConversationList,
- cyEditContactIcon,
- cyCancelEditContactIcon,
- cyContactEmail,
- cyContactPhone,
- cyContactTitle,
- cyContactAddress,
- cyContactCity,
- cyContactOrganization,
- cyContactSaveButton,
- cyContactExtendable,
-} from 'handles';
+import {cyConversationList, cyEditContactIcon} from 'handles';
describe('Display and edit the contact details of a conversation', () => {
before(() => {
@@ -19,69 +7,8 @@ describe('Display and edit the contact details of a conversation', () => {
cy.get(`[data-cy=${cyConversationList}]`).first().click();
});
- beforeEach(() => {
+ it('edit contact details, save them, and cancel the edit', () => {
cy.get(`[data-cy=${cyEditContactIcon}]`).click();
- });
-
- it('displays default values if there is no information', () => {
- cy.get(`[data-cy=${cyContactEmail}]`).clear();
- cy.get(`[data-cy=${cyContactPhone}]`).clear();
- cy.get(`[data-cy=${cyContactTitle}]`).clear();
- cy.get(`[data-cy=${cyContactAddress}]`).clear();
- cy.get(`[data-cy=${cyContactCity}]`).clear();
- cy.get(`[data-cy=${cyContactOrganization}]`).clear();
-
- cy.get(`[data-cy=${cyContactSaveButton}]`).click();
-
- cy.get(`[data-cy=${cyContactEmail}]`).contains('email');
-
- cy.get(`[data-cy=${cyContactExtendable}]`).click();
-
- cy.get(`[data-cy=${cyContactPhone}]`).contains('phone');
- cy.get(`[data-cy=${cyContactTitle}]`).contains('title');
- cy.get(`[data-cy=${cyContactAddress}]`).contains('address');
- cy.get(`[data-cy=${cyContactCity}]`).contains('city');
- cy.get(`[data-cy=${cyContactOrganization}]`).contains('company name');
- });
-
- it('edits and saves contact details', () => {
- cy.get(`[data-cy=${cyContactEmail}]`).clear().type('name@email.com');
- cy.get(`[data-cy=${cyContactPhone}]`).clear().type('+49 30 901820');
- cy.get(`[data-cy=${cyContactTitle}]`).clear().type('Mr.');
- cy.get(`[data-cy=${cyContactAddress}]`).clear().type('404 Berliner street');
- cy.get(`[data-cy=${cyContactCity}]`).clear().type('Berlin');
- cy.get(`[data-cy=${cyContactOrganization}]`).clear().type('Airy');
-
- cy.get(`[data-cy=${cyContactSaveButton}]`).click();
- cy.get(`[data-cy=${cyContactEmail}]`).contains('name@email.com');
- cy.get(`[data-cy=${cyContactPhone}]`).contains('+49 30 901820');
- cy.get(`[data-cy=${cyContactTitle}]`).contains('Mr.');
-
- cy.get(`[data-cy=${cyContactExtendable}]`).click();
-
- cy.get(`[data-cy=${cyContactAddress}]`).contains('404 Berliner street');
- cy.get(`[data-cy=${cyContactCity}]`).contains('Berlin');
- cy.get(`[data-cy=${cyContactOrganization}]`).contains('Airy');
- });
-
- it('cancels the contact edit', () => {
- cy.get(`[data-cy=${cyContactEmail}]`).clear().type('anotherName@email.com');
- cy.get(`[data-cy=${cyContactPhone}]`).clear().type('123');
- cy.get(`[data-cy=${cyContactTitle}]`).clear().type('Mrs.');
- cy.get(`[data-cy=${cyContactAddress}]`).clear().type('London Street');
- cy.get(`[data-cy=${cyContactCity}]`).clear().type('London');
- cy.get(`[data-cy=${cyContactOrganization}]`).clear().type('A company');
-
- cy.get(`[data-cy=${cyCancelEditContactIcon}]`).click();
-
- cy.get(`[data-cy=${cyContactEmail}]`).contains('name@email.com');
- cy.get(`[data-cy=${cyContactPhone}]`).contains('+49 30 901820');
- cy.get(`[data-cy=${cyContactTitle}]`).contains('Mr.');
-
- cy.get(`[data-cy=${cyContactExtendable}]`).click();
-
- cy.get(`[data-cy=${cyContactAddress}]`).contains('404 Berliner street');
- cy.get(`[data-cy=${cyContactCity}]`).contains('Berlin');
- cy.get(`[data-cy=${cyContactOrganization}]`).contains('Airy');
+ cy.editContactDetails();
});
});
diff --git a/integration/ui/display_name_edit.spec.ts b/integration/ui/display_name_edit.spec.ts
index aeb9f9696f..ba222b0622 100644
--- a/integration/ui/display_name_edit.spec.ts
+++ b/integration/ui/display_name_edit.spec.ts
@@ -1,15 +1,8 @@
-import {cyEditDisplayNameIcon, cyDisplayName, cyDisplayNameInput, cyEditDisplayNameCheckmark} from 'handles';
-
describe('Edits the display name of a conversation', () => {
it('Edits the display name of a conversation', () => {
cy.visit('/inbox/inbox');
cy.url().should('include', '/inbox');
- cy.get(`[data-cy=${cyEditDisplayNameIcon}]`).click({force: true});
-
- cy.get(`[data-cy=${cyDisplayNameInput}]`).type('new name');
- cy.get(`[data-cy=${cyEditDisplayNameCheckmark}]`).click();
-
- cy.get(`[data-cy=${cyDisplayName}]`).contains('new name');
+ cy.editDisplayName();
});
});
diff --git a/integration/ui/filter_conversation.spec.ts b/integration/ui/filter_conversation.spec.ts
index 296e16a261..ee0cf371f3 100644
--- a/integration/ui/filter_conversation.spec.ts
+++ b/integration/ui/filter_conversation.spec.ts
@@ -16,16 +16,7 @@ describe('Filter conversation', () => {
cy.visit('/control-center/connectors');
cy.wait(500);
- cy.get(`[data-cy=${cyChannelsChatPluginAddButton}]`).click();
- cy.get(`[data-cy=${cyConnectorsAddNewButton}]`).click();
- cy.get(`[data-cy=${cyChannelsChatPluginFormNameInput}]`).type(Cypress.env('chatPluginName'));
- cy.get(`[data-cy=${cyChannelsChatPluginFormSubmitButton}]`).click();
-
- cy.get(`[data-cy=${cyChannelsFormBackButton}]`).click();
-
- cy.visit('/chatplugin/ui/example?channel_id=' + Cypress.env('channelId'));
- cy.get(`[data-cy=${cyInputbarTextarea}]`).type(Cypress.env('messageChatplugin'));
- cy.get(`[data-cy=${cyInputbarButton}]`).click();
+ cy.createChatPluginConversation();
cy.visit('/inbox/inbox');
diff --git a/integration/ui/list_contacts_page.spec.ts b/integration/ui/list_contacts_page.spec.ts
new file mode 100644
index 0000000000..08199bc190
--- /dev/null
+++ b/integration/ui/list_contacts_page.spec.ts
@@ -0,0 +1,34 @@
+import {cyContactItem, cyContactEmail, cyContactsCollapseIcon} from 'handles';
+
+describe('Contacts page lists contacts and allow to edit contacts details and display name', () => {
+ beforeEach(() => {
+ cy.visit('/inbox/contacts');
+ cy.url().should('include', '/contacts');
+ cy.wait(500);
+ });
+
+ it('Displays item contact details on click and allows to edit them', () => {
+ cy.get(`[data-cy=${cyContactItem}]`).first().click();
+ cy.wait(500);
+ cy.editContactDetails();
+ cy.editDisplayName();
+ });
+
+ it('The available conversations are listed when the contact has conversations', () => {
+ cy.get(`[data-cy=${cyContactItem}]`).first().click();
+ cy.wait(500);
+ cy.listConversationsForContact();
+ });
+
+ it('Collapse and expands contact column on icon click', () => {
+ cy.get(`[data-cy=${cyContactItem}]`).first().click();
+ cy.wait(500);
+
+ cy.get(`[data-cy=${cyContactEmail}]`).should('be.visible');
+
+ cy.get(`[data-cy=${cyContactsCollapseIcon}]`).click();
+ cy.wait(500);
+
+ cy.get(`[data-cy=${cyContactEmail}]`).should('not.exist');
+ });
+});
diff --git a/integration/ui/send_chatplugin_message.spec.ts b/integration/ui/send_chatplugin_message.spec.ts
index f63c846611..4a0802f100 100644
--- a/integration/ui/send_chatplugin_message.spec.ts
+++ b/integration/ui/send_chatplugin_message.spec.ts
@@ -1,33 +1,11 @@
-import {
- cyMessageTextArea,
- cyMessageSendButton,
- cyMessageList,
- cyChannelsChatPluginAddButton,
- cyConnectorsAddNewButton,
- cyChannelsChatPluginFormNameInput,
- cyChannelsChatPluginFormSubmitButton,
- cyChannelsChatPluginList,
- cyChannelsFormBackButton,
-} from 'handles';
-
-import {cyInputbarButton, cyInputbarTextarea} from 'chat-plugin-handles';
+import {cyMessageTextArea, cyMessageSendButton, cyMessageList} from 'handles';
describe('Send chat plugin message', () => {
it('Send chat plugin message', () => {
cy.visit('/control-center/connectors');
cy.wait(500);
- cy.get(`[data-cy=${cyChannelsChatPluginAddButton}]`).click();
- cy.get(`[data-cy=${cyConnectorsAddNewButton}]`).click();
- cy.get(`[data-cy=${cyChannelsChatPluginFormNameInput}]`).type(Cypress.env('chatPluginName'));
- cy.get(`[data-cy=${cyChannelsChatPluginFormSubmitButton}]`).click();
-
- cy.get(`[data-cy=${cyChannelsFormBackButton}]`).click();
- cy.wait(500);
- cy.get(`[data-cy=${cyChannelsChatPluginList}]`).filter(`:contains("${Cypress.env('chatPluginName')}")`);
- cy.visit('/chatplugin/ui/example?channel_id=' + Cypress.env('channelId'));
- cy.get(`[data-cy=${cyInputbarTextarea}]`).type(Cypress.env('messageChatplugin'));
- cy.get(`[data-cy=${cyInputbarButton}]`).click();
+ cy.createChatPluginConversation();
cy.visit('/inbox/inbox');
cy.url().should('include', '/inbox');
diff --git a/lib/go/k8s/configmaps.go b/lib/go/k8s/configmaps.go
index ee52018b2a..090b7fca49 100644
--- a/lib/go/k8s/configmaps.go
+++ b/lib/go/k8s/configmaps.go
@@ -11,21 +11,43 @@ import (
"k8s.io/client-go/kubernetes"
)
-func ApplyConfigMap(configmapName string, namespace string, cmData map[string]string, labels map[string]string, clientset *kubernetes.Clientset) error {
+func ApplyConfigMap(
+ configmapName string,
+ namespace string,
+ cmData map[string]string,
+ labels map[string]string,
+ annotations map[string]string,
+ clientset *kubernetes.Clientset,
+) error {
cm, _ := clientset.CoreV1().ConfigMaps(namespace).Get(context.TODO(), configmapName, v1.GetOptions{})
if cm.GetName() == "" {
_, err := clientset.CoreV1().ConfigMaps(namespace).Create(context.TODO(),
&corev1.ConfigMap{
ObjectMeta: v1.ObjectMeta{
- Name: configmapName,
- Namespace: namespace,
- Labels: labels,
+ Name: configmapName,
+ Namespace: namespace,
+ Labels: labels,
+ Annotations: annotations,
},
Data: cmData,
}, v1.CreateOptions{})
return err
} else {
- cm.Data = cmData
+ if cmData != nil && len(cmData) > 0 {
+ cm.Data = cmData
+ }
+ if cm.Labels == nil {
+ cm.Labels = make(map[string]string)
+ }
+ for k, v := range labels {
+ cm.Labels[k] = v
+ }
+ if cm.Annotations == nil {
+ cm.Annotations = make(map[string]string)
+ }
+ for k, v := range annotations {
+ cm.Annotations[k] = v
+ }
_, err := clientset.CoreV1().ConfigMaps(namespace).Update(context.TODO(), cm, v1.UpdateOptions{})
return err
}
diff --git a/lib/typescript/assets/images/icons/collapseRightArrows.svg b/lib/typescript/assets/images/icons/collapseRightArrows.svg
new file mode 100644
index 0000000000..10ea3b6a3e
--- /dev/null
+++ b/lib/typescript/assets/images/icons/collapseRightArrows.svg
@@ -0,0 +1,3 @@
+
diff --git a/lib/typescript/assets/images/icons/googleLogo.svg b/lib/typescript/assets/images/icons/googleLogo.svg
index 27ced177b7..98e868454d 100644
--- a/lib/typescript/assets/images/icons/googleLogo.svg
+++ b/lib/typescript/assets/images/icons/googleLogo.svg
@@ -1,3 +1,3 @@
diff --git a/lib/typescript/assets/images/icons/infoCircle.svg b/lib/typescript/assets/images/icons/infoCircle.svg
index 11d29a0ba8..dc306fdfc7 100644
--- a/lib/typescript/assets/images/icons/infoCircle.svg
+++ b/lib/typescript/assets/images/icons/infoCircle.svg
@@ -1,2 +1,2 @@
+> {
shouldCloseOnOverlayClick={true}
onRequestClose={close}
>
- {
onBlur={this.onBlur}
style={{
height: `${height}px`,
+ minWidth: `${minWidth}px`,
+ width: `${width}px`,
}}
type={type}
value={value}
@@ -388,6 +401,10 @@ export interface InputProps {
id?: string;
/** The label above the input field */
label?: string;
+ showLabelIcon?: boolean;
+ tooltipText?: string;
+ minWidth?: number;
+ width?: number;
/** Want to hide the label completely? */
hideLabel?: boolean;
diff --git a/lib/typescript/components/inputs/Input/style.module.scss b/lib/typescript/components/inputs/Input/style.module.scss
index 821db9586c..5399887535 100644
--- a/lib/typescript/components/inputs/Input/style.module.scss
+++ b/lib/typescript/components/inputs/Input/style.module.scss
@@ -70,9 +70,18 @@
.inputTitle {
@include font-base;
+ display: flex;
color: var(--color-text-contrast);
margin-bottom: 8px;
width: 100%;
+
+ svg {
+ margin-left: 6px;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
}
.inputHint {
@@ -199,3 +208,34 @@
height: 20px;
width: 20px;
}
+
+.infoCircle {
+ color: var(--color-text-contrast);
+}
+
+.infoCircleText {
+ @include font-base;
+ display: none;
+ background: var(--color-tooltip-gray);
+ border-radius: 4px;
+ margin-left: 4px;
+ padding: 0 6px;
+ color: var(--color-text-contrast);
+}
+
+.infoCircle:hover ~ .infoCircleText {
+ display: flex;
+ position: relative;
+ left: 8px;
+}
+
+.infoCircle ~ .infoCircleText::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 100%;
+ margin-top: -5px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: transparent var(--color-tooltip-gray) transparent transparent;
+}
diff --git a/lib/typescript/components/inputs/Toggle/index.tsx b/lib/typescript/components/inputs/Toggle/index.tsx
index aa8a1227ff..ab2837d23b 100644
--- a/lib/typescript/components/inputs/Toggle/index.tsx
+++ b/lib/typescript/components/inputs/Toggle/index.tsx
@@ -9,13 +9,14 @@ type ToggleType = {
size?: 'big' | 'small'; //default is big
emojiBefore?: string;
emojiAfter?: string;
+ minWidth?: number;
};
-export const Toggle = ({value, text, updateValue, variant, size, emojiBefore, emojiAfter}: ToggleType) => {
+export const Toggle = ({value, text, updateValue, variant, size, emojiBefore, emojiAfter, minWidth}: ToggleType) => {
const onCheckboxChange = (event: React.ChangeEvent) => updateValue(event.target.checked);
return (
-
+
)}
{this.props.maxLength > 0 && this.props.showCounter ? (
- this.props.maxLength ? styles.inputMaxLengthError : ''}>
- {Math.max(0, this.props.maxLength - (value?.length || 0))}
+ this.props.maxLength ? styles.inputMaxLengthError : ''}>
+ {Math.max(0, this.props.maxLength - value.length)}
) : (
@@ -344,6 +355,8 @@ class InputComponent extends Component