feat(condo): DOMA-8500 guide page (#4538)

* feat(condo): DOMA-8500 added AboutAppBlock and translations

* feat(condo): DOMA-8500 added IntroduceAppBlock

* fix(condo): DOMA-8500 collapse spaces in translation files

* feat(condo): DOMA-8500 moved video urls to env

* feat(condo): DOMA-8500 added translations folders for guide pics

* feat(condo): DOMA-8500 added en pics

* feat(condo): DOMA-8500 move materail urls to encs

* feat(condo): DOMA-8500 update envs

* fix(condo): DOMA-8500 fixes after review

* fix(condo): DOMA-8500 update pics

* feat(condo): DOMA-8500 change png to webp

* fix(condo): DOMA-8500 used LinkWithIcon in complete step modal

* chore(condo): DOMA-8500 update helm

apps/condo/domains/common/components/LinkWithIcon.tsx

@@ -41,7 +41,7 @@ export const LinkWithIcon: React.FC<LinkWithIconPropsType> = ({ href, title, siz
 
     return (
         <Link href={href}>
-            <Typography.Link size={size} onClick={onClick}>
+            <Typography.Link href={href} size={size} onClick={onClick}>
                 {linkContent}
             </Typography.Link>
         </Link>

apps/condo/domains/onboarding/README.md

@@ -22,7 +22,8 @@ When a user performs an action on the platform (web client) related to a specifi
 
 ## Additional:
 - To display all content in the feature, add environment variables to `.env`:
-  - TOUR_VIDEO_URL='{"default": videoUrl, "ticket": videoUrl, "billing": videoUrl, "meter": videoUrl, "resident": videoUrl }'
-  - EXTERNAL_GUIDE_URL=guideUrl
-  - RESIDENT_APP_LANDING_URL=landingUrl
-  - CREATE_MAP_VIDEO_URL=videoUrl
+  - TOUR_VIDEO_URL='{ [locale]: { "default": videoUrl, "ticket": videoUrl, "billing": videoUrl, "meter": videoUrl, "resident": videoUrl } }'
+  - RESIDENT_APP_LANDING_URL='{ [locale]: landingUrl }'
+  - CREATE_MAP_VIDEO_URL='{ [locale]: videoUrl }'
+  - GUIDE_MODAL_CARD_LINK='{ [locale]: { "payments": url, "costs": url, "quality": url } }'
+  - GUIDE_INTRODUCE_APP_MATERIALS='{ [locale]: { "announcement": { "imageUrl": url, "materialsUrl": url }, "banner": { "imageUrl": url, "materialsUrl": url }, "chats": { "imageUrl": url, "materialsUrl": url }, "layout": { "imageUrl": url, "materialsUrl": url }, "leaflet":  { "imageUrl": url, "materialsUrl": url }, "socialNetworks": { "imageUrl": url, "materialsUrl": url }, "stickers": { "imageUrl": url, "materialsUrl": url } } }'

apps/condo/domains/onboarding/components/TourPage/AppCards.tsx

@@ -1,19 +1,26 @@
+import get from 'lodash/get'
+import getConfig from 'next/config'
 import React, { CSSProperties, useMemo, useState } from 'react'
 
 import { useIntl } from '@open-condo/next/intl'
 import { Button, Card, Modal, Radio, RadioGroup, Space, Typography } from '@open-condo/ui'
 import { colors } from '@open-condo/ui/dist/colors'
 
 import { EMOJI } from '@condo/domains/common/constants/emoji'
-import { RESIDENT_APP_LANDING_EXTERNAL_LINK } from '@condo/domains/onboarding/utils/clientSchema/constants'
 
 
+const {
+    publicRuntimeConfig,
+} = getConfig()
+
+const { residentAppLandingUrl } = publicRuntimeConfig
+
 type ActiveModalType = 'info' | 'download' | null
 type RadioOptionType = 'admin' | 'technic' | 'security'
 
 const APP_CARD_IMAGE_STYLES: CSSProperties = { width: 'inherit', maxWidth: '120px', paddingTop: '6px' }
 const TAB_IMAGE_WRAPPER_STYLES: CSSProperties = { margin: 'auto', width: 'fit-content' }
-const BASE_IMAGE_CONTAINER_STYLES: CSSProperties =  { height: '240px', width: '100%', backgroundColor: '', overflow: 'hidden', padding: '24px' }
+const BASE_IMAGE_CONTAINER_STYLES: CSSProperties =  { borderRadius: '12px', height: '240px', width: '100%', backgroundColor: '', overflow: 'hidden', padding: '24px' }
 const IMAGE_WRAPPER_BG_COLOR_BY_TYPE = {
     admin: colors.blue[1],
     technic: colors.purple[1],
@@ -45,14 +52,16 @@ export const TechnicAppCard = () => {
         ({ ...BASE_IMAGE_CONTAINER_STYLES, backgroundColor: IMAGE_WRAPPER_BG_COLOR_BY_TYPE[radioValue] })
     , [radioValue])
 
+    const locale = useMemo(() => get(intl, 'locale'), [intl])
+
     return (
         <>
             <Card.CardButton
                 header={{
                     emoji: [{ symbol: EMOJI.MECHANIC }, { symbol: EMOJI.WRENCH }],
                     headingTitle: TechnicAppCardTitle,
                 }}
-                body={{ image: { src: '/onboarding/tourTechnicCard.webp', style: APP_CARD_IMAGE_STYLES } }}
+                body={{ image: { src: `/onboarding/technic-app-card/${locale}/card-image/tourTechnicCard.webp`, style: APP_CARD_IMAGE_STYLES } }}
                 onClick={() => setActiveModal('info')}
                 id='tour-technic-app-card'
             />
@@ -87,9 +96,9 @@ export const TechnicAppCard = () => {
                                 <div style={imageContainerStyles}>
                                     <div style={TAB_IMAGE_WRAPPER_STYLES}>
                                         <img
-                                            src='/onboarding/technic-app-card/admin.webp'
+                                            src={`/onboarding/technic-app-card/${locale}/tabs/admin.webp`}
                                             alt='Technic app preview for admins'
-                                            style={{ width: '277px' }}
+                                            style={{ width: '310px' }}
                                         />
                                     </div>
                                 </div>
@@ -105,7 +114,7 @@ export const TechnicAppCard = () => {
                                 <div style={imageContainerStyles}>
                                     <div style={TAB_IMAGE_WRAPPER_STYLES}>
                                         <img
-                                            src='/onboarding/technic-app-card/technic.webp'
+                                            src={`/onboarding/technic-app-card/${locale}/tabs/technic.webp`}
                                             alt='Technic app preview for technics'
                                             style={{ width: '350px' }}
                                         />
@@ -123,7 +132,7 @@ export const TechnicAppCard = () => {
                                 <div style={imageContainerStyles}>
                                     <div style={TAB_IMAGE_WRAPPER_STYLES}>
                                         <img
-                                            src='/onboarding/technic-app-card/security.webp'
+                                            src={`/onboarding/technic-app-card/${locale}/tabs/security.webp`}
                                             alt='Technic app preview for security'
                                             style={{ width: '427px' }}
                                         />
@@ -192,15 +201,20 @@ export const ResidentAppCard = () => {
     const intl = useIntl()
     const ResidentAppCardTitle = intl.formatMessage({ id: 'tour.residentAppCard.title' })
 
+    const locale = useMemo(() => get(intl, 'locale'), [intl])
+    const landingLink = useMemo(() => get(residentAppLandingUrl, locale), [locale])
+
+    if (!landingLink) return null
+
     return (
         <Card.CardButton
             header={{
                 emoji: [{ symbol: EMOJI.WOMAN }, { symbol: EMOJI.MAN }],
                 headingTitle: ResidentAppCardTitle,
             }}
-            body={{ image: { src: '/onboarding/tourResidentCard.webp', style: APP_CARD_IMAGE_STYLES } }}
+            body={{ image: { src: `/onboarding/tour-resident-card/${locale}/card-image/tourResidentCard.webp`, style: APP_CARD_IMAGE_STYLES } }}
             onClick={() => {
-                window.open(RESIDENT_APP_LANDING_EXTERNAL_LINK, '_blank')
+                window.open(landingLink, '_blank')
             }}
         />
     )

apps/condo/domains/onboarding/hooks/TourContext/useCompletedTourModals.tsx

@@ -4,20 +4,20 @@ import { Col, Row } from 'antd'
 import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
 import pickBy from 'lodash/pickBy'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useCallback, useMemo, useState } from 'react'
 
-import { Building, Guide, LayoutList, Meters, Unlock, Wallet } from '@open-condo/icons'
+import { Building, Guide, IconProps, LayoutList, Meters, Unlock, Wallet } from '@open-condo/icons'
 import { useIntl } from '@open-condo/next/intl'
 import { useOrganization } from '@open-condo/next/organization'
 import { Button, Modal, Space, Typography } from '@open-condo/ui'
 import { colors } from '@open-condo/ui/dist/colors'
 
 import { FocusContainer } from '@condo/domains/common/components/FocusContainer'
+import { LinkWithIcon } from '@condo/domains/common/components/LinkWithIcon'
 import { useTracking } from '@condo/domains/common/components/TrackingContext'
 import { TourStep } from '@condo/domains/onboarding/utils/clientSchema'
-import { EXTERNAL_GUIDE_LINK } from '@condo/domains/onboarding/utils/clientSchema/constants'
+import { GUIDE_LINK } from '@condo/domains/onboarding/utils/clientSchema/constants'
 
 
 type ButtonClickType = () => void
@@ -26,7 +26,7 @@ type CompletedStepModalDataValueType = {
     type?: TourStepTypeType | 'importProperties'
     availableTourFlow: TourStepTypeType[]
     subtitleLinkHref: string
-    subtitleLinkIcon: React.ReactElement
+    subtitleLinkIcon: React.ComponentType<IconProps>
     newFeatures: {
         employee?: string[]
         resident?: string[]
@@ -87,7 +87,7 @@ type ComputedCompletedStepModalDataType = {
     subtitleText: string
     subtitleLink: string
     subtitleLinkLabel: string
-    subtitleLinkIcon: React.ReactElement
+    subtitleLinkIcon: React.ComponentType<IconProps>
     newEmployeeFeatures: string[]
     newResidentFeatures: string[]
     buttonLabel: string
@@ -152,7 +152,7 @@ export const useCompletedTourModals = ({ activeStep, setActiveTourStep, refetchS
     }), [completedTourFlow, intl])
 
     const handleViewGuideClick = useCallback(async () => {
-        window.open(EXTERNAL_GUIDE_LINK, '_blank')
+        window.open(GUIDE_LINK, '_blank')
         if (activeStep !== TourStepTypeType.Resident) {
             updateCompletedFlowModalData(activeStep)
         }
@@ -178,7 +178,7 @@ export const useCompletedTourModals = ({ activeStep, setActiveTourStep, refetchS
         createProperty: {
             availableTourFlow: [TourStepTypeType.Ticket, TourStepTypeType.Meter, TourStepTypeType.Resident],
             subtitleLinkHref: '/property',
-            subtitleLinkIcon: <Building size='small' />,
+            subtitleLinkIcon: Building,
             newFeatures: {
                 employee: [CreateTicketsOnPropertyEmployeeFeature, CreateNewsOnPropertyEmployeeFeature, CreateReadingsOnPropertyEmployeeFeature],
                 resident: [CreateTicketsResidentFeature, ReadNewsResidentFeature],
@@ -190,7 +190,7 @@ export const useCompletedTourModals = ({ activeStep, setActiveTourStep, refetchS
         createPropertyMap: {
             availableTourFlow: [TourStepTypeType.Ticket, TourStepTypeType.Meter, TourStepTypeType.Resident],
             subtitleLinkHref: '/property',
-            subtitleLinkIcon: <Building size='small' />,
+            subtitleLinkIcon: Building,
             newFeatures: {
                 employee: [CreateTicketsEmployeeFeature, CreateNewsEmployeeFeature, CreateReadingsEmployeeFeature, CreateContactsEmployeeFeature],
                 resident: [ReadTicketsResidentFeature, ReadNewsByUnitResidentFeature],
@@ -205,7 +205,7 @@ export const useCompletedTourModals = ({ activeStep, setActiveTourStep, refetchS
         importProperties: {
             availableTourFlow: [TourStepTypeType.Ticket, TourStepTypeType.Meter, TourStepTypeType.Resident],
             subtitleLinkHref: '/property',
-            subtitleLinkIcon: <Building size='small' />,
+            subtitleLinkIcon: Building,
             newFeatures: {
                 employee: [CreateTicketsEmployeeFeature, CreateNewsEmployeeFeature, CreateReadingsEmployeeFeature, CreateContactsEmployeeFeature],
                 resident: [CreateTicketsResidentFeature, ReadTicketsResidentFeature, ReadNewsByUnitResidentFeature],
@@ -220,7 +220,7 @@ export const useCompletedTourModals = ({ activeStep, setActiveTourStep, refetchS
         createTicket: {
             availableTourFlow: [TourStepTypeType.Ticket],
             subtitleLinkHref: '/ticket',
-            subtitleLinkIcon: <LayoutList size='small' />,
+            subtitleLinkIcon: LayoutList,
             newFeatures: {
                 employee: [TrackAndChangeTicketStatusEmployeeFeature, ChatWithResidentEmployeeFeature, ChatWithEmployeesEmployeeFeature],
                 resident: [TrackTicketsResidentFeature, ChatWithOrganizationResidentFeature],
@@ -233,7 +233,7 @@ export const useCompletedTourModals = ({ activeStep, setActiveTourStep, refetchS
         createMeterReadings: {
             availableTourFlow: [TourStepTypeType.Meter],
             subtitleLinkHref: '/meter',
-            subtitleLinkIcon: <Meters size='small' />,
+            subtitleLinkIcon: Meters,
             newFeatures: {
                 resident: [CreateMeterReadingsResidentFeatureMessage],
             },
@@ -245,7 +245,7 @@ export const useCompletedTourModals = ({ activeStep, setActiveTourStep, refetchS
         uploadReceipts: {
             availableTourFlow: [TourStepTypeType.Billing],
             subtitleLinkHref: '/billing',
-            subtitleLinkIcon: <Wallet size='small' />,
+            subtitleLinkIcon: Wallet,
             newFeatures: {
                 employee: [UploadReceiptsEmployeeFeatureMessage, TrackResidentPaymentsEmployeeFeatureMessage],
                 resident: [PayBillsResidentFeatureMessage],
@@ -258,7 +258,7 @@ export const useCompletedTourModals = ({ activeStep, setActiveTourStep, refetchS
         viewResidentsAppGuide: {
             availableTourFlow: [TourStepTypeType.Resident],
             subtitleLinkHref: '/tour',
-            subtitleLinkIcon: <Guide size='small' />,
+            subtitleLinkIcon: Guide,
             newFeatures: {
                 employee: [NotifyResidentsAboutAppEmployeeFeatureMessage],
                 resident: [DownloadAppResidentFeatureMessage],
@@ -332,14 +332,13 @@ export const useCompletedTourModals = ({ activeStep, setActiveTourStep, refetchS
                             <Typography.Text size='medium' type='secondary'>
                                 {get(computedCompletedStepModalData, 'subtitleText')}
                             </Typography.Text>
-                            <Link href={get(computedCompletedStepModalData, 'subtitleLink', '')}>
-                                <Typography.Link size='medium' onClick={() => updateCompletedStepModalData(null)}>
-                                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-                                        {get(computedCompletedStepModalData, 'subtitleLinkLabel')}
-                                        {get(computedCompletedStepModalData, 'subtitleLinkIcon')}
-                                    </div>
-                                </Typography.Link>
-                            </Link>
+                            <LinkWithIcon
+                                size='medium'
+                                title={get(computedCompletedStepModalData, 'subtitleLinkLabel')}
+                                href={get(computedCompletedStepModalData, 'subtitleLink', '')}
+                                PostfixIcon={get(computedCompletedStepModalData, 'subtitleLinkIcon')}
+                                onClick={() => updateCompletedStepModalData(null)}
+                            />
                         </Space>
                     </Space>
                 }

apps/condo/domains/onboarding/hooks/TourPage/useTourPageData.tsx

@@ -1,10 +1,11 @@
 import { TourStepStatusType } from '@app/condo/schema'
+import { useRouter } from 'next/router'
 import { useCallback, useMemo } from 'react'
 
 import { useIntl } from '@open-condo/next/intl'
 
 import { useTourContext } from '@condo/domains/onboarding/contexts/TourContext'
-import { EXTERNAL_GUIDE_LINK } from '@condo/domains/onboarding/utils/clientSchema/constants'
+import { GUIDE_LINK } from '@condo/domains/onboarding/utils/clientSchema/constants'
 
 
 export const useTourPageData = ({ isAllSecondStepsCompleted, isInnerStepsCompleted }) => {
@@ -13,14 +14,12 @@ export const useTourPageData = ({ isAllSecondStepsCompleted, isInnerStepsComplet
     const OpenGuideMessage = intl.formatMessage({ id: 'tour.openGuide' })
     const ChooseOtherTaskMessage = intl.formatMessage({ id: 'tour.chooseOtherTask' })
 
+    const router = useRouter()
+
     const { activeTourStep, setActiveTourStep } = useTourContext()
 
     const handleBackClick = useCallback(() => setActiveTourStep(null), [setActiveTourStep])
-    const handleOpenGuide = useCallback(() => {
-        if (typeof window !== 'undefined') {
-            window.open(EXTERNAL_GUIDE_LINK, '_blank')
-        }
-    }, [])
+    const handleOpenGuide = useCallback(() => router.push(GUIDE_LINK), [router])
 
     const activeStepType = activeTourStep || 'default'
     const isDefaultStep = activeStepType === 'default'

apps/condo/domains/onboarding/utils/clientSchema/constants.ts

@@ -1,4 +1,3 @@
-import getConfig from 'next/config'
 import Link from 'next/link'
 
 import { Building, ExternalLink, Meters, PlusCircle, Wallet } from '@open-condo/icons'
@@ -11,14 +10,7 @@ import {
 } from '@condo/domains/onboarding/constants/steps'
 
 
-const {
-    publicRuntimeConfig,
-} = getConfig()
-
-const { externalGuideUrl, residentAppLandingUrl } = publicRuntimeConfig
-
-export const EXTERNAL_GUIDE_LINK = externalGuideUrl
-export const RESIDENT_APP_LANDING_EXTERNAL_LINK = residentAppLandingUrl
+export const GUIDE_LINK = '/tour/guide'
 
 /**
  * Link when clicking on an active step in the tour page
@@ -29,7 +21,7 @@ export const TODO_STEP_CLICK_ROUTE = {
     [CREATE_TICKET_STEP_TYPE]: '/ticket',
     [UPLOAD_RECEIPTS_STEP_TYPE]: '/billing',
     [CREATE_METER_READINGS_STEP_TYPE]: '/meter',
-    [VIEW_RESIDENT_APP_GUIDE_STEP_TYPE]: EXTERNAL_GUIDE_LINK,
+    [VIEW_RESIDENT_APP_GUIDE_STEP_TYPE]: GUIDE_LINK,
     [CREATE_NEWS_STEP_TYPE]: '/news',
 }
 
@@ -75,8 +67,8 @@ export const COMPLETED_STEP_LINK = {
         AfterIcon: Meters,
     },
     [VIEW_RESIDENT_APP_GUIDE_STEP_TYPE]: {
-        openInNewTab: true,
-        href: EXTERNAL_GUIDE_LINK,
+        LinkWrapper: Link,
+        href: GUIDE_LINK,
         AfterIcon: ExternalLink,
     },
     [CREATE_NEWS_STEP_TYPE]: {

apps/condo/domains/property/components/panels/Builder/BuildingPanelCommon.tsx

@@ -146,13 +146,14 @@ export const EmptyBuildingBlock: React.FC<IEmptyBuildingBlock> = ({ mode = 'view
     }, [debouncedGenerateRequest])
 
     const locale = useMemo(() => get(intl, 'locale'), [intl])
+    const videoUrl = get(createMapVideoUrl, locale)
 
-    if (mode === 'edit' && locale === 'ru' && createMapVideoUrl) {
+    if (mode === 'edit' && videoUrl) {
         return (
             <div style={CARD_VIDEO_CONTAINER_STYLE}>
                 <div style={CARD_VIDEO_WRAPPER_STYLE}>
                     <CardVideo
-                        src={createMapVideoUrl}
+                        src={videoUrl}
                         title={CardVideoTitle}
                         description={CardVideoDescription}
                     />