feat: new account linking flow + new notifications system (#1733)

* feat: hide governance notifications bell (#1728) * feat: Account link toast (#1730) * feat: account link toast * requested change * feat: connect accounts banner (#1726) * feat: connect accounts banner * feat: remove link discord banner * feat: check push subscription before showing banner * feat: add push to accounts connect modal (#1729) * feat: add push to accounts connect modal * feat: add push to accounts connect modal * feat: push flow * feat: Account linking modal logic (#1732) * feat: account link toast * feat: account linking notice logic * requested change * fix: condition * fix: build error * fix: modal & toast show on first time * feat: add helper text to push card (#1734) * feat: update profile settings button (#1737) * feat: update ui and dapps * chore: update decentraland dapps * feat: check push subscription in account linking modal (#1740) * refactor: add push subscriptions hook * feat: check forum subscribed in accoutns modal * fix: avatar render in notifications * fix: push api error in build --------- Co-authored-by: Nicolás Comerci <[email protected]>
decentraland · Apr 1, 2024 · fa0a7a5 · fa0a7a5
1 parent 49d9dfd
commit fa0a7a5
Show file tree

Hide file tree

Showing 35 changed files with 1,332 additions and 1,032 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,9 +75,9 @@
     "dayjs": "^1.11.9",
     "dayjs-precise-range": "^1.0.1",
     "dcl-catalyst-client": "^21.5.5",
-    "decentraland-dapps": "^18.5.0",
+    "decentraland-dapps": "^19.3.4",
     "decentraland-gatsby": "^5.109.0",
-    "decentraland-ui": "^5.10.0",
+    "decentraland-ui": "^5.14.0",
     "discord.js": "^14.7.1",
     "dompurify": "^2.3.3",
     "dotenv": "^16.0.0",

diff --git a/src/components/AccountLinkToast/AccountLinkToast.css b/src/components/AccountLinkToast/AccountLinkToast.css
@@ -0,0 +1,37 @@
+.AccountLinkToast {
+  position: fixed !important;
+  right: 0;
+  bottom: 0;
+  background-color: var(--black-700) !important;
+  max-width: 360px !important;
+}
+
+.AccountLinkToast--hidden {
+  display: none;
+}
+
+.AccountLinkToast > .toast-info .close {
+  background-color: var(--black-600) !important;
+}
+
+.AccountLinkToast > .toast-info .close-icon {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIiBmaWxsPSJub25lIj48cGF0aCBvcGFjaXR5PSIwLjIiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS41OTYxOSAwLjE4MjAwNEwwLjE4MTk4IDEuNTk2MjJMMy4zNjM5NiA0Ljc3ODJMMC4xODE5OCA3Ljk2MDE4TDEuNTk2MTkgOS4zNzQzOUw0Ljc3ODE3IDYuMTkyNDFMNy45NjAxNSA5LjM3NDM5TDkuMzc0MzcgNy45NjAxOEw2LjE5MjM5IDQuNzc4Mkw5LjM3NDM3IDEuNTk2MjJMNy45NjAxNSAwLjE4MjAwNEw0Ljc3ODE3IDMuMzYzOThMMS41OTYxOSAwLjE4MjAwNFoiIGZpbGw9IndoaXRlIi8+PC9zdmc+);
+}
+
+.AccountLinkToast__Title {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.AccountLinkToast__Button {
+  padding: 7px 11px !important;
+  color: var(--white-900) !important;
+  background-color: var(--black-800) !important;
+}
+
+@media (max-width: 768px) {
+  .AccountLinkToast {
+    max-width: none !important;
+  }
+}
diff --git a/src/components/AccountLinkToast/AccountLinkToast.tsx b/src/components/AccountLinkToast/AccountLinkToast.tsx
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+
+import classNames from 'classnames'
+import { Button } from 'decentraland-ui/dist/components/Button/Button'
+import { Toast } from 'decentraland-ui/dist/components/Toast/Toast'
+
+import useFormatMessage from '../../hooks/useFormatMessage'
+import Text from '../Common/Typography/Text'
+import BellPurple from '../Icon/BellPurple'
+
+import './AccountLinkToast.css'
+
+interface Props {
+  show: boolean
+  setIsModalOpen: (value: boolean) => void
+}
+
+function AccountLinkToast({ show, setIsModalOpen }: Props) {
+  const [isVisible, setIsVisible] = useState(false)
+  useEffect(() => {
+    setIsVisible(show)
+  }, [show])
+
+  const t = useFormatMessage()
+  return (
+    <>
+      <Toast
+        className={classNames('AccountLinkToast', { 'AccountLinkToast--hidden': !isVisible })}
+        title={
+          <span className="AccountLinkToast__Title">
+            <BellPurple />
+            <Text color="white-900" as="span" weight="medium" size="lg">
+              {t('account_toast.title')}
+            </Text>
+          </span>
+        }
+        body={
+          <div>
+            <Text color="white-900" size="sm">
+              {t('account_toast.description')}
+            </Text>
+            <Button
+              className="AccountLinkToast__Button"
+              onClick={() => {
+                setIsModalOpen(true)
+                setIsVisible(false)
+              }}
+            >
+              {t('account_toast.button')}
+            </Button>
+          </div>
+        }
+        closable
+        onClose={() => setIsVisible(false)}
+      />
+    </>
+  )
+}
+
+export default AccountLinkToast
diff --git a/src/components/ActionCard/ActionCard.css b/src/components/ActionCard/ActionCard.css
@@ -40,12 +40,8 @@
   color: var(--black-400);
 }
 
-.ui.card.ActionCard--disabled svg circle {
-  fill: var(--black-100);
-}
-
-.ui.card.ActionCard--disabled svg path {
-  fill: var(--black-400);
+.ui.card.ActionCard--disabled svg {
+  filter: grayscale(100%) opacity(50%);
 }
 
 .ui.card.ActionCard .ActionCard__Label {

diff --git a/src/components/ActionCard/ActionCard.tsx b/src/components/ActionCard/ActionCard.tsx
@@ -30,8 +30,8 @@ function ActionCard({
   helper,
 }: ActionCardProps) {
   const t = useFormatMessage()
-  const isImplemented = !!action || !!onCardClick
-  const isActionable = isImplemented && !isDisabled && !isVerified
+  const isActionable = !isDisabled && !isVerified
+
   return (
     <Card
       className={classNames('ActionCard', !isActionable && 'ActionCard--disabled')}
@@ -44,9 +44,6 @@ function ActionCard({
             <div>
               <h3>
                 {title}
-                {!isImplemented && (
-                  <span className="ActionCard__Label ActionCard__SoonLabel">{t('modal.identity_setup.soon')}</span>
-                )}
                 {isVerified && (
                   <span className="ActionCard__Label ActionCard__VerifiedLabel">
                     {t('modal.identity_setup.verified')}

diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css
@@ -1,11 +1,10 @@
 .Banner {
-  display: none;
   align-items: center;
   align-content: stretch;
   position: relative;
   padding: 16px 16px 16px 20px;
   margin-top: 24px;
-  margin-bottom: 8px;
+  margin-bottom: 32px;
   border-radius: 8px;
   outline: 1px solid #0000000a;
 }
@@ -79,17 +78,15 @@
     padding-left: 0;
     padding-right: 0;
     min-width: 87px;
+    width: 100%;
   }
 }
 
 @media (min-width: 768px) {
   .Banner {
-    margin-top: 0;
-    margin-bottom: 35px;
-  }
-
-  .OnlyDesktop .Banner {
     display: flex;
+    margin-top: 0;
+    margin-bottom: 32px;
   }
 
   .Banner .Banner__Icon {

diff --git a/src/components/Banner/ConnectAccountsBanner.tsx b/src/components/Banner/ConnectAccountsBanner.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react'
+
+import { HIDE_CONNECT_ACCOUNTS_BANNER_KEY } from '../../front/localStorageKeys'
+import useFormatMessage from '../../hooks/useFormatMessage'
+import BellCircled from '../Icon/BellCircled'
+import AccountsConnectModal from '../Modal/IdentityConnectModal/AccountsConnectModal'
+
+import Banner from './Banner'
+
+export const shouldShowConnectAccountsBanner = () => {
+  if (typeof window !== 'undefined') {
+    return localStorage.getItem(HIDE_CONNECT_ACCOUNTS_BANNER_KEY) !== 'true'
+  }
+
+  return false
+}
+
+export default function ConnectAccountsBanner() {
+  const t = useFormatMessage()
+  const [isAccountsConnectModalOpen, setIsAccountsConnectModalOpen] = useState(false)
+
+  return (
+    <>
+      <Banner
+        color="purple"
+        isVisible={shouldShowConnectAccountsBanner()}
+        title={t(`banner.connect_accounts.title`)}
+        description={t(`banner.connect_accounts.description`)}
+        bannerHideKey={HIDE_CONNECT_ACCOUNTS_BANNER_KEY}
+        icon={<BellCircled />}
+        buttonLabel={t(`banner.connect_accounts.button_label`)}
+        onButtonClick={() => setIsAccountsConnectModalOpen(true)}
+      />
+      <AccountsConnectModal open={isAccountsConnectModalOpen} onClose={() => setIsAccountsConnectModalOpen(false)} />
+    </>
+  )
+}
diff --git a/src/components/Banner/LinkDiscordBanner.tsx b/src/components/Banner/LinkDiscordBanner.tsx
diff --git a/src/components/Banner/RandomBanner.tsx b/src/components/Banner/RandomBanner.tsx
@@ -1,8 +1,11 @@
-import useIsDiscordLinked from '../../hooks/useIsDiscordLinked'
+import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
+
+import useIsProfileValidated from '../../hooks/useIsProfileValidated'
 import useNewsletterSubscription from '../../hooks/useNewsletterSubscription'
+import usePushSubscriptions from '../../hooks/usePushSubscriptions'
 
+import ConnectAccountsBanner, { shouldShowConnectAccountsBanner } from './ConnectAccountsBanner'
 import DelegationBanner, { shouldShowDelegationBanner } from './DelegationBanner'
-import LinkDiscordBanner, { shouldShowLinkDiscordBanner } from './LinkDiscordBanner'
 import SubscriptionBanner from './SubscriptionBanner'
 
 interface Props {
@@ -13,14 +16,17 @@ const randomNumber = new Date().valueOf()
 
 function RandomBanner({ isVisible }: Props) {
   const { showSubscriptionBanner } = useNewsletterSubscription()
-  const { isDiscordLinked, isLoadingIsDiscordLinked } = useIsDiscordLinked()
+  const [user] = useAuthContext()
+  const { isProfileValidated, validationChecked } = useIsProfileValidated(user)
+
+  const { isSubscribedToDaoChannel, isLoadingPushSubscriptions } = usePushSubscriptions()
 
-  if (!isVisible || isLoadingIsDiscordLinked) {
+  if (!isVisible || !validationChecked || isLoadingPushSubscriptions) {
     return null
   }
 
-  if (shouldShowLinkDiscordBanner() && !isDiscordLinked && !isLoadingIsDiscordLinked) {
-    return <LinkDiscordBanner />
+  if (shouldShowConnectAccountsBanner() && (!isProfileValidated || !isSubscribedToDaoChannel)) {
+    return <ConnectAccountsBanner />
   }
 
   const delegationBanner = <DelegationBanner />

diff --git a/src/components/Common/Typography/Text.css b/src/components/Common/Typography/Text.css
@@ -63,6 +63,10 @@
   color: var(--red-800);
 }
 
+.Text.Text--color-white-900 {
+  color: var(--white-900);
+}
+
 .Text.Text--style-normal {
   font-style: normal;
 }

diff --git a/src/components/Common/Typography/Text.tsx b/src/components/Common/Typography/Text.tsx
@@ -10,7 +10,7 @@ const DEFAULT_FONT_SIZE: FontSize = 'md'
 const DEFAULT_FONT_STYLE: FontStyle = 'normal'
 export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type FontWeight = 'bold' | 'semi-bold' | 'normal' | 'medium' | 'light'
-type TextColor = 'default' | 'primary' | 'secondary' | 'error'
+type TextColor = 'default' | 'primary' | 'secondary' | 'error' | 'white-900'
 type FontStyle = 'normal' | 'italic'
 
 interface Props {

diff --git a/src/components/Icon/BellCircled.tsx b/src/components/Icon/BellCircled.tsx
@@ -0,0 +1,20 @@
+function BellCircled() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 48 48">
+      <circle cx="24" cy="24" r="24" fill="#3C24B3" opacity="0.16"></circle>
+      <g clipPath="url(#clip0_15687_3787)">
+        <path
+          fill="#5D5FEF"
+          d="M24 14c-.712 0-1.287.559-1.287 1.25V16c-2.933.578-5.142 3.102-5.142 6.125v.734a7.4 7.4 0 01-1.949 4.985l-.297.324a1.228 1.228 0 00-.213 1.344c.205.449.667.738 1.173.738h15.428c.507 0 .965-.29 1.174-.738a1.22 1.22 0 00-.213-1.344l-.297-.324a7.393 7.393 0 01-1.95-4.985v-.734c0-3.023-2.209-5.547-5.142-6.125v-.75c0-.691-.575-1.25-1.286-1.25zm1.82 19.27a2.466 2.466 0 00.75-1.77H21.429c0 .664.269 1.3.751 1.77A2.61 2.61 0 0024 34a2.61 2.61 0 001.82-.73z"
+        ></path>
+      </g>
+      <defs>
+        <clipPath id="clip0_15687_3787">
+          <path fill="#fff" d="M0 0H18V20H0z" transform="translate(15 14)"></path>
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default BellCircled
diff --git a/src/components/Icon/BellPurple.tsx b/src/components/Icon/BellPurple.tsx
@@ -0,0 +1,19 @@
+function BellPurple() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="13" viewBox="0 0 11 13" fill="none">
+      <g clipPath="url(#clip0_15714_4033)">
+        <path
+          d="M5.49953 0C5.06493 0 4.71382 0.363086 4.71382 0.8125V1.3C2.9214 1.67578 1.57096 3.31602 1.57096 5.28125V5.75859C1.57096 6.95195 1.14618 8.10469 0.38011 8.99844L0.198414 9.20918C-0.00783606 9.44785 -0.0569432 9.79063 0.06828 10.0826C0.193503 10.3746 0.475869 10.5625 0.785244 10.5625H10.2138C10.5232 10.5625 10.8031 10.3746 10.9308 10.0826C11.0585 9.79063 11.0069 9.44785 10.8006 9.20918L10.6189 8.99844C9.85288 8.10469 9.4281 6.95449 9.4281 5.75859V5.28125C9.4281 3.31602 8.07765 1.67578 6.28524 1.3V0.8125C6.28524 0.363086 5.93413 0 5.49953 0ZM6.61181 12.5252C6.90645 12.2205 7.07096 11.8066 7.07096 11.375H5.49953H3.9281C3.9281 11.8066 4.09261 12.2205 4.38725 12.5252C4.6819 12.8299 5.08212 13 5.49953 13C5.91694 13 6.31716 12.8299 6.61181 12.5252Z"
+          fill="#5D5FEF"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_15714_4033">
+          <rect width="11" height="13" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default BellPurple