Composer: Add "Send When Online" button (#3067)

src/components/middle/composer/Composer.tsx

@@ -35,6 +35,7 @@ import {
   EDITABLE_INPUT_CSS_SELECTOR,
   MAX_UPLOAD_FILEPART_SIZE,
   EDITABLE_INPUT_MODAL_ID,
+  SCHEDULED_WHEN_ONLINE,
 } from '../../../config';
 import { IS_VOICE_RECORDING_SUPPORTED, IS_IOS } from '../../../util/windowEnvironment';
 import { MEMO_EMPTY_ARRAY } from '../../../util/memo';
@@ -1218,6 +1219,10 @@ const Composer: FC<OwnProps & StateProps> = ({
     sendSilent();
   }, [sendSilent]);
 
+  const handleSendWhenOnline = useCallback(() => {
+    handleMessageSchedule({ }, SCHEDULED_WHEN_ONLINE);
+  }, [handleMessageSchedule]);
+
   const handleSendScheduledAttachments = useCallback((sendCompressed: boolean, sendGrouped: boolean) => {
     requestCalendar((scheduledAt) => {
       handleMessageSchedule({ sendCompressed, sendGrouped }, scheduledAt);
@@ -1542,8 +1547,10 @@ const Composer: FC<OwnProps & StateProps> = ({
       {canShowCustomSendMenu && (
         <CustomSendMenu
           isOpen={isCustomSendMenuOpen}
+          canScheduleUntilOnline={canScheduleUntilOnline}
           onSendSilent={!isChatWithSelf ? handleSendSilent : undefined}
           onSendSchedule={!shouldSchedule ? handleSendScheduled : undefined}
+          onSendWhenOnline={handleSendWhenOnline}
           onClose={handleContextMenuClose}
           onCloseAnimationEnd={handleContextMenuHide}
           isSavedMessages={isChatWithSelf}

src/components/middle/composer/CustomSendMenu.tsx

@@ -1,7 +1,10 @@
+import React, { memo, useState } from '../../../lib/teact/teact';
+
 import type { FC } from '../../../lib/teact/teact';
-import React, { memo } from '../../../lib/teact/teact';
 
 import { IS_TOUCH_ENV } from '../../../util/windowEnvironment';
+
+import useEffectWithPrevDeps from '../../../hooks/useEffectWithPrevDeps';
 import useMouseInside from '../../../hooks/useMouseInside';
 import useLang from '../../../hooks/useLang';
 
@@ -14,8 +17,10 @@ export type OwnProps = {
   isOpen: boolean;
   isOpenToBottom?: boolean;
   isSavedMessages?: boolean;
+  canScheduleUntilOnline?: boolean;
   onSendSilent?: NoneToVoidFunction;
   onSendSchedule?: NoneToVoidFunction;
+  onSendWhenOnline?: NoneToVoidFunction;
   onClose: NoneToVoidFunction;
   onCloseAnimationEnd?: NoneToVoidFunction;
 };
@@ -24,15 +29,25 @@ const CustomSendMenu: FC<OwnProps> = ({
   isOpen,
   isOpenToBottom = false,
   isSavedMessages,
+  canScheduleUntilOnline,
   onSendSilent,
   onSendSchedule,
+  onSendWhenOnline,
   onClose,
   onCloseAnimationEnd,
 }) => {
   const [handleMouseEnter, handleMouseLeave] = useMouseInside(isOpen, onClose);
+  const [displayScheduleUntilOnline, setDisplayScheduleUntilOnline] = useState(false);
 
   const lang = useLang();
 
+  useEffectWithPrevDeps(([prevIsOpen]) => {
+    // Avoid context menu item shuffling when opened
+    if (isOpen && !prevIsOpen) {
+      setDisplayScheduleUntilOnline(Boolean(canScheduleUntilOnline));
+    }
+  }, [isOpen, canScheduleUntilOnline]);
+
   return (
     <Menu
       isOpen={isOpen}
@@ -52,6 +67,11 @@ const CustomSendMenu: FC<OwnProps> = ({
           {lang(isSavedMessages ? 'SetReminder' : 'ScheduleMessage')}
         </MenuItem>
       )}
+      {onSendSchedule && displayScheduleUntilOnline && (
+        <MenuItem icon="user-online" onClick={onSendWhenOnline}>
+          {lang('SendWhenOnline')}
+        </MenuItem>
+      )}
     </Menu>
   );
 };

src/styles/icons.scss

@@ -49,6 +49,9 @@
 .icon-volume-3:before {
   content: "\e991";
 }
+.icon-user-online:before {
+  content: "\e9c0";
+}
 .icon-pinned-message:before {
   content: "\e9bf";
 }