@nualang/nualang-ui-components 0.1.1419 → 0.1.1421

package/dist/Live/HowToJoin/HowToJoin.js

@@ -1,137 +1,238 @@
-import { Typography, Box, Link, List, ListItem, ListItemText, Divider, IconButton } from "@mui/material";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { useState } from "react";
+import { Typography, Box, Button, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import LinkIcon from "@mui/icons-material/Link";
 import SwipeableDrawer from "@mui/material/SwipeableDrawer";
-import { useTheme } from "@mui/material/styles";
 import { QRCode } from "react-qrcode-logo";
 import nualangImage from "../../img/nualangSquareIcon.svg";
+import { selectedRowBg } from "../../Lists/RoleplaySelection/RoleplaySelection";
 
-// Sentinel handed to i18next as the interpolation value so we can split the
-// translated sentence and drop a React node in the placeholder's position.
-// Splitting on the real value would break when it is empty or repeated, and
-// splitting on the raw "{{name}}" token would not work because i18next has
-// already substituted it.
+// The QR stays on a fixed white card with brand-purple modules in both themes
+// so it always scans reliably.
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const PLACEHOLDER = "\u0000";
-function withNode(sentence, node) {
-  const [before, after = ""] = sentence.split(PLACEHOLDER);
+const QR_FG = "#8300A1";
+const QR_BG = "#fff";
+
+// Split the translated sentence on the raw `{{button}}` placeholder (before
+// i18next interpolates it) so we can drop a React node in the button's position.
+// If a locale omits the placeholder, `node` is simply appended after the text.
+function withButton(sentence, node) {
+  const [before, after = ""] = (sentence || "").split("{{button}}");
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [before, node, after]
   });
 }
 export default function HowToJoin({
   t,
-  classroomName,
   classroomURL,
   isOpen,
   handleClose
 }) {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(SwipeableDrawer, {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(classroomURL);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard unavailable — no-op
+    }
+  };
+  const displayUrl = (classroomURL || "").replace(/^https?:\/\//, "");
+  const steps = [t("invite_step_sign_in"), t("invite_step_scan"), withButton(t("invite_step_tap_join", {
+    button: "{{button}}"
+  }), /*#__PURE__*/_jsx("b", {
+    children: t("join_live_game")
+  }))];
+  const sectionLabelSx = {
+    fontSize: 14,
+    fontWeight: 700,
+    color: "text.secondary"
+  };
+  return /*#__PURE__*/_jsx(SwipeableDrawer, {
     open: isOpen,
     anchor: "right",
     onClose: handleClose,
+    onOpen: () => {},
     sx: {
-      zIndex: "3000"
+      zIndex: 3000
     },
-    children: [/*#__PURE__*/_jsxs(Box, {
+    children: /*#__PURE__*/_jsxs(Box, {
       sx: {
-        p: 5,
-        maxWidth: "700px"
+        width: 520,
+        maxWidth: "100vw",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "background.paper"
       },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h5",
-        component: "h1",
-        gutterBottom: true,
-        children: t("how_to_join_title")
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        gutterBottom: true,
-        children: t("how_to_join_intro")
-      }), /*#__PURE__*/_jsxs(List, {
+      children: [/*#__PURE__*/_jsxs(Box, {
         sx: {
-          listStyleType: "decimal",
-          pl: 2,
-          "& .MuiListItem-root": {
-            display: "list-item"
-          }
+          p: "24px 24px 16px",
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          gap: 2
         },
-        children: [/*#__PURE__*/_jsx(ListItem, {
-          children: /*#__PURE__*/_jsx(ListItemText, {
-            primary: /*#__PURE__*/_jsx(Typography, {
-              component: "span",
-              variant: "body1",
-              children: t("how_to_join_sign_in")
-            })
-          })
-        }), /*#__PURE__*/_jsx(ListItem, {
-          children: /*#__PURE__*/_jsx(ListItemText, {
-            primary: /*#__PURE__*/_jsx(Typography, {
-              component: "span",
-              variant: "body1",
-              children: withNode(t("how_to_join_open_classroom", {
-                classroom: PLACEHOLDER
-              }), /*#__PURE__*/_jsx(Link, {
-                href: classroomURL,
-                target: "_blank",
-                rel: "noreferrer",
-                children: classroomName
-              }))
-            })
-          })
-        }), /*#__PURE__*/_jsx(Box, {
+        children: [/*#__PURE__*/_jsx(Box, {
           sx: {
-            pl: 2.5,
-            py: 5
+            display: "flex",
+            flexDirection: "column",
+            gap: 0.5
           },
-          children: /*#__PURE__*/_jsx(QRCode, {
-            value: classroomURL,
-            size: 256,
-            fgColor: theme.palette.primary.main,
-            bgColor: theme.palette.background.paper,
-            logoImage: nualangImage,
-            logoHeight: 70,
-            logoWidth: 70,
-            qrStyle: "dots"
+          children: /*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontSize: 24,
+              fontWeight: 700,
+              lineHeight: 1.3,
+              color: "text.primary"
+            },
+            children: t("how_to_join_title")
           })
-        }), /*#__PURE__*/_jsx(ListItem, {
-          children: /*#__PURE__*/_jsx(ListItemText, {
-            primary: /*#__PURE__*/_jsx(Typography, {
-              component: "span",
-              variant: "body1",
-              children: withNode(t("how_to_join_find_button", {
-                button: PLACEHOLDER
-              }), /*#__PURE__*/_jsx("b", {
-                children: t("join_live_game")
-              }))
-            })
+        }), /*#__PURE__*/_jsx(IconButton, {
+          onClick: handleClose,
+          "aria-label": t("close"),
+          size: "small",
+          children: /*#__PURE__*/_jsx(CloseIcon, {
+            sx: {
+              fontSize: 24,
+              color: "text.secondary"
+            }
           })
-        }), /*#__PURE__*/_jsx(ListItem, {
-          children: /*#__PURE__*/_jsx(ListItemText, {
-            primary: /*#__PURE__*/_jsx(Typography, {
-              component: "span",
-              variant: "body1",
-              children: t("how_to_join_get_ready")
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          flex: 1,
+          p: "0 24px 24px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 3,
+          overflow: "auto"
+        },
+        children: [/*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center"
+          },
+          children: /*#__PURE__*/_jsx(Box, {
+            sx: {
+              backgroundColor: QR_BG,
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: "12px",
+              p: 2,
+              display: "flex"
+            },
+            children: /*#__PURE__*/_jsx(QRCode, {
+              value: classroomURL,
+              size: 200,
+              fgColor: QR_FG,
+              bgColor: QR_BG,
+              logoImage: nualangImage,
+              logoHeight: 56,
+              logoWidth: 56,
+              qrStyle: "squares"
             })
           })
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 1
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: sectionLabelSx,
+            children: t("classroom_link")
+          }), /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: "8px",
+              px: 1.5,
+              py: 1
+            },
+            children: [/*#__PURE__*/_jsx(LinkIcon, {
+              sx: {
+                fontSize: 20,
+                color: "text.secondary",
+                flex: "none"
+              }
+            }), /*#__PURE__*/_jsx(Typography, {
+              noWrap: true,
+              sx: {
+                flex: 1,
+                minWidth: 0,
+                fontSize: 14,
+                color: "text.primary"
+              },
+              children: displayUrl
+            }), /*#__PURE__*/_jsx(Button, {
+              onClick: handleCopy,
+              color: "primary",
+              sx: {
+                fontWeight: 600,
+                flex: "none"
+              },
+              children: copied ? t("copied") : t("copy")
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 1
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: sectionLabelSx,
+            children: t("tell_students_to")
+          }), /*#__PURE__*/_jsx(Box, {
+            sx: {
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: "16px",
+              overflow: "hidden"
+            },
+            children: steps.map((step, i) => /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                p: 2,
+                ...(i > 0 ? {
+                  borderTop: "1px solid",
+                  borderColor: "divider"
+                } : {})
+              },
+              children: [/*#__PURE__*/_jsx(Box, {
+                sx: {
+                  flex: "none",
+                  width: 28,
+                  height: 28,
+                  borderRadius: "50%",
+                  backgroundColor: selectedRowBg,
+                  color: "primary.main",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 14,
+                  fontWeight: 700
+                },
+                children: i + 1
+              }), /*#__PURE__*/_jsx(Typography, {
+                sx: {
+                  fontSize: 16,
+                  color: "text.primary"
+                },
+                children: step
+              })]
+            }, i))
+          })]
         })]
       })]
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        flexGrow: 1
-      }
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Box, {
-      sx: theme => ({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "flex-start",
-        padding: "0 8px",
-        ...theme.mixins.toolbar
-      }),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        onClick: handleClose,
-        children: theme.direction === "ltr" ? /*#__PURE__*/_jsx(ChevronRightIcon, {}) : /*#__PURE__*/_jsx(ChevronLeftIcon, {})
-      })
-    })]
+    })
   });
 }