Merge pull request #2749 from CAFECA-IO/feature/ui-rolefunctionpreview

JobRecordPage UI & PreviewModal UI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.2+39",
+  "version": "0.8.2+40",
   "private": false,
   "scripts": {
     "dev": "next dev",

src/components/beta/select_role/introduction.tsx

@@ -2,12 +2,28 @@ import React from 'react';
 import Image from 'next/image';
 import { FiEye, FiArrowRight } from 'react-icons/fi';
 import { RoleId } from '@/constants/role';
+import { useUserCtx } from '@/contexts/user_context';
+import Link from 'next/link';
+import { ISUNFA_ROUTE } from '@/constants/url';
 
 interface IntroductionProps {
-  role: React.SetStateAction<string>;
+  showingRole: React.SetStateAction<RoleId | null>;
+  togglePreviewModal: () => void;
+}
+interface ButtonsProps {
+  showingRole: RoleId;
+  togglePreviewModal: () => void;
+}
+interface BookkeeperIntroductionProps {
+  showingRole: RoleId;
+  togglePreviewModal: () => void;
+}
+interface EducationalTrialVersionIntroductionProps {
+  showingRole: RoleId;
+  togglePreviewModal: () => void;
 }
 
-const DefaultIntroduction = () => {
+const DefaultIntroduction: React.FC = () => {
   return (
     <section className="h-600px bg-bg_select_role bg-contain bg-right-top bg-no-repeat">
       <div className="flex flex-col gap-40px pl-60px pt-60px">
@@ -26,43 +42,46 @@ const DefaultIntroduction = () => {
   );
 };
 
-const Buttons = () => {
-  const handlePreview = () => {
-    // Deprecated: (20241007 - Liz)
-    // eslint-disable-next-line no-console
-    console.log('Preview');
-  };
+const Buttons: React.FC<ButtonsProps> = ({ togglePreviewModal, showingRole }) => {
+  const { selectRole } = useUserCtx();
 
   const handleStart = () => {
     // Deprecated: (20241007 - Liz)
     // eslint-disable-next-line no-console
-    console.log('Start');
+    console.log('showingRole:', showingRole, '儲存 showingRole 到 userCtx');
+
+    selectRole(showingRole);
   };
 
   return (
     <div className="flex gap-40px">
       <button
         type="button"
         className="flex items-center gap-8px rounded-xs border border-button-stroke-secondary px-32px py-14px text-lg font-medium text-button-text-secondary hover:border-button-stroke-primary-hover hover:text-button-text-primary-hover disabled:border-button-stroke-disable disabled:text-button-text-disable"
-        onClick={handlePreview}
+        onClick={togglePreviewModal}
       >
         <p>Preview</p>
         <FiEye size={24} />
       </button>
 
-      <button
-        type="button"
-        className="flex items-center gap-8px rounded-xs bg-button-surface-strong-primary px-32px py-14px text-lg font-medium text-button-text-primary-solid hover:bg-button-surface-strong-primary-hover disabled:bg-button-surface-strong-disable disabled:text-button-text-disable"
-        onClick={handleStart}
-      >
-        <p>Start</p>
-        <FiArrowRight size={24} />
-      </button>
+      <Link href={ISUNFA_ROUTE.JOB_RECORD}>
+        <button
+          type="button"
+          className="flex items-center gap-8px rounded-xs bg-button-surface-strong-primary px-32px py-14px text-lg font-medium text-button-text-primary-solid hover:bg-button-surface-strong-primary-hover disabled:bg-button-surface-strong-disable disabled:text-button-text-disable"
+          onClick={handleStart}
+        >
+          <p>Start</p>
+          <FiArrowRight size={24} />
+        </button>
+      </Link>
     </div>
   );
 };
 
-const BookkeeperIntroduction = () => {
+const BookkeeperIntroduction: React.FC<BookkeeperIntroductionProps> = ({
+  showingRole,
+  togglePreviewModal,
+}) => {
   return (
     <section className="h-600px bg-bg_bookkeeper bg-contain bg-right-top bg-no-repeat">
       <div className="flex flex-col gap-40px pl-60px pt-60px">
@@ -82,13 +101,16 @@ const BookkeeperIntroduction = () => {
           <p>General Ledger, Voucher Issuance, Preparation of Financial and Tax Reports</p>
         </div>
 
-        <Buttons />
+        <Buttons showingRole={showingRole} togglePreviewModal={togglePreviewModal} />
       </div>
     </section>
   );
 };
 
-const EducationalTrialVersionIntroduction = () => {
+const EducationalTrialVersionIntroduction: React.FC<EducationalTrialVersionIntroductionProps> = ({
+  showingRole,
+  togglePreviewModal,
+}) => {
   return (
     <section className="h-600px bg-bg_educational_trial_version bg-contain bg-right-top bg-no-repeat">
       <div className="flex flex-col gap-40px pl-60px pt-60px">
@@ -113,18 +135,25 @@ const EducationalTrialVersionIntroduction = () => {
           <p>General Ledger, Voucher Issuance</p>
         </div>
 
-        <Buttons />
+        <Buttons showingRole={showingRole} togglePreviewModal={togglePreviewModal} />
       </div>
     </section>
   );
 };
 
-const Introduction = ({ role }: IntroductionProps) => {
+const Introduction: React.FC<IntroductionProps> = ({ showingRole, togglePreviewModal }) => {
   return (
     <>
-      {!role && <DefaultIntroduction />}
-      {role === RoleId.BOOKKEEPER && <BookkeeperIntroduction />}
-      {role === RoleId.EDUCATIONAL_TRIAL_VERSION && <EducationalTrialVersionIntroduction />}
+      {!showingRole && <DefaultIntroduction />}
+      {showingRole === RoleId.BOOKKEEPER && (
+        <BookkeeperIntroduction showingRole={showingRole} togglePreviewModal={togglePreviewModal} />
+      )}
+      {showingRole === RoleId.EDUCATIONAL_TRIAL_VERSION && (
+        <EducationalTrialVersionIntroduction
+          showingRole={showingRole}
+          togglePreviewModal={togglePreviewModal}
+        />
+      )}
     </>
   );
 };

src/components/beta/select_role/preview_modal.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image';
+import { useState } from 'react';
+import { IoCloseOutline, IoEllipse } from 'react-icons/io5';
+
+interface PreviewModalProps {
+  togglePreviewModal: () => void;
+}
+
+const PreviewModal = ({ togglePreviewModal }: PreviewModalProps) => {
+  // ToDo: (20241009 - Liz) 根據 videoIndex 顯示不同影片
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [videoIndex, setVideoIndex] = useState<number>(0);
+  const videoIds = ['video1', 'video2', 'video3', 'video4', 'video5'];
+
+  return (
+    <div className="fixed inset-0 z-10 flex items-center justify-center bg-black/50">
+      <div className="flex w-700px flex-col gap-40px rounded-lg bg-white p-40px">
+        <section className="flex items-center justify-between">
+          <h1 className="grow text-center text-xl font-bold text-text-neutral-primary">
+            Role Function Preview
+          </h1>
+          <button type="button" onClick={togglePreviewModal}>
+            <IoCloseOutline size={24} />
+          </button>
+        </section>
+
+        {/* // Info: (20241008 - Liz) 預覽影片 */}
+        <section>
+          <Image
+            src={'/images/fake_preview_cover.png'}
+            alt="fake_preview_cover"
+            width={620}
+            height={388}
+          ></Image>
+        </section>
+
+        {/* // Info: (20241008 - Liz) 切換影片控制按鈕 */}
+        <section className="flex justify-center gap-8px p-16px">
+          {videoIds.map((id, index) => (
+            <button
+              key={id}
+              type="button"
+              onClick={() => setVideoIndex(index)}
+              className={
+                videoIndex === index ? 'text-carousel-surface-active' : 'text-carousel-surface-mute'
+              }
+            >
+              <IoEllipse size={10} />
+            </button>
+          ))}
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default PreviewModal;

src/components/beta/select_role/role_card.tsx

@@ -3,8 +3,8 @@ import Image from 'next/image';
 import { RoleId } from '@/constants/role';
 
 interface RoleCardProps {
-  role: React.SetStateAction<string>;
-  setRole: React.Dispatch<React.SetStateAction<string>>;
+  showingRole: React.SetStateAction<RoleId | null>;
+  setShowingRole: React.Dispatch<React.SetStateAction<RoleId | null>>;
 }
 
 interface CardProps {
@@ -13,8 +13,8 @@ interface CardProps {
   title: string;
   imageSrc: string;
   altText: string;
-  role: React.SetStateAction<string>;
-  setRole: React.Dispatch<React.SetStateAction<string>>;
+  showingRole: React.SetStateAction<RoleId | null>;
+  setShowingRole: React.Dispatch<React.SetStateAction<RoleId | null>>;
 }
 
 // Info: (20241007 - Liz) 每個角色卡片的資訊
@@ -55,15 +55,15 @@ const Card: React.FC<CardProps> = ({
   title,
   imageSrc,
   altText,
-  role,
-  setRole,
+  showingRole,
+  setShowingRole,
 }) => {
-  const isRoleSelected = role === roleId;
+  const isRoleSelected = showingRole === roleId;
 
   return (
     <button
       type="button"
-      onClick={() => setRole(roleId)}
+      onClick={() => setShowingRole(roleId)}
       disabled={isRoleDisabled}
       className={`relative flex h-120px w-240px skew-x-20 items-center rounded-sm text-text-neutral-primary shadow-Dropshadow_XS disabled:opacity-50 desktop:w-360px ${isRoleSelected ? 'border-2 border-stroke-brand-primary bg-surface-brand-primary-30' : 'bg-surface-neutral-surface-lv2 hover:bg-surface-brand-primary-10'} ${isRoleDisabled && 'pointer-events-none'}`}
     >
@@ -77,13 +77,13 @@ const Card: React.FC<CardProps> = ({
         alt={altText}
         width={48}
         height={48}
-        className={`absolute -left-50px -top-30px w-160px -skew-x-20 rounded-full ${role === roleId ? 'border-4 border-stroke-brand-primary' : ''}`}
+        className={`absolute -left-50px -top-30px w-160px -skew-x-20 rounded-full ${showingRole === roleId ? 'border-4 border-stroke-brand-primary' : ''}`}
       />
     </button>
   );
 };
 
-const RoleCard = ({ role, setRole }: RoleCardProps) => {
+const RoleCard = ({ showingRole, setShowingRole }: RoleCardProps) => {
   return (
     <div className="flex gap-80px">
       {cards.map((card) => (
@@ -94,8 +94,8 @@ const RoleCard = ({ role, setRole }: RoleCardProps) => {
           title={card.title}
           imageSrc={card.imageSrc}
           altText={card.altText}
-          role={role}
-          setRole={setRole}
+          showingRole={showingRole}
+          setShowingRole={setShowingRole}
         />
       ))}
     </div>

src/constants/role.ts

@@ -1,4 +1,4 @@
-// Info: (20241007 - Liz) 每個角色卡片的角色 id
+// Info: (20241007 - Liz) 角色 id (與後端的角色 id 不同，未來後端會提供 role name)
 export enum RoleId {
   BOOKKEEPER = 'bookkeeper',
   EDUCATIONAL_TRIAL_VERSION = 'educational_trial_version',

src/constants/url.ts

@@ -17,6 +17,8 @@ export const ISUNFA_ROUTE = {
   LOGIN: '/users/login',
   BETA_LOGIN: '/beta/login', // Info: (20241001 - Liz) Beta login
   EXAMPLE: '/beta/example', // Info: (20241001 - Liz) Beta example page for testing login
+  SELECT_ROLE: '/beta/select_role',
+  JOB_RECORD: '/beta/job_record',
 
   DASHBOARD: '/users/dashboard',
   KYC: '/users/kyc',