feat: added panel radio buttons that list timer options

_locales/en/messages.json

@@ -195,6 +195,7 @@
   "timerOption_1_week": "1 week",
   "timerOption_2_weeks": "2 weeks",
   "disappearingMessages": "Disappearing messages",
+  "set": "Set",
   "changeNickname": "Change Nickname",
   "clearNickname": "Clear Nickname",
   "nicknamePlaceholder": "New Nickname",

ts/components/buttons/PanelButton.tsx

@@ -1,10 +1,29 @@
 import React, { ReactNode } from 'react';
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
+
+// NOTE Used for descendant components
+export const StyledContent = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+
+export const StyledText = styled.span`
+  font-size: var(--font-size-md);
+  font-weight: 500;
+  margin-inline-start: var(--margins-lg);
+  margin-inline-end: var(--margins-lg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  /* TODO needs RTL support */
+  text-align: left;
+`;
 
 const StyledRoundedPanelButtonGroup = styled.div`
   overflow: hidden;
-  background: var(--background-secondary-color);
+  background: var(--right-panel-item-background-color);
-  border: 1px solid var(--border-color);
   border-radius: 16px;
   padding: var(--margins-lg);
   margin: 0 var(--margins-lg);
@@ -17,9 +36,15 @@ const PanelButtonContainer = styled.div`
   max-height: 100%;
 `;
 
-export const PanelButtonGroup = ({ children }: { children: ReactNode }) => {
+type PanelButtonGroupProps = {
+  children: ReactNode;
+  style?: CSSProperties;
+};
+
+export const PanelButtonGroup = (props: PanelButtonGroupProps) => {
+  const { children, style } = props;
   return (
-    <StyledRoundedPanelButtonGroup>
+    <StyledRoundedPanelButtonGroup style={style}>
       <PanelButtonContainer>{children}</PanelButtonContainer>
     </StyledRoundedPanelButtonGroup>
   );
@@ -40,7 +65,7 @@ const StyledPanelButton = styled.button<{
   width: 100%;
   transition: var(--default-duration);
   background-color: ${props =>
-    !props.disableBg ? 'var(--conversation-tab-background-selected-color) !important' : null};
+    !props.disableBg ? 'var(--right-panel-item-background-hover-color) !important' : null};
 
   :not(:last-child) {
     border-bottom: 1px solid var(--border-color);
@@ -48,26 +73,24 @@ const StyledPanelButton = styled.button<{
 `;
 
 export type PanelButtonProps = {
+  // https://styled-components.com/docs/basics#styling-any-component
+  className?: string;
   disableBg?: boolean;
   children: ReactNode;
   onClick: (...args: any[]) => void;
   dataTestId?: string;
+  style?: CSSProperties;
 };
 
 export const PanelButton = (props: PanelButtonProps) => {
-  const { disableBg, children, onClick, dataTestId } = props;
+  const { className, disableBg, children, onClick, dataTestId, style } = props;
 
   return (
     <StyledPanelButton
+      className={className}
       disableBg={disableBg}
       onClick={onClick}
-      style={
+      style={style}
-        !disableBg
-          ? {
-              backgroundColor: 'var(--background-primary-color)',
-            }
-          : {}
-      }
       data-testid={dataTestId}
     >
       {children}

ts/components/buttons/PanelIconButton.tsx

@@ -1,26 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
 import { SessionIcon, SessionIconType } from '../icon';
-import { PanelButton, PanelButtonProps } from './PanelButton';
+import { PanelButton, PanelButtonProps, StyledContent, StyledText } from './PanelButton';
-
-const StyledContent = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-`;
-
-const StyledText = styled.span`
-  font-size: var(--font-size-md);
-  font-weight: 500;
-  margin-inline-start: var(--margins-lg);
-  margin-inline-end: var(--margins-lg);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  /* TODO needs RTL support */
-  text-align: left;
-`;
 
 interface PanelIconButton extends Omit<PanelButtonProps, 'children'> {
   iconType: SessionIconType;

ts/components/buttons/PanelRadioButton.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import { SessionRadio } from '../basic/SessionRadio';
+import { PanelButton, PanelButtonProps, StyledContent, StyledText } from './PanelButton';
+
+const StyledPanelButton = styled(PanelButton)`
+  padding-top: var(--margins-lg);
+  padding-bottom: var(--margins-lg);
+
+  div {
+    span {
+      margin-inline-start: 0;
+      margin-inline-end: 0;
+    }
+  }
+
+  :first-child {
+    padding-top: 0;
+  }
+
+  :last-child {
+    padding-bottom: 0;
+  }
+`;
+
+const StyledSubtitle = styled.p``;
+
+const StyledCheckContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+interface PanelRadioButtonProps extends Omit<PanelButtonProps, 'children' | 'onClick'> {
+  value: any;
+  text: string;
+  subtitle?: string;
+  isSelected: boolean;
+  onSelect?: (...args: any[]) => void;
+  onUnselect?: (...args: any[]) => void;
+}
+
+export const PanelRadioButton = (props: PanelRadioButtonProps) => {
+  const { value, text, subtitle, isSelected, onSelect, onUnselect, disableBg, dataTestId } = props;
+
+  return (
+    <StyledPanelButton
+      disableBg={disableBg}
+      onClick={() => {
+        isSelected ? onUnselect?.('bye') : onSelect?.('hi');
+      }}
+      dataTestId={dataTestId}
+    >
+      <StyledContent>
+        <StyledText>{text}</StyledText>
+        {subtitle && <StyledSubtitle></StyledSubtitle>}
+        <StyledCheckContainer>
+          <SessionRadio active={isSelected} value={value} inputName={value} label="" />
+        </StyledCheckContainer>
+      </StyledContent>
+    </StyledPanelButton>
+  );
+};

ts/components/conversation/right-panel/overlay/OverlayDisappearingMessages.tsx

@@ -1,24 +1,78 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
+import { setDisappearingMessagesByConvoId } from '../../../../interactions/conversationInteractions';
 import { resetRightOverlayMode } from '../../../../state/ducks/section';
+import { getSelectedConversationKey } from '../../../../state/selectors/conversations';
+import { getTimerOptions } from '../../../../state/selectors/timerOptions';
+import { SessionButton } from '../../../basic/SessionButton';
+import { PanelButtonGroup } from '../../../buttons';
+import { PanelRadioButton } from '../../../buttons/PanelRadioButton';
 
-export const OverlayDisappearingMessages = () => {
+const StyledContainer = styled.div`
-  const dispatch = useDispatch();
+  width: 100%;
 
-  function resetOverlay() {
+  .session-button {
-    dispatch(resetRightOverlayMode());
+    font-weight: 500;
+    min-width: 90px;
+    width: fit-content;
+    margin: 35px auto 0;
   }
+`;
+
+type TimerOptionsProps = {
+  options: any[];
+  selected: number;
+  setSelected: (value: number) => void;
+};
+
+const TimeOptions = (props: TimerOptionsProps) => {
+  const { options, selected, setSelected } = props;
 
-  // const timerOptions = useSelector(getTimerOptions).timerOptions;
+  return (
+    <PanelButtonGroup>
+      {options.map((option: any) => (
+        <PanelRadioButton
+          key={option.name}
+          text={option.name}
+          value={option.name}
+          isSelected={selected === option.value}
+          onSelect={() => {
+            setSelected(option.value);
+          }}
+          disableBg={true}
+        />
+      ))}
+    </PanelButtonGroup>
+  );
+};
+
+export const OverlayDisappearingMessages = () => {
+  const dispatch = useDispatch();
+  const selectedConversationKey = useSelector(getSelectedConversationKey);
+  const timerOptions = useSelector(getTimerOptions).timerOptions;
 
-  // const disappearingMessagesOptions = timerOptions.map(option => {
+  const [selected, setSelected] = useState(timerOptions[0].value);
-  //   return {
-  //     content: option.name,
-  //     onClick: () => {
-  //       void setDisappearingMessagesByConvoId(id, option.value);
-  //     },
-  //   };
-  // });
 
-  return <div onClick={resetOverlay}>TODO</div>;
+  return (
+    <StyledContainer>
+      <div
+        onClick={() => {
+          dispatch(resetRightOverlayMode());
+        }}
+      >
+        TODO
+      </div>
+      <TimeOptions options={timerOptions} selected={selected} setSelected={setSelected} />
+      <SessionButton
+        onClick={() => {
+          if (selectedConversationKey) {
+            void setDisappearingMessagesByConvoId(selectedConversationKey, selected);
+          }
+        }}
+      >
+        {window.i18n('set')}
+      </SessionButton>
+    </StyledContainer>
+  );
 };

ts/types/LocalizerKeys.ts

@@ -293,6 +293,7 @@ export type LocalizerKeys =
   | 'cameraPermissionNeededTitle'
   | 'editMenuRedo'
   | 'hideRequestBanner'
+  | 'set'
   | 'changeNicknameMessage'
   | 'reactionPopupThree'
   | 'close'