Merge branch 'main' into release

components/popup.tsx

@@ -1,17 +1,26 @@
 import React, { FC, ReactNode, useCallback, useState } from 'react'
 import { Modal } from 'antd'
+import classNames from 'classnames'
 
-export const FullMask: FC<{ transparent?: boolean; width?: number; maskClosable?: boolean; onCancel?: () => void}> = ({ children, transparent = false, width = 375, maskClosable = false, onCancel }) => {
+export const FullMask: FC<{
+  centered?: boolean
+  transparent?: boolean
+  width?: number
+  className?: string
+  maskClosable?: boolean
+  onCancel?: () => void
+}> = ({ children, centered, transparent = false, className, width = 375, maskClosable = false, onCancel }) => {
   return (
     <Modal
+      centered={centered}
       width={width}
       open={true}
       footer={null}
       closable={false}
       maskClosable={maskClosable}
       onCancel={onCancel}
       getContainer={'#__next'}
-      className="custom-full-mask"
+      className={classNames('custom-full-mask', className)}
       bodyStyle={{ padding: 0 }}
       maskStyle={{ backgroundColor: transparent ? 'transparent' : 'rgba(0,0,0,.5)' }}
     >

features/jobs/Banner.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const bg = 'https://assets.lbctrl.com/uploads/66944006-30cf-464c-b535-ba4c2246b400/whale-job.png'
+const JobBanner: React.FC = () => {
+  return (
+    <section className="relative flex flex-col items-start justify-center h-44 bg-bg_color_2">
+      <div className="w-full main-container">
+        <div className="text-4xl font-semibold main-content-width">Join Us</div>
+      </div>
+      {/* <img src={bg} alt="job-bg" className="absolute top-0 bottom-0 right-0" /> */}
+    </section>
+  )
+}
+
+export default JobBanner

features/jobs/List.tsx

@@ -0,0 +1,113 @@
+import { JobItem, CityItem } from '@/hooks/use-jobs'
+import React from 'react'
+import get from 'lodash/get'
+import { useTranslation } from 'next-i18next'
+import { FullMask } from '@/components/popup'
+import Icon from '@/components/icon'
+import style from './index.module.scss'
+import { Modal } from 'antd'
+
+interface JobProps {
+  jobs: JobItem[]
+  cities: CityItem[]
+}
+const JobList: React.FC<JobProps> = props => {
+  const i18n = useTranslation('common')
+  const language = i18n.i18n?.language
+  const { jobs, cities } = props
+  const [visible, setVisible] = React.useState(false)
+  const [detailJob, setDetailJob] = React.useState()
+
+  const getLocation = (_cities: string) => {
+    const city = _cities
+      .split(',')
+      .map(city => {
+        const cityItem = cities.find(c => c.key === city)
+        return get(cityItem, `address.${language}`, get(cityItem, 'address'))
+      })
+      .filter(Boolean)
+
+    console.log('🚀 ~ getLocation ~ city:', city)
+    return city.join(' ')
+  }
+
+  const handleJob = job => {
+    setDetailJob(job)
+    setVisible(true)
+  }
+  return (
+    <section className="job-list">
+      {jobs.map(job => {
+        return (
+          <div
+            className="px-4 py-5 -mx-4 rounded-lg cursor-pointer job-item hover:bg-bg_color_2"
+            key={job.id}
+            onClick={() => handleJob(job)}
+          >
+            <div className="text-xl font-medium title text-text-color-1">
+              {get(job, `title.${language}`, get(job, 'title'))}
+            </div>
+            <div className="my-2 text-base font-medium location text-text-color-1">
+              {getLocation(get(job, 'cities'))}
+            </div>
+            <div className="text-sm font-normal whitespace-pre-wrap brief text-text_color_1_supplement line-clamp-2">
+              {get(job, `jobResponsibility.${language}`, get(job, 'jobResponsibility'))}
+            </div>
+          </div>
+        )
+      })}
+      {visible && (
+        <Modal
+          centered
+          width={560}
+          open={true}
+          footer={null}
+          closable={false}
+          maskClosable
+          onCancel={() => setVisible(false)}
+          getContainer={'#__next'}
+          bodyStyle={{ padding: 0 }}
+          className={style['job-detail-modal']}
+          maskStyle={{ backgroundColor: 'rgba(0,0,0,.5)' }}
+        >
+          <div className="relative p-5 pt-0 rounded-xl">
+            <Icon
+              type="close"
+              className="absolute right-4 top-3 cursor-pointer text-[26px] text-[#ccc] hover:text-text-color-1"
+              onClick={() => setVisible(false)}
+            ></Icon>
+            <div className="pt-3 pb-4 title">
+              <div className="text-xl font-medium title text-text-color-1">
+                {get(detailJob, `title.${language}`, get(detailJob, 'title'))}
+              </div>
+            </div>
+            <div className="max-h-[60vh] overflow-auto job-detail">
+              <div>
+                <div className="mb-5 requirement">
+                  <div className="mb-4 text-lg font-medium text-text_color_1">Job Requirements</div>
+                  <div className="text-sm font-normal leading-6 whitespace-pre-line text-text_color_1_supplement">
+                    {get(detailJob, `jobRequirements.${language}`, get(detailJob, 'jobRequirements'))}
+                  </div>
+                </div>
+                <div className="mb-5 responsibility">
+                  <div className="mb-4 text-lg font-medium text-text_color_1">Job Responsibilities</div>
+                  <div className="text-sm font-normal leading-6 whitespace-pre-line text-text_color_1_supplement">
+                    {get(detailJob, `jobResponsibility.${language}`, get(detailJob, 'jobResponsibility'))}
+                  </div>
+                </div>
+                <div className="location">
+                  <div className="mb-4 text-lg font-medium text-text_color_1">Work Location</div>
+                  <div className="my-2 text-base font-medium location text-text-color-1">
+                    {getLocation(get(detailJob, 'cities'))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </section>
+  )
+}
+
+export default JobList

features/jobs/index.module.scss

@@ -0,0 +1,10 @@
+:local(.job-detail-modal) {
+  .ant-modal-content {
+    @apply rounded-lg;
+    .job-detail {
+      &::-webkit-scrollbar {
+        @apply hidden;
+      }
+    }
+  }
+}

hooks/use-jobs.ts

@@ -0,0 +1,53 @@
+import { useEffect } from 'react'
+import { useSafeState } from 'ahooks'
+import { getAppConfig } from '@/services'
+import get from 'lodash/get'
+
+/**
+ * 获取媒体报道
+ * @returns ReportItem[]
+ */
+interface LocaleItem {
+  'zh-CN': string
+  'zh-HK': string
+  'en': string
+}
+export interface JobItem {
+  site: string
+  city: string
+  goodImpression: string
+  id: string
+  jobRequirements: string | LocaleItem
+  jobResponsibility: string | LocaleItem
+  title: string | LocaleItem
+}
+export interface CityItem {
+  address: string
+  key: string
+  name: string
+}
+let jobsState: JobItem[] = []
+const filterSite = 'whale'
+export function useJobs() {
+  const [jobs, setJobs] = useSafeState<JobItem[]>(jobsState)
+  const [cities, setCities] = useSafeState<CityItem[]>([])
+
+  useEffect(() => {
+    if (!!jobsState.length) return
+    fetchJobs()
+  }, [])
+
+  const fetchJobs = async () => {
+    const key = 'jobs'
+    const resp = await getAppConfig([key])
+    const _jobConfig = resp?.config?.[key]
+    if (_jobConfig) {
+      const whaleJobs = get(_jobConfig, 'jobs', []).filter((job: JobItem) => job.site === filterSite)
+      setCities(get(_jobConfig, 'cities', []))
+      setJobs(whaleJobs)
+      jobsState = whaleJobs
+    }
+  }
+
+  return [jobs, cities, setJobs] as const
+}

pages/[locale]/jobs/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { useTranslation } from 'next-i18next'
+import { i18nPaths } from '@/utils/i18n-paths'
+import i18nextConfig from '@/next-i18next.config'
+import { useJobs } from '@/hooks/use-jobs'
+import { SEOMeta } from '@/utils/seo'
+import { getAppConfig } from '@/services'
+import { Layout, PageLayout } from '@/features/common/page-layout'
+import JobBanner from '@/features/jobs/Banner'
+import JobList from '@/features/jobs/List'
+
+export const getStaticPaths = () => ({
+  fallback: false,
+  paths: i18nPaths(),
+})
+export const getStaticProps = async (ctx: any) => ({
+  props: {
+    ...(await serverSideTranslations(ctx?.params?.locale, ['common', 'seo'], i18nextConfig)),
+  },
+})
+
+const Jobs: React.FC = () => {
+  const [jobs, cities] = useJobs()
+  const seoI18n = useTranslation(['seo'])
+  const i18n = useTranslation('common')
+  return (
+    <Layout>
+      <SEOMeta title={seoI18n.t('about.title')} description={seoI18n.t('about.description')} />
+      <JobBanner />
+      <div className="py-5 job-wrapper main-container">
+        <div className="main-content-width">
+          <JobList jobs={jobs} cities={cities} />
+        </div>
+      </div>
+    </Layout>
+  )
+}
+
+export default Jobs

routes/index.tsx

@@ -25,6 +25,7 @@ import FrontDesk from '@/pages/[locale]/front-desk'
 import VirtualAssetTradingSystem from '@/pages/[locale]/virtual-asset-trading-system'
 import PortAI from '@/pages/[locale]/portai'
 import Account from '@/pages/[locale]/account'
+import Jobs from '@/pages/[locale]/jobs'
 import Brokerages from '@/pages/[locale]/solutions/brokerages'
 import SmallBrokeragesPage from '@/pages/[locale]/solutions/small-brokerages'
 import UsStock from '@/pages/[locale]/solutions/us-stock'
@@ -68,6 +69,7 @@ export const RouteList = ({ pageProps }: { pageProps: any }) => {
               <Route path="solutions/small-brokerages" element={<SmallBrokeragesPage {...pageProps} />} />
               <Route path="solutions/us-stock" element={<UsStock {...pageProps} />} />
               <Route path="solutions/wealth-management" element={<WealthManagement {...pageProps} />} />
+              <Route path="jobs" element={<Jobs {...pageProps} />} />
             </Route>
           </Fragment>
         )