add zoomName, copy icon, consent form

esc-chula · Oct 19, 2023 · c7ece2c · c7ece2c
1 parent 760fa76
commit c7ece2c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/src/assets/images/icon/copy-to-clipboard.svg b/src/assets/images/icon/copy-to-clipboard.svg
diff --git a/src/core/components/profile/stepCard.component.tsx b/src/core/components/profile/stepCard.component.tsx
@@ -7,6 +7,7 @@ import { useApplicationStateContext } from "../../providers/applicationState.pro
 import { dateToLocaleString, resolveRegistraionTime } from "../../../utils/conversion"
 import { useAuthContext } from "../../providers/auth.provider"
 import MyProfileModel from "../../models/myprofile.models"
+import copyToClipBoard from "../../assets/images/icon/copy-to-clipboard.svg"
 
 const useStyles = makeStyles(theme => ({
   card: {
@@ -150,10 +151,10 @@ const StepCard: React.FC<StepCardProps> = ({ step, status, isApproved }) => {
   const { openPaymentDialog, openShirtSizeDialog } = useDialogContext()
   const { me } = useAuthContext()
   const { application } = useApplicationStateContext()
-
   const { documentState } = me.data as MyProfileModel
 
   const text = stepCardConstant[step][status][isApproved]!
+  const zoomName = application.lgNumber.trim().substring(3) + "_" + application.firstName.trim()
 
   const setStepIndicatorStyles = (status: String) => {
     switch (status) {
@@ -180,6 +181,14 @@ const StepCard: React.FC<StepCardProps> = ({ step, status, isApproved }) => {
     )
   }
 
+  const copyTextToClipboard = async () => {
+    if ("clipboard" in navigator) {
+      return await navigator.clipboard.writeText(zoomName)
+    } else {
+      return document.execCommand("copy", true, zoomName)
+    }
+  }
+
   const renderButton = (opensDialog: boolean, dialogType: string | undefined, isPrimary: boolean, isExternalPath: boolean | undefined) => {
     if (opensDialog) {
       if (dialogType === "payment") return resolveButton(isPrimary, openPaymentDialog)
@@ -231,7 +240,9 @@ const StepCard: React.FC<StepCardProps> = ({ step, status, isApproved }) => {
                 </Typography>
                 <Typography variant="subtitle2" className={`${classes.text} ${classes.content}`}>
                   {text.contents}
+                  ตั้งชื่อ LG {zoomName} <img src={copyToClipBoard} onClick={copyTextToClipboard} alt="" />
                 </Typography>
+
                 <div className={classes.buttonContainer}>
                   {text.primaryButton &&
                     renderButton(text.primaryButton.opensDialog, text.primaryButton.dialogType, true, text.primaryButton.isExternalPath)}
@@ -268,6 +279,14 @@ const StepCard: React.FC<StepCardProps> = ({ step, status, isApproved }) => {
                   style={{ color: "#941014" }}>
                   แผนที่การเดินทางไปคณะวิศวกรรมศาสตร์
                 </a>
+                <a
+                  href="https://docs.google.com/forms/d/e/1FAIpQLSdKhVP_C7tZ1-xDzVEQu6mloZPcveaLgBvkzx52JBfo4wuKPw/viewform"
+                  className="no-underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ color: "#941014" }}>
+                  แบบฟอร์มยินยอมให้เก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคล
+                </a>
                 <div className={classes.buttonContainer}>
                   {text.secondaryButton &&
                     renderButton(text.secondaryButton.opensDialog, text.secondaryButton.dialogType, false, text.secondaryButton.isExternalPath)}

diff --git a/src/utils/conversion.tsx b/src/utils/conversion.tsx
@@ -9,15 +9,13 @@ export const dateToLocaleString = (isoString: string) => {
 
 export const resolveRegistraionTime = (isoString: string) => {
   const date = new Date(isoString)
-  let startTime : string = (date.getHours()-1).toString() + ":" + (date.getMinutes()+15).toString()
-  for (let i = 0; i < 5-startTime.length; i++) {
+  let startTime: string = (date.getHours() - 1).toString() + ":" + (date.getMinutes() + 15).toString()
+  for (let i = 0; i < 5 - startTime.length; i++) {
     startTime = "0" + startTime
   }
-  let endTime : string = (date.getHours()-1).toString() + ":" + (date.getMinutes()+45).toString()
-  for (let i = 0; i < 5-endTime.length; i++) {
+  let endTime: string = (date.getHours() - 1).toString() + ":" + (date.getMinutes() + 45).toString()
+  for (let i = 0; i < 5 - endTime.length; i++) {
     endTime = "0" + endTime
   }
-  return (
-   startTime + " ถึง " + endTime + " น."
-  )
-} 
+  return startTime + " ถึง " + endTime + " น."
+}