feat: add donation appeal

package.json

@@ -4,7 +4,7 @@
   "name": "session-desktop",
   "productName": "Session",
   "description": "Private messaging from your desktop",
-  "version": "1.17.13",
+  "version": "1.17.15",
   "license": "GPL-3.0",
   "author": {
     "name": "Session Foundation",

ts/components/SessionFocusTrap.tsx

@@ -24,6 +24,7 @@ export function SessionFocusTrap({
   children,
   active = true,
   allowOutsideClick = true,
+  clickOutsideDeactivates = false,
   containerDivStyle,
   suppressErrors,
   allowNoTabbableNodes,
@@ -86,6 +87,7 @@ export function SessionFocusTrap({
       focusTrapOptions={{
         ...rest,
         allowOutsideClick,
+        clickOutsideDeactivates,
         onActivate: _onActivate,
         onPostActivate: _onPostActivate,
         onDeactivate: _onDeactivate,

ts/components/SessionWrapperModal.tsx

@@ -251,6 +251,8 @@ type SessionWrapperModalType = {
   $flexGap?: string;
   style?: Omit<CSSProperties, 'maxWidth' | 'minWidth' | 'padding' | 'border'>;
   modalId: ModalId;
+  clickOutsideDeactivates?: boolean;
+  showFloatingCloseButton?: boolean;
 };
 
 const useNeedsSpacerOnSide = ({
@@ -399,6 +401,28 @@ export const ModalBasicHeader = ({
   );
 };
 
+const StyledFloatingCloseButtonContainer = styled.div`
+  position: absolute;
+  top: var(--margins-md);
+  right: var(--margins-md);
+  padding: var(--margins-xs);
+  border-radius: 100%;
+  background-color: var(--background-tertiary-color);
+`;
+
+function FloatingCloseButton({ onClick }: { onClick?: () => void }) {
+  return (
+    <StyledFloatingCloseButtonContainer>
+      <SessionLucideIconButton
+        unicode={LUCIDE_ICONS_UNICODE.X}
+        onClick={onClick}
+        iconSize="large"
+        iconColor="white"
+      />
+    </StyledFloatingCloseButtonContainer>
+  );
+}
+
 /**
  * A generic modal component that is constructed from a provided header, body and some actions.
  */
@@ -419,6 +443,9 @@ export const SessionWrapperModal = (props: SessionWrapperModalType & { onClose?:
     modalId,
     moveHeaderIntoScrollableBody,
     buttonChildren,
+    // TODO: make this work with the focus trap
+    clickOutsideDeactivates = true,
+    showFloatingCloseButton = false,
   } = props;
 
   const [scrolled, setScrolled] = useState(false);
@@ -433,9 +460,8 @@ export const SessionWrapperModal = (props: SessionWrapperModalType & { onClose?:
     }
     return isEscapeKey(event);
   }, onClose);
-
   const handleClick = (e: any) => {
-    if (!modalRef.current?.contains(e.target)) {
+    if (clickOutsideDeactivates && !modalRef.current?.contains(e.target)) {
       onClose?.();
     }
   };
@@ -494,6 +520,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType & { onClose?:
                   </Flex>
                   {buttonChildren ? buttonChildren : <SpacerLG />}
                 </StyledModalBody>
+                {showFloatingCloseButton ? <FloatingCloseButton onClick={onClose} /> : null}
               </StyledModal>
             </StyledRootDialog>
           </OnModalCloseContext.Provider>

ts/components/dialog/OpenUrlModal.tsx

@@ -22,6 +22,16 @@ const StyledScrollDescriptionContainer = styled.div`
   text-align: center;
 `;
 
+async function openUrl(url: string) {
+  void shell.openExternal(url);
+  await registerUrlInteraction(url, URLInteraction.OPEN);
+}
+
+async function copyUrl(url: string) {
+  MessageInteraction.copyBodyToClipboard(url);
+  await registerUrlInteraction(url, URLInteraction.COPY);
+}
+
 export function OpenUrlModal(props: OpenUrlModalState) {
   const dispatch = getAppDispatch();
 
@@ -35,14 +45,12 @@ export function OpenUrlModal(props: OpenUrlModalState) {
   }
 
   async function onClickOpen() {
-    void shell.openExternal(url);
+    await openUrl(url);
     onClose();
-    await registerUrlInteraction(url, URLInteraction.OPEN);
   }
 
   async function onClickCopy() {
-    MessageInteraction.copyBodyToClipboard(url);
-    await registerUrlInteraction(url, URLInteraction.COPY);
+    await copyUrl(url);
     onClose();
   }
 
@@ -88,3 +96,7 @@ export const showLinkVisitWarningDialog = (urlToOpen: string, dispatch: Dispatch
     })
   );
 };
+
+export const openUrlNoDialog = (urlToOpen: string) => {
+  void openUrl(urlToOpen);
+};

ts/components/dialog/SessionCTA.tsx

@@ -39,7 +39,7 @@ import {
   isProCTAFeatureVariant,
 } from './cta/types';
 import { getFeatureFlag } from '../../state/ducks/types/releasedFeaturesReduxTypes';
-import { showLinkVisitWarningDialog } from './OpenUrlModal';
+import { openUrlNoDialog, showLinkVisitWarningDialog } from './OpenUrlModal';
 import { APP_URL, DURATION } from '../../session/constants';
 import { Data } from '../../data/data';
 import { getUrlInteractionsForUrl, URLInteraction } from '../../util/urlHistory';
@@ -127,6 +127,14 @@ function isVariantWithActionButton(variant: CTAVariant): boolean {
   ].includes(variant);
 }
 
+function isVariantWithCloseButton(variant: CTAVariant): boolean {
+  return variant !== CTAVariant.DONATE_APPEAL;
+}
+
+function isVariantWhichClosesOnOutsideClick(variant: CTAVariant): boolean {
+  return variant !== CTAVariant.DONATE_APPEAL;
+}
+
 function getImage(variant: CTAVariant): ReactNode {
   switch (variant) {
     case CTAVariant.PRO_PINNED_CONVERSATION_LIMIT:
@@ -167,16 +175,31 @@ function getImage(variant: CTAVariant): ReactNode {
     case CTAVariant.DONATE_GENERIC:
       return <StyledCTAImage src="images/cta/donate.webp" />;
 
+    case CTAVariant.DONATE_APPEAL:
+      return <StyledCTAImage src="images/cta/donate-appeal.webp" />;
+
     default:
       assertUnreachable(variant, 'getImage');
       throw new Error('unreachable');
   }
 }
 
+const StyledDonateAppealTitleContainer = styled(Localizer)`
+  text-align: center;
+`;
+
+function DonateAppealTitle() {
+  return <StyledDonateAppealTitleContainer token="donateSessionAppealTitle" />;
+}
+
 function getTitle(variant: CTAVariantExcludingProCTAs) {
   switch (variant) {
     case CTAVariant.DONATE_GENERIC:
       return <Localizer token="donateSessionHelp" />;
+
+    case CTAVariant.DONATE_APPEAL:
+      return <DonateAppealTitle />;
+
     default:
       assertUnreachable(variant, 'CtaTitle');
       throw new Error('unreachable');
@@ -197,6 +220,9 @@ function getDescription(variant: CTAVariantExcludingProCTAs) {
     case CTAVariant.DONATE_GENERIC:
       return <Localizer token="donateSessionDescription" />;
 
+    case CTAVariant.DONATE_APPEAL:
+      return <Localizer token="donateSessionAppealDescription" />;
+
     default:
       assertUnreachable(variant, 'CtaTitle');
       throw new Error('unreachable');
@@ -240,8 +266,15 @@ function Buttons({
 }) {
   const dispatch = getAppDispatch();
 
+  const hasActionButton = isVariantWithActionButton(variant);
+  const hasCloseButton = isVariantWithCloseButton(variant);
+
+  const hasTwoButtons = hasActionButton && hasCloseButton;
+  const width = hasTwoButtons ? proButtonProps.style.width : '50%';
+  const baseStyle = useMemo(() => ({ ...proButtonProps.style, width }), [width]);
+
   const actionButton = useMemo(() => {
-    if (!isVariantWithActionButton(variant)) {
+    if (!hasActionButton) {
       return null;
     }
 
@@ -250,7 +283,7 @@ function Buttons({
         <SessionButtonShiny
           {...proButtonProps}
           shinyContainerStyle={{
-            width: '100%',
+            width: baseStyle.width,
           }}
           onClick={() => {
             void registerCtaInteraction(variant, CTAInteraction.ACTION);
@@ -264,6 +297,25 @@ function Buttons({
       );
     }
 
+    if (variant === CTAVariant.DONATE_APPEAL) {
+      return (
+        <SessionButtonShiny
+          {...proButtonProps}
+          shinyContainerStyle={{
+            width: baseStyle.width,
+          }}
+          onClick={() => {
+            void registerCtaInteraction(variant, CTAInteraction.ACTION);
+            openUrlNoDialog(APP_URL.DONATE);
+            onClose();
+          }}
+          dataTestId="cta-confirm-button"
+        >
+          <Localizer token="donateSessionAppealReadMore" />
+        </SessionButtonShiny>
+      );
+    }
+
     let settingsModalProps: UserSettingsModalState = {
       userSettingsPage: 'pro',
       hideBackButton: true,
@@ -289,6 +341,7 @@ function Buttons({
     return (
       <SessionButtonShiny
         {...proButtonProps}
+        style={baseStyle}
         shinyContainerStyle={{
           width: '100%',
         }}
@@ -305,18 +358,23 @@ function Buttons({
     );
   }, [
     variant,
+    hasActionButton,
+    baseStyle,
     dispatch,
     onClose,
     actionButtonNextModalAfterCloseCallback,
     afterActionButtonCallback,
   ]);
 
-  const closeButtonToken: MergedLocalizerTokens = useMemo(() => {
+  const closeButtonToken: MergedLocalizerTokens | null = useMemo(() => {
+    if (!hasCloseButton) {
+      return null;
+    }
     if (variant === CTAVariant.DONATE_GENERIC) {
       return 'maybeLater';
     }
     return actionButton && variant !== CTAVariant.PRO_EXPIRING_SOON ? 'cancel' : 'close';
-  }, [variant, actionButton]);
+  }, [variant, hasCloseButton, actionButton]);
 
   return (
     <ModalActionsContainer
@@ -326,23 +384,25 @@ function Buttons({
         display: 'grid',
         alignItems: 'center',
         justifyItems: 'center',
-        gridTemplateColumns: actionButton ? '1fr 1fr' : '1fr',
+        gridTemplateColumns: hasTwoButtons ? '1fr 1fr' : '1fr',
         columnGap: 'var(--margins-sm)',
         paddingInline: 'var(--margins-md)',
         marginBottom: 'var(--margins-md)',
         height: 'unset',
       }}
     >
       {actionButton}
-      <SessionButton
-        {...proButtonProps}
-        buttonColor={SessionButtonColor.Tertiary}
-        onClick={onClose}
-        dataTestId="cta-cancel-button"
-        style={!actionButton ? { ...proButtonProps.style, width: '50%' } : proButtonProps.style}
-      >
-        <Localizer token={closeButtonToken} />
-      </SessionButton>
+      {closeButtonToken ? (
+        <SessionButton
+          {...proButtonProps}
+          style={baseStyle}
+          buttonColor={SessionButtonColor.Tertiary}
+          onClick={onClose}
+          dataTestId="cta-cancel-button"
+        >
+          <Localizer token={closeButtonToken} />
+        </SessionButton>
+      ) : null}
     </ModalActionsContainer>
   );
 }
@@ -365,10 +425,14 @@ export function SessionCTA(props: SessionCTAState) {
     return null;
   }
 
+  const clickOutsideDeactivates = isVariantWhichClosesOnOutsideClick(variant);
+
   return (
     <SessionWrapperModal
       modalId="sessionProInfoModal"
       onClose={onClose}
+      clickOutsideDeactivates={clickOutsideDeactivates}
+      showFloatingCloseButton={!clickOutsideDeactivates}
       shouldOverflow={true}
       $contentMinWidth={WrapperModalWidth.normal}
       $contentMaxWidth={WrapperModalWidth.normal}
@@ -461,14 +525,15 @@ export async function handleTriggeredCTAs(dispatch: Dispatch<any>, fromAppStart:
     const dbCreationTimestampMs = await Data.getDBCreationTimestampMs();
     if (dbCreationTimestampMs && dbCreationTimestampMs + 7 * DURATION.DAYS < Date.now()) {
       const donateUrlInteractions = getUrlInteractionsForUrl(APP_URL.DONATE);
-      if (
-        !donateUrlInteractions.includes(URLInteraction.COPY) &&
-        !donateUrlInteractions.includes(URLInteraction.OPEN) &&
-        !donateCTAShown
-      ) {
-        const donateCtaInteractions = getCtaInteractionsForCta(CTAVariant.DONATE_GENERIC);
+      const interactedWithUrl =
+        donateUrlInteractions.includes(URLInteraction.COPY) ||
+        donateUrlInteractions.includes(URLInteraction.OPEN);
+
+      const donateCtaInteractions = getCtaInteractionsForCta(CTAVariant.DONATE_APPEAL);
+      // NOTE: if the appeal cta has never been shown we need to show it regardless of url interaction
+      if ((!interactedWithUrl || !donateCtaInteractions?.open) && !donateCTAShown) {
         if (!donateCtaInteractions?.open || donateCtaInteractions.open < 4) {
-          dispatch(updateSessionCTA({ variant: CTAVariant.DONATE_GENERIC }));
+          dispatch(updateSessionCTA({ variant: CTAVariant.DONATE_APPEAL }));
           donateCTAShown = true;
         }
       }

ts/components/dialog/cta/types.ts

@@ -20,6 +20,7 @@ export enum CTAVariant {
 
   // -- NOTE: -- Other CTAs --
   DONATE_GENERIC = 100,
+  DONATE_APPEAL = 101,
 }
 
 const ctaVariants = Object.values(CTAVariant);

ts/node/power_saver_inhibitor.ts

@@ -8,7 +8,8 @@ let electronBlockerId: number | null = null;
 
 function preventAppSuspensionElectron() {
   if (electronBlockerId) {
-    throw new Error('Electron blocker already running');
+    // if the power save blocker is already running, do not attempt to lock it again.
+    return;
   }
   electronBlockerId = powerSaveBlocker.start('prevent-app-suspension');
 }
@@ -41,7 +42,7 @@ export function startAppSuspensionBlocker(): void {
   );
 
   proc.on('error', () => {
-    // systemd-inhibit not available — fall back to Electron (Flatpak sandbox etc.)
+    // systemd-inhibit not available - fall back to Electron (Flatpak sandbox etc.)
     preventAppSuspensionElectron();
   });