@mx-cartographer/experiences 4.0.14-alpha.JB0 → 4.0.14-alpha.JB1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "4.0.14-alpha.JB0",
+  "version": "4.0.14-alpha.JB1",
   "description": "Library containing experience widgets",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -117,7 +117,8 @@
   "files": [
     "dist",
     "CHANGELOG.md",
-    "README.md"
+    "README.md",
+    "src"
   ],
   "packageManager": "yarn@4.6.0",
   "exports": {

package/src/accounts/AccountsMiniWidget.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+
+import {
+  Account,
+  MiniWidgetContainer,
+  MiniWidgetProps,
+  useAccountStore,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+} from '../common'
+import AccountListItem from './components/AccountListItem'
+
+const fliterAccounts = (accounts: Account[], selectedAccountGuids: string[]) => {
+  return accounts.filter((account) => selectedAccountGuids.includes(account.guid)).slice(0, 3)
+}
+
+const AccountsMiniWidget: React.FC<MiniWidgetProps> = ({ onPrimaryCtaClick, sx }) => {
+  const { accounts } = useAccountStore()
+  const { accounts: accountsCopy } = useGlobalCopyStore()
+  const { selectedAccountGuids } = useGlobalUiStore()
+  const [visibleAccounts, setVisibleAccounts] = React.useState(accounts)
+
+  React.useEffect(() => {
+    setVisibleAccounts(fliterAccounts(accounts, selectedAccountGuids))
+  }, [accounts, selectedAccountGuids])
+
+  return (
+    <MiniWidgetContainer
+      className="mx-exp-accounts-miniwidget"
+      onPrimaryCtaClick={onPrimaryCtaClick}
+      primaryCtaLabel={accountsCopy.primary_cta}
+      sx={sx}
+      title={accountsCopy.mini_title}
+    >
+      <List>
+        {visibleAccounts.length < 1 && (
+          <ListItem sx={{ justifyContent: 'center' }}>{accountsCopy.no_accounts}</ListItem>
+        )}
+        {visibleAccounts.map((account, i) => {
+          const isLast = visibleAccounts.indexOf(account) === visibleAccounts.length - 1
+          return (
+            <React.Fragment key={`account-item${i}`}>
+              <AccountListItem
+                account={account}
+                listItemProps={{ sx: { px: 24 } }}
+                shouldShowConnectionStatus={true}
+              />
+              {!isLast && <Divider aria-hidden="true" variant="inset" />}
+            </React.Fragment>
+          )
+        })}
+      </List>
+    </MiniWidgetContainer>
+  )
+}
+
+export default observer(AccountsMiniWidget)

package/src/accounts/AccountsWidget.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+
+import AccountsList from './components/AccountsList'
+import ConnectionsDrawer from './components/ConnectionsDrawer'
+
+import { Text } from '@kyper/mui'
+
+import {
+  ANALYTICS_EVENTS,
+  Loader,
+  WidgetContainer,
+  useAccountStore,
+  useEvent,
+  useScreenSize,
+  WidgetProps,
+  useGlobalUiStore,
+  useGlobalCopyStore,
+} from '../common'
+
+const AccountsWidget: React.FC<WidgetProps> = ({ onBackClick, sx = {} }) => {
+  const [showConnectionsWidget, setShowConnectionsWidget] = React.useState(false)
+  const [isLoading, setIsLoading] = React.useState(false)
+
+  const { accounts, refreshMembers } = useAccountStore()
+  const { accounts: accountsCopy } = useGlobalCopyStore()
+  const { setSelectedAccounts, selectedAccountGuids } = useGlobalUiStore()
+  const { isDesktop } = useScreenSize()
+  const { onEvent } = useEvent()
+
+  React.useEffect(() => {
+    setSelectedAccounts(accounts)
+  }, [accounts])
+
+  const handleSync = () => {
+    setIsLoading(true)
+    refreshMembers().finally(() => {
+      setIsLoading(false)
+    })
+    onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_SYNC)
+  }
+
+  const handleManageConnections = () => {
+    setShowConnectionsWidget(true)
+    onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_CONNECT)
+  }
+
+  return (
+    <WidgetContainer
+      accountOptions={accounts}
+      actions={[
+        {
+          iconName: 'settings',
+          label: accountsCopy.manage_connections,
+          onClick: handleManageConnections,
+        },
+        {
+          iconName: 'sync',
+          label: accountsCopy.sync_accounts,
+          onClick: handleSync,
+        },
+      ]}
+      onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_FILTER)}
+      onBackClick={onBackClick}
+      sx={sx}
+      title={accountsCopy.title}
+    >
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <>
+          <Box sx={{ px: isDesktop ? 24 : 12 }}>
+            {selectedAccountGuids.length < 1 && (
+              <Text display="flex" justifyContent="center" my={24}>
+                {accountsCopy.no_accounts}
+              </Text>
+            )}
+            <AccountsList />
+          </Box>
+          <ConnectionsDrawer
+            onClose={() => setShowConnectionsWidget(false)}
+            showConnectionsWidget={showConnectionsWidget}
+            title={accountsCopy.manage_connections}
+          />
+        </>
+      )}
+    </WidgetContainer>
+  )
+}
+
+export default observer(AccountsWidget)

package/src/accounts/ConnectMiniWidget.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import { type SxProps } from '@mui/material/styles'
+
+
+import ConnectMiniWidgetCard from './components/ConnectMiniWidgetCard'
+import { ConnectDrawer, useGlobalCopyStore } from '../common'
+
+interface ConnectMiniWidgetProps {
+  onPrimaryCtaClick?: () => void
+  sx?: SxProps
+}
+
+const ConnectMiniWidget: React.FC<ConnectMiniWidgetProps> = ({ onPrimaryCtaClick = () => {}, sx }) => {
+  const { connect: connectCopy } = useGlobalCopyStore()
+  const [showConnectWidget, setShowConnectWidget] = React.useState(false)
+  const onCtaClick = () => {
+    setShowConnectWidget(true)
+    onPrimaryCtaClick()
+  }
+
+  return (
+    <Box data-testid="ConnectMiniWidget">
+      <ConnectMiniWidgetCard onPrimaryCtaClick={onCtaClick} sx={sx} />
+      {showConnectWidget &&
+        <ConnectDrawer onClose={() => setShowConnectWidget(false)}
+          showConnectWidget={showConnectWidget}
+          title={connectCopy.mini_title} />
+      }
+    </Box>
+  )
+}
+
+export default observer(ConnectMiniWidget)