Call Tile - Support declined call tile (#33371)

* Extract shared types and css * Add CallDeclinedTileView * Add storybook and view tests * Support declined event in view model * Render declined view from tile factory * Update snapshots * Add 10px padding to top and bottom * Distinguish between call declined by us and other users * Support `isCallDeclinedByUs` in view model * Update tests * Add better comments * Rename getInitial to generateSnapshot
2026-05-14 19:42:05 +05:30
parent 92aa3202e3
commit 435acf1ba7
20 changed files with 608 additions and 191 deletions
@@ -203,6 +203,10 @@
    },
    "timeline": {
        "call_tile": {
+            "declined": {
+                "call_declined": "Call declined",
+                "call_declined_by_us": "You declined a call"
+            },
            "video_call_title": "Video call",
            "voice_call_title": "Voice call"
        },
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { CallType, type CallTileViewSnapshot } from "../common/types";
+import { CallDeclinedTileView } from "./CallDeclinedTileView";
+
+const CallDeclinedTileViewWrapperImpl = ({ ...rest }: CallTileViewSnapshot): React.ReactNode => {
+    const vm = useMockedViewModel(rest, {});
+    return <CallDeclinedTileView vm={vm} />;
+};
+
+const CallDeclinedTileViewWrapper = withViewDocs(CallDeclinedTileViewWrapperImpl, CallDeclinedTileView);
+
+const meta = {
+    title: "Timeline/Timeline Event/Call/CallDeclinedTileView",
+    component: CallDeclinedTileViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            options: [CallType.Video, CallType.Voice],
+            control: { type: "select" },
+        },
+        timestamp: {
+            control: { type: "text" },
+        },
+    },
+    args: {
+        type: CallType.Voice,
+        timestamp: "12:36",
+        isCallDeclinedByUs: false,
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=11217-3914&t=jv0JnUoKJUW1Ko96-4",
+        },
+    },
+} satisfies Meta<typeof CallDeclinedTileViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const VoiceCall: Story = {
+    args: {
+        type: CallType.Voice,
+    },
+};
+
+export const VideoCall: Story = {
+    args: {
+        type: CallType.Video,
+    },
+};
+
+export const CallDeclinedByUs: Story = {
+    args: {
+        type: CallType.Voice,
+        isCallDeclinedByUs: true,
+    },
+};
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import React from "react";
+import { render } from "@test-utils";
+
+import * as Stories from "./CallDeclinedTileView.stories";
+
+const { VideoCall, VoiceCall, CallDeclinedByUs } = composeStories(Stories);
+
+describe("CallDeclinedTileView", () => {
+    describe("renders the tile", () => {
+        it("voice call", () => {
+            const { container } = render(<VoiceCall />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("video call", () => {
+            const { container } = render(<VideoCall />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("call declined by us", () => {
+            const { container } = render(<CallDeclinedByUs />);
+            expect(container).toMatchSnapshot();
+        });
+    });
+});
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import {
+    VideoCallDeclinedSolidIcon,
+    VoiceCallDeclinedSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import classnames from "classnames";
+
+import { useViewModel, type ViewModel } from "../../../../../core/viewmodel";
+import { Flex } from "../../../../../core/utils/Flex";
+import styles from "../common/CallTileView.module.css";
+import { useI18n } from "../../../../../core/i18n/i18nContext";
+import { type CallTileViewSnapshot, CallType } from "../common/types";
+
+export type CallDeclinedTileViewModel = ViewModel<CallTileViewSnapshot>;
+
+export interface CallDeclinedTileViewProps {
+    vm: CallDeclinedTileViewModel;
+    className?: string;
+}
+
+function getIconForCallType(type: CallType): React.ReactNode {
+    switch (type) {
+        case CallType.Video:
+            return <VideoCallDeclinedSolidIcon className={styles.icon} width={20} height={20} />;
+        case CallType.Voice:
+            return <VoiceCallDeclinedSolidIcon className={styles.icon} width={20} height={20} />;
+    }
+}
+
+/**
+ * View for a timeline tile that indicates that a call was declined.
+ */
+export function CallDeclinedTileView({ vm, className }: CallDeclinedTileViewProps): React.ReactNode {
+    const { translate: _t } = useI18n();
+    const { type, timestamp, isCallDeclinedByUs } = useViewModel(vm);
+    const classNames = classnames(className, styles.container);
+    return (
+        <Flex className={classNames} align="center" gap="var(--cpd-space-2x)">
+            {getIconForCallType(type)}
+            <div className={styles.title}>
+                {isCallDeclinedByUs
+                    ? _t("timeline|call_tile|declined|call_declined_by_us")
+                    : _t("timeline|call_tile|declined|call_declined")}
+            </div>
+            <div className={styles.time}>{timestamp}</div>
+        </Flex>
+    );
+}
@@ -0,0 +1,97 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CallDeclinedTileView > renders the tile > call declined by us 1`] = `
+<div>
+  <div
+    class="Flex-module_flex CallTileView-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="CallTileView-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.623 3.04a1.07 1.07 0 0 1 1.086.929l.542 3.954q.039.27-.038.504a1.1 1.1 0 0 1-.272.427l-1.64 1.64Q7.806 11.5 8.456 12.4c.433.601 1.444 1.697 1.444 1.697.013.012 1.098 1.014 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.194-.194.426-.27a1.1 1.1 0 0 1 .504-.04l3.953.543q.407.058.67.358.26.301.26.728l.04 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.116-6.56q0-.426.329-.756Q3.67 3 4.095 3zM20.25 3q.405 0 .707.3.3.301.3.708t-.3.707l-1.414 1.414 1.414 1.414q.3.3.3.707t-.3.707-.707.3-.707-.3l-1.414-1.414-1.414 1.414q-.3.3-.707.3t-.707-.3T15 8.25q0-.406.3-.707l1.415-1.414L15.3 4.715q-.3-.3-.301-.707 0-.407.3-.707t.71-.301q.405 0 .707.3l1.414 1.415L19.543 3.3q.3-.3.707-.301"
+      />
+    </svg>
+    <div
+      class="CallTileView-module_title"
+    >
+      You declined a call
+    </div>
+    <div
+      class="CallTileView-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CallDeclinedTileView > renders the tile > video call 1`] = `
+<div>
+  <div
+    class="Flex-module_flex CallTileView-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="CallTileView-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4zm10.828 6.828q.3-.3.3-.707 0-.405-.3-.707L11.414 12l1.414-1.414q.3-.3.3-.707t-.3-.707-.707-.301q-.405 0-.707.3L10 10.587 8.586 9.172q-.3-.3-.707-.301-.407 0-.707.3t-.3.708q0 .405.3.707L8.586 12l-1.414 1.414q-.3.3-.3.707t.3.707.707.3q.405 0 .707-.3L10 13.414l1.414 1.414q.3.3.707.3t.707-.3"
+      />
+    </svg>
+    <div
+      class="CallTileView-module_title"
+    >
+      Call declined
+    </div>
+    <div
+      class="CallTileView-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CallDeclinedTileView > renders the tile > voice call 1`] = `
+<div>
+  <div
+    class="Flex-module_flex CallTileView-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="CallTileView-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.623 3.04a1.07 1.07 0 0 1 1.086.929l.542 3.954q.039.27-.038.504a1.1 1.1 0 0 1-.272.427l-1.64 1.64Q7.806 11.5 8.456 12.4c.433.601 1.444 1.697 1.444 1.697.013.012 1.098 1.014 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.194-.194.426-.27a1.1 1.1 0 0 1 .504-.04l3.953.543q.407.058.67.358.26.301.26.728l.04 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.116-6.56q0-.426.329-.756Q3.67 3 4.095 3zM20.25 3q.405 0 .707.3.3.301.3.708t-.3.707l-1.414 1.414 1.414 1.414q.3.3.3.707t-.3.707-.707.3-.707-.3l-1.414-1.414-1.414 1.414q-.3.3-.707.3t-.707-.3T15 8.25q0-.406.3-.707l1.415-1.414L15.3 4.715q-.3-.3-.301-.707 0-.407.3-.707t.71-.301q.405 0 .707.3l1.414 1.415L19.543 3.3q.3-.3.707-.301"
+      />
+    </svg>
+    <div
+      class="CallTileView-module_title"
+    >
+      Call declined
+    </div>
+    <div
+      class="CallTileView-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;
@@ -8,11 +8,12 @@
 import React from "react";

 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CallStartedTileView, type CallStartedTileViewSnapshot, CallType } from "./CallStartedTileView";
+import { CallStartedTileView } from "./CallStartedTileView";
 import { useMockedViewModel } from "../../../../../core/viewmodel";
 import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { CallType, type CallTileViewSnapshot } from "../common/types";

-const CallStartedTileViewWrapperImpl = ({ ...rest }: CallStartedTileViewSnapshot): React.ReactNode => {
+const CallStartedTileViewWrapperImpl = ({ ...rest }: CallTileViewSnapshot): React.ReactNode => {
    const vm = useMockedViewModel(rest, {});
    return <CallStartedTileView vm={vm} />;
 };
@@ -11,35 +11,11 @@ import classnames from "classnames";

 import { useViewModel, type ViewModel } from "../../../../../core/viewmodel";
 import { Flex } from "../../../../../core/utils/Flex";
-import styles from "./CallStartedTileView.module.css";
+import styles from "../common/CallTileView.module.css";
 import { useI18n } from "../../../../../core/i18n/i18nContext";
+import { type CallTileViewSnapshot, CallType } from "../common/types";

-/**
- * Represents whether a call is a voice call or video call.
- */
-export const enum CallType {
-    /**
-     * This is a voice call.
-     */
-    Voice = "voice",
-    /**
-     * This is a video call.
-     */
-    Video = "video",
-}
-
-export type CallStartedTileViewSnapshot = {
-    /**
-     * What type of call this tile needs to render for.
-     */
-    type: CallType;
-    /**
-     * Time when this call was started.
-     */
-    timestamp: string;
-};
-
-export type CallStartedTileViewModel = ViewModel<CallStartedTileViewSnapshot>;
+export type CallStartedTileViewModel = ViewModel<CallTileViewSnapshot>;

 export interface CallStartedTileViewProps {
    vm: CallStartedTileViewModel;
@@ -3,11 +3,11 @@
 exports[`CallStartedTileView > renders the tile > video call 1`] = `
 <div>
  <div
-    class="Flex-module_flex CallStartedTileView-module_container"
+    class="Flex-module_flex CallTileView-module_container"
    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
  >
    <svg
-      class="CallStartedTileView-module_icon"
+      class="CallTileView-module_icon"
      fill="currentColor"
      height="20"
      viewBox="0 0 24 24"
@@ -19,12 +19,12 @@ exports[`CallStartedTileView > renders the tile > video call 1`] = `
      />
    </svg>
    <div
-      class="CallStartedTileView-module_title"
+      class="CallTileView-module_title"
    >
      Video call
    </div>
    <div
-      class="CallStartedTileView-module_time"
+      class="CallTileView-module_time"
    >
      12:36
    </div>
@@ -35,11 +35,11 @@ exports[`CallStartedTileView > renders the tile > video call 1`] = `
 exports[`CallStartedTileView > renders the tile > voice call 1`] = `
 <div>
  <div
-    class="Flex-module_flex CallStartedTileView-module_container"
+    class="Flex-module_flex CallTileView-module_container"
    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
  >
    <svg
-      class="CallStartedTileView-module_icon"
+      class="CallTileView-module_icon"
      fill="currentColor"
      height="20"
      viewBox="0 0 24 24"
@@ -51,12 +51,12 @@ exports[`CallStartedTileView > renders the tile > voice call 1`] = `
      />
    </svg>
    <div
-      class="CallStartedTileView-module_title"
+      class="CallTileView-module_title"
    >
      Voice call
    </div>
    <div
-      class="CallStartedTileView-module_time"
+      class="CallTileView-module_time"
    >
      12:36
    </div>
@@ -13,6 +13,7 @@
    border-radius: var(--cpd-space-2x);
    padding: var(--cpd-space-2x) var(--cpd-space-3x);
    box-sizing: border-box;
+    margin: 10px 0;
 }

 .title {
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+/**
+ * Represents whether a call is a voice call or video call.
+ */
+export const enum CallType {
+    /**
+     * This is a voice call.
+     */
+    Voice = "voice",
+    /**
+     * This is a video call.
+     */
+    Video = "video",
+}
+
+/**
+ * The snapshot that both the call started and call declined tiles expect.
+ */
+export type CallTileViewSnapshot = {
+    /**
+     * What type of call this tile needs to render for.
+     */
+    type: CallType;
+    /**
+     * Time when this call was started.
+     */
+    timestamp: string;
+    /**
+     * Whether this call was declined by our user.
+     * Undefined if not rendering a declined call tile.
+     */
+    isCallDeclinedByUs?: boolean;
+};
@@ -6,3 +6,5 @@
 */

 export * from "./CallStartedTile/CallStartedTileView";
+export * from "./CallDeclinedTile/CallDeclinedTileView";
+export * from "./common/types";