hunk.code_window:   const { extension, hasExtension, validExtension } = checkUrlExtension(url);
     if (hasExtension) {
       if (validExtension) {
         if (!(extension === "txt" || extension === "pdf")) {
           viewer = "office";
           renderer = Renderers.DOCUMENT_VIEWER;
         }
       } else {
         errorMessage = "Current file type is not supported";
         renderer = Renderers.ERROR;
  
hunk.labels: keep keep keep replace replace replace keep keep keep keep
hunk.after_edit:       renderer = Renderers.DOCUMENT_VIEWER;
         switch (extension) {
           case "pdf": {
             viewer = "pdf";
             break;
           }
           case "txt": {
             viewer = "url";
             break;
           }
           default: {
             viewer = "office";
             break;
           }
  
hunk.file_path: app/client/src/widgets/DocumentViewerWidget/component/index.tsx
hunk.type: replace
file: import React, { useState, useEffect } from "react";
  import styled from "styled-components";
  import { connect, useDispatch } from "react-redux";
  import { AppState } from "reducers";
  import AnalyticsUtil from "utils/AnalyticsUtil";
  import Button, { Category, Size } from "components/ads/Button";
  import Text, { TextType } from "components/ads/Text";
  import { getCrudInfoModalData } from "selectors/crudInfoModalSelectors";
  import { setCrudInfoModalData } from "actions/crudInfoModalActions";
  import { Colors } from "constants/Colors";
  
  import Dialog from "components/ads/DialogComponent";
  import { GenerateCRUDSuccessInfoData } from "reducers/uiReducers/crudInfoModalReducer";
  import {
    GEN_CRUD_INFO_DIALOG_SUBTITLE,
    GEN_CRUD_SUCCESS_MESSAGE,
    createMessage,
  } from "constants/messages";
  import { getTypographyByKey } from "constants/DefaultTheme";
  import { getInfoImage, getInfoThumbnail } from "constants/ImagesURL";
  import ProgressiveImage, {
    Container as ProgressiveImageContainer,
  } from "components/ads/ProgressiveImage";
  import SuccessTick from "pages/common/SuccessTick";
  
  type Props = {
    crudInfoModalOpen: boolean;
    generateCRUDSuccessInfo: GenerateCRUDSuccessInfoData | null;
  };
  
  const Heading = styled.div`
    color: ${Colors.CODE_GRAY};
    display: flex;
    justify-content: center;
    ${(props) => getTypographyByKey(props, "h1")}
  `;
  
  const ActionButtonWrapper = styled.div`
    display: flex;
    justify-content: center;
    margin: 30px 0px 0px;
  `;
  
  export const StyledSeparator = styled.div`
    width: 100%;
    background-color: ${(props) => props.theme.colors.modal.separator};
    opacity: 0.6;
    height: 1px;
  `;
  
  const ActionButton = styled(Button)`
    margin-right: 16px;
  `;
  
  const Content = styled.div`
    padding: 16px;
    display: flex;
    flex: 1;
    flex-direction: column;
  `;
  
  const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 700px;
    min-height: 500px;
  
    .info-subtitle {
      padding-top: 5px;
      text-align: center;
    }
  `;
  
  const ImageWrapper = styled.div`
    padding: 50px 10px 10px;
    display: flex;
    flex: 1;
    justify-content: center;
    & ${ProgressiveImageContainer} {
      width: 100%;
      height: 284px;
    }
    .progressive-image--thumb,
    progressive-image--full {
      object-fit: contain;
    }
  
    .progressive-image--thumb {
      filter: blur(20px);
      opacity: 0.3;
      transition: visibility 0ms ease 100ms;
    }
  `;
  
  const SuccessContentWrapper = styled.div`
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  `;
  
  const STEP = {
    SHOW_SUCCESS_GIF: "show_success_gif",
    SHOW_INFO: "show_info",
  };
  
  const DELAY_TIME = 3000;
  
  function InfoContent({
    onClose,
    successImageUrl,
    successMessage,
  }: {
    onClose: () => void;
    successMessage: string;
    successImageUrl: string;
  }) {
    return (
      <>
        <Content>
          <Text
            className="info-subtitle"
            dangerouslySetInnerHTML={{
              __html: successMessage,
            }}
            type={TextType.P1}
          />
          <ImageWrapper>
            <ProgressiveImage
              alt="template information"
              imageSource={successImageUrl}
              thumbnailSource={getInfoThumbnail()}
            />
          </ImageWrapper>
        </Content>
  
        <ActionButtonWrapper>
          <ActionButton
            category={Category.primary}
            onClick={() => {
              onClose();
            }}
            size={Size.medium}
            text="GOT IT"
          />
        </ActionButtonWrapper>
      </>
    );
  }
  
  function GenCRUDSuccessModal(props: Props) {
    const { crudInfoModalOpen, generateCRUDSuccessInfo } = props;
  
    const dispatch = useDispatch();
    const [step, setStep] = useState(STEP.SHOW_SUCCESS_GIF);
  
    const onClose = () => {
      AnalyticsUtil.logEvent("CLOSE_GEN_PAGE_INFO_MODAL");
      dispatch(setCrudInfoModalData({ open: false }));
    };
  
    const successMessage =
      (generateCRUDSuccessInfo && generateCRUDSuccessInfo.successMessage) ||
      createMessage(GEN_CRUD_INFO_DIALOG_SUBTITLE);
  
    const successImageUrl =
      (generateCRUDSuccessInfo && generateCRUDSuccessInfo.successImageUrl) ||
      getInfoImage();
  
    useEffect(() => {
      const timerId = setTimeout(() => {
        setStep(STEP.SHOW_INFO);
      }, DELAY_TIME);
      return () => {
        if (timerId) clearTimeout(timerId);
      };
    }, [setStep]);
  
    return (
      <Dialog
        canEscapeKeyClose
        canOutsideClickClose
        isOpen={crudInfoModalOpen}
        setModalClose={onClose}
      >
        <Wrapper>
          {step === STEP.SHOW_SUCCESS_GIF ? (
            <SuccessContentWrapper>
              <SuccessTick height="80px" width="80px" />
              <Heading> {createMessage(GEN_CRUD_SUCCESS_MESSAGE)}</Heading>
            </SuccessContentWrapper>
          ) : null}
          {step === STEP.SHOW_INFO ? (
            <InfoContent
              onClose={onClose}
              successImageUrl={successImageUrl}
              successMessage={successMessage}
            />
          ) : null}
        </Wrapper>
      </Dialog>
    );
  }
  
  const mapStateToProps = (state: AppState) => ({
    crudInfoModalOpen: getCrudInfoModalData(state).crudInfoModalOpen,
    generateCRUDSuccessInfo: getCrudInfoModalData(state).generateCRUDSuccessInfo,
  });
  
  export default connect(mapStateToProps)(GenCRUDSuccessModal);
  