fix(codegen): INFRA-316 update components in template

packages/codegen/templates/app00/domains/common/components/AppFrameWrapper.tsx

@@ -0,0 +1,30 @@
+import { css, Global } from '@emotion/react'
+import React, { useEffect } from 'react'
+
+import bridge from '@open-condo/bridge'
+
+const BODY_RESIZE_STYLES = css`
+  body {
+    height: auto;
+  }
+`
+
+export const AppFrameWrapper: React.FC = ({ children }) => {
+    useEffect(() => {
+        const observer = new ResizeObserver((entries) => {
+            if (entries && entries.length) {
+                bridge.send('CondoWebAppResizeWindow', { height: entries[0].target.clientHeight })
+            }
+        })
+        observer.observe(document.body)
+
+        return () => observer.unobserve(document.body)
+    }, [])
+
+    return (
+        <>
+            <Global styles={BODY_RESIZE_STYLES}/>
+            {children}
+        </>
+    )
+}

packages/codegen/templates/app00/domains/common/components/Loader.tsx

@@ -0,0 +1,51 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react'
+import styled from '@emotion/styled'
+import { Spin, SpinProps } from 'antd'
+import React from 'react'
+
+import { colors } from '@open-condo/ui/dist/colors'
+
+
+const DEFAULT_DELAY = 200 // milliseconds
+
+const FilledLoaderContainer = styled.section`
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+        `
+
+interface ILoaderProps extends SpinProps {
+    fill?: boolean
+}
+
+export const Loader: React.FC<ILoaderProps> = (props) => {
+    const { fill, ...other } = props
+    // We need this to recolor antd spinner. It's not easily configurable from theme
+    const coloredSpinnerStyles = css`
+        .ant-spin-dot-item {
+            background-color: ${colors.green[5]};
+        }
+    `
+
+    if (fill) {
+        return (
+            <FilledLoaderContainer css={coloredSpinnerStyles}>
+                <Spin {...other} />
+            </FilledLoaderContainer>
+        )
+    }
+
+    return (
+        <section css={coloredSpinnerStyles}>
+            <Spin {...other}/>
+        </section>
+    )
+}
+
+Loader.defaultProps = {
+    fill: false,
+    delay: DEFAULT_DELAY,
+}

packages/codegen/templates/app00/domains/common/components/containers/BaseLayout/BaseLayout.tsx

@@ -7,7 +7,7 @@ import React, { CSSProperties, FunctionComponent } from 'react'
 
 import { colors } from '@open-condo/ui/dist/colors'
 
-import { MAX_CONTENT_WIDTH } from '@condo/domains/common/constants/style'
+import { MAX_CONTENT_WIDTH } from '@{{name}}/domains/common/constants/style'
 
 import 'antd/dist/antd.less'
 

packages/codegen/templates/app00/domains/common/components/containers/BaseLayout/index.ts

@@ -1,10 +1,7 @@
-import { useLayoutContext, LayoutContextProvider } from '@condo/domains/common/components/LayoutContext'
-
 import { BaseLayout, PageContent, PageHeader, PageWrapper, TablePageContent } from './BaseLayout'
 
 
 export {
-    useLayoutContext, LayoutContextProvider,
     BaseLayout,
     PageWrapper,
     PageHeader,

packages/codegen/templates/app00/domains/common/components/containers/LoadingOrError.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { useIntl } from '@open-condo/next/intl'
 import { Typography } from '@open-condo/ui'
 
-import { Loader } from '@condo/domains/common/components/Loader'
+import { Loader } from '@{{name}}/domains/common/components/Loader'
 
 
 type LoadingOrErrorProps = {

packages/codegen/templates/app00/domains/common/constants/index.js

@@ -10,9 +10,12 @@ const LOCALES = [
     RU_LOCALE,
 ]
 
+const MAX_CONTENT_WIDTH = 1600
+
 module.exports = {
     DEFAULT_LOCALE,
     LOCALES,
     EN_LOCALE,
     RU_LOCALE,
+    MAX_CONTENT_WIDTH
 }

packages/codegen/templates/app00/domains/common/constants/style.js

@@ -0,0 +1,5 @@
+const MAX_CONTENT_WIDTH = 1600
+
+module.exports = {
+    MAX_CONTENT_WIDTH
+}

packages/codegen/templates/app00/domains/common/hooks/useLaunchParams.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react'
+
+import type { ResultResponseData, ErrorResponseData } from '@open-condo/bridge'
+import bridge from '@open-condo/bridge'
+
+type IUseLaunchParams = {
+    loading: boolean
+    error: ErrorResponseData | null
+    context: ResultResponseData<'CondoWebAppGetLaunchParams'> | Record<string, never>
+}
+export function useLaunchParams (): IUseLaunchParams {
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<IUseLaunchParams['error']>(null)
+    const [context, setContext] = useState<IUseLaunchParams['context']>({})
+
+    useEffect(() => {
+        bridge
+            .send('CondoWebAppGetLaunchParams')
+            .then(setContext)
+            .catch((err) => {
+                setContext({})
+                setError(err)
+            })
+            .finally(() => setLoading(false))
+    }, [])
+
+    return {
+        loading,
+        error,
+        context,
+    }
+}

packages/codegen/templates/app00/global.d.ts

@@ -0,0 +1,19 @@
+import en from '@app/{{name}}/lang/en/en.json'
+import ru from '@app/{{name}}/lang/ru/ru.json'
+
+
+// NOTE: Combine all keys together
+const translations = [
+    en, ru,
+]
+
+export type MessagesKeysType = keyof typeof translations[number]
+
+// NOTE: Override global interface allows us to use autocomplete in intl
+declare global {
+    namespace FormatjsIntl {
+        interface Message {
+            ids: MessagesKeysType
+        }
+    }
+}

packages/codegen/templates/app00/lang/en/en.json

@@ -1,2 +1,9 @@
 {
+  "common.errors.serverError": "Server error",
+  "NoAccessToStorage": "There is no access to the first-party cookies due to Intelligent Tracking Prevention! This is necessary to start authorization flow. Please grant an access by pressing the following button.",
+  "AskForAccessButton": "Grant access",
+  "AskForOpenWindowButton": "Open new tab and grant access",
+  "NoAbleToAskForStorageAccess": "According the browser security restrictions, you will have to grant access to data storage. Please press the following button. There will be a new tab with a form that be opened. Please follow the instructions.",
+  "GrantButtonPressed": "OK, thanks! Now you may close this page and press same button at the previous one.",
+  "BeAbleToAskForStorageAccess": "To be able to ask for access to browser storage, please press the following button."
 }

packages/codegen/templates/app00/lang/ru/ru.json

@@ -1,2 +1,9 @@
 {
+  "common.errors.serverError": "Ошибка сервера",
+  "NoAccessToStorage": "Нет доступа к хранилищу first-party cookies из-за Intelligent Tracking Prevention. Доступ необходим для продолжения процесса авторизации. Пожалуйста, предоставьте доступ с помощью нажатия на кнопку ниже.",
+  "AskForAccessButton": "Дать доступ",
+  "AskForOpenWindowButton": "Открыть новую вкладку и дать доступ",
+  "NoAbleToAskForStorageAccess": "Из-за ограничений безопасности браузера необходимо дать доступ к хранилищу браузера. Для этого нажмите кнопку ниже. Будет открыта новая вкладка. Следуйте указанным в ней инструкциям.",
+  "GrantButtonPressed": "Отлично, спасибо! Теперь вернитесь в миниап пропусков и нажмите кнопку \"Предоставление доступа\".",
+  "BeAbleToAskForStorageAccess": "Чтобы браузер предложил сделать запрос на доступ к хранилищу, нажмите на кнопку."
 }

packages/codegen/templates/app00/pages/_app.tsx

@@ -12,18 +12,17 @@ import React, { useContext, useEffect } from 'react'
 
 import { withApollo } from '@open-condo/next/apollo'
 import { withAuth } from '@open-condo/next/auth'
-import { withIntl, useIntl, LocaleContext } from '@open-condo/next/intl'
+import { LocaleContext, useIntl, withIntl } from '@open-condo/next/intl'
 
 import GlobalStyle from '@condo/domains/common/components/containers/GlobalStyle'
-import { messagesImporter as condoMessageImporter } from '@condo/domains/common/utils/clientSchema/messagesImporter'
-import { AppFrameWrapper } from '@condo/domains/miniapp/components/AppFrameWrapper'
-import { useLaunchParams } from '@condo/domains/miniapp/hooks/useLaunchParams'
-import { BaseLayout, LayoutContextProvider } from '@{{name}}/domains/common/components/containers/BaseLayout'
-import { withOidcAuth } from '@{{name}}/domains/common/utils/oidcAuth'
 
-import '@condo/domains/common/components/wdyr'
 import '@open-condo/ui/dist/styles.min.css'
 
+import { AppFrameWrapper } from '@{{name}}/domains/common/components/AppFrameWrapper'
+import { BaseLayout } from '@{{name}}/domains/common/components/containers/BaseLayout'
+import { useLaunchParams } from '@{{name}}/domains/common/hooks/useLaunchParams'
+import { withOidcAuth } from '@{{name}}/domains/common/utils/oidcAuth'
+
 
 const {
     publicRuntimeConfig: {
@@ -75,26 +74,22 @@ const MyApp = ({ Component, pageProps }) => {
             </Head>
             <GlobalStyle/>
             <AppFrameWrapper>
-                <LayoutContextProvider>
-                    <ConfigProvider locale={ANT_LOCALES[intl.locale] || ANT_DEFAULT_LOCALE} componentSize='large'>
-                        <CacheProvider value={cache}>
-                            <LayoutComponent>
-                                <RequiredAccess>
-                                    <Component {...pageProps} />
-                                </RequiredAccess>
-                            </LayoutComponent>
-                        </CacheProvider>
-                    </ConfigProvider>
-                </LayoutContextProvider>
+                <ConfigProvider locale={ANT_LOCALES[intl.locale] || ANT_DEFAULT_LOCALE} componentSize='large'>
+                    <CacheProvider value={cache}>
+                        <LayoutComponent>
+                            <RequiredAccess>
+                                <Component {...pageProps} />
+                            </RequiredAccess>
+                        </LayoutComponent>
+                    </CacheProvider>
+                </ConfigProvider>
             </AppFrameWrapper>
         </>
     )
 }
 
 async function messagesImporter (locale) {
-    const base = await condoMessageImporter(locale)
-    const override = await import(`@app/{{name}}/lang/${locale}/${locale}`)
-    return { ...base, ...override.default }
+    return await import(`@app/{{name}}/lang/${locale}/${locale}`)
 }
 
 

packages/codegen/templates/app00/pages/grant-storage-access/[id]/index.tsx

@@ -28,11 +28,12 @@ const CONTENT_STYLES: CSSProperties = {
 
 const GrantStorageAccessPage = () => {
     const intl = useIntl()
-    const [pressed, setPressed] = useState<boolean>(false)
     const AskForAccessButtonMessage = intl.formatMessage({ id: 'AskForAccessButton' })
     const GrantButtonPressedMessage = intl.formatMessage({ id: 'GrantButtonPressed' })
     const BeAbleToAskForStorageAccessMessage = intl.formatMessage({ id: 'BeAbleToAskForStorageAccess' })
 
+    const [pressed, setPressed] = useState<boolean>(false)
+
     const clickHandler = useCallback(() => {
         setPressed(true)
     }, [])