feat: delayed comments

Author: nevo-david

apps/frontend/src/components/new-launch/add.edit.modal.tsx

@@ -148,7 +148,7 @@ export const AddEditModalInnerInner: FC<AddEditModalProps> = (props) => {
         0,
         existingData.integration,
         existingData.posts.map((post) => ({
-          delay: 0,
+          delay: post.delay,
           content:
             post.content.indexOf('<p>') > -1
               ? post.content

apps/frontend/src/components/new-launch/delay.component.tsx

@@ -1,17 +1,42 @@
 'use client';
 
-import React, { FC, useCallback } from 'react';
-import { DelayIcon } from '@gitroom/frontend/components/ui/icons';
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import { DelayIcon, DropdownArrowIcon } from '@gitroom/frontend/components/ui/icons';
 import clsx from 'clsx';
 import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
 import { useShallow } from 'zustand/react/shallow';
 import { useT } from '@gitroom/react/translation/get.transation.service.client';
+import { useClickOutside } from '@mantine/hooks';
+
+const delayOptions = [
+  { value: 1, label: '1m' },
+  { value: 2, label: '2m' },
+  { value: 5, label: '5m' },
+  { value: 10, label: '10m' },
+  { value: 15, label: '15m' },
+  { value: 30, label: '30m' },
+  { value: 60, label: '1h' },
+  { value: 120, label: '2h' },
+];
 
 export const DelayComponent: FC<{
   currentIndex: number;
   currentDelay: number;
 }> = ({ currentIndex, currentDelay }) => {
   const t = useT();
+  const [isOpen, setIsOpen] = useState(false);
+  const [customValue, setCustomValue] = useState('');
+  
+  const isCustomDelay = currentDelay > 0 && !delayOptions.some((opt) => opt.value === currentDelay);
+
+  useEffect(() => {
+    if (isOpen && isCustomDelay) {
+      setCustomValue(String(currentDelay));
+    } else if (isOpen && !isCustomDelay) {
+      setCustomValue('');
+    }
+  }, [isOpen, isCustomDelay, currentDelay]);
+
   const { current, setInternalDelay, setGlobalDelay } = useLaunchStore(
     useShallow((state) => ({
       current: state.current,
@@ -20,6 +45,13 @@ export const DelayComponent: FC<{
     }))
   );
 
+  const ref = useClickOutside(() => {
+    if (!isOpen) {
+      return;
+    }
+    setIsOpen(false);
+  });
+
   const setDelay = useCallback(
     (index: number) => (minutes: number) => {
       if (current !== 'global') {
@@ -31,20 +63,92 @@ export const DelayComponent: FC<{
     [currentIndex, current]
   );
 
+  const handleSelectDelay = useCallback(
+    (minutes: number) => {
+      setDelay(currentIndex)(minutes);
+      setIsOpen(false);
+    },
+    [currentIndex, setDelay]
+  );
+
+  const getCurrentDelayLabel = () => {
+    if (!currentDelay) return null;
+    const option = delayOptions.find((opt) => opt.value === currentDelay);
+    return option?.label || `${currentDelay} min`;
+  };
+
   return (
-    <DelayIcon
-      // move it into the modal
-      onClick={() => setDelay(currentIndex)(100)}
-      data-tooltip-id="tooltip"
-      data-tooltip-content={
-        !currentDelay
-          ? t('delay_comment', 'Delay comment')
-          : `Comment delayed by ${currentDelay} minutes`
-      }
-      className={clsx(
-        'cursor-pointer',
-        currentDelay > 0 && 'bg-[#D82D7E] text-white rounded-full'
+    <div ref={ref} className="relative">
+      <div
+        onClick={() => setIsOpen(!isOpen)}
+        data-tooltip-id="tooltip"
+        data-tooltip-content={
+          !currentDelay
+            ? t('delay_comment', 'Delay comment')
+            : `${t('delay_comment_by', 'Comment delayed by')} ${getCurrentDelayLabel()}`
+        }
+        className={clsx(
+          'cursor-pointer flex items-center gap-[4px]',
+          currentDelay > 0 && 'bg-[#D82D7E] text-white rounded-full'
+        )}
+      >
+        <DelayIcon />
+      </div>
+      {isOpen && (
+        <div className="z-[300] absolute end-0 top-[100%] w-[200px] bg-newBgColorInner p-[8px] menu-shadow translate-y-[10px] flex flex-col rounded-[8px]">
+          <div className="grid grid-cols-4 gap-[4px]">
+            {delayOptions.map((option) => (
+              <div
+                onClick={() => handleSelectDelay(option.value)}
+                key={option.value}
+                className={clsx(
+                  'h-[32px] flex items-center justify-center rounded-[4px] cursor-pointer hover:bg-newBgColor text-[13px]',
+                  currentDelay === option.value && 'bg-[#612BD3] text-white hover:bg-[#612BD3]'
+                )}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+          <div className="border-t border-newTextColor/10 mt-[8px] pt-[8px]">
+            <div className="flex gap-[4px]">
+              <input
+                type="number"
+                min="1"
+                value={customValue}
+                onChange={(e) => setCustomValue(e.target.value)}
+                onClick={(e) => e.stopPropagation()}
+                placeholder="Custom min"
+                className={clsx(
+                  'flex-1 w-full h-[32px] px-[8px] rounded-[4px] bg-newBgColor border text-[13px] outline-none focus:border-[#612BD3]',
+                  isCustomDelay ? 'border-[#612BD3]' : 'border-newTextColor/10'
+                )}
+              />
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  const value = parseInt(customValue, 10);
+                  if (value > 0) {
+                    handleSelectDelay(value);
+                    setCustomValue('');
+                  }
+                }}
+                className="h-[32px] px-[10px] rounded-[4px] bg-[#612BD3] text-white text-[12px] font-[600] hover:bg-[#612BD3]/80"
+              >
+                Set
+              </button>
+            </div>
+          </div>
+          {currentDelay > 0 && (
+            <button
+              onClick={() => handleSelectDelay(0)}
+              className="mt-[8px] h-[32px] w-full rounded-[4px] text-[13px] text-red-400 hover:bg-red-400/10"
+            >
+              Remove delay
+            </button>
+          )}
+        </div>
       )}
-    />
+    </div>
   );
 };

apps/frontend/src/components/new-launch/manage.modal.tsx

@@ -315,6 +315,7 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
           value: post.values.map((value: any) => ({
             ...(value.id ? { id: value.id } : {}),
             content: value.content,
+            delay: value.delay || 0,
             image:
               (value?.media || []).map(
                 ({ id, path, alt, thumbnail, thumbnailTimestamp }: any) => ({

apps/orchestrator/src/activities/post.activity.ts

@@ -22,7 +22,6 @@ import {
   organizationId,
   postId as postIdSearchParam,
 } from '@gitroom/nestjs-libraries/temporal/temporal.search.attribute';
-import { postWorkflow } from '@gitroom/orchestrator/workflows';
 
 @Injectable()
 @Activity()
@@ -43,7 +42,7 @@ export class PostActivity {
     for (const post of list) {
       await this._temporalService.client
         .getRawClient()
-        .workflow.signalWithStart('postWorkflow', {
+        .workflow.signalWithStart('postWorkflowV101', {
           workflowId: `post_${post.id}`,
           taskQueue: 'main',
           signal: 'poke',

apps/orchestrator/src/workflows/index.ts

@@ -1,4 +1,5 @@
-export * from './post.workflow';
+export * from './post-workflows/post.workflow';
+export * from './post-workflows/post.workflow.v1.0.1';
 export * from './autopost.workflow';
 export * from './digest.email.workflow';
 export * from './missing.post.workflow';