From c16c5a572c24628fcbc543d84657c4646feb5e12 Mon Sep 17 00:00:00 2001
From: Matt Krick <matt.krick@gmail.com>
Date: Fri, 21 Feb 2025 11:17:33 -0800
Subject: [PATCH] feat: add date range

Signed-off-by: Matt Krick <matt.krick@gmail.com>
---
 .../client/components/MeetingDatePicker.tsx   | 46 +++++++++++++++++++
 .../promptResponse/StandardBubbleMenu.tsx     |  2 +-
 .../components/GcalModal/DateTimePickers.tsx  |  2 +-
 .../extensions/imageBlock/InsightsBlock.ts    |  4 +-
 .../imageUpload/InsightsBlockView.tsx         | 27 +++++------
 5 files changed, 61 insertions(+), 20 deletions(-)
 create mode 100644 packages/client/components/MeetingDatePicker.tsx

diff --git a/packages/client/components/MeetingDatePicker.tsx b/packages/client/components/MeetingDatePicker.tsx
new file mode 100644
index 00000000000..f013bb9fb4b
--- /dev/null
+++ b/packages/client/components/MeetingDatePicker.tsx
@@ -0,0 +1,46 @@
+import type {NodeViewProps} from '@tiptap/core'
+import dayjs from 'dayjs'
+import {DayPicker} from 'react-day-picker'
+import type {InsightsBlockAttrs} from '../tiptap/extensions/imageBlock/InsightsBlock'
+import {Menu} from '../ui/Menu/Menu'
+import {MenuContent} from '../ui/Menu/MenuContent'
+
+interface Props {
+  updateAttributes: NodeViewProps['updateAttributes']
+  attrs: InsightsBlockAttrs
+}
+
+export const MeetingDatePicker = (props: Props) => {
+  const {updateAttributes, attrs} = props
+  const {startAt, endAt} = attrs
+  const dateRangeLabel = `${dayjs(startAt).format('MMM D, YYYY')} - ${dayjs(endAt).format('MMM D, YYYY')}`
+
+  return (
+    <Menu
+      className='data-[side=bottom]:animate-slide-down data-[side=top]:animate-slide-up'
+      trigger={
+        <div className='group flex cursor-pointer items-center justify-between rounded-md bg-white'>
+          <div className='p-2 leading-4'>{dateRangeLabel}</div>
+        </div>
+      }
+    >
+      <MenuContent>
+        <div className='z-10 overflow-auto rounded-md bg-white py-1 shadow-lg outline-hidden in-data-[placement="bottom-start"]:animate-slide-down in-data-[placement="top-start"]:animate-slide-up'>
+          <div className='py-2'>
+            <DayPicker
+              mode='range'
+              selected={{from: new Date(startAt), to: new Date(endAt)}}
+              disabled={{after: new Date()}}
+              onSelect={(newSelected) => {
+                updateAttributes({
+                  startAt: newSelected?.from?.toISOString(),
+                  endAt: newSelected?.to?.toISOString()
+                })
+              }}
+            />
+          </div>
+        </div>
+      </MenuContent>
+    </Menu>
+  )
+}
diff --git a/packages/client/components/promptResponse/StandardBubbleMenu.tsx b/packages/client/components/promptResponse/StandardBubbleMenu.tsx
index bd7117211e1..f3f27399663 100644
--- a/packages/client/components/promptResponse/StandardBubbleMenu.tsx
+++ b/packages/client/components/promptResponse/StandardBubbleMenu.tsx
@@ -9,7 +9,7 @@ interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 export const StandardBubbleMenu = (props: Props) => {
   const {editor} = props
   const shouldShowBubbleMenu = () => {
-    if (!editor || editor.isActive('link')) return false
+    if (!editor || editor.isActive('link') || editor.isActive('insightsBlock')) return false
     return isTextSelected(editor)
   }
 
diff --git a/packages/client/modules/userDashboard/components/GcalModal/DateTimePickers.tsx b/packages/client/modules/userDashboard/components/GcalModal/DateTimePickers.tsx
index c1d8cc1236d..6dfc9234ff0 100644
--- a/packages/client/modules/userDashboard/components/GcalModal/DateTimePickers.tsx
+++ b/packages/client/modules/userDashboard/components/GcalModal/DateTimePickers.tsx
@@ -5,7 +5,7 @@ import {Dayjs} from 'dayjs'
 import * as React from 'react'
 import {PALETTE} from '../../../../styles/paletteV3'
 
-export const customStyles = {
+const customStyles = {
   width: '100%',
   '& .MuiOutlinedInput-root': {
     '&:hover .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiOutlinedInput-notchedOutline, &.focus-within .MuiOutlinedInput-notchedOutline':
diff --git a/packages/client/tiptap/extensions/imageBlock/InsightsBlock.ts b/packages/client/tiptap/extensions/imageBlock/InsightsBlock.ts
index 74883b63c9c..3544a92fd4b 100644
--- a/packages/client/tiptap/extensions/imageBlock/InsightsBlock.ts
+++ b/packages/client/tiptap/extensions/imageBlock/InsightsBlock.ts
@@ -7,8 +7,8 @@ import {InsightsBlockView} from '../imageUpload/InsightsBlockView'
 export interface InsightsBlockAttrs {
   teamIds: string[]
   meetingTypes: MeetingTypeEnum[]
-  startAt: Date
-  endAt: Date
+  startAt: string
+  endAt: string
   meetingIds: string[]
   title: string
 }
diff --git a/packages/client/tiptap/extensions/imageUpload/InsightsBlockView.tsx b/packages/client/tiptap/extensions/imageUpload/InsightsBlockView.tsx
index 06ca7ff956c..05fdadcb29b 100644
--- a/packages/client/tiptap/extensions/imageUpload/InsightsBlockView.tsx
+++ b/packages/client/tiptap/extensions/imageUpload/InsightsBlockView.tsx
@@ -1,7 +1,8 @@
-// import {DatePicker} from '@mui/x-date-pickers'
 import {NodeViewWrapper, type NodeViewProps} from '@tiptap/react'
+import {MeetingDatePicker} from '../../../components/MeetingDatePicker'
 import {MeetingTypePickerCombobox} from '../../../components/MeetingTypePickerCombobox'
 import {TeamPickerComboboxRoot} from '../../../components/TeamPickerComboboxRoot'
+import {Button} from '../../../ui/Button/Button'
 import type {InsightsBlockAttrs} from '../imageBlock/InsightsBlock'
 export const InsightsBlockView = (props: NodeViewProps) => {
   const {node, updateAttributes} = props
@@ -10,7 +11,7 @@ export const InsightsBlockView = (props: NodeViewProps) => {
   return (
     <NodeViewWrapper>
       <div className='m-0 p-0 text-slate-900'>
-        <div className='flex cursor-pointer flex-col rounded-sm bg-slate-200 p-4'>
+        <div className='flex max-w-fit cursor-pointer flex-col rounded-sm bg-slate-200 p-4'>
           <input
             className='bg-inherit p-4 text-lg ring-0 outline-0'
             onChange={(e) => {
@@ -18,28 +19,22 @@ export const InsightsBlockView = (props: NodeViewProps) => {
             }}
             value={title}
           />
-          <div className='grid w-96 grid-cols-[repeat(2,minmax(256px,1fr))] gap-4 p-4'>
+          <div className='grid grid-cols-[repeat(2,minmax(256px,1fr))] gap-4 p-4'>
             {/* Row 1 */}
             <label className='self-center font-semibold'>Teams</label>
             <TeamPickerComboboxRoot updateAttributes={updateAttributes} attrs={attrs} />
             {/* Row 2 */}
             <label className='self-center font-semibold'>Type</label>
             <MeetingTypePickerCombobox updateAttributes={updateAttributes} attrs={attrs} />
-
             {/* Row 3 */}
             <label className='self-center font-semibold'>Meetings started between</label>
-            {/* <DatePicker
-              label={`Meeting Start Date`}
-              value={startValue}
-              onChange={(date) => handleChangeStart(date, startValue)}
-              format='MMMM D, YYYY'
-              sx={customStyles}
-            /> */}
-            <select className='rounded border p-2'>
-              <option>Yes</option>
-              <option>No</option>
-              <option>Maybe</option>
-            </select>
+            <MeetingDatePicker updateAttributes={updateAttributes} attrs={attrs} />
+            <div></div>
+            <div className='flex justify-end'>
+              <Button variant='secondary' shape='pill' size='md'>
+                Generate Insights
+              </Button>
+            </div>
           </div>
         </div>
       </div>