diff --git a/apps/admin-x-settings/src/assets/icons/amp.svg b/apps/admin-x-settings/src/assets/icons/amp.svg new file mode 100644 index 0000000000..6aa9e36e77 --- /dev/null +++ b/apps/admin-x-settings/src/assets/icons/amp.svg @@ -0,0 +1,4 @@ + + amp + + \ No newline at end of file diff --git a/apps/admin-x-settings/src/assets/icons/firstpromoter.svg b/apps/admin-x-settings/src/assets/icons/firstpromoter.svg new file mode 100644 index 0000000000..28699e56ad --- /dev/null +++ b/apps/admin-x-settings/src/assets/icons/firstpromoter.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/apps/admin-x-settings/src/assets/icons/pintura.svg b/apps/admin-x-settings/src/assets/icons/pintura.svg new file mode 100644 index 0000000000..523df18dea --- /dev/null +++ b/apps/admin-x-settings/src/assets/icons/pintura.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/apps/admin-x-settings/src/assets/icons/slack.svg b/apps/admin-x-settings/src/assets/icons/slack.svg new file mode 100644 index 0000000000..69a4eb6a21 --- /dev/null +++ b/apps/admin-x-settings/src/assets/icons/slack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/admin-x-settings/src/assets/icons/unsplash.svg b/apps/admin-x-settings/src/assets/icons/unsplash.svg new file mode 100644 index 0000000000..3722fd1994 --- /dev/null +++ b/apps/admin-x-settings/src/assets/icons/unsplash.svg @@ -0,0 +1,4 @@ + + unsplash + + \ No newline at end of file diff --git a/apps/admin-x-settings/src/assets/icons/zapier.svg b/apps/admin-x-settings/src/assets/icons/zapier.svg new file mode 100644 index 0000000000..cdc22dfb23 --- /dev/null +++ b/apps/admin-x-settings/src/assets/icons/zapier.svg @@ -0,0 +1,4 @@ + + zapier + + \ No newline at end of file diff --git a/apps/admin-x-settings/src/assets/images/pintura-screenshot.png b/apps/admin-x-settings/src/assets/images/pintura-screenshot.png new file mode 100644 index 0000000000..30b75698b7 Binary files /dev/null and b/apps/admin-x-settings/src/assets/images/pintura-screenshot.png differ diff --git a/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx b/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx index 5b04c030b9..db519850ba 100644 --- a/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx +++ b/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx @@ -1,14 +1,20 @@ import AddNewsletterModal from '../settings/email/newsletters/AddNewsletterModal'; +import AmpModal from '../settings/advanced/integrations/AmpModal'; import ChangeThemeModal from '../settings/site/ThemeModal'; import DesignModal from '../settings/site/DesignModal'; +import FirstpromoterModal from '../settings/advanced/integrations/FirstPromoterModal'; import HistoryModal from '../settings/advanced/HistoryModal'; import InviteUserModal from '../settings/general/InviteUserModal'; import NavigationModal from '../settings/site/NavigationModal'; import NiceModal from '@ebay/nice-modal-react'; +import PinturaModal from '../settings/advanced/integrations/PinturaModal'; import PortalModal from '../settings/membership/portal/PortalModal'; import React, {createContext, useCallback, useEffect, useRef, useState} from 'react'; +import SlackModal from '../settings/advanced/integrations/SlackModal'; import StripeConnectModal from '../settings/membership/stripe/StripeConnectModal'; import TierDetailModal from '../settings/membership/tiers/TierDetailModal'; +import UnsplashModal from '../settings/advanced/integrations/UnsplashModal'; +import ZapierModal from '../settings/advanced/integrations/ZapierModal'; export type RouteParams = {[key: string]: string} @@ -102,6 +108,18 @@ const handleNavigation = (scroll: boolean = true) => { NiceModal.show(AddNewsletterModal); } else if (pathName === 'history/view') { NiceModal.show(HistoryModal); + } else if (pathName === 'integrations/zapier') { + NiceModal.show(ZapierModal); + } else if (pathName === 'integrations/slack') { + NiceModal.show(SlackModal); + } else if (pathName === 'integrations/amp') { + NiceModal.show(AmpModal); + } else if (pathName === 'integrations/unsplash') { + NiceModal.show(UnsplashModal); + } else if (pathName === 'integrations/firstpromoter') { + NiceModal.show(FirstpromoterModal); + } else if (pathName === 'integrations/pintura') { + NiceModal.show(PinturaModal); } if (scroll) { diff --git a/apps/admin-x-settings/src/components/settings/advanced/AdvancedSettings.tsx b/apps/admin-x-settings/src/components/settings/advanced/AdvancedSettings.tsx index 980b8f1ea6..7fc078428b 100644 --- a/apps/admin-x-settings/src/components/settings/advanced/AdvancedSettings.tsx +++ b/apps/admin-x-settings/src/components/settings/advanced/AdvancedSettings.tsx @@ -1,9 +1,11 @@ import CodeInjection from './CodeInjection'; import History from './History'; +import Integrations from './Integrations'; import React from 'react'; import SettingSection from '../../../admin-x-ds/settings/SettingSection'; const searchKeywords = { + integrations: ['integration', 'zapier', 'slack', 'amp', 'unsplash', 'first promoter', 'firstpromoter', 'pintura', 'disqus', 'analytics', 'ulysses', 'typeform', 'buffer', 'plausible', 'github'], codeInjection: ['newsletter', 'enable', 'disable', 'turn on'], history: ['history', 'log', 'events', 'user events', 'staff'] }; @@ -11,6 +13,7 @@ const searchKeywords = { const AdvancedSettings: React.FC = () => { return ( + diff --git a/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx b/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx new file mode 100644 index 0000000000..9376491c87 --- /dev/null +++ b/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx @@ -0,0 +1,134 @@ +import Button from '../../../admin-x-ds/global/Button'; +import List from '../../../admin-x-ds/global/List'; +import ListItem from '../../../admin-x-ds/global/ListItem'; +import React, {useState} from 'react'; +import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; +import TabView from '../../../admin-x-ds/global/TabView'; +import useRouting from '../../../hooks/useRouting'; +import {ReactComponent as AmpIcon} from '../../../assets/icons/amp.svg'; +import {ReactComponent as FirstPromoterIcon} from '../../../assets/icons/firstpromoter.svg'; +import {ReactComponent as PinturaIcon} from '../../../assets/icons/pintura.svg'; +import {ReactComponent as SlackIcon} from '../../../assets/icons/slack.svg'; +import {ReactComponent as UnsplashIcon} from '../../../assets/icons/unsplash.svg'; +import {ReactComponent as ZapierIcon} from '../../../assets/icons/zapier.svg'; + +const Integration: React.FC<{icon?: React.ReactNode, title: string, detail:string, action:() => void}> = ({ + icon, + title, + detail, + action +}) => { + return } + avatar={icon} + detail={detail} + title={title} + hideActions + onClick={action} + />; +}; + +const BuiltInIntegrations: React.FC = () => { + const {updateRoute} = useRouting(); + const openModal = (modal: string) => { + updateRoute(modal); + }; + + return ( + + { + openModal('integrations/zapier'); + }} + detail='Automation for your apps' + icon={} + title='Zapier' /> + + { + openModal('integrations/slack'); + }} + detail='A messaging app for teams' + icon={} + title='Slack' /> + + { + openModal('integrations/amp'); + }} + detail='Google Accelerated Mobile Pages' + icon={} + title='AMP' /> + + { + openModal('integrations/unsplash'); + }} + detail='Beautiful, free photos' + icon={} + title='Unsplash' /> + + { + openModal('integrations/firstpromoter'); + }} + detail='Launch your member referral program' + icon={} + title='FirstPromoter' /> + + { + openModal('integrations/pintura'); + }} + detail='Advanced image editing' icon= + {} title + ='Pintura' /> + + ); +}; + +const CustomIntegrations: React.FC = () => { + return ( + + {}} detail='Here we go' title='A custom integration' /> + + ); +}; + +const Integrations: React.FC<{ keywords: string[] }> = ({keywords}) => { + const [selectedTab, setSelectedTab] = useState<'built-in' | 'custom'>('built-in'); + + const tabs = [ + { + id: 'built-in', + title: 'Built-in', + contents: + }, + { + id: 'custom', + title: 'Custom', + contents: + } + ] as const; + + const buttons = ( +