├── .env.example ├── .eslintrc ├── .github └── workflows │ ├── develop.yml │ └── prod.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.tsx ├── assets │ └── img │ │ ├── avatar-big.svg │ │ ├── avatar-small.svg │ │ ├── back.svg │ │ ├── check.svg │ │ ├── close.svg │ │ ├── dropdown-big.svg │ │ ├── dropdown-small.svg │ │ ├── index.ts │ │ ├── loader.svg │ │ ├── logo.svg │ │ ├── previous.svg │ │ └── remove.svg ├── components │ ├── Button │ │ ├── index.tsx │ │ └── styles.scss │ ├── ErrorToast │ │ ├── index.tsx │ │ └── styles.scss │ ├── Field │ │ ├── CountrySelect.tsx │ │ ├── Input.tsx │ │ ├── PhoneInput.tsx │ │ ├── PinInput.tsx │ │ ├── Select.tsx │ │ └── styles.scss │ ├── Footer │ │ ├── index.tsx │ │ └── style.scss │ ├── Header │ │ ├── index.tsx │ │ └── style.scss │ ├── Loader │ │ ├── index.tsx │ │ └── styles.scss │ ├── NewLoader │ │ ├── IconsCommonTypes.ts │ │ ├── Loader.tsx │ │ ├── LoaderComponent.tsx │ │ └── style.scss │ └── modals │ │ ├── LogoutModal.tsx │ │ ├── SettingModal.tsx │ │ └── styles.scss ├── configs │ ├── QBconfig.ts │ ├── firebase-config.ts │ └── index.ts ├── hooks │ ├── index.ts │ ├── useAuth.ts │ ├── useIsOffLine.ts │ ├── useModal.ts │ ├── useReCaptcha.ts │ └── useTimer.ts ├── index.scss ├── index.tsx ├── qb-api-calls │ └── index.ts ├── reportWebVitals.ts ├── screens │ ├── RootScreen │ │ └── index.tsx │ └── SignInScreen │ │ ├── index.tsx │ │ └── style.scss ├── setupTests.ts ├── styles │ ├── _theme_colors_scheme.scss │ ├── _theme_dark.scss │ ├── _theme_light.scss │ └── _variables.scss ├── types │ └── react-app-env.d.ts └── utils │ └── parse.ts └── tsconfig.json /.env.example: -------------------------------------------------------------------------------- 1 | REACT_APP_FIREBASE_API_KEY= 2 | REACT_APP_FIREBASE_APP_ID= 3 | REACT_APP_FIREBASE_AUTH_DOMAIN= 4 | REACT_APP_FIREBASE_DATABASE_URL= 5 | REACT_APP_FIREBASE_MESSAGING_SENDER_ID= 6 | REACT_APP_FIREBASE_PROJECT_ID= 7 | REACT_APP_FIREBASE_STORAGE_BUCKET= 8 | 9 | REACT_APP_QB_APP_ID= 10 | REACT_APP_QB_ACCOUNT_KEY= 11 | REACT_APP_QB_ENDPOINT_API= 12 | REACT_APP_QB_ENDPOINT_CHAT= 13 | 14 | REACT_APP_API_BASE_URL= 15 | REACT_APP_API_AUTH_PATH= 16 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": [ 7 | "react-app", 8 | "standard-with-typescript", 9 | "plugin:react/recommended" 10 | ], 11 | "parserOptions": { 12 | "ecmaVersion": "latest", 13 | "sourceType": "module", 14 | "project": [ 15 | "./tsconfig.json" 16 | ] 17 | }, 18 | "plugins": [ 19 | "react" 20 | ], 21 | "rules": { 22 | "react/react-in-jsx-scope": "off", 23 | "@typescript-eslint/explicit-function-return-type": "off", 24 | "@typescript-eslint/comma-dangle": "off", 25 | "@typescript-eslint/strict-boolean-expressions": "off", 26 | "@typescript-eslint/no-misused-promises": "off", 27 | "@typescript-eslint/space-before-function-paren": "off", 28 | "@typescript-eslint/indent": "off", 29 | "@typescript-eslint/no-non-null-assertion": "off", 30 | "multiline-ternary": "off", 31 | "@typescript-eslint/naming-convention": "off", 32 | "@typescript-eslint/prefer-optional-chain": "off", 33 | "@typescript-eslint/prefer-nullish-coalescing": "off", 34 | "@typescript-eslint/promise-function-async": "off", 35 | "@typescript-eslint/member-delimiter-style": [ 36 | "error", 37 | { 38 | "multiline": { 39 | "delimiter": "none", 40 | "requireLast": true 41 | }, 42 | "singleline": { 43 | "delimiter": "semi", 44 | "requireLast": false 45 | } 46 | } 47 | ] 48 | } 49 | } -------------------------------------------------------------------------------- /.github/workflows/develop.yml: -------------------------------------------------------------------------------- 1 | name: CI/CD for q-municate-dev.quickblox.com 2 | 3 | on: 4 | push: 5 | # Sequence of patterns matched against refs/heads 6 | branches: 7 | - develop 8 | 9 | jobs: 10 | build: 11 | 12 | runs-on: ubuntu-latest 13 | 14 | steps: 15 | - uses: actions/checkout@v3 16 | - name: Install Node.js 17 | uses: actions/setup-node@v3 18 | with: 19 | node-version: '18.x' 20 | - name: Install npm dependencies 21 | run: npm ci 22 | - name: Run build task 23 | run: npm run build 24 | env: 25 | CI: false 26 | REACT_APP_FIREBASE_API_KEY: ${{ vars.FIREBASE_API_KEY }} 27 | REACT_APP_FIREBASE_APP_ID: ${{ vars.FIREBASE_APP_ID }} 28 | REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ vars.FIREBASE_AUTH_DOMAIN }} 29 | REACT_APP_FIREBASE_DATABASE_URL: ${{ vars.FIREBASE_DATABASE_URL }} 30 | REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ vars.FIREBASE_MESSAGING_SENDER_ID }} 31 | REACT_APP_FIREBASE_PROJECT_ID: ${{ vars.FIREBASE_PROJECT_ID }} 32 | REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ vars.FIREBASE_STORAGE_BUCKET }} 33 | REACT_APP_QB_APP_ID: ${{ vars.QB_DEV_APP_ID }} 34 | REACT_APP_QB_ACCOUNT_KEY: ${{ vars.QB_DEV_ACCOUNT_KEY }} 35 | REACT_APP_QB_ENDPOINT_API: ${{ vars.QB_ENDPOINT_API }} 36 | REACT_APP_QB_ENDPOINT_CHAT: ${{ vars.QB_ENDPOINT_CHAT }} 37 | REACT_APP_API_BASE_URL: ${{ vars.API_DEV_BASE_URL }} 38 | REACT_APP_API_AUTH_PATH: ${{ vars.API_AUTH_PATH }} 39 | - name: Deploy to Server 40 | uses: easingthemes/ssh-deploy@main 41 | with: 42 | SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }} 43 | ARGS: "-rlgoDzvc -i --delete" 44 | SOURCE: "" 45 | REMOTE_HOST: ${{ secrets.REMOTE_DEV_HOST }} 46 | REMOTE_USER: ${{ secrets.REMOTE_USER }} 47 | TARGET: ${{ secrets.REMOTE_DEV_TARGET }} 48 | EXCLUDE: "/dist/, /node_modules/" 49 | -------------------------------------------------------------------------------- /.github/workflows/prod.yml: -------------------------------------------------------------------------------- 1 | name: CI/CD for q-municate.quickblox.com 2 | 3 | on: 4 | push: 5 | # Sequence of patterns matched against refs/heads 6 | branches: 7 | - main 8 | # Sequence of patterns matched against refs/tags 9 | tags: 10 | - v* 11 | 12 | jobs: 13 | build: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | steps: 18 | - uses: actions/checkout@v3 19 | - name: Install Node.js 20 | uses: actions/setup-node@v3 21 | with: 22 | node-version: '18.x' 23 | - name: Install npm dependencies 24 | run: npm ci 25 | - name: Run build task 26 | run: npm run build 27 | env: 28 | CI: false 29 | REACT_APP_FIREBASE_API_KEY: ${{ vars.FIREBASE_API_KEY }} 30 | REACT_APP_FIREBASE_APP_ID: ${{ vars.FIREBASE_APP_ID }} 31 | REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ vars.FIREBASE_AUTH_DOMAIN }} 32 | REACT_APP_FIREBASE_DATABASE_URL: ${{ vars.FIREBASE_DATABASE_URL }} 33 | REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ vars.FIREBASE_MESSAGING_SENDER_ID }} 34 | REACT_APP_FIREBASE_PROJECT_ID: ${{ vars.FIREBASE_PROJECT_ID }} 35 | REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ vars.FIREBASE_STORAGE_BUCKET }} 36 | REACT_APP_QB_APP_ID: ${{ vars.QB_PROD_APP_ID }} 37 | REACT_APP_QB_ACCOUNT_KEY: ${{ vars.QB_PROD_ACCOUNT_KEY }} 38 | REACT_APP_QB_ENDPOINT_API: ${{ vars.QB_ENDPOINT_API }} 39 | REACT_APP_QB_ENDPOINT_CHAT: ${{ vars.QB_ENDPOINT_CHAT }} 40 | REACT_APP_API_BASE_URL: ${{ vars.API_PROD_BASE_URL }} 41 | REACT_APP_API_AUTH_PATH: ${{ vars.API_AUTH_PATH }} 42 | - name: Deploy to Server 43 | uses: easingthemes/ssh-deploy@main 44 | with: 45 | SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }} 46 | ARGS: "-rlgoDzvc -i --delete" 47 | SOURCE: "" 48 | REMOTE_HOST: ${{ secrets.REMOTE_PROD_HOST }} 49 | REMOTE_USER: ${{ secrets.REMOTE_USER }} 50 | TARGET: ${{ secrets.REMOTE_PROD_TARGET }} 51 | EXCLUDE: "/dist/, /node_modules/" 52 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /public 3 | package.json 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": false, 6 | "singleQuote": true, 7 | "trailingComma": "all", 8 | "endOfLine": "lf", 9 | "arrowParens": "always" 10 | } 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024, QuickBlox 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Q-Municate 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Configure application 6 | 7 | You need to create a ".env" file. After that you need to set the following keys with your credentials: 8 | 9 | ```yaml 10 | # Firebase credentials 11 | REACT_APP_FIREBASE_API_KEY= 12 | REACT_APP_FIREBASE_APP_ID= 13 | REACT_APP_FIREBASE_AUTH_DOMAIN= 14 | REACT_APP_FIREBASE_DATABASE_URL= 15 | REACT_APP_FIREBASE_MESSAGING_SENDER_ID= 16 | REACT_APP_FIREBASE_PROJECT_ID= 17 | REACT_APP_FIREBASE_STORAGE_BUCKET= 18 | 19 | # QuickBlox credentials 20 | REACT_APP_QB_APP_ID= 21 | REACT_APP_QB_ACCOUNT_KEY= 22 | REACT_APP_QB_ENDPOINT_API= 23 | REACT_APP_QB_ENDPOINT_CHAT= 24 | 25 | # OpenAI Proxy and Auth endpoint 26 | REACT_APP_API_BASE_URL= 27 | REACT_APP_API_AUTH_PATH= 28 | ``` 29 | 30 | ## Q-Municate Server 31 | 32 | For the application to work correctly, you must use [Q-Municate Server](https://github.com/QuickBlox/q-municate-server). 33 | With its help, user authentication and the operation of all AI features take place. 34 | 35 | ## Available Scripts 36 | 37 | In the project directory, you can run: 38 | 39 | ### `npm start` 40 | 41 | Runs the app in the development mode.\ 42 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 43 | 44 | The page will reload when you make changes.\ 45 | You may also see any lint errors in the console. 46 | 47 | ### `npm test` 48 | 49 | Launches the test runner in the interactive watch mode.\ 50 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 51 | 52 | ### `npm run build` 53 | 54 | Builds the app for production to the `build` folder.\ 55 | It correctly bundles React in production mode and optimizes the build for the best performance. 56 | 57 | The build is minified and the filenames include the hashes.\ 58 | Your app is ready to be deployed! 59 | 60 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 61 | 62 | ### `npm run eject` 63 | 64 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 65 | 66 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 67 | 68 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 69 | 70 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 71 | 72 | ## Learn More 73 | 74 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 75 | 76 | To learn React, check out the [React documentation](https://reactjs.org/). 77 | 78 | ### Code Splitting 79 | 80 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 81 | 82 | ### Analyzing the Bundle Size 83 | 84 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 85 | 86 | ### Making a Progressive Web App 87 | 88 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 89 | 90 | ### Advanced Configuration 91 | 92 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 93 | 94 | ### Deployment 95 | 96 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 97 | 98 | ### `npm run build` fails to minify 99 | 100 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "q-municate", 3 | "version": "4.0.0", 4 | "private": true, 5 | "devDependencies": { 6 | "@types/node": "^16.18.28", 7 | "@types/react": "^18.2.6", 8 | "@types/react-dom": "^18.2.4", 9 | "@typescript-eslint/eslint-plugin": "^5.62.0", 10 | "@typescript-eslint/parser": "^5.62.0", 11 | "eslint": "^8.0.1", 12 | "eslint-config-standard-with-typescript": "^36.0.1", 13 | "eslint-plugin-import": "^2.25.2", 14 | "eslint-plugin-n": "^15.0.0 || ^16.0.0 ", 15 | "eslint-plugin-promise": "^6.0.0", 16 | "eslint-plugin-react": "^7.33.2", 17 | "node-sass": "^8.0.0", 18 | "prettier": "3.1.1", 19 | "react-scripts": "5.0.1", 20 | "typescript": "^4.9.5" 21 | }, 22 | "dependencies": { 23 | "@firebase/app": "^0.9.25", 24 | "@firebase/auth": "^1.5.1", 25 | "classnames": "^2.3.2", 26 | "quickblox": "^2.16.1", 27 | "quickblox-react-ui-kit": "0.2.8", 28 | "react": "^18.2.0", 29 | "react-dom": "^18.2.0", 30 | "react-phone-number-input": "^3.3.7", 31 | "web-vitals": "^2.1.4" 32 | }, 33 | "scripts": { 34 | "start": "react-scripts start", 35 | "build": "react-scripts build", 36 | "test": "react-scripts test", 37 | "eject": "react-scripts eject", 38 | "lint": "eslint ./src", 39 | "lint:fix": "eslint --fix ./src" 40 | }, 41 | "eslintConfig": { 42 | "extends": [ 43 | "react-app", 44 | "react-app/jest" 45 | ] 46 | }, 47 | "browserslist": { 48 | "production": [ 49 | ">0.2%", 50 | "not dead", 51 | "not op_mini all" 52 | ], 53 | "development": [ 54 | "last 1 chrome version", 55 | "last 1 firefox version", 56 | "last 1 safari version" 57 | ] 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuickBlox/q-municate-web/c1f9158615232ac6b5d372ad11030d51871491bb/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Q-Municate 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Q-Municate", 3 | "name": "Q-Municate", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#3978FC", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: / 4 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react' 2 | import RootScreen from './screens/RootScreen' 3 | import SignInScreen from './screens/SignInScreen' 4 | import { useAuth } from './hooks' 5 | import LoaderComponent from './components/NewLoader/LoaderComponent' 6 | 7 | export default function App() { 8 | const { 9 | refs: { screenRef }, 10 | data: { 11 | session, 12 | user, 13 | }, 14 | handlers: { 15 | init, 16 | sendCode, 17 | codeVerification, 18 | logout, 19 | } 20 | } = useAuth() 21 | 22 | useEffect(() => { 23 | void init() 24 | }, []) 25 | 26 | if (user && !session) { 27 | return 28 | } 29 | 30 | if (session) { 31 | return 32 | } 33 | 34 | return ( 35 | 40 | ) 41 | } 42 | -------------------------------------------------------------------------------- /src/assets/img/avatar-big.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/img/avatar-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/img/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/img/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/img/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/img/dropdown-big.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/img/dropdown-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/img/index.ts: -------------------------------------------------------------------------------- 1 | export { ReactComponent as LogoSvg } from './logo.svg' 2 | export { ReactComponent as Dropdown } from './dropdown-big.svg' 3 | export { ReactComponent as Back } from './back.svg' 4 | export { ReactComponent as Avatar } from './avatar-small.svg' 5 | export { ReactComponent as DropdownSmall } from './dropdown-small.svg' 6 | export { ReactComponent as Close } from './close.svg' 7 | export { ReactComponent as AvatarBig } from './avatar-big.svg' 8 | export { ReactComponent as Remove } from './remove.svg' 9 | export { ReactComponent as Check } from './check.svg' 10 | -------------------------------------------------------------------------------- /src/assets/img/loader.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/img/previous.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/img/remove.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import { type ButtonHTMLAttributes, type DetailedHTMLProps } from 'react' 2 | import cn from 'classnames' 3 | 4 | import './styles.scss' 5 | import Loader from '../Loader' 6 | 7 | type HTMLButtonProps = DetailedHTMLProps< 8 | ButtonHTMLAttributes, 9 | HTMLButtonElement 10 | > 11 | 12 | export interface ButtonProps extends HTMLButtonProps { 13 | theme?: 'primary' | 'default' 14 | loading?: boolean 15 | size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' 16 | mobileSize?: 'sm' | 'auto' 17 | } 18 | 19 | export default function Button(props: ButtonProps) { 20 | const { 21 | className, 22 | theme = 'default', 23 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 24 | size = 'md', 25 | mobileSize, 26 | loading, 27 | disabled, 28 | type, 29 | children, 30 | ...buttonProps 31 | } = props 32 | 33 | return ( 34 | 51 | ) 52 | } 53 | -------------------------------------------------------------------------------- /src/components/Button/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/theme_colors_scheme"; 2 | 3 | .button { 4 | cursor: pointer; 5 | border-radius: 4px; 6 | font-weight: 700; 7 | font-size: 14px; 8 | line-height: 16px; 9 | letter-spacing: 0.4px; 10 | padding: 8px 16px; 11 | border: none; 12 | outline: none; 13 | 14 | &:focus { 15 | outline: none; 16 | } 17 | } 18 | 19 | .button.button-sm { 20 | min-width: 133px; 21 | } 22 | 23 | .button.button-md { 24 | min-width: 160px; 25 | } 26 | 27 | .button.button-lg { 28 | padding-left: 10px; 29 | padding-right: 10px; 30 | } 31 | 32 | .button.button-xl { 33 | width: 91px; 34 | height: 32px; 35 | } 36 | 37 | .button.button-full { 38 | width: 100%; 39 | } 40 | 41 | .button.button-default { 42 | border: 1px solid var(--secondary-900); 43 | background-color: var(--Interface-background); 44 | color: var(--Secondary-elements); 45 | } 46 | 47 | .button.button-primary { 48 | background-color: var(--primary); 49 | color: $primary-a-100; 50 | } 51 | 52 | .button.button-disabled { 53 | background-color: var(--blue-5); 54 | color: var(--Tertiary-font); 55 | } 56 | 57 | @media screen and (max-width: 768px) { 58 | .button.m-button-sm { 59 | min-width: 133px; 60 | } 61 | 62 | .button.m-button-auto { 63 | min-width: auto; 64 | width: 100%; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/components/ErrorToast/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './styles.scss' 3 | 4 | interface ErrorToastProps { 5 | messageText: string 6 | } 7 | 8 | export const ErrorToast: React.FC = ({ 9 | messageText, 10 | }: ErrorToastProps) => { 11 | return ( 12 |
13 |
{messageText}
14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/components/ErrorToast/styles.scss: -------------------------------------------------------------------------------- 1 | .toast { 2 | background: var(--color-background-overlay); 3 | border-radius: 4px; 4 | opacity: 0.6000000238418579; 5 | padding: 4px 12px 4px 12px; 6 | margin-top: 36px; 7 | display: flex; 8 | flex-direction: column; 9 | gap: 10px; 10 | align-items: flex-start; 11 | justify-content: flex-start; 12 | position: absolute !important; 13 | top: 0; 14 | left: 50%; 15 | transform: translateX(-50%); 16 | } 17 | 18 | .message { 19 | color: var(--color-background); 20 | text-align: left; 21 | font: 500 12px/16px "Roboto", sans-serif; 22 | position: relative; 23 | display: flex; 24 | align-items: center; 25 | justify-content: flex-start; 26 | } 27 | -------------------------------------------------------------------------------- /src/components/Field/CountrySelect.tsx: -------------------------------------------------------------------------------- 1 | import countries from 'react-phone-number-input/locale/en.json' 2 | import cn from 'classnames' 3 | import { 4 | type Country, 5 | getCountries, 6 | getCountryCallingCode, 7 | } from 'react-phone-number-input' 8 | import flags from 'react-phone-number-input/flags' 9 | 10 | import './styles.scss' 11 | import { useEffect, useRef, useState } from 'react' 12 | import { Check, Dropdown } from '../../assets/img' 13 | 14 | const Flag = ({ 15 | country, 16 | className, 17 | }: { 18 | country: string 19 | className?: string 20 | }) => { 21 | const CountryFlag = flags[country as Country] ?? null 22 | 23 | return ( 24 | CountryFlag && ( 25 | 26 | 27 | 28 | ) 29 | ) 30 | } 31 | 32 | interface CountrySelectProps { 33 | value: Country 34 | className?: string 35 | onChange: (value: Country) => void 36 | } 37 | 38 | export default function CountrySelect({ 39 | value, 40 | onChange, 41 | className, 42 | }: CountrySelectProps) { 43 | const [isOpen, setIsOpen] = useState(false) 44 | const selectRef = useRef(null) 45 | 46 | const toggleDropdown = () => { 47 | setIsOpen(!isOpen) 48 | } 49 | 50 | const handleOptionClick = (country: Country) => { 51 | onChange(country) 52 | setIsOpen(false) 53 | } 54 | 55 | useEffect(() => { 56 | function handleClickOutside(event: MouseEvent) { 57 | if ( 58 | selectRef.current && 59 | !selectRef.current.contains(event.target as Node) 60 | ) { 61 | setIsOpen(false) 62 | } 63 | } 64 | 65 | document.addEventListener('click', handleClickOutside) 66 | 67 | return () => { 68 | document.removeEventListener('click', handleClickOutside) 69 | } 70 | }, []) 71 | 72 | return ( 73 |
74 |
75 |
76 | 77 | {`+${getCountryCallingCode(value)} (${ 78 | countries[value] 79 | })`} 80 |
81 | 82 |
83 |
    84 | {getCountries() 85 | .sort((a, b) => 86 | countries[a] 87 | .toLowerCase() 88 | .localeCompare(countries[b].toLowerCase()), 89 | ) 90 | .map((country) => ( 91 |
  • { 95 | handleOptionClick(country) 96 | }} 97 | value={country} 98 | > 99 |
    100 | 101 | {`+${getCountryCallingCode(country)} (${ 102 | countries[country] 103 | })`} 104 |
    105 | {country === value && } 106 |
    • 107 | ))} 108 |
109 |
110 | ) 111 | } 112 | -------------------------------------------------------------------------------- /src/components/Field/Input.tsx: -------------------------------------------------------------------------------- 1 | import { type DetailedHTMLProps, type InputHTMLAttributes } from 'react' 2 | import cn from 'classnames' 3 | 4 | type HTMLInputProps = DetailedHTMLProps< 5 | InputHTMLAttributes, 6 | HTMLInputElement 7 | > 8 | 9 | interface InputProps extends HTMLInputProps { 10 | type: 'email' | 'number' | 'password' | 'search' | 'text' | 'url' 11 | } 12 | 13 | export default function Input({ className, type, ...props }: InputProps) { 14 | return ( 15 |
16 | 17 |
18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /src/components/Field/PhoneInput.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | type Props, 3 | type DefaultInputComponentProps, 4 | } from 'react-phone-number-input' 5 | import ReactPhoneInput from 'react-phone-number-input/input' 6 | import cn from 'classnames' 7 | import 'react-phone-number-input/style.css' 8 | 9 | type PhoneInputProps = Props 10 | 11 | export default function PhoneInput({ 12 | className, 13 | inputComponent, 14 | ...props 15 | }: PhoneInputProps) { 16 | return ( 17 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /src/components/Field/PinInput.tsx: -------------------------------------------------------------------------------- 1 | import { type InputHTMLAttributes, forwardRef, type ForwardedRef } from 'react' 2 | import './styles.scss' 3 | 4 | interface PinInputProps extends InputHTMLAttributes { 5 | setCode: (value: string) => void 6 | } 7 | 8 | function PinInput({ value, setCode, ...rest }: PinInputProps, ref: ForwardedRef) { 9 | return ( 10 |
11 | { 19 | e.target.style.setProperty( 20 | '--digit', 21 | e.target.selectionStart!.toString(), 22 | ) 23 | 24 | setCode(e.target.value) 25 | }} 26 | pattern="\d{6}" 27 | {...rest} 28 | /> 29 |
30 | ) 31 | } 32 | 33 | export default forwardRef(PinInput) 34 | -------------------------------------------------------------------------------- /src/components/Field/Select.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | type MouseEvent as ReactMouseEvent, 3 | type FocusEvent, 4 | useState, 5 | type DetailedHTMLProps, 6 | type InputHTMLAttributes, 7 | } from 'react' 8 | import cn from 'classnames' 9 | import { DropdownSmall } from '../../assets/img' 10 | 11 | type HTMLInputProps = DetailedHTMLProps< 12 | InputHTMLAttributes, 13 | HTMLInputElement 14 | > 15 | 16 | interface SelectProps extends Omit { 17 | userName: string 18 | options: Array<{ label: string; value: string | number }> 19 | onChange: (value: string | number) => void 20 | version?: string 21 | } 22 | 23 | export default function Select(props: SelectProps) { 24 | const { className, options, onChange, userName, version, ...inputProps } = 25 | props 26 | const [isFocus, setIsFocus] = useState(false) 27 | const [isShowOptions, setIsShowOptions] = useState(false) 28 | 29 | const handleToggleShow = () => { 30 | setIsShowOptions(!isShowOptions) 31 | } 32 | 33 | const handleFocus = (e: FocusEvent) => { 34 | if (inputProps?.onFocus) { 35 | inputProps?.onFocus(e) 36 | } 37 | setIsFocus(true) 38 | } 39 | 40 | const handleBlur = (e: FocusEvent) => { 41 | if (inputProps?.onBlur) { 42 | inputProps?.onBlur(e) 43 | } 44 | setIsFocus(false) 45 | } 46 | 47 | const handleSelect = ( 48 | e: ReactMouseEvent, 49 | ) => { 50 | e.stopPropagation() 51 | const { dataset } = e.target as EventTarget & { 52 | dataset: { value?: string } 53 | } 54 | 55 | if (dataset.value) { 56 | onChange(dataset.value) 57 | setIsShowOptions(false) 58 | } 59 | } 60 | 61 | return ( 62 |
70 |
71 | 72 | {userName} 73 | 74 | 75 |
76 | {isShowOptions && ( 77 |
    83 | {options.map((option) => ( 84 |
  • 92 | {option.label} 93 |
    • 94 | ))} 95 |
  • {`v${version!}`}
    • 96 |
97 | )} 98 |
99 | ) 100 | } 101 | -------------------------------------------------------------------------------- /src/components/Field/styles.scss: -------------------------------------------------------------------------------- 1 | .field { 2 | border-radius: 4px; 3 | padding: 10px 14px; 4 | width: 100%; 5 | transition: box-shadow 0.2s ease-in-out; 6 | } 7 | 8 | textarea.field, 9 | input.field, 10 | .field input { 11 | outline: none; 12 | font-family: inherit; 13 | font-size: inherit; 14 | line-height: inherit; 15 | } 16 | 17 | input.field::-webkit-credentials-auto-fill-button, 18 | .field input::-webkit-credentials-auto-fill-button { 19 | visibility: hidden; 20 | } 21 | 22 | input.field[type="password"]::-ms-reveal, 23 | input.field[type="password"]::-ms-clear, 24 | .field input[type="password"]::-ms-reveal, 25 | .field input[type="password"]::-ms-clear { 26 | display: none; 27 | } 28 | 29 | textarea.field { 30 | min-height: 45px; 31 | resize: vertical; 32 | line-height: 1.38; 33 | height: 100%; 34 | } 35 | 36 | .field input { 37 | width: 100%; 38 | border: none; 39 | padding: 0; 40 | } 41 | 42 | textarea.field::placeholder, 43 | input.field::placeholder, 44 | .field input::placeholder { 45 | color: var(--blue-7); 46 | } 47 | 48 | textarea.field:focus, 49 | textarea.field:active, 50 | input.field:focus, 51 | input.field:active, 52 | .field.PhoneInput--focus, 53 | .field.select-field--focus, 54 | .field.date-field--focus { 55 | box-shadow: 0 4px 11px 4px var(--primary-100); 56 | } 57 | 58 | .flex-field { 59 | cursor: pointer; 60 | display: flex; 61 | align-items: center; 62 | justify-content: space-between; 63 | } 64 | 65 | .textarea-wrapper { 66 | position: relative; 67 | line-height: 0; 68 | } 69 | 70 | .textarea-wrapper .textarea-length { 71 | position: absolute; 72 | bottom: 10px; 73 | right: 12px; 74 | line-height: 1; 75 | color: var(--Secondary-elements); 76 | opacity: 0.5; 77 | } 78 | 79 | .field-wrapper { 80 | position: relative; 81 | display: flex; 82 | align-items: center; 83 | } 84 | 85 | .field-wrapper .icon { 86 | position: absolute; 87 | cursor: pointer; 88 | width: 24px; 89 | height: 24px; 90 | fill: #636d78; 91 | right: 12px; 92 | top: 17px; 93 | } 94 | /* CountrySelect */ 95 | 96 | .select { 97 | cursor: pointer; 98 | height: 44px; 99 | padding: 6px 8px; 100 | border-radius: 4px; 101 | border: 1px solid #636d78; 102 | position: relative; 103 | 104 | .select-header { 105 | display: flex; 106 | justify-content: space-between; 107 | align-items: center; 108 | height: 100%; 109 | } 110 | } 111 | 112 | .select .select-header .select-dropdown { 113 | cursor: pointer; 114 | width: 24px; 115 | height: 24px; 116 | fill: #0b1b0f; 117 | transition: transform 0.2s ease-in-out; 118 | } 119 | 120 | .select .select-header .select-dropdown.opened { 121 | transform: rotate(180deg); 122 | } 123 | 124 | .select .country-icon { 125 | margin-right: 6px; 126 | 127 | svg { 128 | width: 16px; 129 | height: 10px; 130 | } 131 | } 132 | 133 | .select .select-options .check-icon { 134 | display: inline; 135 | width: 16px; 136 | height: 16px; 137 | fill: #3978fc; 138 | } 139 | 140 | .select .select-options { 141 | position: absolute; 142 | z-index: 1; 143 | left: 0; 144 | top: calc(100% + 1px); 145 | width: 100%; 146 | max-height: 272px; 147 | overflow: auto; 148 | background-color: #fff; 149 | box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.04), 150 | 0px 3px 14px 0px rgba(0, 0, 0, 0.08); 151 | border-radius: 4px; 152 | transform: scale(0); 153 | transition: transform 0.2s ease-in-out; 154 | padding: 8px 0; 155 | 156 | &.opened { 157 | transform: scale(1); 158 | } 159 | } 160 | 161 | .select .select-options li:hover { 162 | cursor: pointer; 163 | background: rgb(207, 204, 204); 164 | } 165 | 166 | .select .select-options .option { 167 | display: flex; 168 | justify-content: space-between; 169 | align-items: center; 170 | padding: 6px 16px; 171 | } 172 | 173 | /* PinInput */ 174 | 175 | .input-container { 176 | display: flex; 177 | justify-content: center; 178 | } 179 | 180 | .input-container input:where([autocomplete="sms-code"]) { 181 | --digits: 6; 182 | --digit: 0; 183 | --ls: 2ch; 184 | --gap: 1.25; 185 | --bg-sz: calc(var(--ls) + 1ch); 186 | 187 | all: unset; 188 | background: linear-gradient( 189 | 90deg, 190 | #3978fc calc(var(--gap) * var(--ls)), 191 | transparent 0 192 | ), 193 | linear-gradient(90deg, #636d78 calc(var(--gap) * var(--ls)), transparent 0); 194 | background-position: calc(var(--digit) * var(--bg-sz)) bottom, 0 bottom; 195 | background-repeat: no-repeat, repeat-x; 196 | background-size: var(--bg-sz) 2px; 197 | 198 | font-size: 20px; 199 | font-weight: 400; 200 | line-height: 20px; 201 | inline-size: calc(var(--digits) * var(--bg-sz)); 202 | letter-spacing: var(--ls); 203 | 204 | clip-path: inset(0% calc(var(--ls) / 2) 0% 0%); 205 | padding-block: 1ch; 206 | padding-inline-start: calc(((var(--ls) - 1ch) / 2) * var(--gap)); 207 | margin-inline-start: calc(((var(--ls)) / 2) * var(--gap)); 208 | } 209 | 210 | /* Select */ 211 | 212 | .field .select-field { 213 | max-width: 150px; 214 | } 215 | 216 | .field.select-field { 217 | position: relative; 218 | background-color: #fff; 219 | } 220 | 221 | .select-field .select-app-version { 222 | text-align: center; 223 | opacity: 0.5; 224 | padding-top: 5px; 225 | } 226 | 227 | .field.select-field .flex-field-input.hidden { 228 | position: absolute; 229 | z-index: -1; 230 | opacity: 0; 231 | } 232 | 233 | .field.select-field .flex-field .user-name { 234 | font-weight: 400; 235 | font-size: 14px; 236 | line-height: 20px; 237 | letter-spacing: 0.25px; 238 | } 239 | 240 | .field.select-field .icon { 241 | cursor: pointer; 242 | margin-left: 2px; 243 | height: 16px; 244 | width: 16px; 245 | vertical-align: middle; 246 | fill: #0b1b0f; 247 | } 248 | 249 | .field.select-field .select-field-list { 250 | z-index: 2; 251 | position: absolute; 252 | top: 22px; 253 | right: 0; 254 | width: 135px; 255 | padding: 8px 0; 256 | margin: 0; 257 | border-radius: 5px; 258 | background-color: #fff; 259 | box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.04), 260 | 0px 3px 14px 0px rgba(0, 0, 0, 0.08); 261 | text-align: start; 262 | } 263 | 264 | .field.select-field .select-field-label { 265 | color: #0b1b0f; 266 | } 267 | 268 | .field.select-field .select-field-option { 269 | list-style-type: none; 270 | padding: 4px 8px 4px 16px; 271 | cursor: pointer; 272 | color: #0b1b0f; 273 | } 274 | 275 | .field.select-field .select-field-option[aria-selected="true"] { 276 | background-color: var(--SelectFieldOption-backgroundColor--selected); 277 | } 278 | 279 | .field.select-field .select-field-option:hover { 280 | background-color: rgb(207, 204, 204); 281 | } 282 | 283 | @media screen and (max-width: 400px) { 284 | .field.select-field .flex-field .user-name { 285 | display: none; 286 | } 287 | } 288 | -------------------------------------------------------------------------------- /src/components/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | import './style.scss' 2 | 3 | export default function Footer() { 4 | return ( 5 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /src/components/Footer/style.scss: -------------------------------------------------------------------------------- 1 | .footer-wrapper { 2 | display: flex; 3 | flex-shrink: 0; 4 | justify-content: flex-end; 5 | gap: 40px; 6 | padding: 30px 40px; 7 | 8 | a { 9 | font-weight: 400; 10 | font-size: 14px; 11 | line-height: 20px; 12 | letter-spacing: 0.25px; 13 | color: #90979f; 14 | text-decoration: none; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/Header/index.tsx: -------------------------------------------------------------------------------- 1 | import { type QBUser } from 'quickblox/quickblox' 2 | import { Avatar, LogoSvg } from '../../assets/img' 3 | import Select from '../Field/Select' 4 | import pckg from '../../../package.json' 5 | import './style.scss' 6 | 7 | interface HeaderProps { 8 | avatarUrl?: string | null 9 | options?: Array<{ label: string; value: string | number }> 10 | handleChange?: (value: string | number) => void 11 | user?: QBUser | null 12 | regex?: RegExp 13 | } 14 | 15 | export default function Header(props: HeaderProps) { 16 | const { handleChange, options, user, avatarUrl, regex } = props 17 | 18 | return ( 19 |
20 | 21 | {user && ( 22 |
23 | {avatarUrl ? ( 24 | Avatar 25 | ) : ( 26 | 27 | )} 28 | 141 | Upload 142 | 143 | )} 144 |
145 | Your name 146 |
147 | 154 | { 157 | setName('') 158 | }} 159 | /> 160 | 161 | Start with a letter, use only a-z, A-Z, hyphens, underscores, 162 | and spaces. Length: 3-50 characters. 163 | 164 |
165 |
166 | 174 | 184 |
185 |
186 | 187 | 188 | 189 | ) 190 | } 191 | -------------------------------------------------------------------------------- /src/components/modals/styles.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | background-color: rgba(0, 0, 0, 0.5); 8 | z-index: 1000; 9 | } 10 | 11 | .wrapper .content { 12 | position: fixed; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | background: #ffffff; 17 | width: 300px; 18 | border-radius: 4px; 19 | padding: 24px; 20 | z-index: 1001; 21 | } 22 | 23 | .wrapper .logout { 24 | height: 160px; 25 | } 26 | 27 | .wrapper .content .close { 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | width: 100%; 32 | height: 32px; 33 | } 34 | 35 | .wrapper .content .close span { 36 | font-weight: 500; 37 | font-size: 20px; 38 | line-height: 24px; 39 | letter-spacing: 0.0015px; 40 | } 41 | 42 | .wrapper .content .close .close-icon { 43 | cursor: pointer; 44 | width: 24px; 45 | height: 24px; 46 | fill: #202f3e; 47 | } 48 | 49 | .wrapper .content .buttons { 50 | display: flex; 51 | justify-content: flex-end; 52 | } 53 | 54 | .wrapper .content .buttons-logout { 55 | margin-top: 48px; 56 | } 57 | 58 | .wrapper .content .buttons button { 59 | font-weight: 700; 60 | font-size: 14px; 61 | line-height: 16px; 62 | letter-spacing: 0.4px; 63 | 64 | width: 93px; 65 | height: 32px; 66 | border-radius: 4px; 67 | padding: 8px 16px; 68 | border: 1px solid #202f3e; 69 | cursor: pointer; 70 | } 71 | 72 | .wrapper .content .buttons .cancel-btn { 73 | background-color: transparent; 74 | margin-right: 4px; 75 | color: #202f3e; 76 | } 77 | 78 | .wrapper .content .buttons .logout-btn { 79 | border: none; 80 | background-color: #ff3b30; 81 | margin-left: 4px; 82 | color: #ffffff; 83 | } 84 | 85 | .wrapper .setting { 86 | min-height: 340px; 87 | } 88 | 89 | .wrapper .content .user-info { 90 | margin-top: 24px; 91 | } 92 | 93 | .wrapper .content .user-info .user-avatar { 94 | display: flex; 95 | gap: 18px; 96 | align-items: center; 97 | margin: 8px 0px 24px; 98 | } 99 | 100 | .wrapper .content .user-info .user-avatar .avatar { 101 | width: 56px; 102 | height: 56px; 103 | border-radius: 50%; 104 | } 105 | 106 | .wrapper .content .user-info .user-avatar .avatar-icon circle { 107 | fill: #bcc1c5; 108 | } 109 | 110 | .wrapper .content .user-info .user-avatar .avatar-icon { 111 | width: 56px; 112 | height: 56px; 113 | fill: #636d78; 114 | } 115 | 116 | .wrapper .content .user-info .upload { 117 | font-size: 14px; 118 | font-weight: 700; 119 | line-height: 16px; 120 | letter-spacing: 0.4px; 121 | cursor: pointer; 122 | background: transparent; 123 | border: none; 124 | color: #3978fc; 125 | } 126 | 127 | .wrapper .content .user-info .remove { 128 | font-size: 14px; 129 | font-weight: 700; 130 | line-height: 16px; 131 | letter-spacing: 0.4px; 132 | cursor: pointer; 133 | background: transparent; 134 | border: none; 135 | color: #ff3b30; 136 | padding: 0; 137 | } 138 | 139 | .wrapper .content .user-info .upload input { 140 | display: none; 141 | } 142 | 143 | .wrapper .content .user-info span { 144 | font-weight: 400; 145 | font-size: 14px; 146 | line-height: 20px; 147 | letter-spacing: 0.25px; 148 | color: #0b1b0f; 149 | } 150 | 151 | .wrapper .content .user-info .user-name { 152 | position: relative; 153 | } 154 | 155 | .wrapper .content .user-info .user-name .name-input { 156 | padding: 6px 8px; 157 | border: 1px solid #636d78; 158 | max-width: 332px; 159 | height: 44px; 160 | margin-top: 8px; 161 | } 162 | 163 | .wrapper .content .user-info .user-name .remove-name { 164 | position: absolute; 165 | cursor: pointer; 166 | width: 24px; 167 | height: 24px; 168 | fill: #636d78; 169 | right: 12px; 170 | top: 17px; 171 | } 172 | 173 | .wrapper .content .user-info .user-name .hint-info { 174 | font-weight: 400; 175 | font-size: 11px; 176 | line-height: 10px; 177 | letter-spacing: 0.5px; 178 | color: #636d78; 179 | } 180 | 181 | .wrapper .content .user-info .user-name input::placeholder { 182 | font-weight: 400; 183 | font-size: 16px; 184 | line-height: 24px; 185 | letter-spacing: 0.16px; 186 | color: #636d78; 187 | } 188 | 189 | .wrapper .content .buttons-setting { 190 | margin-top: 24px; 191 | } 192 | 193 | .wrapper .content .buttons .finish-btn { 194 | border: none; 195 | background-color: #3978fc; 196 | margin-left: 4px; 197 | color: #ffffff; 198 | } 199 | 200 | .wrapper .content .buttons .finish-btn.disable { 201 | border: none; 202 | background-color: #bcc1c5; 203 | margin-left: 4px; 204 | color: #636d78; 205 | } 206 | -------------------------------------------------------------------------------- /src/configs/QBconfig.ts: -------------------------------------------------------------------------------- 1 | export const QBConfig = { 2 | credentials: { 3 | appId: Number(process.env.REACT_APP_QB_APP_ID!), 4 | accountKey: process.env.REACT_APP_QB_ACCOUNT_KEY!, 5 | authKey: '', 6 | authSecret: '', 7 | sessionToken: '', 8 | }, 9 | configAIApi: { 10 | AIAnswerAssistWidgetConfig: { 11 | organizationName: 'Quickblox', 12 | openAIModel: 'gpt-3.5-turbo', 13 | apiKey: '', 14 | maxTokens: 3584, 15 | useDefault: true, 16 | proxyConfig: { 17 | api: 'v1/chat/completions', 18 | servername: process.env.REACT_APP_API_BASE_URL!, 19 | port: '', 20 | }, 21 | }, 22 | AITranslateWidgetConfig: { 23 | organizationName: 'Quickblox', 24 | openAIModel: 'gpt-3.5-turbo', 25 | apiKey: '', 26 | maxTokens: 3584, 27 | useDefault: true, 28 | defaultLanguage: 'Ukrainian', 29 | languages: ['Ukrainian', 'English', 'French', 'Portuguese', 'German'], 30 | proxyConfig: { 31 | api: 'v1/chat/completions', 32 | servername: process.env.REACT_APP_API_BASE_URL!, 33 | port: '', 34 | }, 35 | }, 36 | AIRephraseWidgetConfig: { 37 | organizationName: 'Quickblox', 38 | openAIModel: 'gpt-3.5-turbo', 39 | apiKey: '', 40 | maxTokens: 3584, 41 | useDefault: true, 42 | defaultTone: 'Professional', 43 | Tones: [ 44 | { 45 | name: 'Professional Tone', 46 | description: 47 | 'This would edit messages to sound more formal, using technical vocabulary, clear sentence structures, and maintaining a respectful tone. It would avoid colloquial language and ensure appropriate salutations and sign-offs', 48 | iconEmoji: '👔', 49 | }, 50 | { 51 | name: 'Friendly Tone', 52 | description: 53 | 'This would adjust messages to reflect a casual, friendly tone. It would incorporate casual language, use emoticons, exclamation points, and other informalities to make the message seem more friendly and approachable.', 54 | iconEmoji: '🤝', 55 | }, 56 | { 57 | name: 'Encouraging Tone', 58 | description: 59 | 'This tone would be useful for motivation and encouragement. It would include positive words, affirmations, and express support and belief in the recipient.', 60 | iconEmoji: '💪', 61 | }, 62 | { 63 | name: 'Empathetic Tone', 64 | description: 65 | 'This tone would be utilized to display understanding and empathy. It would involve softer language, acknowledging feelings, and demonstrating compassion and support.', 66 | iconEmoji: '🤲', 67 | }, 68 | { 69 | name: 'Neutral Tone', 70 | description: 71 | 'For times when you want to maintain an even, unbiased, and objective tone. It would avoid extreme language and emotive words, opting for clear, straightforward communication.', 72 | iconEmoji: '😐', 73 | }, 74 | { 75 | name: 'Assertive Tone', 76 | description: 77 | 'This tone is beneficial for making clear points, standing ground, or in negotiations. It uses direct language, is confident, and does not mince words.', 78 | iconEmoji: '🔨', 79 | }, 80 | { 81 | name: 'Instructive Tone', 82 | description: 83 | 'This tone would be useful for tutorials, guides, or other teaching and training materials. It is clear, concise, and walks the reader through steps or processes in a logical manner.', 84 | iconEmoji: '📖', 85 | }, 86 | { 87 | name: 'Persuasive Tone', 88 | description: 89 | 'This tone can be used when trying to convince someone or argue a point. It uses persuasive language, powerful words, and logical reasoning.', 90 | iconEmoji: '☝️', 91 | }, 92 | { 93 | name: 'Sarcastic/Ironic Tone', 94 | description: 95 | 'This tone can make the communication more humorous or show an ironic stance. It is harder to implement as it requires the AI to understand nuanced language and may not always be taken as intended by the reader.', 96 | iconEmoji: '😏', 97 | }, 98 | { 99 | name: 'Poetic Tone', 100 | description: 101 | 'This would add an artistic touch to messages, using figurative language, rhymes, and rhythm to create a more expressive text.', 102 | iconEmoji: '🎭', 103 | }, 104 | ], 105 | proxyConfig: { 106 | api: 'v1/chat/completions', 107 | servername: process.env.REACT_APP_API_BASE_URL!, 108 | port: '', 109 | }, 110 | }, 111 | }, 112 | appConfig: { 113 | maxFileSize: 10 * 1024 * 1024, 114 | sessionTimeOut: 122, 115 | chatProtocol: { 116 | active: 2, 117 | }, 118 | debug: true, 119 | enableForwarding: true, 120 | enableReplying: true, 121 | regexUserName: '^(?=[a-zA-Z])[-a-zA-Z_ ]{3,49}(?(null) 25 | const [user, setUser] = useState(null) 26 | 27 | const init = async () => { 28 | prepareSDK() 29 | const firebaseAuth = getAuth() 30 | await firebaseAuth.setPersistence(browserLocalPersistence) 31 | const firebaseUser = firebaseAuth.currentUser 32 | 33 | if (firebaseUser) { 34 | setUser(firebaseUser) 35 | 36 | await restoreSession(firebaseUser) 37 | } 38 | } 39 | 40 | const logout = () => { 41 | const firebaseAuth = getAuth() 42 | void firebaseAuth.signOut() 43 | 44 | setUser(null) 45 | setSession(null) 46 | qbUIKitContext.release() 47 | } 48 | 49 | const sendCode = async (phone: string) => { 50 | const isUpdated = updateReCaptcha() 51 | 52 | if (isUpdated && reCaptcha.current?.verifier) { 53 | const firebaseAuth = getAuth() 54 | 55 | const confirmationResult = await signInWithPhoneNumber( 56 | firebaseAuth, 57 | phone, 58 | reCaptcha.current.verifier, 59 | ) 60 | 61 | return confirmationResult 62 | } 63 | 64 | return null 65 | } 66 | 67 | const loginWithFirebase = async (firebaseUser: User) => { 68 | const firebaseToken = await firebaseUser.getIdToken(true) 69 | 70 | const { session }: { session: QBSession } = await fetch( 71 | process.env.REACT_APP_API_BASE_URL! + process.env.REACT_APP_API_AUTH_PATH!, 72 | { 73 | method: 'POST', 74 | headers: { 75 | 'Content-Type': 'application/json', 76 | }, 77 | body: JSON.stringify({ 78 | access_token: firebaseToken 79 | }) 80 | } 81 | // eslint-disable-next-line @typescript-eslint/promise-function-async 82 | ).then(res => res.json()) 83 | 84 | await QBStartSessionWithToken(session.token) 85 | 86 | await QBChatConnect({ 87 | userId: session.user_id, 88 | password: session.token, 89 | }) 90 | 91 | await qbUIKitContext.authorize({ 92 | userId: session.user_id, 93 | password: session.token, 94 | userName: '', 95 | sessionToken: session.token, 96 | }) 97 | 98 | return session 99 | } 100 | 101 | const codeVerification = async (confirmation?: ConfirmationResult | null, code?: string | null) => { 102 | if (!confirmation) { 103 | throw new Error('No confirmation result') 104 | } 105 | 106 | if (!code) { 107 | throw new Error('Missing verification code') 108 | } 109 | const userCredential = await confirmation.confirm(code) 110 | 111 | const session = await loginWithFirebase(userCredential.user) 112 | 113 | setSession(session) 114 | } 115 | 116 | const restoreSession = async (firebaseUser: User) => { 117 | const session = await loginWithFirebase(firebaseUser) 118 | 119 | setSession(session) 120 | 121 | qbUIKitContext.setSubscribeOnSessionExpiredListener(() => { 122 | console.log('[Q-Municate] React ui-kit session expired') 123 | void refreshToken() 124 | }) 125 | 126 | // @ts-expect-error types is absent 127 | QB.chat.onSessionExpiredListener = function (error) { 128 | if (error) { 129 | console.log('[Q-Municate] QB session unexpired - error: ', error) 130 | } else { 131 | console.log('[Q-Municate] QB session expired') 132 | void refreshToken() 133 | } 134 | } 135 | } 136 | 137 | const refreshToken = async () => { 138 | const firebaseUser = getAuth().currentUser 139 | 140 | if (!firebaseUser) throw Error() 141 | 142 | const session = await loginWithFirebase(firebaseUser) 143 | 144 | setSession(session) 145 | } 146 | 147 | return { 148 | refs: { screenRef }, 149 | data: { 150 | session, 151 | user, 152 | }, 153 | handlers: { 154 | init, 155 | logout, 156 | sendCode, 157 | codeVerification, 158 | restoreSession, 159 | }, 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /src/hooks/useIsOffLine.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | export default function useIsOffLine() { 4 | const [isOnLine, setIsOnLine] = useState(window.navigator.onLine) 5 | 6 | useEffect(() => { 7 | const onChange = () => { 8 | setIsOnLine(window.navigator.onLine) 9 | } 10 | 11 | window.addEventListener('online', onChange) 12 | window.addEventListener('offline', onChange) 13 | 14 | return () => { 15 | window.removeEventListener('online', onChange) 16 | window.removeEventListener('offline', onChange) 17 | } 18 | }, []) 19 | 20 | return !isOnLine 21 | } 22 | -------------------------------------------------------------------------------- /src/hooks/useModal.ts: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | 3 | export default function useModal() { 4 | const theme = localStorage.getItem('theme') 5 | const [options, setOptions] = useState([ 6 | { label: 'Settings', value: 'settings' }, 7 | { label: 'Light Theme', value: theme ?? 'light' }, 8 | // { label: "Dark Theme", value: "dark-theme" }, 9 | { label: 'Log out', value: 'logout' }, 10 | ]) 11 | const [selectedValue, setSelectedValue] = useState('') 12 | 13 | const handleChange = (value: string | number) => { 14 | if (value === 'dark') { 15 | localStorage.setItem('theme', value) 16 | document.documentElement.setAttribute('data-theme', value) 17 | setOptions([ 18 | { label: 'Settings', value: 'settings' }, 19 | { label: 'Light Theme', value: 'light' }, 20 | { label: 'Log out', value: 'logout' }, 21 | ]) 22 | } else if (value === 'light') { 23 | localStorage.setItem('theme', value) 24 | document.documentElement.setAttribute('data-theme', value) 25 | setOptions([ 26 | { label: 'Settings', value: 'settings' }, 27 | { label: 'Dark Theme', value: 'dark' }, 28 | { label: 'Log out', value: 'logout' }, 29 | ]) 30 | } 31 | setSelectedValue(value) 32 | } 33 | 34 | return { 35 | data: { options, selectedValue, theme }, 36 | actions: { setSelectedValue }, 37 | handlers: { handleChange }, 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/hooks/useReCaptcha.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react' 2 | import { getAuth, RecaptchaVerifier } from '@firebase/auth' 3 | 4 | const initReCaptcha = (container: HTMLDivElement, languageCode: string) => { 5 | const element = document.createElement('div') 6 | 7 | element.id = 'recaptcha' 8 | container.appendChild(element) 9 | const firebaseAuth = getAuth() 10 | 11 | firebaseAuth.languageCode = languageCode 12 | const verifier = new RecaptchaVerifier(firebaseAuth, 'recaptcha', { 13 | size: 'invisible', 14 | 'expired-callback': () => { 15 | verifier.clear() 16 | }, 17 | 'error-callback': () => { 18 | verifier.clear() 19 | }, 20 | }) 21 | 22 | // eslint-disable-next-line @typescript-eslint/no-floating-promises 23 | verifier.render() 24 | 25 | return { verifier, element } 26 | } 27 | 28 | export default function useReCaptcha() { 29 | const reCaptcha = useRef<{ 30 | element: HTMLDivElement 31 | verifier: RecaptchaVerifier 32 | }>() 33 | const screenRef = useRef(null) 34 | 35 | const updateReCaptcha = () => { 36 | if (screenRef.current && reCaptcha.current?.verifier) { 37 | reCaptcha.current.verifier?.clear() 38 | 39 | if ( 40 | reCaptcha.current?.element && 41 | screenRef.current?.contains(reCaptcha.current.element) 42 | ) { 43 | screenRef.current?.removeChild(reCaptcha.current.element) 44 | } 45 | 46 | reCaptcha.current = initReCaptcha(screenRef.current, 'en') 47 | 48 | return true 49 | } 50 | 51 | return false 52 | } 53 | 54 | useEffect(() => { 55 | if (screenRef.current) { 56 | reCaptcha.current = initReCaptcha(screenRef.current, 'en') 57 | } 58 | 59 | return () => { 60 | if (reCaptcha.current) { 61 | reCaptcha.current.verifier?.clear() 62 | 63 | if ( 64 | reCaptcha.current?.element && 65 | screenRef.current?.contains(reCaptcha.current.element) 66 | ) { 67 | screenRef.current?.removeChild(reCaptcha.current.element) 68 | } 69 | } 70 | } 71 | }, []) 72 | 73 | return { screenRef, reCaptcha, updateReCaptcha } 74 | } 75 | -------------------------------------------------------------------------------- /src/hooks/useTimer.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from 'react' 2 | 3 | export default function useTimer(duration: number) { 4 | const SECOND = 1000 5 | const [timer, setTimer] = useState(duration) 6 | const [timerIsOver, setTimerIsOver] = useState(true) 7 | const [activeTimer, setActiveTimer] = useState(false) 8 | const intervalRef = useRef() 9 | 10 | useEffect(() => { 11 | if (activeTimer) { 12 | setTimerIsOver(false) 13 | 14 | intervalRef.current = window.setInterval(() => { 15 | setTimer((currenTimer: number) => { 16 | if (currenTimer > 0) { 17 | return currenTimer - 1 18 | } 19 | 20 | window.clearInterval(intervalRef.current) 21 | intervalRef.current = undefined 22 | setTimerIsOver(true) 23 | setActiveTimer(false) 24 | 25 | return duration 26 | }) 27 | }, SECOND) 28 | } else { 29 | window.clearInterval(intervalRef.current) 30 | intervalRef.current = undefined 31 | } 32 | 33 | return () => { 34 | window.clearInterval(intervalRef.current) 35 | intervalRef.current = undefined 36 | } 37 | }, [activeTimer]) 38 | 39 | return { timer, timerIsOver, setActiveTimer } 40 | } 41 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: border-box; 9 | } 10 | 11 | a, 12 | button { 13 | cursor: revert; 14 | } 15 | 16 | ol, 17 | ul, 18 | menu { 19 | list-style: none; 20 | padding: 0; 21 | } 22 | 23 | body { 24 | background-color: #ffffff; 25 | } 26 | 27 | html, body, #root { 28 | height: 100%; 29 | } 30 | 31 | #root { 32 | display: flex; 33 | flex-direction: column; 34 | } 35 | 36 | .grecaptcha-badge { 37 | display: none; 38 | } 39 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client' 2 | 3 | import './index.scss' 4 | import App from './App' 5 | import reportWebVitals from './reportWebVitals' 6 | 7 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion 8 | const root = ReactDOM.createRoot(document.getElementById('root')!) 9 | 10 | root.render( 11 | 12 | ) 13 | 14 | reportWebVitals() 15 | -------------------------------------------------------------------------------- /src/qb-api-calls/index.ts: -------------------------------------------------------------------------------- 1 | import QB from 'quickblox/quickblox' 2 | import type { 3 | QBContentObject, 4 | ListUserParams, 5 | QBSession, 6 | QBUser, 7 | ListUserResponse 8 | } from 'quickblox/quickblox' 9 | import { QBConfig } from '../configs' 10 | import { stringifyError } from '../utils/parse' 11 | 12 | export const prepareSDK = () => { 13 | if ((window as any).QB === undefined) { 14 | (window as any).QB = QB 15 | } 16 | 17 | QB.initWithAppId( 18 | QBConfig.credentials.appId, 19 | QBConfig.credentials.accountKey, 20 | QBConfig.appConfig, 21 | ) 22 | } 23 | 24 | export function QBUserList(params: ListUserParams) { 25 | return new Promise((resolve, reject) => { 26 | QB.users.listUsers(params, (error, result) => { 27 | if (result) { 28 | resolve(result) 29 | } else { 30 | reject(stringifyError(error)) 31 | } 32 | }) 33 | }) 34 | } 35 | 36 | export function QBStartSessionWithToken(token: string) { 37 | return new Promise((resolve, reject) => { 38 | QB.startSessionWithToken( 39 | token, 40 | ( 41 | sessionError: any, 42 | result: { session: QBSession } | null | undefined, 43 | ) => { 44 | if (result?.session) { 45 | resolve(result.session) 46 | } else { 47 | reject(sessionError || new Error('Session result is missing or invalid.')) 48 | } 49 | }, 50 | ) 51 | }) 52 | } 53 | 54 | export function QBChatConnect(params: ChatConnectParams) { 55 | return new Promise((resolve, reject) => { 56 | QB.chat.connect(params, (error, result) => { 57 | if (result) { 58 | resolve(result) 59 | } else { 60 | reject(error) 61 | } 62 | }) 63 | }) 64 | } 65 | 66 | export function QBUserUpdate( 67 | userId: QBUser['id'], 68 | user: Partial, 69 | ) { 70 | return new Promise((resolve, reject) => { 71 | QB.users.update(userId, user, (error, result) => { 72 | if (result) { 73 | resolve(result) 74 | } else { 75 | reject(stringifyError(error)) 76 | } 77 | }) 78 | }) 79 | } 80 | 81 | export function QBCreateContent(file: { 82 | name: string 83 | file: Buffer 84 | type: string 85 | size: number 86 | public?: boolean | undefined 87 | }) { 88 | return new Promise((resolve, reject) => { 89 | QB.content.createAndUpload(file, (error, result) => { 90 | if (result) { 91 | resolve(result) 92 | } else { 93 | reject(stringifyError(error)) 94 | } 95 | }) 96 | }) 97 | } 98 | 99 | export function QBGetUserAvatar( 100 | fileId: QBContentObject['id'], 101 | ) { 102 | return new Promise((resolve, reject) => { 103 | QB.content.getInfo(fileId, (error, result) => { 104 | if (result?.blob.uid) { 105 | resolve(QB.content.privateUrl(result.blob.uid)) 106 | } else { 107 | reject(stringifyError(error) || new Error('No avatar')) 108 | } 109 | }) 110 | }) 111 | } 112 | 113 | export function QBDeleteUserAvatar(fileId: QBContentObject['id']) { 114 | return new Promise((resolve, reject) => { 115 | QB.content.delete(fileId, (error, result) => { 116 | if (result) { 117 | resolve(result) 118 | } else { 119 | reject(stringifyError(error)) 120 | } 121 | }) 122 | }) 123 | } 124 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { type ReportHandler } from 'web-vitals' 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | // eslint-disable-next-line @typescript-eslint/no-floating-promises 6 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 7 | getCLS(onPerfEntry) 8 | getFID(onPerfEntry) 9 | getFCP(onPerfEntry) 10 | getLCP(onPerfEntry) 11 | getTTFB(onPerfEntry) 12 | }) 13 | } 14 | } 15 | 16 | export default reportWebVitals 17 | -------------------------------------------------------------------------------- /src/screens/RootScreen/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | QuickBloxUIKitDesktopLayout, 3 | QuickBloxUIKitProvider, 4 | } from 'quickblox-react-ui-kit' 5 | import { useEffect, useState } from 'react' 6 | import type { QBSession, QBUser } from 'quickblox/quickblox' 7 | 8 | import { QBConfig } from '../../configs/QBconfig' 9 | import Header from '../../components/Header' 10 | import LoaderComponent from '../../components/NewLoader/LoaderComponent' 11 | import useModal from '../../hooks/useModal' 12 | import LogoutModal from '../../components/modals/LogoutModal' 13 | import SettingModal from '../../components/modals/SettingModal' 14 | import { QBGetUserAvatar, QBUserList } from '../../qb-api-calls' 15 | 16 | const regex = new RegExp(QBConfig.appConfig.regexUserName) 17 | 18 | interface RootScreenProps { 19 | session: QBSession 20 | logout: VoidFunction 21 | } 22 | 23 | const RootScreen = (props: RootScreenProps) => { 24 | const { session, logout } = props 25 | const { 26 | data: { options, selectedValue }, 27 | actions: { setSelectedValue }, 28 | handlers: { handleChange }, 29 | } = useModal() 30 | 31 | const [user, setUser] = useState(null) 32 | const [avatarUrl, setAvatarUrl] = useState(null) 33 | 34 | const findUserById = async (userId: QBUser['id']) => { 35 | const userResult = await QBUserList({ 36 | filter: { field: 'id', param: 'in', value: [userId] }, 37 | }) 38 | const [userData] = userResult?.items ?? [] 39 | 40 | if (!userData?.user) { 41 | throw new Error('Error: User not found') 42 | } 43 | 44 | return userData.user 45 | } 46 | 47 | const handleReceiveUser = async () => { 48 | if (session) { 49 | const user = await findUserById(session.user_id) 50 | 51 | setUser(user) 52 | 53 | if ((user && !user?.full_name) || (user && !regex.test(user.full_name))) { 54 | setSelectedValue('settings') 55 | } 56 | } 57 | } 58 | 59 | const handleUserAvatar = async () => { 60 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 61 | // @ts-expect-error 62 | if (user?.blob_id) { 63 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 64 | // @ts-expect-error 65 | const userAvatarUrl = await QBGetUserAvatar(user.blob_id) 66 | setAvatarUrl(userAvatarUrl) 67 | } else { 68 | setAvatarUrl('') 69 | } 70 | } 71 | 72 | useEffect(() => { 73 | if (session?.user_id) { 74 | void handleReceiveUser() 75 | } 76 | }, [session.user_id]) 77 | 78 | useEffect(() => { 79 | void handleUserAvatar() 80 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 81 | // @ts-expect-error 82 | }, [user?.blob_id]) 83 | 84 | if (!user) { 85 | return 86 | } 87 | 88 | return ( 89 | 94 |
101 | 102 | 110 | 115 | 116 | ) 117 | } 118 | 119 | export default RootScreen 120 | -------------------------------------------------------------------------------- /src/screens/SignInScreen/index.tsx: -------------------------------------------------------------------------------- 1 | import { type FormEvent, useEffect, useRef, useState, type RefObject } from 'react' 2 | import cn from 'classnames' 3 | import type { Country } from 'react-phone-number-input' 4 | import type { ConfirmationResult } from '@firebase/auth' 5 | import { stringifyError } from 'quickblox-react-ui-kit' 6 | 7 | import PhoneInput from '../../components/Field/PhoneInput' 8 | import Button from '../../components/Button' 9 | import { Back } from '../../assets/img' 10 | import { useIsOffLine, useTimer } from '../../hooks' 11 | import Header from '../../components/Header' 12 | import CountrySelect from '../../components/Field/CountrySelect' 13 | import PinInput from '../../components/Field/PinInput' 14 | import { ErrorToast } from '../../components/ErrorToast' 15 | import Footer from '../../components/Footer' 16 | import './style.scss' 17 | 18 | interface SignInProps { 19 | screenRef: RefObject 20 | sendCode: (phone: string) => Promise 21 | codeVerification: (confirmation?: ConfirmationResult | null | undefined, code?: string | null | undefined) => Promise 22 | } 23 | 24 | const SignInScreen = (props: SignInProps) => { 25 | const { screenRef, sendCode, codeVerification } = props 26 | const isOffLine = useIsOffLine() 27 | const { timerIsOver, setActiveTimer } = useTimer(60) 28 | const codeRef = useRef(null) 29 | const [errorMessage, setErrorMessage] = useState('') 30 | const [country, setCountry] = useState('US') 31 | const [phone, setPhone] = useState('') 32 | const [code, setCode] = useState('') 33 | const [confirmation, setConfirmation] = useState( 34 | null, 35 | ) 36 | 37 | const handleGoBack = () => { 38 | setConfirmation(null) 39 | setCode('') 40 | } 41 | 42 | const handleRequestCode = async () => { 43 | try { 44 | const confirmationResult = await sendCode(phone) 45 | 46 | setConfirmation(confirmationResult) 47 | setActiveTimer(true) 48 | } catch (error) { 49 | setErrorMessage(stringifyError(error)) 50 | } 51 | } 52 | 53 | const handlePhoneSubmit = async (e: FormEvent) => { 54 | try { 55 | e.preventDefault() 56 | 57 | await handleRequestCode() 58 | } catch (error) { 59 | setErrorMessage(stringifyError(error)) 60 | } 61 | } 62 | 63 | const handleCodeSubmit = async (e: FormEvent) => { 64 | try { 65 | e.preventDefault() 66 | 67 | await codeVerification(confirmation, code) 68 | } catch (error) { 69 | setErrorMessage(stringifyError(error)) 70 | } 71 | } 72 | 73 | useEffect(() => { 74 | if (confirmation) { 75 | codeRef.current?.focus() 76 | } 77 | }, [confirmation]) 78 | 79 | return ( 80 | <> 81 |
82 |
83 | {errorMessage && } 84 |
85 |
89 |
90 |

Enter phone number

91 |
92 |
93 | 94 | 99 | 100 | { 108 | setPhone(e!) 109 | }} 110 | /> 111 |
112 | 120 |
121 |
125 |
126 | 127 |

Verify phone number

128 |
129 |
130 |
131 | Enter the 6-digit code we sent to 132 | {phone} 133 |
134 | 135 |
136 | 144 | {!isOffLine && timerIsOver && ( 145 | 148 | )} 149 |
150 |
151 |
152 |