@cuemath/leap 3.2.28 → 3.2.29-j2

package/dist/features/trial-session/comps/pla/session-summary/summary-card/summary-card.js

@@ -0,0 +1,56 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { memo as a, useCallback as g } from "react";
+import { useTheme as u } from "styled-components";
+import b from "../../../../../../assets/line-icons/icons/chevron-right.js";
+import C from "../../../../../ui/buttons/clickable/clickable.js";
+import w from "../../../../../ui/image/image.js";
+import e from "../../../../../ui/layout/flex-view.js";
+import T from "../../../../../ui/separator/separator.js";
+import c from "../../../../../ui/text/text.js";
+import { EDeviceType as x } from "../../../../../ui/theme/constants.js";
+import { ImageWrapper as E } from "./summary-card-styled.js";
+const A = a(
+  ({
+    title: m,
+    description: h,
+    image: s,
+    textBG: t,
+    ctaLabel: $,
+    keyId: o,
+    isDemoDone: d,
+    onClick: n
+  }) => {
+    const f = u().device <= x.MOBILE, p = g(() => {
+      o && n && n(o);
+    }, [o, n]), l = /* @__PURE__ */ i(e, { $flex: 1, children: [
+      /* @__PURE__ */ r(E, { $height: 84, $width: "100%", $background: t, children: /* @__PURE__ */ r(w, { src: s, height: 84, width: "100%", withLoader: !1 }) }),
+      /* @__PURE__ */ i(e, { $gap: 12, $gutter: 16, $background: t, $flex: 1, children: [
+        /* @__PURE__ */ r(c, { $renderAs: "ac3-black", $renderOnMobileAs: "ac4-black", $color: "WHITE", children: m }),
+        /* @__PURE__ */ r(T, { height: f ? 8 : 12 }),
+        /* @__PURE__ */ r(c, { $renderAs: "ub3", $color: "WHITE", children: h })
+      ] })
+    ] }, m);
+    return d && o ? /* @__PURE__ */ i(e, { children: [
+      l,
+      /* @__PURE__ */ r(C, { label: o, onClick: p, children: /* @__PURE__ */ r(e, { $background: t, children: /* @__PURE__ */ i(
+        e,
+        {
+          $background: "BLACK_T_38",
+          $gapX: 0.5,
+          $gutterX: 0.5,
+          $flexDirection: "row",
+          $alignItems: "center",
+          $justifyContent: "space-between",
+          children: [
+            /* @__PURE__ */ r(e, { $gutterX: 0.5, $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ r(c, { $renderAs: "ac4", $color: "WHITE_1", children: $ }) }),
+            /* @__PURE__ */ r(b, { width: 24, height: 24, color: "WHITE" })
+          ]
+        }
+      ) }) })
+    ] }) : l;
+  }
+), O = a(A);
+export {
+  O as default
+};
+//# sourceMappingURL=summary-card.js.map

package/dist/features/trial-session/comps/pla/session-summary/summary-card/summary-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-card.js","sources":["../../../../../../../src/features/trial-session/comps/pla/session-summary/summary-card/summary-card.tsx"],"sourcesContent":["import type { ISessionSummaryCardProps } from './summary-card-types';\n\nimport { memo, useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport ChevronRightIcon from '../../../../../../assets/line-icons/icons/chevron-right';\nimport Clickable from '../../../../../ui/buttons/clickable/clickable';\nimport Image from '../../../../../ui/image/image';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport Separator from '../../../../../ui/separator/separator';\nimport Text from '../../../../../ui/text/text';\nimport { EDeviceType } from '../../../../../ui/theme/constants';\nimport * as Styled from './summary-card-styled';\n\nconst SessionSummaryCard = memo(\n  ({\n    title,\n    description,\n    image,\n    textBG,\n    ctaLabel,\n    keyId,\n    isDemoDone,\n    onClick,\n  }: ISessionSummaryCardProps) => {\n    const theme = useTheme();\n    const isMobile = theme.device <= EDeviceType.MOBILE;\n\n    const handleClick = useCallback(() => {\n      if (keyId && onClick) onClick(keyId);\n    }, [keyId, onClick]);\n\n    const CardContent = (\n      <FlexView key={title} $flex={1}>\n        <Styled.ImageWrapper $height={84} $width=\"100%\" $background={textBG}>\n          <Image src={image} height={84} width=\"100%\" withLoader={false} />\n        </Styled.ImageWrapper>\n        <FlexView $gap={12} $gutter={16} $background={textBG} $flex={1}>\n          <Text $renderAs=\"ac3-black\" $renderOnMobileAs=\"ac4-black\" $color=\"WHITE\">\n            {title}\n          </Text>\n          <Separator height={isMobile ? 8 : 12} />\n          <Text $renderAs=\"ub3\" $color=\"WHITE\">\n            {description}\n          </Text>\n        </FlexView>\n      </FlexView>\n    );\n\n    return isDemoDone && keyId ? (\n      <FlexView>\n        {CardContent}\n        <Clickable label={keyId} onClick={handleClick}>\n          <FlexView $background={textBG}>\n            <FlexView\n              $background=\"BLACK_T_38\"\n              $gapX={0.5}\n              $gutterX={0.5}\n              $flexDirection=\"row\"\n              $alignItems=\"center\"\n              $justifyContent=\"space-between\"\n            >\n              <FlexView $gutterX={0.5} $flexDirection=\"row\" $alignItems=\"center\">\n                <Text $renderAs=\"ac4\" $color=\"WHITE_1\">\n                  {ctaLabel}\n                </Text>\n              </FlexView>\n              <ChevronRightIcon width={24} height={24} color=\"WHITE\" />\n            </FlexView>\n          </FlexView>\n        </Clickable>\n      </FlexView>\n    ) : (\n      CardContent\n    );\n  },\n);\n\nexport default memo(SessionSummaryCard);\n"],"names":["SessionSummaryCard","memo","title","description","image","textBG","ctaLabel","keyId","isDemoDone","onClick","isMobile","useTheme","EDeviceType","handleClick","useCallback","CardContent","jsxs","FlexView","jsx","Styled.ImageWrapper","Image","Text","Separator","Clickable","ChevronRightIcon","SessionSummaryCard$1"],"mappings":";;;;;;;;;;;AAcA,MAAMA,IAAqBC;AAAA,EACzB,CAAC;AAAA,IACC,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,MAC8B;AAExB,UAAAC,IADQC,IACS,UAAUC,EAAY,QAEvCC,IAAcC,EAAY,MAAM;AAChC,MAAAP,KAASE,KAASA,EAAQF,CAAK;AAAA,IAAA,GAClC,CAACA,GAAOE,CAAO,CAAC,GAEbM,IACJ,gBAAAC,EAACC,GAAqB,EAAA,OAAO,GAC3B,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAS,IAAI,QAAO,QAAO,aAAad,GAC3D,4BAACe,GAAM,EAAA,KAAKhB,GAAO,QAAQ,IAAI,OAAM,QAAO,YAAY,GAAO,CAAA,GACjE;AAAA,MACA,gBAAAY,EAACC,KAAS,MAAM,IAAI,SAAS,IAAI,aAAaZ,GAAQ,OAAO,GAC3D,UAAA;AAAA,QAAA,gBAAAa,EAACG,KAAK,WAAU,aAAY,mBAAkB,aAAY,QAAO,SAC9D,UACHnB,EAAA,CAAA;AAAA,QACC,gBAAAgB,EAAAI,GAAA,EAAU,QAAQZ,IAAW,IAAI,IAAI;AAAA,0BACrCW,GAAK,EAAA,WAAU,OAAM,QAAO,SAC1B,UACHlB,GAAA;AAAA,MAAA,GACF;AAAA,IAAA,EAAA,GAZaD,CAaf;AAGK,WAAAM,KAAcD,IACnB,gBAAAS,EAACC,GACE,EAAA,UAAA;AAAA,MAAAF;AAAA,MACD,gBAAAG,EAACK,KAAU,OAAOhB,GAAO,SAASM,GAChC,UAAA,gBAAAK,EAACD,GAAS,EAAA,aAAaZ,GACrB,UAAA,gBAAAW;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAY;AAAA,UACZ,OAAO;AAAA,UACP,UAAU;AAAA,UACV,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAEhB,UAAA;AAAA,YAAA,gBAAAC,EAACD,GAAS,EAAA,UAAU,KAAK,gBAAe,OAAM,aAAY,UACxD,UAAC,gBAAAC,EAAAG,GAAA,EAAK,WAAU,OAAM,QAAO,WAC1B,YACH,CAAA,GACF;AAAA,8BACCG,GAAiB,EAAA,OAAO,IAAI,QAAQ,IAAI,OAAM,SAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,SAE3D,EACF,CAAA;AAAA,IAAA,EACF,CAAA,IAEAT;AAAA,EAEJ;AACF,GAEeU,IAAAxB,EAAKD,CAAkB;"}

package/dist/features/trial-session/comps/pla/upcoming-sessions/upcoming-sessions-styled.js

@@ -0,0 +1,17 @@
+import t from "styled-components";
+import r from "../../../../ui/layout/flex-view.js";
+const p = t(r)`
+  border-bottom: ${({ theme: o }) => `1px solid ${o.colors.BLACK_5}`};
+  min-height: 52px;
+`, s = t(r)`
+  border-right: ${({ theme: o }) => `1px solid ${o.colors.BLACK_5}`};
+`, d = t(r)`
+  padding-bottom: 0;
+  min-width: 22px;
+`;
+export {
+  d as DateWrapper,
+  s as DayLabel,
+  p as SessionRow
+};
+//# sourceMappingURL=upcoming-sessions-styled.js.map

package/dist/features/trial-session/comps/pla/upcoming-sessions/upcoming-sessions-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upcoming-sessions-styled.js","sources":["../../../../../../src/features/trial-session/comps/pla/upcoming-sessions/upcoming-sessions-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nconst SessionRow = styled(FlexView)`\n  border-bottom: ${({ theme }) => `1px solid ${theme.colors.BLACK_5}`};\n  min-height: 52px;\n`;\n\nconst DayLabel = styled(FlexView)`\n  border-right: ${({ theme }) => `1px solid ${theme.colors.BLACK_5}`};\n`;\nconst DateWrapper = styled(FlexView)`\n  padding-bottom: 0;\n  min-width: 22px;\n`;\n\nexport { SessionRow, DayLabel, DateWrapper };\n"],"names":["SessionRow","styled","FlexView","theme","DayLabel","DateWrapper"],"mappings":";;AAIM,MAAAA,IAAaC,EAAOC,CAAQ;AAAA,mBACf,CAAC,EAAE,OAAAC,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA;AAAA,GAI/DC,IAAWH,EAAOC,CAAQ;AAAA,kBACd,CAAC,EAAE,OAAAC,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAE9DE,IAAcJ,EAAOC,CAAQ;AAAA;AAAA;AAAA;"}

package/dist/features/trial-session/comps/pla/upcoming-sessions/upcoming-sessions.js

@@ -0,0 +1,88 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { memo as E, useCallback as b } from "react";
+import { useTheme as C } from "styled-components";
+import I from "../../../../../assets/line-icons/icons/check2.js";
+import { CUEMATH_APP_URL as w } from "../../../../../constants/config.js";
+import x from "../../../../ui/buttons/text-button/text-button.js";
+import n from "../../../../ui/layout/flex-view.js";
+import d from "../../../../ui/separator/separator.js";
+import i from "../../../../ui/text/text.js";
+import { EDeviceType as y } from "../../../../ui/theme/constants.js";
+import { SessionRow as A, DayLabel as D, DateWrapper as H } from "./upcoming-sessions-styled.js";
+import { addDays as M } from "../../../../../node_modules/date-fns/addDays.js";
+import { isToday as W } from "../../../../../node_modules/date-fns/isToday.js";
+import { formatDate as s } from "../../../../../node_modules/date-fns/format.js";
+const k = ({ sessions: p = [] }) => {
+  const c = C(), $ = c.device <= y.MOBILE, f = /* @__PURE__ */ new Date(), h = new Map(
+    p.map((o) => [
+      s(new Date(o.next_session_start * 1e3), "yyyy-MM-dd"),
+      o
+    ])
+  ), T = Array.from({ length: 7 }, (o, l) => M(f, l)), _ = b(() => {
+    window.open(w, "_blank");
+  }, []);
+  return /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ t(n, { children: [
+      /* @__PURE__ */ e(i, { $renderAs: "ah4-bold", $renderOnMobileAs: "ab1-bold", $color: "WHITE", children: "Upcoming sessions" }),
+      /* @__PURE__ */ e(d, { height: 4 }),
+      /* @__PURE__ */ t(n, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.25, children: [
+        /* @__PURE__ */ e(i, { $renderAs: "ub1", $color: "WHITE_T_60", children: "For more details," }),
+        /* @__PURE__ */ e(x, { label: "download the Cuemath app", onClick: _, color: "WHITE" })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(d, { height: $ ? 16 : 20 }),
+    /* @__PURE__ */ e(n, { $borderColor: "BLACK_5", children: T.map((o) => {
+      const l = s(o, "yyyy-MM-dd"), r = h.get(l), m = W(o), a = (r == null ? void 0 : r.session_status) === "COMPLETED", g = (r == null ? void 0 : r.session_status) === "IN_FUTURE" ? "GREEN_6" : "BLACK_1", u = a ? "WHITE_T_10" : g;
+      return /* @__PURE__ */ t(A, { $flex: 1, $flexDirection: "row", children: [
+        /* @__PURE__ */ t(
+          D,
+          {
+            $width: 80,
+            $flexDirection: "row",
+            $alignItems: "center",
+            $flexColumnGapX: 0.25,
+            $gutterX: 1,
+            $gapX: 0.5,
+            children: [
+              /* @__PURE__ */ e(i, { $renderAs: "ac4-black", $color: "WHITE_1", children: s(o, "EEE").toUpperCase() }),
+              /* @__PURE__ */ e(
+                H,
+                {
+                  $background: m ? "WHITE" : "TRANSPARENT",
+                  $width: 22,
+                  $height: 22,
+                  $alignItems: "center",
+                  $justifyContent: "center",
+                  $borderRadius: 11,
+                  $gutter: 1,
+                  $gap: 2,
+                  children: /* @__PURE__ */ e(i, { $renderAs: "ab3-bold", $color: m ? "BLACK_1" : "WHITE_1", children: s(o, "d") })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          n,
+          {
+            $flex: 1,
+            $gutterX: 1,
+            $gap: 14,
+            $background: u,
+            $flexDirection: "row",
+            $justifyContent: "space-between",
+            $alignItems: "center",
+            children: [
+              r ? /* @__PURE__ */ e(i, { $renderAs: "ab2", $color: a ? "WHITE_T_38" : "WHITE", children: s(new Date(r.next_session_start * 1e3), "p") }) : null,
+              a && /* @__PURE__ */ e(I, { color: c.colors.WHITE_T_38 })
+            ]
+          }
+        )
+      ] }, l);
+    }) })
+  ] });
+}, V = E(k);
+export {
+  V as default
+};
+//# sourceMappingURL=upcoming-sessions.js.map

package/dist/features/trial-session/comps/pla/upcoming-sessions/upcoming-sessions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upcoming-sessions.js","sources":["../../../../../../src/features/trial-session/comps/pla/upcoming-sessions/upcoming-sessions.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type { IUpcomingSessionsProps } from './upcoming-sessions-types';\n\nimport { format, isToday, addDays } from 'date-fns';\nimport React, { useCallback, memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Check2Icon from '../../../../../assets/line-icons/icons/check2';\nimport { CUEMATH_APP_URL } from '../../../../../constants/config';\nimport TextButton from '../../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\nimport * as Styled from './upcoming-sessions-styled';\n\nconst UpcomingSessions: React.FC<IUpcomingSessionsProps> = ({ sessions = [] }) => {\n  const theme = useTheme();\n  const isMobile = theme.device <= EDeviceType.MOBILE;\n  const today = new Date();\n  const sessionsMap = new Map(\n    sessions.map(session => [\n      format(new Date(session.next_session_start * 1000), 'yyyy-MM-dd'),\n      session,\n    ]),\n  );\n\n  const days = Array.from({ length: 7 }, (_, i) => addDays(today, i));\n\n  const handleOpenApp = useCallback(() => {\n    window.open(CUEMATH_APP_URL, '_blank');\n  }, []);\n\n  return (\n    <FlexView>\n      <FlexView>\n        <Text $renderAs=\"ah4-bold\" $renderOnMobileAs=\"ab1-bold\" $color=\"WHITE\">\n          Upcoming sessions\n        </Text>\n        <Separator height={4} />\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.25}>\n          <Text $renderAs=\"ub1\" $color=\"WHITE_T_60\">\n            For more details,\n          </Text>\n          <TextButton label=\"download the Cuemath app\" onClick={handleOpenApp} color=\"WHITE\" />\n        </FlexView>\n      </FlexView>\n      <Separator height={isMobile ? 16 : 20} />\n      <FlexView $borderColor=\"BLACK_5\">\n        {days.map(day => {\n          const dateKey = format(day, 'yyyy-MM-dd');\n          const session = sessionsMap.get(dateKey);\n          const isTodayFlag = isToday(day);\n          const isCompletedSession = session?.session_status === 'COMPLETED';\n          const defaultTimecellBg = session?.session_status === 'IN_FUTURE' ? 'GREEN_6' : 'BLACK_1';\n          const timeCellBg = isCompletedSession ? 'WHITE_T_10' : defaultTimecellBg;\n\n          return (\n            <Styled.SessionRow key={dateKey} $flex={1} $flexDirection=\"row\">\n              <Styled.DayLabel\n                $width={80}\n                $flexDirection=\"row\"\n                $alignItems=\"center\"\n                $flexColumnGapX={0.25}\n                $gutterX={1}\n                $gapX={0.5}\n              >\n                <Text $renderAs=\"ac4-black\" $color=\"WHITE_1\">\n                  {format(day, 'EEE').toUpperCase()}\n                </Text>\n                <Styled.DateWrapper\n                  $background={isTodayFlag ? 'WHITE' : 'TRANSPARENT'}\n                  $width={22}\n                  $height={22}\n                  $alignItems=\"center\"\n                  $justifyContent=\"center\"\n                  $borderRadius={11}\n                  $gutter={1}\n                  $gap={2}\n                >\n                  <Text $renderAs=\"ab3-bold\" $color={isTodayFlag ? 'BLACK_1' : 'WHITE_1'}>\n                    {format(day, 'd')}\n                  </Text>\n                </Styled.DateWrapper>\n              </Styled.DayLabel>\n              <FlexView\n                $flex={1}\n                $gutterX={1}\n                $gap={14}\n                $background={timeCellBg as TColorNames}\n                $flexDirection=\"row\"\n                $justifyContent=\"space-between\"\n                $alignItems=\"center\"\n              >\n                {session ? (\n                  <Text $renderAs=\"ab2\" $color={isCompletedSession ? 'WHITE_T_38' : 'WHITE'}>\n                    {format(new Date(session.next_session_start * 1000), 'p')}\n                  </Text>\n                ) : null}\n                {isCompletedSession && <Check2Icon color={theme.colors.WHITE_T_38} />}\n              </FlexView>\n            </Styled.SessionRow>\n          );\n        })}\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(UpcomingSessions);\n"],"names":["UpcomingSessions","sessions","theme","useTheme","isMobile","EDeviceType","today","sessionsMap","session","format","days","_","i","addDays","handleOpenApp","useCallback","CUEMATH_APP_URL","FlexView","jsxs","jsx","Text","Separator","TextButton","day","dateKey","isTodayFlag","isToday","isCompletedSession","defaultTimecellBg","timeCellBg","Styled.SessionRow","Styled.DayLabel","Styled.DateWrapper","Check2Icon","upcomingSessions","memo"],"mappings":"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"}

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-helpers.js

@@ -0,0 +1,12 @@
+import { COUNTRY_FLAGS as g } from "../teacher-intro-constants.js";
+const f = (n) => {
+  const l = Object.values(g);
+  return n.map((r, t) => {
+    const e = l.find((o) => o.name === r), a = (e == null ? void 0 : e.name) || r;
+    return t === n.length - 1 && n.length > 1 ? `and ${a}` : `${a}${t < n.length - 2 ? ", " : t === n.length - 2 ? " " : ""}`;
+  }).join("");
+};
+export {
+  f as formatCountryList
+};
+//# sourceMappingURL=teacher-profile-helpers.js.map

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teacher-profile-helpers.js","sources":["../../../../../../src/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-helpers.ts"],"sourcesContent":["import { COUNTRY_FLAGS } from '../teacher-intro-constants';\n\nexport const formatCountryList = (countries: string[]) => {\n  const countryFlagArray = Object.values(COUNTRY_FLAGS);\n\n  return countries\n    .map((country, i) => {\n      const match = countryFlagArray.find(item => item.name === country);\n      const label = match?.name || country;\n\n      if (i === countries.length - 1 && countries.length > 1) {\n        return `and ${label}`;\n      }\n\n      return `${label}${i < countries.length - 2 ? ', ' : i === countries.length - 2 ? ' ' : ''}`;\n    })\n    .join('');\n};\n"],"names":["formatCountryList","countries","countryFlagArray","COUNTRY_FLAGS","country","i","match","item","label"],"mappings":";AAEa,MAAAA,IAAoB,CAACC,MAAwB;AAClD,QAAAC,IAAmB,OAAO,OAAOC,CAAa;AAEpD,SAAOF,EACJ,IAAI,CAACG,GAASC,MAAM;AACnB,UAAMC,IAAQJ,EAAiB,KAAK,CAAQK,MAAAA,EAAK,SAASH,CAAO,GAC3DI,KAAQF,KAAA,gBAAAA,EAAO,SAAQF;AAE7B,WAAIC,MAAMJ,EAAU,SAAS,KAAKA,EAAU,SAAS,IAC5C,OAAOO,CAAK,KAGd,GAAGA,CAAK,GAAGH,IAAIJ,EAAU,SAAS,IAAI,OAAOI,MAAMJ,EAAU,SAAS,IAAI,MAAM,EAAE;AAAA,EAAA,CAC1F,EACA,KAAK,EAAE;AACZ;"}

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js

@@ -1,49 +1,84 @@
 import r from "styled-components";
-import e from "../../../../ui/image/image.js";
-import t from "../../../../ui/layout/flex-view.js";
-const l = r(e)`
+import { ILLUSTRATIONS as i } from "../../../../../assets/illustrations/illustrations.js";
+import t from "../../../../ui/image/image.js";
+import e from "../../../../ui/layout/flex-view.js";
+const p = r(t)`
   object-fit: cover;
-`, c = r.div(
+  border-radius: 50%;
+  border: 1px solid ${({ theme: o }) => o.colors.REAL_BLACK};
+`, c = r(e)(
   ({ theme: o }) => `
-  flex: 1;
-  display: grid;
-  border-left: 1px solid ${o.colors.BLACK_T_87};
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: auto auto auto;
+  background-image: url(${i.RADIAL_GRADIENT});
+  background-repeat: no-repeat;
+  background-size: auto;
+  background-position: center;
+  position: relative;
+  ${o.mediaQueries.minWidthTablet} {
+    background-repeat: contain;
+  }
 `
-), h = r(t)(
+), s = r.div(
   ({ theme: o }) => `
-  border: 0.5px solid ${o.colors.WHITE_5};
-  &:first-child,
-  &:nth-child(2) {
-    grid-column: span 1;
-  }
-  &:nth-child(3),
-  &:nth-child(4) {
-    grid-column: span 2;
-  }
-  &:first-child {
-    border-left: none;
-    border-top: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  ${o.mediaQueries.minWidthTablet} {
+    flex: 1;
+    display: grid;
+    border-left: 1px solid ${o.colors.BLACK_T_87};
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto auto auto;
   }
-  &:nth-child(2) {
-    border-right: none;
-    border-top: none;
+`
+), b = r(e)(
+  ({ theme: o }) => `
+  width: 33.33%;
+  &:nth-child(odd) {
+    padding: 12px 16px;
   }
-  &:nth-child(3) {
-    border-left: none;
-    border-right: none;
+  &:last-child {
+    width: 100%;
   }
-  &:nth-child(4) {
-    border-left: none;
-    border-right: none;
-    border-bottom: none;
+  ${o.mediaQueries.minWidthTablet} {
+    width: auto;
+    border: 0.5px solid ${o.colors.WHITE_5};
+    &:first-child,
+    &:nth-child(2) {
+      grid-column: span 1;
+    }
+    &:nth-child(3),
+    &:nth-child(4) {
+      grid-column: span 2;
+    }
+    &:first-child {
+      border-left: none;
+      border-top: none;
+    }
+    &:nth-child(2) {
+      border-right: none;
+      border-top: none;
+    }
+    &:nth-child(3) {
+      border-left: none;
+      border-right: none;
+    }
+    &:nth-child(4) {
+      border-left: none;
+      border-right: none;
+      border-bottom: none;
+    }
   }
 `
-);
+), h = r(e)`
+  position: absolute;
+  top: 8px;
+  left: 8px;
+`;
 export {
-  c as GridContainer,
-  h as GridItem,
-  l as ProfilePicture
+  h as CueLogoWrapper,
+  s as GridContainer,
+  b as GridItem,
+  p as ProfilePicture,
+  c as ProfileWrapper
 };
 //# sourceMappingURL=teacher-profile-styled.js.map

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"teacher-profile-styled.js","sources":["../../../../../../src/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\n\nconst ProfilePicture = styled(Image)`\n  object-fit: cover;\n`;\n\nconst GridContainer = styled.div(\n  ({ theme }) => `\n  flex: 1;\n  display: grid;\n  border-left: 1px solid ${theme.colors.BLACK_T_87};\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: auto auto auto;\n`,\n);\n\nconst GridItem = styled(FlexView)(\n  ({ theme }) => `\n  border: 0.5px solid ${theme.colors.WHITE_5};\n  &:first-child,\n  &:nth-child(2) {\n    grid-column: span 1;\n  }\n  &:nth-child(3),\n  &:nth-child(4) {\n    grid-column: span 2;\n  }\n  &:first-child {\n    border-left: none;\n    border-top: none;\n  }\n  &:nth-child(2) {\n    border-right: none;\n    border-top: none;\n  }\n  &:nth-child(3) {\n    border-left: none;\n    border-right: none;\n  }\n  &:nth-child(4) {\n    border-left: none;\n    border-right: none;\n    border-bottom: none;\n  }\n`,\n);\n\nexport { ProfilePicture, GridContainer, GridItem };\n"],"names":["ProfilePicture","styled","Image","GridContainer","theme","GridItem","FlexView"],"mappings":";;;AAKM,MAAAA,IAAiBC,EAAOC,CAAK;AAAA;AAAA,GAI7BC,IAAgBF,EAAO;AAAA,EAC3B,CAAC,EAAE,OAAAG,EAAA,MAAY;AAAA;AAAA;AAAA,2BAGUA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAIlD,GAEMC,IAAWJ,EAAOK,CAAQ;AAAA,EAC9B,CAAC,EAAE,OAAAF,EAAA,MAAY;AAAA,wBACOA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2B5C;"}
+{"version":3,"file":"teacher-profile-styled.js","sources":["../../../../../../src/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\n\nconst ProfilePicture = styled(Image)`\n  object-fit: cover;\n  border-radius: 50%;\n  border: 1px solid ${({ theme }) => theme.colors.REAL_BLACK};\n`;\n\nconst ProfileWrapper = styled(FlexView)(\n  ({ theme }) => `\n  background-image: url(${ILLUSTRATIONS.RADIAL_GRADIENT});\n  background-repeat: no-repeat;\n  background-size: auto;\n  background-position: center;\n  position: relative;\n  ${theme.mediaQueries.minWidthTablet} {\n    background-repeat: contain;\n  }\n`,\n);\n\nconst GridContainer = styled.div(\n  ({ theme }) => `\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  ${theme.mediaQueries.minWidthTablet} {\n    flex: 1;\n    display: grid;\n    border-left: 1px solid ${theme.colors.BLACK_T_87};\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: auto auto auto;\n  }\n`,\n);\n\nconst GridItem = styled(FlexView)(\n  ({ theme }) => `\n  width: 33.33%;\n  &:nth-child(odd) {\n    padding: 12px 16px;\n  }\n  &:last-child {\n    width: 100%;\n  }\n  ${theme.mediaQueries.minWidthTablet} {\n    width: auto;\n    border: 0.5px solid ${theme.colors.WHITE_5};\n    &:first-child,\n    &:nth-child(2) {\n      grid-column: span 1;\n    }\n    &:nth-child(3),\n    &:nth-child(4) {\n      grid-column: span 2;\n    }\n    &:first-child {\n      border-left: none;\n      border-top: none;\n    }\n    &:nth-child(2) {\n      border-right: none;\n      border-top: none;\n    }\n    &:nth-child(3) {\n      border-left: none;\n      border-right: none;\n    }\n    &:nth-child(4) {\n      border-left: none;\n      border-right: none;\n      border-bottom: none;\n    }\n  }\n`,\n);\n\nconst CueLogoWrapper = styled(FlexView)`\n  position: absolute;\n  top: 8px;\n  left: 8px;\n`;\n\nexport { CueLogoWrapper, ProfilePicture, GridContainer, GridItem, ProfileWrapper };\n"],"names":["ProfilePicture","styled","Image","theme","ProfileWrapper","FlexView","ILLUSTRATIONS","GridContainer","GridItem","CueLogoWrapper"],"mappings":";;;;AAMM,MAAAA,IAAiBC,EAAOC,CAAK;AAAA;AAAA;AAAA,sBAGb,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,GAGtDC,IAAiBH,EAAOI,CAAQ;AAAA,EACpC,CAAC,EAAE,OAAAF,EAAA,MAAY;AAAA,0BACSG,EAAc,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnDH,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAIrC,GAEMI,IAAgBN,EAAO;AAAA,EAC3B,CAAC,EAAE,OAAAE,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA,IAIbA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA,6BAGRA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAKpD,GAEMK,IAAWP,EAAOI,CAAQ;AAAA,EAC9B,CAAC,EAAE,OAAAF,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQbA,EAAM,aAAa,cAAc;AAAA;AAAA,0BAEXA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4B9C,GAEMM,IAAiBR,EAAOI,CAAQ;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.js

@@ -1,64 +1,178 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { memo as G, useMemo as T } from "react";
-import C from "../../../../ui/image/image.js";
-import a from "../../../../ui/layout/flex-view.js";
-import j from "../../../../ui/separator/separator.js";
-import t from "../../../../ui/text/text.js";
-import { COUNTRY_FLAGS as k } from "../teacher-intro-constants.js";
-import { ProfilePicture as I, GridContainer as S, GridItem as i } from "./teacher-profile-styled.js";
-const O = G(({ teacherProfile: s }) => {
+import { jsxs as n, Fragment as E, jsx as r } from "react/jsx-runtime";
+import { memo as B, useMemo as o, useCallback as m } from "react";
+import { useTheme as Y } from "styled-components";
+import V from "../../../../../assets/line-icons/icons/cuemath-logo.js";
+import F from "../../../../ui/buttons/button/button.js";
+import K from "../../../../ui/image/image.js";
+import s from "../../../../ui/layout/flex-view.js";
+import T from "../../../../ui/separator/separator.js";
+import c from "../../../../ui/text/text.js";
+import { EDeviceType as H } from "../../../../ui/theme/constants.js";
+import { COUNTRY_FLAGS as U } from "../teacher-intro-constants.js";
+import { formatCountryList as q } from "./teacher-profile-helpers.js";
+import { GridItem as G, ProfileWrapper as z, CueLogoWrapper as J, ProfilePicture as Q, GridContainer as Z } from "./teacher-profile-styled.js";
+const P = B(({ teacherProfile: N }) => {
   const {
-    degree: f,
-    countries: o,
-    lower_grade: c,
-    higher_grade: n,
-    header_image: u,
-    years_of_experience: g,
-    number_of_students_taught: m
-  } = s || {}, { degree_name: d, field_of_study: l } = f || {}, $ = Object.values(k), h = n && parseInt(n, 10) > 8, p = T(() => h ? "High School" : ` ${c === "K" ? "" : "G"}${c} - G${n}`, [h, n, c]);
-  return /* @__PURE__ */ e(a, { $flexDirection: "row", $borderColor: "BLACK_T_87", $background: "WHITE_3", children: [
-    /* @__PURE__ */ r(I, { withLoader: !0, src: u, width: 350, height: 350 }),
-    /* @__PURE__ */ e(S, { children: [
-      /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
-        /* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: [
-          g,
-          "+"
-        ] }),
-        /* @__PURE__ */ r(t, { $renderAs: "ub3", children: "Yrs of Teaching Experience" })
-      ] }),
-      /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
-        /* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: [
-          m,
-          "+"
+    degree: S,
+    countries: i,
+    lower_grade: d,
+    higher_grade: a,
+    header_image: v,
+    years_of_experience: D,
+    number_of_students_taught: M,
+    first_name: u,
+    last_name: C,
+    teacher_profile_url: t
+  } = N || {}, {
+    degree_name: g,
+    field_of_study: h,
+    degree_code: L
+  } = S || {}, $ = Y(), e = o(() => $.device <= H.MOBILE, [$.device]), w = o(() => Object.values(U), []), k = o(() => a && parseInt(a, 10) > 8, [a]), y = o(
+    () => u ? `${u} ${C}`.trim() : "",
+    [u, C]
+  ), b = o(() => k ? "High School" : !d || !a ? "" : ` ${d === "K" ? "" : "G"}${d} - G${a}`, [k, a, d]), O = o(() => i && i.length > 0, [i]), R = o(() => g && h, [g, h]), I = m(() => {
+    t && window.open(t, "_blank");
+  }, [t]), p = m(() => t ? /* @__PURE__ */ n(E, { children: [
+    /* @__PURE__ */ r(T, { heightX: 1.5 }),
+    /* @__PURE__ */ r(
+      F,
+      {
+        label: "View profile",
+        renderAs: "secondary",
+        shape: "square",
+        onClick: I,
+        size: "small"
+      }
+    )
+  ] }) : null, [I, t]), _ = m(
+    ({
+      value: l,
+      label: A,
+      mobileLabel: f,
+      valueRenderAs: x = "ah3-black"
+    }) => /* @__PURE__ */ n(
+      G,
+      {
+        $flex: e ? 1 : 0,
+        $justifyContent: e ? "flex-start" : "center",
+        $gutter: e ? 8 : 24,
+        $gapX: e ? 0.75 : 0,
+        $alignItems: e ? "center" : "flex-start",
+        $background: e ? "YELLOW_3" : "TRANSPARENT",
+        children: [
+          /* @__PURE__ */ r(c, { $renderAs: x, $renderOnMobileAs: "ab2-black", children: l }),
+          /* @__PURE__ */ r(c, { $renderAs: "ub2", $renderOnMobileAs: "ub3", $align: e ? "center" : "left", children: e && f ? f : A })
+        ]
+      }
+    ),
+    [e]
+  ), W = m(() => {
+    if (!O) return null;
+    if (e) {
+      const l = q(i);
+      return /* @__PURE__ */ n(s, { $gapX: 0.75, children: [
+        /* @__PURE__ */ n(c, { $renderOnMobileAs: "ub3-bold", $renderAs: "ab3-black", children: [
+          "Teaching ",
+          b,
+          " kids in ",
+          l,
+          "."
         ] }),
-        /* @__PURE__ */ r(t, { $renderAs: "ub3", children: "Students Taught" })
+        p(),
+        t && /* @__PURE__ */ r(T, { heightX: 0.75 })
+      ] });
+    }
+    return /* @__PURE__ */ n(s, { $flexDirection: "column", $flexGap: 12, children: [
+      /* @__PURE__ */ n(c, { $renderAs: "ab1-black", $renderOnMobileAs: "ub3-bold", children: [
+        "Teaching ",
+        b,
+        " kids in"
       ] }),
-      d && l && /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
-        /* @__PURE__ */ r(t, { $renderAs: "ab1-black", children: d }),
-        /* @__PURE__ */ e(t, { $renderAs: "ub3", children: [
-          "In ",
-          l
+      /* @__PURE__ */ r(s, { $flexDirection: "row", $flexGap: 16, $flexWrap: !0, children: i.map((l) => {
+        const A = w.find((j) => j.name === l), { flag_icon: f = "", label: x = "", name: X } = A || {};
+        return /* @__PURE__ */ n(s, { $flexDirection: "row", $flexGap: 4, children: [
+          /* @__PURE__ */ r(K, { src: f, width: 30, height: 20, withLoader: !1 }),
+          /* @__PURE__ */ r(c, { $renderAs: "ab3-black", children: x })
+        ] }, X || l);
+      }) })
+    ] });
+  }, [
+    O,
+    e,
+    b,
+    i,
+    p,
+    t,
+    w
+  ]);
+  return /* @__PURE__ */ n(
+    s,
+    {
+      $flexDirection: e ? "column" : "row",
+      $borderColor: "BLACK_T_87",
+      $background: "WHITE_3",
+      children: [
+        /* @__PURE__ */ n(
+          z,
+          {
+            $gapX: e ? 1 : 1.5,
+            $gutterX: 1,
+            $background: "YELLOW_4",
+            $alignItems: "center",
+            $justifyContent: "center",
+            children: [
+              e && /* @__PURE__ */ r(J, { children: /* @__PURE__ */ r(V, { width: 54, height: 8, color: $.colors.REAL_BLACK }) }),
+              /* @__PURE__ */ r(
+                Q,
+                {
+                  withLoader: !0,
+                  src: v,
+                  width: e ? 154 : 238,
+                  height: e ? 154 : 238
+                }
+              ),
+              y && /* @__PURE__ */ n(E, { children: [
+                /* @__PURE__ */ r(T, { heightX: e ? 0.75 : 1.5 }),
+                /* @__PURE__ */ r(c, { $renderAs: "ac2-black", $color: "BLACK_1", $align: "center", children: y })
+              ] }),
+              !e && p()
+            ]
+          }
+        ),
+        /* @__PURE__ */ n(Z, { children: [
+          _({
+            value: `${D}+`,
+            label: "Yrs of Teaching Experience",
+            mobileLabel: "Years of Teaching"
+          }),
+          _({
+            value: `${M}+`,
+            label: "Students Taught"
+          }),
+          R && _({
+            value: e && L ? L : g,
+            label: `In ${h}`,
+            mobileLabel: h,
+            valueRenderAs: "ab1-black"
+          }),
+          /* @__PURE__ */ r(
+            G,
+            {
+              $justifyContent: "center",
+              $gutter: 24,
+              $flexDirection: e ? "row" : "column",
+              $background: e ? "YELLOW_4" : "TRANSPARENT",
+              children: W()
+            }
+          )
         ] })
-      ] }),
-      /* @__PURE__ */ e(i, { $justifyContent: "center", $gutter: 24, children: [
-        /* @__PURE__ */ e(t, { $renderAs: "ab1-black", children: [
-          "Teaching ",
-          p,
-          " kids in"
-        ] }),
-        /* @__PURE__ */ r(j, { height: 12 }),
-        /* @__PURE__ */ r(a, { $flexDirection: "row", $flexGap: 16, $flexWrap: !0, children: o && o.length > 0 && o.map((b) => {
-          const _ = $.find((w) => w.name === b), { flag_icon: x = "", label: y, name: A } = _ || {};
-          return /* @__PURE__ */ e(a, { $flexDirection: "row", $flexGap: 4, children: [
-            /* @__PURE__ */ r(C, { src: x, width: 30, height: 20, withLoader: !1 }),
-            /* @__PURE__ */ r(t, { $renderAs: "ab3-black", children: y })
-          ] }, A);
-        }) })
-      ] })
-    ] })
-  ] });
-}), W = O;
+      ]
+    }
+  );
+});
+P.displayName = "TeacherProfile";
+const me = P;
 export {
-  W as default
+  me as default
 };
 //# sourceMappingURL=teacher-profile.js.map