From 5ca92dbe602ce29a0b3717ad13cd1ef2e33f91c8 Mon Sep 17 00:00:00 2001 From: dat Date: Fri, 14 Jul 2023 13:11:15 +0700 Subject: [PATCH 1/3] - Dropdowns not closing - Mobile UI issues --- .../onboarding/src/components/modal-add-work/index.tsx | 2 +- .../form-input/input-date-picker/InputDatePicker.tsx | 9 ++++++++- .../form-groups/form-input/input-select/InputSelect.tsx | 8 +++++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/apps/onboarding/src/components/modal-add-work/index.tsx b/src/apps/onboarding/src/components/modal-add-work/index.tsx index 970b3acc5..fc57b5ee7 100644 --- a/src/apps/onboarding/src/components/modal-add-work/index.tsx +++ b/src/apps/onboarding/src/components/modal-add-work/index.tsx @@ -172,7 +172,7 @@ const ModalAddWork: FC = (props: ModalAddWorkProps) => { dirty /> -
+
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx index f52fd6b66..563e76f0a 100644 --- a/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx +++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx @@ -106,7 +106,14 @@ const InputDatePicker: FC = (props: InputDatePickerProps) | undefined, + ) => { + event?.stopPropagation() + event?.preventDefault() + props.onChange?.(date) + }} placeholderText={props.placeholder || 'Select a date'} className={styles.datePickerWrapper} minDate={props.minDate} diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx index 1b331f81c..09525fe57 100644 --- a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx +++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx @@ -2,6 +2,7 @@ import { ChangeEvent, Dispatch, FC, + MouseEvent, MutableRefObject, ReactNode, SetStateAction, @@ -49,7 +50,12 @@ const InputSelect: FC = (props: InputSelectProps) => { const toggleMenu: () => void = () => setMenuIsVisible(wasVisible => !wasVisible) - const select: (option: InputSelectOption) => () => void = (option: InputSelectOption) => () => { + const select: (option: InputSelectOption) => (event: MouseEvent) => void + = (option: InputSelectOption) => ( + event: MouseEvent, + ) => { + event.stopPropagation() + event.preventDefault() props.onChange({ target: { value: option.value }, } as unknown as ChangeEvent) From d7e22571c7248d43a2e864f20e449287edfcfd03 Mon Sep 17 00:00:00 2001 From: dat Date: Fri, 14 Jul 2023 15:09:39 +0700 Subject: [PATCH 2/3] Merge branch 'dev' into onboarding --- .circleci/config.yml | 391 +++++++++--------- .environments/.env.dev | 3 - .environments/.env.prod | 3 - .environments/.env.qa | 3 - craco.config.js | 7 + package.json | 6 +- .../onboarding-base-modal/index.tsx | 1 - src/apps/onboarding/src/onboarding.routes.tsx | 11 +- .../EditMemberPropertyBtn.module.scss | 8 +- .../EditMemberPropertyBtn.tsx | 1 + .../EmptySection/EmptySection.module.scss | 5 + src/apps/profiles/src/config/constants.ts | 1 + src/apps/profiles/src/lib/helpers.ts | 15 + .../src/member-profile/MemberProfilePage.tsx | 9 +- .../src/member-profile/about-me/AboutMe.tsx | 2 - .../EducationAndCertifications.module.scss | 10 +- .../EducationAndCertifications.tsx | 49 +-- .../languages/MemberLanguages.module.scss | 2 +- .../ModifyLanguagesModal.module.scss | 5 + .../links/MemberLinks.module.scss | 2 +- .../OnboardingCompleted.module.scss | 15 + .../OnboardingCompleted.tsx | 63 +++ .../onboarding-complete/index.ts | 1 + .../page-layout/ProfilePageLayout.module.scss | 6 +- .../page-layout/ProfilePageLayout.tsx | 9 +- .../ModifyMemberNameModal.module.scss | 3 +- .../ModifyMemberNameModal.tsx | 60 ++- .../OpenForGigs/OpenForGigs.tsx | 2 + .../OpenForGigsModifyModal.module.scss | 7 +- .../OpenForGigsModifyModal.tsx | 16 +- .../profile-header/ProfileHeader.module.scss | 37 +- .../profile-header/ProfileHeader.tsx | 97 +++-- .../skills/MemberSkillsInfo.tsx | 13 +- .../ModifySkillsModal.module.scss | 19 + .../ModifySkillsModal/ModifySkillsModal.tsx | 33 +- .../ChallengeWinsBanner.module.scss | 30 +- .../ChallengeWinsBanner.tsx | 63 ++- .../tc-achievements/MemberTCAchievements.tsx | 2 +- .../TCOWinsBanner/TCOWinsBanner.tsx | 14 +- .../ModifyWorkExpirenceModal.module.scss | 33 +- .../ModifyWorkExpirenceModal.tsx | 284 +++++++------ .../work-expirence/WorkExpirence.module.scss | 1 + .../work-expirence/WorkExpirence.tsx | 34 +- .../WorkExpirenceCard.module.scss | 24 +- .../WorkExpirenceCard/WorkExpirenceCard.tsx | 4 +- src/config/constants.ts | 1 + src/config/environments/default.env.ts | 2 - .../environments/global-config.model.ts | 2 - src/config/environments/react-env.ts | 21 +- .../profile/data-providers/useMemberTraits.ts | 4 +- .../InputSkillSelector.tsx | 2 + .../use-member-skill-editor.tsx | 13 +- .../InputDatePicker.module.scss | 2 + .../input-date-picker/InputDatePicker.tsx | 20 +- .../input-multiselect/InputMultiselect.tsx | 8 + .../input-wrapper/InputWrapper.module.scss | 4 + .../modals/base-modal/BaseModal.tsx | 18 +- yarn.lock | 58 ++- 58 files changed, 1002 insertions(+), 557 deletions(-) create mode 100644 src/apps/profiles/src/member-profile/onboarding-complete/OnboardingCompleted.module.scss create mode 100644 src/apps/profiles/src/member-profile/onboarding-complete/OnboardingCompleted.tsx create mode 100644 src/apps/profiles/src/member-profile/onboarding-complete/index.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index 16e161844..e90308b05 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -2,36 +2,36 @@ version: 2.1 defaults: &defaults docker: - - image: node:16.14 + - image: node:16.14 deploy_defaults: &deploy_defaults docker: - - image: cimg/python:3.10.2 + - image: cimg/python:3.10.2 test_defaults: &test_defaults docker: - - image: cypress/browsers:node16.14.2-slim-chrome100-ff99-edge + - image: cypress/browsers:node16.14.2-slim-chrome100-ff99-edge install_build_dependency: &install_build_dependency name: Installation of build and deployment dependencies. command: | - apt update - apt install jq -y - apt install python3-pip -y - pip3 install awscli --upgrade + apt update + apt install jq -y + apt install python3-pip -y + pip3 install awscli --upgrade install_dependency: &install_dependency name: Installation of build and deployment dependencies. command: | - pip3 install awscli --upgrade + pip3 install awscli --upgrade install_deploysuite: &install_deploysuite name: Installation of install_deploysuite. command: | - git clone --branch v1.4.13 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript - cp ./../buildscript/master_deploy.sh . - cp ./../buildscript/buildenv.sh . - cp ./../buildscript/awsconfiguration.sh . + git clone --branch v1.4.13 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript + cp ./../buildscript/master_deploy.sh . + cp ./../buildscript/buildenv.sh . + cp ./../buildscript/awsconfiguration.sh . restore_cache_settings_for_build: &restore_cache_settings_for_build key: connect-node-modules-{{ checksum "yarn.lock" }} @@ -39,39 +39,39 @@ restore_cache_settings_for_build: &restore_cache_settings_for_build save_cache_settings: &save_cache_settings key: connect-node-modules-{{ checksum "yarn.lock" }} paths: - - node_modules + - node_modules running_yarn_eslint: &running_yarn_eslint name: Running Yarn eslint command: | - yarn add eslint -g - yarn lint + yarn add eslint -g + yarn lint running_yarn_build: &running_yarn_build name: Running Yarn Build command: | - source buildenvvar - yarn install - yarn build + source buildenvvar + yarn install + yarn build running_yarn_sb_build: &running_yarn_sb_build name: Running Yarn Storybook Build command: | - source buildenvvar - yarn sb:build + source buildenvvar + yarn sb:build running_yarn_test: &running_yarn_test name: Running Yarn Test Build command: | - yarn install - yarn cypress install - yarn build - yarn cy:ci + yarn install + yarn cypress install + yarn build + yarn cy:ci workspace_persist: &workspace_persist root: . paths: - - build + - build workspace_attach: &workspace_attach at: ./workspace @@ -79,18 +79,16 @@ workspace_attach: &workspace_attach build_configuration_fetch: &build_configuration_fetch name: "configuring environment" command: | - ./awsconfiguration.sh $DEPLOY_ENV - ./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-buildvar - aws s3 cp s3://tc-platform-${LOGICAL_ENV}/securitymanager/${LOGICAL_ENV}-platform-ui.env ./.env + ./awsconfiguration.sh $DEPLOY_ENV + ./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-buildvar + aws s3 cp s3://tc-platform-${LOGICAL_ENV}/securitymanager/${LOGICAL_ENV}-platform-ui.env ./.environments/.env.${LOGICAL_ENV}.local -lint_steps: &lint_steps - # Initialization. +lint_steps: &lint_steps # Initialization. - checkout - setup_remote_docker - run: *running_yarn_eslint -build_steps: &build_steps - # Initialization. +build_steps: &build_steps # Initialization. - checkout - setup_remote_docker - run: *install_build_dependency @@ -100,26 +98,25 @@ build_steps: &build_steps - run: *running_yarn_sb_build - persist_to_workspace: *workspace_persist -test_steps: &test_steps - # Initialization. +test_steps: &test_steps # Initialization. - checkout - setup_remote_docker - restore_cache: - key: test-node-modules-{{ checksum "yarn.lock" }} + key: test-node-modules-{{ checksum "yarn.lock" }} - run: *running_yarn_test - save_cache: - key: test-node-modules-{{ checksum "yarn.lock" }} - paths: - - node_modules - - /root/.cache/Cypress + key: test-node-modules-{{ checksum "yarn.lock" }} + paths: + - node_modules + - /root/.cache/Cypress - store_test_results: - path: cypress/test-report + path: cypress/test-report - store_artifacts: - path: cypress/test-report + path: cypress/test-report - store_artifacts: - path: cypress/videos + path: cypress/videos - store_artifacts: - path: cypress/screenshots + path: cypress/screenshots deploy_steps: &deploy_steps - checkout @@ -127,161 +124,161 @@ deploy_steps: &deploy_steps - run: *install_dependency - run: *install_deploysuite - deploy: - name: Running MasterScript - command: | - ./awsconfiguration.sh $DEPLOY_ENV - source awsenvconf - ./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-deployvar - source buildenvvar - ./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE + name: Running MasterScript + command: | + ./awsconfiguration.sh $DEPLOY_ENV + source awsenvconf + ./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-deployvar + source buildenvvar + ./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE jobs: - lint-dev: - <<: *defaults - environment: - DEPLOY_ENV: "DEV" - LOGICAL_ENV: "dev" - APPNAME: "platform-ui-mvp" - steps: *lint_steps - - # lint-prod: - # <<: *defaults - # environment: - # DEPLOY_ENV: "PROD" - # LOGICAL_ENV: "prod" - # APPNAME: "platform-ui-mvp" - # steps: *lint_steps - - build-dev: - <<: *defaults - environment: - DEPLOY_ENV: "DEV" - LOGICAL_ENV: "dev" - APPNAME: "platform-ui-mvp" - steps: *build_steps - - build-qa: - <<: *defaults - environment: - DEPLOY_ENV: "QA" - LOGICAL_ENV: "qa" - APPNAME: "platform-ui-mvp" - steps: *build_steps - - build-prod: - <<: *defaults - environment: - DEPLOY_ENV: "PROD" - LOGICAL_ENV: "prod" - APPNAME: "platform-ui-mvp" - steps: *build_steps - - test-dev: - <<: *test_defaults - environment: - DEPLOY_ENV: "DEV" - LOGICAL_ENV: "dev" - APPNAME: "platform-ui-mvp" - steps: *test_steps - - # Just tests commited code. - deployDev: - <<: *deploy_defaults - environment: - DEPLOY_ENV: "DEV" - LOGICAL_ENV: "dev" - ENABLE_CACHE: true - APPNAME: "platform-ui-mvp" - steps: *deploy_steps - - deployQa: - <<: *deploy_defaults - environment: - DEPLOY_ENV: "QA" - LOGICAL_ENV: "qa" - ENABLE_CACHE: true - APPNAME: "platform-ui-mvp" - steps: *deploy_steps - - deployProd: - <<: *deploy_defaults - environment: - DEPLOY_ENV: "PROD" - LOGICAL_ENV: "prod" - ENABLE_CACHE: true - APPNAME: "platform-ui-mvp" - steps: *deploy_steps + lint-dev: + <<: *defaults + environment: + DEPLOY_ENV: "DEV" + LOGICAL_ENV: "dev" + APPNAME: "platform-ui-mvp" + steps: *lint_steps + + # lint-prod: + # <<: *defaults + # environment: + # DEPLOY_ENV: "PROD" + # LOGICAL_ENV: "prod" + # APPNAME: "platform-ui-mvp" + # steps: *lint_steps + + build-dev: + <<: *defaults + environment: + DEPLOY_ENV: "DEV" + LOGICAL_ENV: "dev" + APPNAME: "platform-ui-mvp" + steps: *build_steps + + build-qa: + <<: *defaults + environment: + DEPLOY_ENV: "QA" + LOGICAL_ENV: "qa" + APPNAME: "platform-ui-mvp" + steps: *build_steps + + build-prod: + <<: *defaults + environment: + DEPLOY_ENV: "PROD" + LOGICAL_ENV: "prod" + APPNAME: "platform-ui-mvp" + steps: *build_steps + + test-dev: + <<: *test_defaults + environment: + DEPLOY_ENV: "DEV" + LOGICAL_ENV: "dev" + APPNAME: "platform-ui-mvp" + steps: *test_steps + + # Just tests commited code. + deployDev: + <<: *deploy_defaults + environment: + DEPLOY_ENV: "DEV" + LOGICAL_ENV: "dev" + ENABLE_CACHE: true + APPNAME: "platform-ui-mvp" + steps: *deploy_steps + + deployQa: + <<: *deploy_defaults + environment: + DEPLOY_ENV: "QA" + LOGICAL_ENV: "qa" + ENABLE_CACHE: true + APPNAME: "platform-ui-mvp" + steps: *deploy_steps + + deployProd: + <<: *deploy_defaults + environment: + DEPLOY_ENV: "PROD" + LOGICAL_ENV: "prod" + ENABLE_CACHE: true + APPNAME: "platform-ui-mvp" + steps: *deploy_steps workflows: - version: 2 - build: - jobs: - - lint-dev: - context : org-global - filters: - branches: - ignore: - - master - - # - lint-prod: - # context : org-global - # filters: - # branches: - # only: - # - master - - - build-dev: - context : org-global - filters: - branches: - ignore: - - master - - qa - - profiles-app - - - build-qa: - context : org-global - filters: - branches: - only: - - qa - - profiles-app - - - build-prod: - context : org-global - filters: - branches: - only: - - master - - - deployDev: - context : org-global - requires: - - build-dev - filters: - branches: - only: - - dev - - onboarding - - - deployQa: - context : org-global - requires: - - build-qa - filters: - branches: - only: - - qa - - profiles-app - - - deployProd: - context : org-global - requires: - - build-prod - filters: &filters-prod - branches: - only: - - master - - - test-dev: - context : org-global + version: 2 + build: + jobs: + - lint-dev: + context: org-global + filters: + branches: + ignore: + - master + + # - lint-prod: + # context : org-global + # filters: + # branches: + # only: + # - master + + - build-dev: + context: org-global + filters: + branches: + ignore: + - master + - qa + - profiles-app + + - build-qa: + context: org-global + filters: + branches: + only: + - qa + - profiles-app + + - build-prod: + context: org-global + filters: + branches: + only: + - master + + - deployDev: + context: org-global + requires: + - build-dev + filters: + branches: + only: + - dev + - onboarding + + - deployQa: + context: org-global + requires: + - build-qa + filters: + branches: + only: + - qa + - profiles-app + + - deployProd: + context: org-global + requires: + - build-prod + filters: &filters-prod + branches: + only: + - master + + - test-dev: + context: org-global diff --git a/.environments/.env.dev b/.environments/.env.dev index 1c2c3148b..d3f5fecf3 100644 --- a/.environments/.env.dev +++ b/.environments/.env.dev @@ -5,9 +5,6 @@ REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false # Stripe configs REACT_APP_STRIPE_API_KEY=pk_test_rfcS49MHRVUKomQ9JgSH7Xqz REACT_APP_STRIPE_API_VERSION=2020-08-27 -# not really used anywhere -REACT_APP_STRIPE_ADMIN_TOKEN= -REACT_APP_STRIPE_CUSTOMER_TOKEN= # Vanilla Forums REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV diff --git a/.environments/.env.prod b/.environments/.env.prod index 29368ec95..99840204a 100644 --- a/.environments/.env.prod +++ b/.environments/.env.prod @@ -5,9 +5,6 @@ REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false # Stripe configs REACT_APP_STRIPE_API_KEY=pk_live_m3bCBVSfkfMOEp3unZFRsHXi REACT_APP_STRIPE_API_VERSION=2020-08-27 -# not really used anywhere -REACT_APP_STRIPE_ADMIN_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIiwiYWRtaW5pc3RyYXRvciJdLCJpc3MiOiJodHRwczovL2FwaS50b3Bjb2Rlci1kZXYuY29tIiwiaGFuZGxlIjoidGVzdDEiLCJleHAiOjI1NjMwNzY2ODksInVzZXJJZCI6IjQwMDUxMzMzIiwiaWF0IjoxNDYzMDc2MDg5LCJlbWFpbCI6InRlc3RAdG9wY29kZXIuY29tIiwianRpIjoiYjMzYjc3Y2QtYjUyZS00MGZlLTgzN2UtYmViOGUwYWU2YTRhIn0.wKWUe0-SaiFVN-VR_-GwgFlvWaDkSbc8H55ktb9LAVw -REACT_APP_STRIPE_CUSTOMER_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg # Vanilla Forums REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV diff --git a/.environments/.env.qa b/.environments/.env.qa index 24db1f9ac..1c0688542 100644 --- a/.environments/.env.qa +++ b/.environments/.env.qa @@ -5,9 +5,6 @@ REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false # Stripe configs REACT_APP_STRIPE_API_KEY=pk_test_rfcS49MHRVUKomQ9JgSH7Xqz REACT_APP_STRIPE_API_VERSION=2020-08-27 -# not really used anywhere -REACT_APP_STRIPE_ADMIN_TOKEN= -REACT_APP_STRIPE_CUSTOMER_TOKEN= # Vanilla Forums REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV diff --git a/craco.config.js b/craco.config.js index e5425eacb..bf5283529 100644 --- a/craco.config.js +++ b/craco.config.js @@ -5,6 +5,13 @@ const BabelRcPlugin = require('@jackwilsdon/craco-use-babelrc'); const isProd = process.env.APPMODE === "production"; +function getModeName() { + const index = process.argv.indexOf('--mode'); + return index === -1 ? '' : process.argv[index + 1] || '' +} + +console.log({buildMode: getModeName()}); + const localIdentName = isProd ? "[hash:base64:6]" : "[name]_[local]__[hash:base64:6]"; diff --git a/package.json b/package.json index 925fae1b7..67e8e70cf 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,10 @@ "private": true, "license": "ISC", "scripts": { - "dev": "craco start --mode ${REACT_APP_HOST_ENV:-dev}", + "dev": "craco start --mode ${LOGICAL_ENV:-dev}", "start": "bash start.sh", - "build": "export CI=false && craco build --mode ${REACT_APP_HOST_ENV:-prod}", - "build:dev": "craco build --mode ${REACT_APP_HOST_ENV:-dev}", + "build": "export CI=false && craco build --mode ${LOGICAL_ENV:-prod}", + "build:dev": "craco build --mode ${LOGICAL_ENV:-dev}", "demo": "npx http-server --port 443 -a 0.0.0.0 -S -C ./ssl/rootCA.crt -K ./ssl/rootCA.key -P https://local.topcoder-dev.com? --proxy-options.secure false ./build", "lint": "eslint -c ./src/.eslintrc.js 'src/**/*.{ts,tsx,js,jsx}'", "lint:fix": "yarn lint --fix", diff --git a/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx b/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx index bcf348388..642a908a2 100644 --- a/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx +++ b/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx @@ -20,7 +20,6 @@ const OnboardingBaseModal: FC = (props: OnboardingBase size='body' title={props.title} classNames={{ modal: styles.infoModal }} - blockScroll > {props.children} diff --git a/src/apps/onboarding/src/onboarding.routes.tsx b/src/apps/onboarding/src/onboarding.routes.tsx index 742a4b2bf..84ffe4b57 100644 --- a/src/apps/onboarding/src/onboarding.routes.tsx +++ b/src/apps/onboarding/src/onboarding.routes.tsx @@ -1,6 +1,7 @@ import { Navigate } from 'react-router-dom' -import { ToolTitle } from '~/config/constants' +import { EnvironmentConfig } from '~/config' +import { AppSubdomain, ToolTitle } from '~/config/constants' import { lazyLoad, LazyLoadedComponent, PlatformRoute, UserRole } from '~/libs/core' const PageOnboarding: LazyLoadedComponent = lazyLoad(() => import('./pages/onboarding/index'), 'OnboardingWrapper') @@ -18,7 +19,10 @@ const PageAccountDetails: LazyLoadedComponent = lazyLoad( 'PageAccountDetails', ) const toolTitle: string = ToolTitle.onboarding -const onboardingRootRoute: string = '/onboarding' + +export const rootRoute: string = ( + EnvironmentConfig.SUBDOMAIN === AppSubdomain.onboarding ? '' : `/${AppSubdomain.onboarding}` +) export const onboardRouteId: string = `${toolTitle} Onbarding` @@ -59,12 +63,13 @@ export const onboardingRoutes: ReadonlyArray = [ route: '/account-details', }, ], + domain: AppSubdomain.onboarding, element: , id: onboardRouteId, rolesRequired: [ UserRole.member, ], - route: onboardingRootRoute, + route: rootRoute, title: toolTitle, }, ] diff --git a/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.module.scss b/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.module.scss index d03cd08ea..8b0a09cea 100644 --- a/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.module.scss +++ b/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.module.scss @@ -1,8 +1,12 @@ @import "@libs/ui/styles/includes"; .editMemberPropertyBtn { + padding: 0 !important; + padding-left: $sp-4 !important; + color: $black-100; + svg { - width: 16px; - height: 16px; + width: 20px; + height: 20px; } } diff --git a/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx b/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx index 944f39bb1..23268d405 100644 --- a/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx +++ b/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx @@ -13,6 +13,7 @@ const EditMemberPropertyBtn: FC = (props: EditMember icon={IconOutline.PencilIcon} onClick={props.onClick} className={styles.editMemberPropertyBtn} + size='lg' /> ) diff --git a/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss b/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss index e123fd4d4..5c26c3aa7 100644 --- a/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss +++ b/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss @@ -28,4 +28,9 @@ padding: $sp-15 2*$sp-15; } + @include ltemd { + &, &:global(.m-lg) { + padding: $sp-8 $sp-6; + } + } } diff --git a/src/apps/profiles/src/config/constants.ts b/src/apps/profiles/src/config/constants.ts index 1de80dbff..58ac06e5d 100644 --- a/src/apps/profiles/src/config/constants.ts +++ b/src/apps/profiles/src/config/constants.ts @@ -18,4 +18,5 @@ export enum profileEditModes { workExperience = 'workExperience', education = 'education', skills = 'skills', + onboardingCompleted = 'onboardingCompleted', } diff --git a/src/apps/profiles/src/lib/helpers.ts b/src/apps/profiles/src/lib/helpers.ts index bf8174b41..e79b1eeed 100644 --- a/src/apps/profiles/src/lib/helpers.ts +++ b/src/apps/profiles/src/lib/helpers.ts @@ -21,3 +21,18 @@ export function notifyUniNavi(profile: UserProfile): void { }) } } + +export function subTrackLabelToHumanName(label: string): string { + switch (label) { + case 'ASSEMBLY_COMPETITION': + return 'Assembly Competition' + case 'CODE': + return 'Code' + case 'FIRST_2_FINISH': + return 'First2Finish' + case 'CONCEPTUALIZATION': + return 'Conceptualization' + default: return label + } + +} diff --git a/src/apps/profiles/src/member-profile/MemberProfilePage.tsx b/src/apps/profiles/src/member-profile/MemberProfilePage.tsx index 91b7f122b..71ea4ab43 100644 --- a/src/apps/profiles/src/member-profile/MemberProfilePage.tsx +++ b/src/apps/profiles/src/member-profile/MemberProfilePage.tsx @@ -4,6 +4,8 @@ import { Params, useParams } from 'react-router-dom' import { profileContext, ProfileContextData, profileGetPublicAsync, UserProfile } from '~/libs/core' import { LoadingSpinner } from '~/libs/ui' +import { notifyUniNavi } from '../lib' + import { ProfilePageLayout } from './page-layout' const MemberProfilePage: FC<{}> = () => { @@ -29,12 +31,15 @@ const MemberProfilePage: FC<{}> = () => { } }, [routeParams.memberHandle]) - const refreshProfile: (handle: string) => void = useCallback((handle: string) => { + const refreshProfile = useCallback((handle: string) => ( profileGetPublicAsync(handle) .then(userProfile => { setProfile(userProfile) + if (userProfile) { + notifyUniNavi(userProfile) + } }) - }, []) + ), []) return ( <> diff --git a/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx b/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx index b806b4144..2bb8e5463 100644 --- a/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx +++ b/src/apps/profiles/src/member-profile/about-me/AboutMe.tsx @@ -7,7 +7,6 @@ import { useMemberTraits, UserProfile, UserTraitIds, UserTraits } from '~/libs/c import { EditMemberPropertyBtn, EmptySection } from '../../components' import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config' -import { notifyUniNavi } from '../../lib' import { ModifyAboutMeModal } from './ModifyAboutMeModal' import styles from './AboutMe.module.scss' @@ -60,7 +59,6 @@ const AboutMe: FC = (props: AboutMeProps) => { setIsEditMode(false) mutateTraits() props.refreshProfile(props.profile.handle) - notifyUniNavi(props.profile) }, 1000) } diff --git a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss index c8181b50e..6765d5229 100644 --- a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss +++ b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss @@ -3,10 +3,12 @@ .container { display: flex; flex-direction: column; + padding-bottom: $sp-8; .headerWrap { display: flex; align-items: center; + justify-content: space-between; margin-bottom: $sp-4; h3 { @@ -19,9 +21,15 @@ } } + .emptyBlock { + display: none; + } + .educationContentWrap { display: flex; flex-direction: column; - padding-bottom: $sp-8; + &:empty + .emptyBlock { + display: flex; + } } } diff --git a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx index 1bf092b41..125d2b22f 100644 --- a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx +++ b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx @@ -1,8 +1,7 @@ import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react' import { useSearchParams } from 'react-router-dom' -import { KeyedMutator } from 'swr' -import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core' +import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core' import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config' import { EditMemberPropertyBtn, EmptySection } from '../../components' @@ -27,10 +26,7 @@ const EducationAndCertifications: FC = (props: const [isEditMode, setIsEditMode]: [boolean, Dispatch>] = useState(false) - const { data: memberEducationTraits, mutate: mutateTraits }: { - data: UserTraits[] | undefined, - mutate: KeyedMutator, - } + const { data: memberEducationTraits, mutate: mutateTraits, loading }: MemberTraitsAPI = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.education }) const memberEducation: UserTrait[] | undefined @@ -73,28 +69,33 @@ const EducationAndCertifications: FC = (props:
- {(memberEducation?.length as number) > 0 - ? memberEducation?.map((education: UserTrait) => ( - - )) - : ( - - I'm still building up my education and certifications here at Topcoder. - - )} + {!loading && ( + (memberEducation?.length as number) > 0 && ( + memberEducation?.map((education: UserTrait) => ( + + )) + ) + )}
+ {!loading && !memberEducation?.length && ( + + I'm still building up my education and certifications here at Topcoder. + + )} + { isEditMode && ( = (props: OnboardingCompletedProps) => { + const [queryParams]: [URLSearchParams, any] = useSearchParams() + + const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM) + + const [isOpenModal, setIsOpenModal]: [boolean, Dispatch>] + = useState(false) + + useEffect(() => { + if (props.authProfile && editMode === profileEditModes.onboardingCompleted) { + setIsOpenModal(true) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [props.authProfile]) + + function handleInfoModalClose(): void { + setIsOpenModal(false) + } + + return ( + <> + Off to a great start!} + buttons={( +
+
+ )} + > +
+

+ Great work on starting your profile. + The more information you add, the more visibility you have in our community and to customers. +

+
+ + + ) +} + +export default OnboardingCompleted diff --git a/src/apps/profiles/src/member-profile/onboarding-complete/index.ts b/src/apps/profiles/src/member-profile/onboarding-complete/index.ts new file mode 100644 index 000000000..c1346daf3 --- /dev/null +++ b/src/apps/profiles/src/member-profile/onboarding-complete/index.ts @@ -0,0 +1 @@ +export { default as OnboardingCompletedModal } from './OnboardingCompleted' diff --git a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss index 41a58918c..cbde4c842 100644 --- a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss +++ b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss @@ -7,11 +7,11 @@ height: 100%; .profileHeaderWrap { - background: url('../../lib/assets/profile-header-bg.png') no-repeat right center / auto, linear-gradient(#0d83c5, #0e89d5); + background: url('../../lib/assets/profile-header-bg.png') no-repeat right top / auto, linear-gradient(#0d83c5, #0e89d5); .profileHeaderContent { padding: 0; - max-height: 200px; + max-height: 260px; overflow: visible; @include ltelg { @@ -57,7 +57,7 @@ .profileInfoRight { display: flex; flex-direction: column; - margin-top: -215px; + margin-top: -275px; @include ltelg { margin-top: 0; diff --git a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx index c617e1a88..c35f296a0 100644 --- a/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx +++ b/src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx @@ -14,6 +14,7 @@ import { MemberLinks } from '../links' import { MemberTCAchievements } from '../tc-achievements' import { WorkExpirence } from '../work-expirence' import { EducationAndCertifications } from '../education-and-certifications' +import OnboardingCompleted from '../onboarding-complete/OnboardingCompleted' import styles from './ProfilePageLayout.module.scss' @@ -79,7 +80,11 @@ const ProfilePageLayout: FC = (props: ProfilePageLayoutP
- +
@@ -108,6 +113,8 @@ const ProfilePageLayout: FC = (props: ProfilePageLayoutP + +
) } diff --git a/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.module.scss b/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.module.scss index e83ece794..e31ea7ff7 100644 --- a/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.module.scss +++ b/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.module.scss @@ -6,7 +6,8 @@ width: 100%; } -.modalBody { +.nameToggle { display: flex; align-items: center; + justify-content: space-between; } diff --git a/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx b/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx index b42093e4e..2d310f705 100644 --- a/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx +++ b/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx @@ -1,9 +1,17 @@ import { Dispatch, FC, SetStateAction, useState } from 'react' -import { trim } from 'lodash' +import { reject, trim } from 'lodash' import { toast } from 'react-toastify' -import { updateMemberProfileAsync, UserProfile } from '~/libs/core' -import { BaseModal, Button, InputText } from '~/libs/ui' +import { + createMemberTraitsAsync, + updateMemberProfileAsync, + updateMemberTraitsAsync, + UserProfile, + UserTrait, + UserTraitCategoryNames, + UserTraitIds, +} from '~/libs/core' +import { BaseModal, Button, FormToggleSwitch, InputText } from '~/libs/ui' import styles from './ModifyMemberNameModal.module.scss' @@ -11,6 +19,13 @@ interface ModifyMemberNameModalProps { profile: UserProfile onClose: () => void onSave: () => void + memberPersonalizationTraitsData: UserTrait[] | undefined + hideMyNameInProfile: boolean +} + +const methodsMap: { [key: string]: any } = { + create: createMemberTraitsAsync, + update: updateMemberTraitsAsync, } const ModifyMemberNameModal: FC = (props: ModifyMemberNameModalProps) => { @@ -32,6 +47,9 @@ const ModifyMemberNameModal: FC = (props: ModifyMemb const [currentLastName, setCurrentLastName]: [string, Dispatch>] = useState(props.profile.lastName) + const [hideMyNameInProfile, setHideMyNameInProfile]: [boolean, Dispatch>] + = useState(props.hideMyNameInProfile) + function handleFirstNameChange(e: React.ChangeEvent): void { setCurrentFirstName(e.target.value) setIsFormChanged(true) @@ -42,6 +60,11 @@ const ModifyMemberNameModal: FC = (props: ModifyMemb setIsFormChanged(true) } + function handleShowMyNameInProfileToggle(): void { + setHideMyNameInProfile(!hideMyNameInProfile) + setIsFormChanged(true) + } + function handleModifyNameSave(): void { setFormErrors({}) @@ -64,10 +87,25 @@ const ModifyMemberNameModal: FC = (props: ModifyMemb setIsSaving(true) - updateMemberProfileAsync( - props.profile.handle, - { firstName: updatedFirstName, lastName: updatedLastName }, - ) + Promise.all([ + updateMemberProfileAsync( + props.profile.handle, + { firstName: updatedFirstName, lastName: updatedLastName }, + ), + methodsMap[!!props.memberPersonalizationTraitsData ? 'update' : 'create'](props.profile.handle, [{ + categoryName: UserTraitCategoryNames.personalization, + traitId: UserTraitIds.personalization, + traits: { + data: [ + ...reject( + props.memberPersonalizationTraitsData, + (trait: any) => trait.hideNamesOnProfile, + ), + { hideNamesOnProfile: hideMyNameInProfile }, + ], + }, + }]), + ]) .then(() => { toast.success('Your profile has been updated.', { position: toast.POSITION.BOTTOM_RIGHT }) props.onSave() @@ -122,6 +160,14 @@ const ModifyMemberNameModal: FC = (props: ModifyMemb onChange={handleLastNameChange} value={currentLastName} /> +
+

Hide my names on profile

+ +
) diff --git a/src/apps/profiles/src/member-profile/profile-header/OpenForGigs/OpenForGigs.tsx b/src/apps/profiles/src/member-profile/profile-header/OpenForGigs/OpenForGigs.tsx index deb263086..e00887df0 100644 --- a/src/apps/profiles/src/member-profile/profile-header/OpenForGigs/OpenForGigs.tsx +++ b/src/apps/profiles/src/member-profile/profile-header/OpenForGigs/OpenForGigs.tsx @@ -7,6 +7,7 @@ import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } fro import { EditMemberPropertyBtn } from '../../../components' import { OpenForGigsModifyModal } from '../OpenForGigsModifyModal' import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../../config' +import { notifyUniNavi } from '../../../lib' import styles from './OpenForGigs.module.scss' @@ -53,6 +54,7 @@ const OpenForGigs: FC = (props: OpenForGigsProps) => { setTimeout(() => { setIsEditMode(false) mutateTraits() + notifyUniNavi(props.profile) }, 1000) } diff --git a/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.module.scss b/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.module.scss index 64ef21e82..136ab5fa3 100644 --- a/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.module.scss +++ b/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.module.scss @@ -8,6 +8,9 @@ .modalBody { display: flex; - align-items: center; - justify-content: space-between; + flex-direction: column; + + >p { + margin-bottom: $sp-4; + } } \ No newline at end of file diff --git a/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.tsx b/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.tsx index 8c16149fb..484a38865 100644 --- a/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.tsx +++ b/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.tsx @@ -2,7 +2,7 @@ import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react' import { toast } from 'react-toastify' import { reject } from 'lodash' -import { BaseModal, Button, FormToggleSwitch } from '~/libs/ui' +import { BaseModal, Button, InputText } from '~/libs/ui' import { createMemberTraitsAsync, updateMemberTraitsAsync, @@ -76,7 +76,8 @@ const OpenForGigsModifyModal: FC = (props: OpenForG + { + props.showMonthPicker !== false && ( + + ) + } { props.showMonthPicker !== false && ( @@ -90,9 +94,13 @@ const InputDatePicker: FC = (props: InputDatePickerProps) ))} - + { + props.showMonthPicker !== false && ( + + ) + } ) } diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx index c28e60dda..883134f11 100644 --- a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx +++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx @@ -26,6 +26,7 @@ interface InputMultiselectProps { readonly hideInlineErrors?: boolean readonly hint?: string readonly label?: string + readonly limit?: number readonly name: string readonly onChange: (event: ChangeEvent) => void readonly options?: ReadonlyArray @@ -55,6 +56,10 @@ const InputMultiselect: FC = (props: InputMultiselectProp } as unknown as ChangeEvent) } + function isOptionDisabled(): boolean { + return !!props.limit && (props.value?.length as number) >= props.limit + } + return ( = (props: InputMultiselectProp label={(props.label || props.name) ?? 'Select Option'} hideInlineErrors={props.hideInlineErrors} type='text' + hint={props.limit ? ` (max ${props.limit})` : undefined} > = (props: InputMultiselectProp onBlur={noop} blurInputOnSelect={false} isLoading={props.loading} + isOptionDisabled={isOptionDisabled} + isSearchable={!isOptionDisabled()} components={{ MultiValueRemove }} value={props.value} /> diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss index 9f1c2bce2..4be07ad1d 100644 --- a/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss +++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss @@ -45,9 +45,13 @@ $error-line-height: 14px; display: flex; flex-direction: row; align-items: center; + .checkbox-label { margin-left: $sp-2; flex: 1; + font-size: 16px; + font-weight: $font-weight-normal; + line-height: 24px; } } } diff --git a/src/libs/ui/lib/components/modals/base-modal/BaseModal.tsx b/src/libs/ui/lib/components/modals/base-modal/BaseModal.tsx index ce2bf3e31..0c8d11476 100644 --- a/src/libs/ui/lib/components/modals/base-modal/BaseModal.tsx +++ b/src/libs/ui/lib/components/modals/base-modal/BaseModal.tsx @@ -1,4 +1,4 @@ -import { FC, ReactNode, useEffect } from 'react' +import { FC, ReactNode, useCallback, useEffect } from 'react' import Modal, { ModalProps } from 'react-responsive-modal' import classNames from 'classnames' @@ -39,12 +39,20 @@ const BaseModal: FC = (props: BaseModalProps) => { ) } + const handleBodyScroll = useCallback((force?: boolean) => { + const isOpen = force ?? props.open + document.documentElement.style.overflow = isOpen ? 'hidden' : '' + document.body.style.overflow = isOpen ? 'hidden' : '' + }, [props.open]) + useEffect(() => { - if (!props.blockScroll) { - document.documentElement.style.overflow = props.open ? 'hidden' : '' - document.body.style.overflow = props.open ? 'hidden' : '' + if (props.blockScroll) { + return undefined } - }, [props.blockScroll, props.open]) + + handleBodyScroll() + return () => handleBodyScroll(false) + }, [handleBodyScroll, props.blockScroll, props.open]) return ( =16.9.11": + version "18.2.14" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.14.tgz#fa7a6fecf1ce35ca94e74874f70c56ce88f7a127" + integrity sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/redux-actions@2.6.2": version "2.6.2" resolved "https://registry.yarnpkg.com/@types/redux-actions/-/redux-actions-2.6.2.tgz#5956d9e7b9a644358e2c0610f47b1fa3060edc21" @@ -4663,6 +4686,11 @@ resolved "https://registry.yarnpkg.com/@types/validator/-/validator-13.7.10.tgz#f9763dc0933f8324920afa9c0790308eedf55ca7" integrity sha512-t1yxFAR2n0+VO6hd/FJ9F2uezAZVWHLmpmlJzm1eX03+H7+HsuTAp7L8QJs+2pQCfWkP1+EXsGK9Z9v7o/qPVQ== +"@types/warning@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52" + integrity sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA== + "@types/ws@^8.5.1": version "8.5.3" resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d" @@ -7740,7 +7768,7 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" -dom-helpers@^5.0.1: +dom-helpers@^5.0.1, dom-helpers@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== @@ -15353,6 +15381,20 @@ react-only-when@^1.0.2: resolved "https://registry.yarnpkg.com/react-only-when/-/react-only-when-1.0.2.tgz#a8a79b48dd6cfbd91ddc710674a94153e88039d3" integrity sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q== +react-overlays@^5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.2.1.tgz#49dc007321adb6784e1f212403f0fb37a74ab86b" + integrity sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA== + dependencies: + "@babel/runtime" "^7.13.8" + "@popperjs/core" "^2.11.6" + "@restart/hooks" "^0.4.7" + "@types/warning" "^3.0.0" + dom-helpers "^5.2.0" + prop-types "^15.7.2" + uncontrollable "^7.2.1" + warning "^4.0.3" + react-popper@^2.2.5, react-popper@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba" @@ -18004,6 +18046,16 @@ unbox-primitive@^1.0.2: has-symbols "^1.0.3" which-boxed-primitive "^1.0.2" +uncontrollable@^7.2.1: + version "7.2.1" + resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738" + integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ== + dependencies: + "@babel/runtime" "^7.6.3" + "@types/react" ">=16.9.11" + invariant "^2.2.4" + react-lifecycles-compat "^3.0.4" + unfetch@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be" @@ -18439,7 +18491,7 @@ walker@^1.0.7, walker@^1.0.8: dependencies: makeerror "1.0.12" -warning@^4.0.2: +warning@^4.0.2, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== From ebbdc984dfbddd2cd4ca70c856b698516ce2afc4 Mon Sep 17 00:00:00 2001 From: dat Date: Mon, 17 Jul 2023 12:38:30 +0700 Subject: [PATCH 3/3] Onboarding - Tell uninav to update profile pic after saving a new one Profile picture is not loading until user refresh the page when they upload it for the first time --- .../src/components/FieldAvatar/index.tsx | 5 ++- .../components/modal-upload-photo/index.tsx | 4 +- .../onboarding/src/pages/onboarding/index.tsx | 44 +++++++++++-------- .../onboarding/src/redux/reducers/member.ts | 5 +++ 4 files changed, 36 insertions(+), 22 deletions(-) diff --git a/src/apps/onboarding/src/components/FieldAvatar/index.tsx b/src/apps/onboarding/src/components/FieldAvatar/index.tsx index 60abda520..17e44619e 100644 --- a/src/apps/onboarding/src/components/FieldAvatar/index.tsx +++ b/src/apps/onboarding/src/components/FieldAvatar/index.tsx @@ -108,9 +108,10 @@ const FieldAvatar: FC = (props: FieldAvatarProps) => { > {imgUrl ? ( avatar - ) : ( + ) : undefined} + {!imgUrl ? ( avatar - )} + ) : undefined}
diff --git a/src/apps/onboarding/src/components/modal-upload-photo/index.tsx b/src/apps/onboarding/src/components/modal-upload-photo/index.tsx index ea34baf8b..067c21f79 100644 --- a/src/apps/onboarding/src/components/modal-upload-photo/index.tsx +++ b/src/apps/onboarding/src/components/modal-upload-photo/index.tsx @@ -53,8 +53,8 @@ const ModalUploadPhoto: FC = (props: ModalUploadPhotoProp setIsSaving(true) try { - await updateMemberPhotoAsync(props.memberInfo.handle, formData) - props.setMemberPhotoUrl(URL.createObjectURL(myFiles[0])) + const result = await updateMemberPhotoAsync(props.memberInfo.handle, formData) + props.setMemberPhotoUrl(result?.photoURL || URL.createObjectURL(myFiles[0])) setMyFiles([]) props.onClose?.() } catch (error) { diff --git a/src/apps/onboarding/src/pages/onboarding/index.tsx b/src/apps/onboarding/src/pages/onboarding/index.tsx index 3b61e9d42..61a27c64f 100644 --- a/src/apps/onboarding/src/pages/onboarding/index.tsx +++ b/src/apps/onboarding/src/pages/onboarding/index.tsx @@ -14,12 +14,11 @@ import '../../styles/global/_index.scss' import styles from './styles.module.scss' -const OnboardingContent: FC<{ +const OnboardingFooterContent: FC<{ fetchMemberInfo: () => void fetchMemberTraits: () => void reduxMemberInfo: Member | undefined }> = props => { - const { getChildRoutes }: RouterContextData = useContext(routerContext) useEffect(() => { props.fetchMemberInfo() props.fetchMemberTraits() @@ -27,20 +26,11 @@ const OnboardingContent: FC<{ }, []) return ( - <> -
- - - {getChildRoutes(onboardRouteId)} - -
-
- - I will complete this onboarding later, - skip for now - . - - + + I will complete this onboarding later, + skip for now + . + ) } @@ -58,12 +48,30 @@ const mapDispatchToProps: any = { fetchMemberInfo, fetchMemberTraits, } -const Onboarding: any = connect(mapStateToProps, mapDispatchToProps)(OnboardingContent) +const OnboardingFooter: any = connect(mapStateToProps, mapDispatchToProps)(OnboardingFooterContent) + +const OnboardingContent: FC<{ +}> = () => { + const { getChildRoutes }: RouterContextData = useContext(routerContext) + + return ( + <> +
+ + + {getChildRoutes(onboardRouteId)} + +
+
+ + + ) +} export const OnboardingWrapper: FC<{}> = () => (
- +
) diff --git a/src/apps/onboarding/src/redux/reducers/member.ts b/src/apps/onboarding/src/redux/reducers/member.ts index efa2ecb9f..642ccf62f 100644 --- a/src/apps/onboarding/src/redux/reducers/member.ts +++ b/src/apps/onboarding/src/redux/reducers/member.ts @@ -1,5 +1,7 @@ import _ from 'lodash' +import { notifyUniNavi } from '~/apps/profiles/src/lib' + import { ACTIONS } from '../../config' import ConnectInfo from '../../models/ConnectInfo' import EducationInfo from '../../models/EducationInfo' @@ -89,6 +91,9 @@ const memberReducer: any = ( const newMemberInfo = _.cloneDeep(state.memberInfo) newMemberInfo.photoURL = action.payload + if (newMemberInfo) { + notifyUniNavi(newMemberInfo as any) + } return { ...state,