feat: Calendar alert improvements

src/components/Modal/CalendarAlertModal.tsx

@@ -19,7 +19,7 @@ type CalendarAlertModalProps = Omit<ModalProps, 'children'> & {
   proposal: Pick<ProposalAttributes, 'id' | 'title' | 'finish_at'>
 }
 
-const UNITS: UnitTypeLongPlural[] = ['seconds', 'minutes', 'hours', 'days']
+const UNITS: UnitTypeLongPlural[] = ['minutes', 'hours', 'days']
 const MAX_TIME_VALUE = 300
 
 function getAlertDate(finishAt: ProposalAttributes['finish_at'], value: number, unit: UnitTypeLongPlural): Date | null {

src/components/Proposal/ProposalSidebar.tsx

@@ -1,7 +1,9 @@
 import React, { useMemo, useState } from 'react'
 
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
+import useTrackContext from 'decentraland-gatsby/dist/context/Track/useTrackContext'
 
+import { SegmentEvent } from '../../entities/Events/types'
 import { ProposalAttributes, ProposalStatus, ProposalType } from '../../entities/Proposal/types'
 import { SubscriptionAttributes } from '../../entities/Subscription/types'
 import { Survey } from '../../entities/SurveyTopic/types'
@@ -83,6 +85,13 @@ export default function ProposalSidebar({
   const partialResults = useMemo(() => calculateResult(choices, highQualityVotes || {}), [choices, highQualityVotes])
 
   const [isCalendarModalOpen, setIsCalendarModalOpen] = useState(false)
+  const track = useTrackContext()
+  const setIsCalendarModalOpenWithTracking = (isOpen: boolean) => {
+    setIsCalendarModalOpen(isOpen)
+    if (isOpen) {
+      track(SegmentEvent.ModalViewed, { address: account, modal: 'Calendar Alert' })
+    }
+  }
 
   const handleVoteClick = (selectedChoice: SelectedVoteChoice) => {
     if (voteWithSurvey) {
@@ -153,15 +162,15 @@ export default function ProposalSidebar({
         <CalendarAlertButton
           loading={proposalLoading}
           disabled={isCalendarButtonDisabled}
-          onClick={() => setIsCalendarModalOpen(true)}
+          onClick={() => setIsCalendarModalOpenWithTracking(true)}
         />
         {proposal && <ProposalDetailSection proposal={proposal} />}
         {proposal && <ProposalActions proposal={proposal} deleting={deleting} updatePageState={updatePageState} />}
         {proposal && (
           <CalendarAlertModal
             proposal={proposal}
             open={isCalendarModalOpen}
-            onClose={() => setIsCalendarModalOpen(false)}
+            onClose={() => setIsCalendarModalOpenWithTracking(false)}
           />
         )}
       </div>

src/components/Proposal/View/CalendarAlertButton.css

@@ -1,4 +1,10 @@
-.CalendarAlertButton__IconContainer {
+.CalendarAlertButton__Container {
   display: flex;
-  padding: 0 2px;
-}
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 2px;
+}
+
+.CalendarAlertButton.SectionButton__Container {
+  justify-content: space-between;
+}

src/components/Proposal/View/CalendarAlertButton.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import useFormatMessage from '../../../hooks/useFormatMessage'
 import CalendarAdd from '../../Icon/CalendarAdd'
+import NewBadge from '../NewBadge/NewBadge'
 
 import './CalendarAlertButton.css'
 import SidebarButton from './SidebarButton'
@@ -15,11 +16,12 @@ interface Props {
 function CalendarAlertButton({ loading, disabled, onClick }: Props) {
   const t = useFormatMessage()
   return (
-    <SidebarButton loading={loading} disabled={disabled} onClick={onClick}>
-      <div className="CalendarAlertButton__IconContainer">
-        <CalendarAdd size="16" />
+    <SidebarButton className="CalendarAlertButton" loading={loading} disabled={disabled} onClick={onClick}>
+      <div className="CalendarAlertButton__Container">
+        <CalendarAdd className="CalendarAlertButton__Icon" size="16" />
+        <span>{t('page.proposal_detail.calendar_button')}</span>
       </div>
-      <span>{t('page.proposal_detail.calendar_button')}</span>
+      {!disabled && <NewBadge />}
     </SidebarButton>
   )
 }

src/components/Proposal/View/SectionButton.css

@@ -37,4 +37,5 @@
 .SectionButton__Container {
   display: flex;
   align-items: center;
+  width: 100%;
 }

src/components/Proposal/View/SidebarButton.tsx

@@ -10,9 +10,10 @@ interface Props {
   disabled?: boolean
   onClick?: () => void
   children?: React.ReactNode
+  className?: string
 }
 
-function SidebarButton({ loading, disabled, onClick, children }: Props) {
+function SidebarButton({ loading, disabled, onClick, className, children }: Props) {
   return (
     <button
       onClick={onClick}
@@ -23,7 +24,7 @@ function SidebarButton({ loading, disabled, onClick, children }: Props) {
         disabled && 'SectionButton--disabled'
       )}
     >
-      <div className="SectionButton__Container">{children}</div>
+      <div className={classNames('SectionButton__Container', className)}>{children}</div>
     </button>
   )
 }