Teardown onboarding video tour test (#13351)

GitOrigin-RevId: 215c26fe047ec037f8d1d878eac406c36dbb656b

services/web/app/src/Features/Project/ProjectController.js

@@ -739,21 +739,6 @@ const ProjectController = {
             cb()
           })
         },
-        onboardingVideoTourAssignment(cb) {
-          SplitTestHandler.getAssignment(
-            req,
-            res,
-            'onboarding-video-tour',
-            (error, assignment) => {
-              // do not fail editor load if assignment fails
-              if (error) {
-                cb(null, { variant: 'default' })
-              } else {
-                cb(null, assignment)
-              }
-            }
-          )
-        },
         historyViewAssignment(cb) {
           SplitTestHandler.getAssignment(
             req,
@@ -869,7 +854,6 @@ const ProjectController = {
           pdfjsAssignment,
           editorLeftMenuAssignment,
           richTextAssignment,
-          onboardingVideoTourAssignment,
           historyViewAssignment,
           reviewPanelAssignment,
         }
@@ -987,12 +971,6 @@ const ProjectController = {
               !userIsMemberOfGroupSubscription &&
               !userHasInstitutionLicence
 
-            const showOnboardingVideoTour =
-              Features.hasFeature('saas') &&
-              userId &&
-              onboardingVideoTourAssignment.variant === 'active' &&
-              req.session.justRegistered
-
             const showPersonalAccessToken =
               !Features.hasFeature('saas') ||
               req.query?.personal_access_token === 'true'
@@ -1086,7 +1064,6 @@ const ProjectController = {
               useOpenTelemetry: Settings.useOpenTelemetryClient,
               showCM6SwitchAwaySurvey: Settings.showCM6SwitchAwaySurvey,
               richTextVariant,
-              showOnboardingVideoTour,
               historyViewReact: historyViewAssignment.variant === 'react',
               isReviewPanelReact: reviewPanelAssignment.variant === 'react',
               showPersonalAccessToken,

services/web/app/views/project/editor/main.pug

@@ -52,13 +52,3 @@ else
 				.ui-layout-east
 					aside.chat
 						chat()
-
-			if showOnboardingVideoTour
-				div(
-					ng-if="!state.loading"
-					ng-controller="OnboardingVideoTourModalController"
-				)
-					onboarding-video-tour-modal(
-						close-modal="closeModal"
-						show="show"
-					)

services/web/app/views/project/editor/meta.pug

@@ -39,7 +39,6 @@ meta(name="ol-showSupport", data-type="boolean" content=showSupport)
 meta(name="ol-showTemplatesServerPro", data-type="boolean" content=showTemplatesServerPro)
 meta(name="ol-showCM6SwitchAwaySurvey", data-type="boolean" content=showCM6SwitchAwaySurvey)
 meta(name="ol-richTextVariant" content=richTextVariant)
-meta(name="ol-showOnboardingVideoTour", data-type="boolean" content=showOnboardingVideoTour)
 meta(name="ol-showPersonalAccessToken", data-type="boolean" content=showPersonalAccessToken)
 meta(name="ol-isReviewPanelReact", data-type="boolean" content=isReviewPanelReact)
 if (richTextVariant === 'cm6')

services/web/frontend/extracted-translations.json

@@ -246,8 +246,6 @@
   "edit_dictionary_empty": "",
   "edit_dictionary_remove": "",
   "edit_figure": "",
-  "edit_in_source_to_see_your_entire_latex_code": "",
-  "edit_in_the_left_pane_click_recompile": "",
   "edit_tag": "",
   "editing": "",
   "editing_captions": "",
@@ -611,7 +609,6 @@
   "new_tag_name": "",
   "new_to_latex_look_at": "",
   "newsletter": "",
-  "next": "",
   "next_payment_of_x_collectected_on_y": "",
   "no_existing_password": "",
   "no_folder": "",
@@ -1074,7 +1071,6 @@
   "we_logged_you_in": "",
   "wed_love_you_to_stay": "",
   "welcome_to_sl": "",
-  "welcome_to_your_first_project": "",
   "when_you_tick_the_include_caption_box": "",
   "wide": "",
   "with_premium_subscription_you_also_get": "",

services/web/frontend/js/features/onboarding/components/onboarding-video-tour-modal-body.tsx

@@ -1,65 +0,0 @@
-/* eslint-disable jsx-a11y/media-has-caption */
-import { useCallback, useRef } from 'react'
-import { Modal } from 'react-bootstrap'
-import { Trans } from 'react-i18next'
-import type { OnboardingVideoStep } from '../utils/onboarding-video-step'
-
-type OnboardingVideoTourModalBodyProps = {
-  step: OnboardingVideoStep
-}
-
-export default function OnboardingVideoTourModalBody({
-  step,
-}: OnboardingVideoTourModalBodyProps) {
-  const firstVideoRef = useRef<HTMLVideoElement>(null)
-  const secondVideoRef = useRef<HTMLVideoElement>(null)
-
-  const handleCanPlayFirstVideo = useCallback(() => {
-    if (firstVideoRef.current) {
-      firstVideoRef.current.playbackRate = 1.5
-    }
-  }, [firstVideoRef])
-
-  const handleCanPlaySecondVideo = useCallback(() => {
-    if (secondVideoRef.current) {
-      secondVideoRef.current.playbackRate = 3.0
-    }
-  }, [secondVideoRef])
-
-  return (
-    <Modal.Body>
-      <p>
-        {step === 'first' ? (
-          <Trans
-            i18nKey="edit_in_the_left_pane_click_recompile"
-            components={[<strong />]} // eslint-disable-line react/jsx-key
-          />
-        ) : (
-          <Trans
-            i18nKey="edit_in_source_to_see_your_entire_latex_code"
-            components={[<strong />]} // eslint-disable-line react/jsx-key
-          />
-        )}
-      </p>
-      {step === 'first' ? (
-        <video
-          onCanPlay={handleCanPlayFirstVideo}
-          ref={firstVideoRef}
-          autoPlay
-          loop
-          width="100%"
-          src="https://videos.ctfassets.net/nrgyaltdicpt/7MgWt7UdNv4yJcG2OrUene/387ab289e0e408511996f1152fc856d9/onboarding-tour-step-1.mp4"
-        />
-      ) : (
-        <video
-          onCanPlay={handleCanPlaySecondVideo}
-          ref={secondVideoRef}
-          autoPlay
-          loop
-          width="100%"
-          src="https://videos.ctfassets.net/nrgyaltdicpt/2wYrdDqILSXaWP1LZScaDd/86a38effaeb400f42b480dba68a84b06/onboarding-tour-step-2.mp4"
-        />
-      )}
-    </Modal.Body>
-  )
-}

services/web/frontend/js/features/onboarding/components/onboarding-video-tour-modal-footer.tsx

@@ -1,110 +0,0 @@
-import {
-  type Dispatch,
-  type RefObject,
-  type SetStateAction,
-  useCallback,
-} from 'react'
-import { Button, Modal } from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
-import type { Nullable } from '../../../../../types/utils'
-import { sendMB } from '../../../infrastructure/event-tracking'
-import customLocalStorage from '../../../infrastructure/local-storage'
-import type { OnboardingVideoStep } from '../utils/onboarding-video-step'
-import { calculateWatchingTimeInSecond } from '../utils/watching-time'
-
-type OnboardingVideoTourModalFooterProps = {
-  step: OnboardingVideoStep
-  setStep: Dispatch<SetStateAction<OnboardingVideoStep>>
-  closeModal: () => void
-  startTimeWatchedFirstVideo: RefObject<number>
-  startTimeWatchedSecondVideo: RefObject<Nullable<number>>
-}
-
-export default function OnboardingVideoTourModalFooter({
-  step,
-  setStep,
-  closeModal,
-  startTimeWatchedFirstVideo,
-  startTimeWatchedSecondVideo,
-}: OnboardingVideoTourModalFooterProps) {
-  const { t } = useTranslation()
-
-  const handleClickDismiss = useCallback(() => {
-    customLocalStorage.setItem(
-      'has_dismissed_onboarding_video_tour_modal',
-      true
-    )
-
-    const { firstVideoWatchingTimeInSecond, secondVideoWatchingTimeInSecond } =
-      calculateWatchingTimeInSecond(
-        startTimeWatchedFirstVideo.current ?? 0,
-        startTimeWatchedSecondVideo.current
-      )
-
-    sendMB('onboarding-video-tour-dismiss-button-click', {
-      firstVideoWatchingTimeInSecond,
-      secondVideoWatchingTimeInSecond,
-    })
-
-    closeModal()
-  }, [closeModal, startTimeWatchedFirstVideo, startTimeWatchedSecondVideo])
-
-  const handleClickNext = useCallback(() => {
-    const { firstVideoWatchingTimeInSecond, secondVideoWatchingTimeInSecond } =
-      calculateWatchingTimeInSecond(
-        startTimeWatchedFirstVideo.current ?? 0,
-        startTimeWatchedSecondVideo.current
-      )
-
-    sendMB('onboarding-video-tour-next-button-click', {
-      firstVideoWatchingTimeInSecond,
-      secondVideoWatchingTimeInSecond,
-    })
-
-    setStep('second')
-  }, [setStep, startTimeWatchedFirstVideo, startTimeWatchedSecondVideo])
-
-  const handleClickDone = useCallback(() => {
-    customLocalStorage.setItem(
-      'has_dismissed_onboarding_video_tour_modal',
-      true
-    )
-
-    const { firstVideoWatchingTimeInSecond, secondVideoWatchingTimeInSecond } =
-      calculateWatchingTimeInSecond(
-        startTimeWatchedFirstVideo.current ?? 0,
-        startTimeWatchedSecondVideo.current
-      )
-
-    sendMB('onboarding-video-tour-done-button-click', {
-      firstVideoWatchingTimeInSecond,
-      secondVideoWatchingTimeInSecond,
-    })
-
-    closeModal()
-  }, [closeModal, startTimeWatchedFirstVideo, startTimeWatchedSecondVideo])
-
-  return (
-    <Modal.Footer>
-      {step === 'first' ? (
-        <>
-          <Button
-            type="button"
-            bsStyle={null}
-            className="btn-secondary"
-            onClick={handleClickDismiss}
-          >
-            {t('dismiss')}
-          </Button>
-          <Button type="submit" bsStyle="primary" onClick={handleClickNext}>
-            {t('next')}
-          </Button>
-        </>
-      ) : (
-        <Button type="submit" bsStyle="primary" onClick={handleClickDone}>
-          {t('done')}
-        </Button>
-      )}
-    </Modal.Footer>
-  )
-}

services/web/frontend/js/features/onboarding/components/onboarding-video-tour-modal.tsx

@@ -1,75 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { Modal } from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
-import AccessibleModal from '../../../shared/components/accessible-modal'
-import customLocalStorage from '../../../infrastructure/local-storage'
-import { sendMB } from '../../../infrastructure/event-tracking'
-import OnboardingVideoTourModalBody from './onboarding-video-tour-modal-body'
-import type { OnboardingVideoStep } from '../utils/onboarding-video-step'
-import OnboardingVideoTourModalFooter from './onboarding-video-tour-modal-footer'
-import { calculateWatchingTimeInSecond } from '../utils/watching-time'
-import type { Nullable } from '../../../../../types/utils'
-
-type OnboardingVideoTourModalProps = {
-  show: boolean
-  closeModal: () => void
-}
-
-function OnboardingVideoTourModal({
-  show,
-  closeModal,
-}: OnboardingVideoTourModalProps) {
-  const { t } = useTranslation()
-  const [step, setStep] = useState<OnboardingVideoStep>('first')
-
-  const startTimeWatchedFirstVideo = useRef(Date.now())
-  const startTimeWatchedSecondVideo = useRef<Nullable<number>>(null)
-
-  const handleClickCloseButton = useCallback(() => {
-    customLocalStorage.setItem(
-      'has_dismissed_onboarding_video_tour_modal',
-      true
-    )
-
-    const { firstVideoWatchingTimeInSecond, secondVideoWatchingTimeInSecond } =
-      calculateWatchingTimeInSecond(
-        startTimeWatchedFirstVideo.current,
-        startTimeWatchedSecondVideo.current
-      )
-
-    sendMB('onboarding-video-tour-close-button-click', {
-      video: step,
-      firstVideoWatchingTimeInSecond,
-      secondVideoWatchingTimeInSecond,
-    })
-    closeModal()
-  }, [closeModal, step])
-
-  useEffect(() => {
-    if (step === 'second') {
-      startTimeWatchedSecondVideo.current = Date.now()
-    }
-  }, [step])
-
-  return (
-    <AccessibleModal
-      onHide={handleClickCloseButton}
-      show={show}
-      backdrop="static"
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>{t('welcome_to_your_first_project')}</Modal.Title>
-      </Modal.Header>
-      <OnboardingVideoTourModalBody step={step} />
-      <OnboardingVideoTourModalFooter
-        step={step}
-        setStep={setStep}
-        closeModal={closeModal}
-        startTimeWatchedFirstVideo={startTimeWatchedFirstVideo}
-        startTimeWatchedSecondVideo={startTimeWatchedSecondVideo}
-      />
-    </AccessibleModal>
-  )
-}
-
-export default memo(OnboardingVideoTourModal)

services/web/frontend/js/features/onboarding/controllers/onboarding-video-tour-modal-controller.js

@@ -1,32 +0,0 @@
-import { react2angular } from 'react2angular'
-import { rootContext } from '../../../../../frontend/js/shared/context/root-context'
-import App from '../../../../../frontend/js/base'
-import getMeta from '../../../utils/meta'
-import OnboardingVideoTourModal from '../components/onboarding-video-tour-modal'
-
-export default App.controller(
-  'OnboardingVideoTourModalController',
-  function ($scope, localStorage) {
-    const hasDismissedOnboardingVideoTourModal = localStorage(
-      'has_dismissed_onboarding_video_tour_modal'
-    )
-    const showOnboardingVideoTour = getMeta('ol-showOnboardingVideoTour')
-
-    $scope.show =
-      !hasDismissedOnboardingVideoTourModal && showOnboardingVideoTour
-
-    $scope.closeModal = () => {
-      $scope.$applyAsync(() => {
-        $scope.show = false
-      })
-    }
-  }
-)
-
-App.component(
-  'onboardingVideoTourModal',
-  react2angular(rootContext.use(OnboardingVideoTourModal), [
-    'show',
-    'closeModal',
-  ])
-)

services/web/frontend/js/features/onboarding/utils/onboarding-video-step.ts

@@ -1 +0,0 @@
-export type OnboardingVideoStep = 'first' | 'second'

services/web/frontend/js/features/onboarding/utils/watching-time.ts

@@ -1,23 +0,0 @@
-import type { Nullable } from '../../../../../types/utils'
-
-export function calculateWatchingTimeInSecond(
-  startTimeWatchedFirstVideo: number,
-  startTimeWatchedSecondVideo: Nullable<number>
-) {
-  let firstVideoWatchingTimeInSecond = 0
-  let secondVideoWatchingTimeInSecond = 0
-  if (startTimeWatchedSecondVideo === null) {
-    firstVideoWatchingTimeInSecond = Math.floor(
-      (Date.now() - startTimeWatchedFirstVideo) / 1000
-    )
-  } else {
-    firstVideoWatchingTimeInSecond = Math.floor(
-      (startTimeWatchedSecondVideo - startTimeWatchedFirstVideo) / 1000
-    )
-    secondVideoWatchingTimeInSecond = Math.floor(
-      (Date.now() - startTimeWatchedSecondVideo) / 1000
-    )
-  }
-
-  return { firstVideoWatchingTimeInSecond, secondVideoWatchingTimeInSecond }
-}

services/web/frontend/js/ide.js

@@ -68,7 +68,6 @@ import './features/source-editor/controllers/cm6-switch-away-survey-controller'
 import './features/source-editor/controllers/grammarly-warning-controller'
 import './features/source-editor/controllers/legacy-editor-warning-controller'
 import './features/outline/controllers/documentation-button-controller'
-import './features/onboarding/controllers/onboarding-video-tour-modal-controller'
 import './features/history/controllers/history-controller'
 import './features/history/controllers/history-file-tree-controller'
 import { cleanupServiceWorker } from './utils/service-worker-cleanup'

services/web/locales/en.json

@@ -411,8 +411,6 @@
   "edit_dictionary_empty": "Your custom dictionary is empty.",
   "edit_dictionary_remove": "Remove from dictionary",
   "edit_figure": "Edit figure",
-  "edit_in_source_to_see_your_entire_latex_code": "Edit in <0>Source</0> to see your entire LaTeX code, or choose <0>Rich Text</0> for something more visual.",
-  "edit_in_the_left_pane_click_recompile": "Edit in the left pane. Click <0>Recompile</0> to see the PDF output on the right.",
   "edit_tag": "Edit Tag",
   "editing": "Editing",
   "editing_captions": "Editing captions",
@@ -1015,7 +1013,6 @@
   "newsletter_info_summary": "Every few months we send a newsletter out summarizing the new features available.",
   "newsletter_info_title": "Newsletter Preferences",
   "newsletter_info_unsubscribed": "You are currently <0>unsubscribed</0> to the __appName__ newsletter.",
-  "next": "Next",
   "next_payment_of_x_collectected_on_y": "The next payment of <0>__paymentAmmount__</0> will be collected on <1>__collectionDate__</1>.",
   "nl": "Dutch",
   "no": "Norwegian",
@@ -1760,7 +1757,6 @@
   "website_status": "Website status",
   "wed_love_you_to_stay": "We’d love you to stay",
   "welcome_to_sl": "Welcome to __appName__!",
-  "welcome_to_your_first_project": "Welcome to your first __appName__ project!",
   "when_you_tick_the_include_caption_box": "When you tick the box “Include caption” the image will be inserted into your document with a placeholder caption. To edit it, you simply select the placeholder text and type to replace it with your own.",
   "wide": "Wide",
   "will_need_to_log_out_from_and_in_with": "You will need to <b>log out</b> from your <b>__email1__</b> account and then log in with <b>__email2__</b>.",