@ant-design/icons#NotificationOutlined TypeScript Examples

ROLES: RadioSelectType[] = [
    {
        key: 'engineer',
        label: 'Engineer',
        icon: <CodeOutlined />,
    },
    {
        key: 'product',
        label: 'Product Manager',
        icon: <RocketOutlined />,
    },
    {
        key: 'management',
        label: 'Management',
        icon: <ClusterOutlined />,
    },

    {
        key: 'marketing',
        label: 'Marketing',
        icon: <NotificationOutlined />,
    },
    {
        key: 'sales',
        label: 'Sales',
        icon: <DollarOutlined />,
    },
    {
        key: 'cx',
        label: 'Customer success',
        icon: <SmileOutlined />,
    },
    {
        key: 'ops',
        label: 'Operations',
        icon: <ToolOutlined />,
    },
    {
        key: 'other',
        label: 'Other',
        icon: <BlockOutlined />,
    },
]

IconSymbol: FC = () => {
  return (
    <Row>
      {/*<CaretUpOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
      {/*/>*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
      {/*/>*/}
      {/*<StepBackwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      {/*<StepForwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      <StepForwardOutlined />
      <ShrinkOutlined />
      <ArrowsAltOutlined />
      <DownOutlined />
      <UpOutlined />
      <LeftOutlined />
      <RightOutlined />
      <CaretUpOutlined />
      <CaretDownOutlined />
      <CaretLeftOutlined />
      <CaretRightOutlined />
      <VerticalAlignTopOutlined />
      <RollbackOutlined />
      <FastBackwardOutlined />
      <FastForwardOutlined />
      <DoubleRightOutlined />
      <DoubleLeftOutlined />
      <VerticalLeftOutlined />
      <VerticalRightOutlined />
      <VerticalAlignMiddleOutlined />
      <VerticalAlignBottomOutlined />
      <ForwardOutlined />
      <BackwardOutlined />
      <EnterOutlined />
      <RetweetOutlined />
      <SwapOutlined />
      <SwapLeftOutlined />
      <SwapRightOutlined />
      <ArrowUpOutlined />
      <ArrowDownOutlined />
      <ArrowLeftOutlined />
      <ArrowRightOutlined />
      <LoginOutlined />
      <LogoutOutlined />
      <MenuFoldOutlined />
      <MenuUnfoldOutlined />
      <BorderBottomOutlined />
      <BorderHorizontalOutlined />
      <BorderInnerOutlined />
      <BorderOuterOutlined />
      <BorderLeftOutlined />
      <BorderRightOutlined />
      <BorderTopOutlined />
      <BorderVerticleOutlined />
      <PicCenterOutlined />
      <PicLeftOutlined />
      <PicRightOutlined />
      <RadiusBottomleftOutlined />
      <RadiusBottomrightOutlined />
      <RadiusUpleftOutlined />
      <RadiusUprightOutlined />
      <FullscreenOutlined />
      <FullscreenExitOutlined />
      <QuestionOutlined />
      <PauseOutlined />
      <MinusOutlined />
      <PauseCircleOutlined />
      <InfoOutlined />
      <CloseOutlined />
      <ExclamationOutlined />
      <CheckOutlined />
      <WarningOutlined />
      <IssuesCloseOutlined />
      <StopOutlined />
      <EditOutlined />
      <CopyOutlined />
      <ScissorOutlined />
      <DeleteOutlined />
      <SnippetsOutlined />
      <DiffOutlined />
      <HighlightOutlined />
      <AlignCenterOutlined />
      <AlignLeftOutlined />
      <AlignRightOutlined />
      <BgColorsOutlined />
      <BoldOutlined />
      <ItalicOutlined />
      <UnderlineOutlined />
      <StrikethroughOutlined />
      <RedoOutlined />
      <UndoOutlined />
      <ZoomInOutlined />
      <ZoomOutOutlined />
      <FontColorsOutlined />
      <FontSizeOutlined />
      <LineHeightOutlined />
      <SortAscendingOutlined />
      <SortDescendingOutlined />
      <DragOutlined />
      <OrderedListOutlined />
      <UnorderedListOutlined />
      <RadiusSettingOutlined />
      <ColumnWidthOutlined />
      <ColumnHeightOutlined />
      <AreaChartOutlined />
      <PieChartOutlined />
      <BarChartOutlined />
      <DotChartOutlined />
      <LineChartOutlined />
      <RadarChartOutlined />
      <HeatMapOutlined />
      <FallOutlined />
      <RiseOutlined />
      <StockOutlined />
      <BoxPlotOutlined />
      <FundOutlined />
      <SlidersOutlined />
      <AndroidOutlined />
      <AppleOutlined />
      <WindowsOutlined />
      <IeOutlined />
      <ChromeOutlined />
      <GithubOutlined />
      <AliwangwangOutlined />
      <DingdingOutlined />
      <WeiboSquareOutlined />
      <WeiboCircleOutlined />
      <TaobaoCircleOutlined />
      <Html5Outlined />
      <WeiboOutlined />
      <TwitterOutlined />
      <WechatOutlined />
      <AlipayCircleOutlined />
      <TaobaoOutlined />
      <SkypeOutlined />
      <FacebookOutlined />
      <CodepenOutlined />
      <CodeSandboxOutlined />
      <AmazonOutlined />
      <GoogleOutlined />
      <AlipayOutlined />
      <AntDesignOutlined />
      <AntCloudOutlined />
      <ZhihuOutlined />
      <SlackOutlined />
      <SlackSquareOutlined />
      <BehanceSquareOutlined />
      <DribbbleOutlined />
      <DribbbleSquareOutlined />
      <InstagramOutlined />
      <YuqueOutlined />
      <AlibabaOutlined />
      <YahooOutlined />
      <RedditOutlined />
      <SketchOutlined />
      <AccountBookOutlined />
      <AlertOutlined />
      <ApartmentOutlined />
      <ApiOutlined />
      <QqOutlined />
      <MediumWorkmarkOutlined />
      <GitlabOutlined />
      <MediumOutlined />
      <GooglePlusOutlined />
      <AppstoreAddOutlined />
      <AppstoreOutlined />
      <AudioOutlined />
      <AudioMutedOutlined />
      <AuditOutlined />
      <BankOutlined />
      <BarcodeOutlined />
      <BarsOutlined />
      <BellOutlined />
      <BlockOutlined />
      <BookOutlined />
      <BorderOutlined />
      <BranchesOutlined />
      <BuildOutlined />
      <BulbOutlined />
      <CalculatorOutlined />
      <CalendarOutlined />
      <CameraOutlined />
      <CarOutlined />
      <CarryOutOutlined />
      <CiCircleOutlined />
      <CiOutlined />
      <CloudOutlined />
      <ClearOutlined />
      <ClusterOutlined />
      <CodeOutlined />
      <CoffeeOutlined />
      <CompassOutlined />
      <CompressOutlined />
      <ContactsOutlined />
      <ContainerOutlined />
      <ControlOutlined />
      <CopyrightCircleOutlined />
      <CopyrightOutlined />
      <CreditCardOutlined />
      <CrownOutlined />
      <CustomerServiceOutlined />
      <DashboardOutlined />
      <DatabaseOutlined />
      <DeleteColumnOutlined />
      <DeleteRowOutlined />
      <DisconnectOutlined />
      <DislikeOutlined />
      <DollarCircleOutlined />
      <DollarOutlined />
      <DownloadOutlined />
      <EllipsisOutlined />
      <EnvironmentOutlined />
      <EuroCircleOutlined />
      <EuroOutlined />
      <ExceptionOutlined />
      <ExpandAltOutlined />
      <ExpandOutlined />
      <ExperimentOutlined />
      <ExportOutlined />
      <EyeOutlined />
      <FieldBinaryOutlined />
      <FieldNumberOutlined />
      <FieldStringOutlined />
      <DesktopOutlined />
      <DingtalkOutlined />
      <FileAddOutlined />
      <FileDoneOutlined />
      <FileExcelOutlined />
      <FileExclamationOutlined />
      <FileOutlined />
      <FileImageOutlined />
      <FileJpgOutlined />
      <FileMarkdownOutlined />
      <FilePdfOutlined />
      <FilePptOutlined />
      <FileProtectOutlined />
      <FileSearchOutlined />
      <FileSyncOutlined />
      <FileTextOutlined />
      <FileUnknownOutlined />
      <FileWordOutlined />
      <FilterOutlined />
      <FireOutlined />
      <FlagOutlined />
      <FolderAddOutlined />
      <FolderOutlined />
      <FolderOpenOutlined />
      <ForkOutlined />
      <FormatPainterOutlined />
      <FrownOutlined />
      <FunctionOutlined />
      <FunnelPlotOutlined />
      <GatewayOutlined />
      <GifOutlined />
      <GiftOutlined />
      <GlobalOutlined />
      <GoldOutlined />
      <GroupOutlined />
      <HddOutlined />
      <HeartOutlined />
      <HistoryOutlined />
      <HomeOutlined />
      <HourglassOutlined />
      <IdcardOutlined />
      <ImportOutlined />
      <InboxOutlined />
      <InsertRowAboveOutlined />
      <InsertRowBelowOutlined />
      <InsertRowLeftOutlined />
      <InsertRowRightOutlined />
      <InsuranceOutlined />
      <InteractionOutlined />
      <KeyOutlined />
      <LaptopOutlined />
      <LayoutOutlined />
      <LikeOutlined />
      <LineOutlined />
      <LinkOutlined />
      <Loading3QuartersOutlined />
      <LoadingOutlined />
      <LockOutlined />
      <MailOutlined />
      <ManOutlined />
      <MedicineBoxOutlined />
      <MehOutlined />
      <MenuOutlined />
      <MergeCellsOutlined />
      <MessageOutlined />
      <MobileOutlined />
      <MoneyCollectOutlined />
      <MonitorOutlined />
      <MoreOutlined />
      <NodeCollapseOutlined />
      <NodeExpandOutlined />
      <NodeIndexOutlined />
      <NotificationOutlined />
      <NumberOutlined />
      <PaperClipOutlined />
      <PartitionOutlined />
      <PayCircleOutlined />
      <PercentageOutlined />
      <PhoneOutlined />
      <PictureOutlined />
      <PoundCircleOutlined />
      <PoundOutlined />
      <PoweroffOutlined />
      <PrinterOutlined />
      <ProfileOutlined />
      <ProjectOutlined />
      <PropertySafetyOutlined />
      <PullRequestOutlined />
      <PushpinOutlined />
      <QrcodeOutlined />
      <ReadOutlined />
      <ReconciliationOutlined />
      <RedEnvelopeOutlined />
      <ReloadOutlined />
      <RestOutlined />
      <RobotOutlined />
      <RocketOutlined />
      <SafetyCertificateOutlined />
      <SafetyOutlined />
      <ScanOutlined />
      <ScheduleOutlined />
      <SearchOutlined />
      <SecurityScanOutlined />
      <SelectOutlined />
      <SendOutlined />
      <SettingOutlined />
      <ShakeOutlined />
      <ShareAltOutlined />
      <ShopOutlined />
      <ShoppingCartOutlined />
      <ShoppingOutlined />
      <SisternodeOutlined />
      <SkinOutlined />
      <SmileOutlined />
      <SolutionOutlined />
      <SoundOutlined />
      <SplitCellsOutlined />
      <StarOutlined />
      <SubnodeOutlined />
      <SyncOutlined />
      <TableOutlined />
      <TabletOutlined />
      <TagOutlined />
      <TagsOutlined />
      <TeamOutlined />
      <ThunderboltOutlined />
      <ToTopOutlined />
      <ToolOutlined />
      <TrademarkCircleOutlined />
      <TrademarkOutlined />
      <TransactionOutlined />
      <TrophyOutlined />
      <UngroupOutlined />
      <UnlockOutlined />
      <UploadOutlined />
      <UsbOutlined />
      <UserAddOutlined />
      <UserDeleteOutlined />
      <UserOutlined />
      <UserSwitchOutlined />
      <UsergroupAddOutlined />
      <UsergroupDeleteOutlined />
      <VideoCameraOutlined />
      <WalletOutlined />
      <WifiOutlined />
      <BorderlessTableOutlined />
      <WomanOutlined />
      <BehanceOutlined />
      <DropboxOutlined />
      <DeploymentUnitOutlined />
      <UpCircleOutlined />
      <DownCircleOutlined />
      <LeftCircleOutlined />
      <RightCircleOutlined />
      <UpSquareOutlined />
      <DownSquareOutlined />
      <LeftSquareOutlined />
      <RightSquareOutlined />
      <PlayCircleOutlined />
      <QuestionCircleOutlined />
      <PlusCircleOutlined />
      <PlusSquareOutlined />
      <MinusSquareOutlined />
      <MinusCircleOutlined />
      <InfoCircleOutlined />
      <ExclamationCircleOutlined />
      <CloseCircleOutlined />
      <CloseSquareOutlined />
      <CheckCircleOutlined />
      <CheckSquareOutlined />
      <ClockCircleOutlined />
      <FormOutlined />
      <DashOutlined />
      <SmallDashOutlined />
      <YoutubeOutlined />
      <CodepenCircleOutlined />
      <AliyunOutlined />
      <PlusOutlined />
      <LinkedinOutlined />
      <AimOutlined />
      <BugOutlined />
      <CloudDownloadOutlined />
      <CloudServerOutlined />
      <CloudSyncOutlined />
      <CloudUploadOutlined />
      <CommentOutlined />
      <ConsoleSqlOutlined />
      <EyeInvisibleOutlined />
      <FileGifOutlined />
      <DeliveredProcedureOutlined />
      <FieldTimeOutlined />
      <FileZipOutlined />
      <FolderViewOutlined />
      <FundProjectionScreenOutlined />
      <FundViewOutlined />
      <MacCommandOutlined />
      <PlaySquareOutlined />
      <OneToOneOutlined />
      <RotateLeftOutlined />
      <RotateRightOutlined />
      <SaveOutlined />
      <SwitcherOutlined />
      <TranslationOutlined />
      <VerifiedOutlined />
      <VideoCameraAddOutlined />
      <WhatsAppOutlined />

      {/*</Col>*/}
    </Row>
  );
}

CustomerMassMsgList: React.FC = () => {
  const [selectedItems, setSelectedItems] = useState<CustomerMassMsgItem[]>([]);
  const actionRef = useRef<ActionType>();
  const [autoReply, setAutoReply] = useState<WelcomeMsg>();
  const [previewModalVisible, setPreviewModalVisible] = useState<boolean>(false);

  const columns: ProColumns<CustomerMassMsgItem>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      valueType: 'text',
      hideInTable: true,
      hideInSearch: true,
      fixed:'left',
    },
    {
      title: '群发类型',
      dataIndex: 'send_type',
      valueType: 'text',
      hideInSearch: true,
      fixed:'left',
      renderText: (value) => {
        return (
          CustomerMassMsgTypeLabels[value]
        );
      },
    },
    {
      title: '发送时间',
      dataIndex: 'created_at',
      valueType: 'dateRange',
      hideInSearch: true,
      sorter: true,
      width:120,
      render: (dom, item) => {
        return (
          <div
            dangerouslySetInnerHTML={{
              __html: moment(item.created_at).format('YYYY-MM-DD HH:mm').split(' ').join('<br />'),
            }}
          />
        );
      },
    },
    {
      title: '消息内容',
      dataIndex: 'welcome_msg',
      valueType: 'text',
      hideInSearch: true,
      width: 260,
      render: (_, item) => {
        return (
          <>
            <p>{item?.msg?.text}</p>
            {item?.msg?.attachments && item?.msg?.attachments?.length > 0 && (
              <>
                <p style={{
                  color: 'rgb(255,133,0)',
                  fontSize: 13,
                }}> [{item?.msg?.attachments?.length || 0}个附件] </p>
                <a onClick={() => {
                  setAutoReply(item?.msg);
                  setPreviewModalVisible(true);
                }}>查看内容</a>
              </>
            )}
          </>
        );
      },
    },
    {
      title: '已发送员工',
      dataIndex: 'delivered_num',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: '送达客户',
      dataIndex: 'success_num',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: '未发送员工',
      dataIndex: 'undelivered_num',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: '未发送客户',
      dataIndex: 'failed_num',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: '发送状态',
      dataIndex: 'mission_status',
      valueType: 'option',
      hideInSearch: true,
      render: (_, item) => {
        return (
          <>
            {item.mission_status === 1 &&
            <Badge status="processing" text={CustomerMassMsgStatusLabels[item.mission_status]}/>}
            {item.mission_status === 2 &&
            <Badge status="success" text={CustomerMassMsgStatusLabels[item.mission_status]}/>}
            {item.mission_status === 3 &&
            <Badge status="error" text={CustomerMassMsgStatusLabels[item.mission_status]}/>}
            {(item.mission_status === 4 || item.mission_status === 5) &&
            <Badge status="warning" text={CustomerMassMsgStatusLabels[item.mission_status]}/>}
          </>
        );
      },
    },
    {
      title: '操作',
      width: 120,
      valueType: 'option',
      render: (_, item) => [
        <a
          key='notify'
          onClick={() => {
            Modal.confirm({
              title: `发送提醒通知`,
              content: `确认后将会给所有未发送成员发送提醒通知，是否发送？`,
              okText: '确定',
              okType: 'default',
              cancelText: '取消',
              onOk() {
                return HandleRequest({ids: [item.id]}, Notify, () => {
                  actionRef.current?.clearSelected?.();
                  actionRef.current?.reload?.();
                });
              },
            });
          }}
        >
          提醒发送
        </a>,
        item.send_type === 1 ? <></> : <a
          key='edit'
          onClick={() => {
            history.push(`/staff-admin/customer-conversion/customer-mass-msg/edit?id=${item.id}`);
          }}
        >
          修改
        </a>,
        item.mission_status === 1 && item.send_type === 2 ? <a
          key='delete'
          onClick={() => {
            Modal.confirm({
              title: `删除欢迎语`,
              content: `是否确认删除「${item.msg.text}」群发？`,
              okText: '删除',
              okType: 'danger',
              cancelText: '取消',
              onOk() {
                return HandleRequest({ids: [item.id]}, Delete, () => {
                  actionRef.current?.clearSelected?.();
                  actionRef.current?.reload?.();
                });
              },
            });
          }}
        >
          删除
        </a> : <></>,
      ],
    },
  ];


  return (
    <PageContainer
      fixedHeader
      extra={[
        <Button
          key='create'
          type='primary'
          icon={<PlusOutlined style={{fontSize: 16, verticalAlign: '-3px'}}/>}
          onClick={() => {
            history.push('/staff-admin/customer-conversion/customer-mass-msg/create');
          }}
        >
          添加群发
        </Button>,
      ]}
    >

      <ProTable<CustomerMassMsgItem>
        actionRef={actionRef}
        className={'table'}
        columns={columns}
        scroll={{x: 'max-content'}}
        rowKey='id'
        pagination={{
          pageSizeOptions: ['5', '10', '20', '50', '100'],
          pageSize: 5,
        }}
        toolBarRender={false}
        bordered={false}
        tableAlertRender={false}
        request={async (params, sort, filter) => {
          return ProTableRequestAdapter(params, sort, filter, Query);
        }}
        dateFormatter='string'
        search={false}
        rowSelection={{
          onChange: (_, items) => {
            setSelectedItems(items);
          },
        }}
      />

      {selectedItems?.length > 0 && (
        // 底部选中条目菜单栏
        <FooterToolbar>
          <span>
            已选择 <a style={{fontWeight: 600}}>{selectedItems.length}</a> 项 &nbsp;&nbsp;
            <span></span>
          </span>
          <Divider type='vertical'/>
          <Button
            type='link'
            onClick={() => {
              actionRef.current?.clearSelected?.();
            }}
          >
            取消选择
          </Button>
          <Button
            type={'dashed'}
            icon={<NotificationOutlined/>}
            onClick={async () => {
              Modal.confirm({
                title: `发送提醒通知`,
                content: `确认后将会给所有未发送成员发送提醒通知，是否发送？`,
                okText: '确定',
                okType: 'default',
                cancelText: '取消',
                onOk() {
                  return HandleRequest(
                    {ids: selectedItems.map((item) => item.id)},
                    Notify,
                    () => {
                      actionRef.current?.clearSelected?.();
                      actionRef.current?.reload?.();
                    },
                  );
                },
              });
            }}
          >
            批量提醒发送
          </Button>
        </FooterToolbar>
      )}

      <AutoReplyPreviewModal visible={previewModalVisible} setVisible={setPreviewModalVisible} autoReply={autoReply}/>

    </PageContainer>
  );
}

Header = ({
  handleThemeSelection,
  theme,
  host,
  handleAboutPopupVisibility,
  isResetPopupDialogVisible,
  isNotificationsDialogVisible,
  handleResetPopupDialogVisibility,
  handleNotificationsDialogVisibility,
  isCustomHostDialogVisible,
  handleCustomHostDialogVisibility,
}: HeaderP) => {
  const [isSelectorVisible, setIsSelectorVisible] = useState(false);

  const handleThemeSwitchesVisibility = () => {
    setIsSelectorVisible(!isSelectorVisible);
  };

  const setTheme = (t: ThemeName) => () => handleThemeSelection(t);

  const isThemeSelected = (t: ThemeName) => ThemeName.eq.equals(t, theme);
  const themeButtonStyle = (t: ThemeName) =>
    `${isSelectorVisible && "__selector_visible"} ${isThemeSelected(t) && "__selected"} ${
      !isSelectorVisible && "__without_bg"
    }`;

  const ThemeButton = ({ theme: t }: { theme: ThemeName }) => (
    <button type="button" className={themeButtonStyle(t)} onClick={setTheme(t)}>
      {themeIcon(t)}
      {showThemeName.show(t)}
    </button>
  );

  return (
    <div id="header" className="header">
      <div>interactsh</div>
      <button type="button" onClick={handleThemeSwitchesVisibility}>
        <ThemeButton theme="dark" />
        <ThemeButton theme="synth" />
        <ThemeButton theme="blue" />
      </button>
      <div className="links">
        <button
          type="button"
          title="Switch host"
          className="custom_host_active"
          onClick={handleCustomHostDialogVisibility}
        >
          <SwitchIcon />
          {host}
        </button>
        <button type="button" title="Reset data" onClick={handleResetPopupDialogVisibility}>
          <DeleteIcon />
          Reset
        </button>
        <button type="button" title="Notifications" onClick={handleNotificationsDialogVisibility}>
          <NotificationOutlined style={{marginRight: '10px'}} />
          Notifications
        </button>
        <button type="button" title="Export" onClick={handleDataExport}>
          <DownloadIcon />
          Export
        </button>
        <div className="vertical_bar" />
        <a href="/#/terms">Terms</a>
        <button type="button" onClick={handleAboutPopupVisibility}>
          About
        </button>
      </div>
      {isCustomHostDialogVisible && (
        <CustomHost handleCloseDialog={handleCustomHostDialogVisibility} />
      )}
      {isResetPopupDialogVisible && (
        <ResetPopup handleCloseDialog={handleResetPopupDialogVisibility} />
      )}
      {isNotificationsDialogVisible && (
        <NotificationsPopup handleCloseDialog={handleNotificationsDialogVisibility} />
      )}
    </div>
  );
}

export function QueueInfoColumn({
  queueId,
  isStaff,
  buttons,
}: QueueInfoColumnProps): ReactElement {
  const { queue, mutateQueue } = useQueue(queueId);

  const disableQueue = async () => {
    await API.queues.disable(queueId);
    await mutateQueue();
    message.success("Successfully disabled queue: " + queue.room);
    await Router.push("/");
  };

  const clearQueue = async () => {
    await API.queues.clean(queueId);
    await mutateQueue();
    message.success("Successfully cleaned queue: " + queue.room);
  };

  const confirmDisable = () => {
    confirm({
      title: `Please Confirm!`,
      icon: <ExclamationCircleOutlined />,
      style: { whiteSpace: "pre-wrap" },
      content: `Please confirm that you want to disable the queue: ${queue.room}.\n
      This queue will no longer appear in the app, and any students currently in the queue will be removed.`,
      onOk() {
        disableQueue();
      },
    });
  };

  return (
    <InfoColumnContainer>
      <QueueInfo>
        <QueueRoomGroup>
          <QueueTitle data-cy="room-title">
            {queue?.room} {queue?.isDisabled && <b>(disabled)</b>}
          </QueueTitle>
          {!queue.allowQuestions && (
            <Tooltip title="This queue is no longer accepting questions">
              <StopOutlined
                data-cy="stopQuestions"
                style={{ color: "red", fontSize: "24px", marginLeft: "8px" }}
              />
            </Tooltip>
          )}
        </QueueRoomGroup>

        {queue?.isProfessorQueue && (
          <QueuePropertyRow>
            <Tag color="blue">Professor Queue</Tag>
          </QueuePropertyRow>
        )}
      </QueueInfo>
      {queue?.notes && (
        <QueuePropertyRow>
          <NotificationOutlined />
          <QueueText>
            <Linkify
              componentDecorator={(decoratedHref, decoratedText, key) => (
                <a
                  target="_blank"
                  rel="noopener noreferrer"
                  href={decoratedHref}
                  key={key}
                >
                  {decoratedText}
                </a>
              )}
            >
              <QueuePropertyText>{queue.notes}</QueuePropertyText>
            </Linkify>
          </QueueText>
        </QueuePropertyRow>
      )}
      <QueueUpToDateInfo queueId={queueId} />
      {buttons}
      <StaffH2>Staff</StaffH2>
      <TAStatuses queueId={queueId} />
      {isStaff && (
        <QueueManagementBox>
          <Popconfirm
            title={
              "Are you sure you want to clear all students from the queue?"
            }
            okText="Yes"
            cancelText="No"
            placement="top"
            arrowPointAtCenter={true}
            onConfirm={clearQueue}
          >
            <ClearQueueButton>Clear Queue</ClearQueueButton>
          </Popconfirm>
          <DisableQueueButton
            onClick={confirmDisable}
            data-cy="queue-disable-button"
            disabled={queue?.isDisabled}
          >
            {queue?.isDisabled ? `Queue deleted` : `Delete Queue`}
          </DisableQueueButton>
        </QueueManagementBox>
      )}
    </InfoColumnContainer>
  );
}

QueueCard = ({
  queue,
  isTA,
  updateQueueNotes,
}: QueueCard): ReactElement => {
  const [editingNotes, setEditingNotes] = useState(false);
  const [updatedNotes, setUpdatedNotes] = useState(queue.notes);
  const router = useRouter();
  const { cid } = router.query;

  const staffList = queue.staffList;

  const handleUpdate = () => {
    setEditingNotes(false);
    updateQueueNotes(queue, updatedNotes);
  };

  return (
    <PaddedCard
      headStyle={{
        background: queue.isOpen ? "#25426C" : "#25426cbf",
        color: "#FFFFFF",
        borderRadius: "6px 6px 0 0",
      }}
      className={"open-queue-card"}
      title={<span>{queue.room} </span>}
      extra={
        <span>
          <QueueSizeSpan>{queue.queueSize}</QueueSizeSpan> in queue
        </span>
      }
    >
      <QueueInfoRow>
        <HeaderDiv>
          <QuestionNumberSpan>{queue.staffList.length}</QuestionNumberSpan>{" "}
          staff checked in
        </HeaderDiv>
        <RightQueueInfoRow>
          <Space direction="vertical" align="end" size="middle">
            <QueueInfoTags>
              {queue?.isProfessorQueue && (
                <Tag color="blue" style={{ margin: 0 }}>
                  Professor Queue
                </Tag>
              )}
              {queue.isOpen && !queue.allowQuestions && (
                <Tooltip title="This queue is no longer accepting questions">
                  <Tag
                    icon={<StopOutlined />}
                    color="error"
                    style={{ margin: "0px 0px 0px 8px" }}
                  >
                    Not Accepting Questions
                  </Tag>
                </Tooltip>
              )}
            </QueueInfoTags>
            <Link
              href="/course/[cid]/queue/[qid]"
              as={`/course/${cid}/queue/${queue.id}`}
            >
              <OpenQueueButton
                style={{}}
                size="large"
                data-cy="open-queue-button"
              >
                Open Queue
              </OpenQueueButton>
            </Link>
          </Space>
        </RightQueueInfoRow>
      </QueueInfoRow>
      {
        staffList.length > 1 && (
          <HeaderText>checked-in staff</HeaderText>
        ) /*todo: add better text*/
      }

      <Row justify="space-between" align="middle">
        <div>
          {staffList.map((staffMember) => (
            <Tooltip key={staffMember.id} title={staffMember.name}>
              <StyledKOHAvatar
                size={96}
                photoURL={staffMember.photoURL}
                name={staffMember.name}
              />
            </Tooltip>
          ))}
        </div>
        <QueueCardDivider />
        {editingNotes ? (
          <NotesDiv>
            <NotesInput
              defaultValue={queue.notes}
              value={updatedNotes}
              onChange={(e) => setUpdatedNotes(e.target.value as any)}
            />
          </NotesDiv>
        ) : queue.notes ? (
          <div>
            <Linkify
              componentDecorator={(decoratedHref, decoratedText, key) => (
                <a
                  target="_blank"
                  rel="noopener noreferrer"
                  href={decoratedHref}
                  key={key}
                >
                  {decoratedText}
                </a>
              )}
            >
              <Notes>
                <NotificationOutlined /> <i>{queue.notes}</i>
              </Notes>
            </Linkify>
          </div>
        ) : (
          <div>
            <i> no notes provided</i>
          </div>
        )}
        <RightQueueNotesRow>
          {editingNotes && (
            <SaveButton onClick={handleUpdate} size="large">
              Save Changes
            </SaveButton>
          )}
          {!editingNotes && (
            <QueueCardButtonRow>
              {isTA && (
                <EditNotesButton
                  size="large"
                  onClick={() => {
                    setEditingNotes(true);
                  }}
                >
                  Edit Notes
                </EditNotesButton>
              )}
            </QueueCardButtonRow>
          )}
        </RightQueueNotesRow>
      </Row>
    </PaddedCard>
  );
}