feat(ui): New Book-Lesson Dialog

Author: DevMuhammed3

packages/assets/assets/loading-v2.svg

@@ -108,6 +108,7 @@
     "./InfoCircle": "./dist/InfoCircle.tsx",
     "./Info": "./dist/Info.tsx",
     "./Instagram": "./dist/Instagram.tsx",
+    "./LoadingV2": "./dist/LoadingV2.tsx",
     "./LandingHomeCta": "./dist/LandingHomeCta.tsx",
     "./LeftArrowHead": "./dist/LeftArrowHead.tsx",
     "./Linkedin": "./dist/Linkedin.tsx",

packages/assets/package.json

@@ -163,7 +163,7 @@ export const Dialog: React.FC<{
           variant === "default" ? (
             <>
               <Optional show={!hiddenTitle}>
-                <div className="flex justify-between items-center md:items-start w-full">
+                <div className="flex justify-between border-b items-center md:items-start w-full">
                   <Title>{title}</Title>
                   <Optional show={!!close}>
                     <Close

packages/ui/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Block } from "@/components/Lessons/ManageLesson/Block";
+import { identity } from "lodash";
+
+type Component = typeof Block;
+type Story = StoryObj<Component>;
+
+const meta: Meta<Component> = {
+  title: "Lessons/ManageLessonDialog/Block",
+  component: Block,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+export const Unverified: Story = {
+  args: {
+    type: "unverified",
+    close: identity,
+    submit: () => alert("Submit clicked"),
+  },
+};
+
+export const HasBooked: Story = {
+  args: {
+    type: "has-booked",
+    close: identity,
+  },
+};
+

packages/ui/src/components/Lessons/ManageLesson/Block.stories.tsx

@@ -38,12 +38,7 @@ export const Block: React.FC<{
   }, [type]);
 
   return (
-    <div className="px-4 md:px-0 md:w-full">
-      <div className="w-12 h-12 flex items-center justify-center bg-brand-50 rounded-full">
-        <div className="w-7 h-7 flex items-center justify-center bg-brand-100 rounded-full ">
-          {<data.icon className="[&>*]:stroke-brand-700 w-6 h-6" />}
-        </div>
-      </div>
+    <div className="px-4 md:px-0 md:max-w-[350px]">
       <div className="flex flex-col gap-1 mt-4 mb-6">
         <Typography
           tag="p"
@@ -56,13 +51,6 @@ export const Block: React.FC<{
         </Typography>
       </div>
       <div className="flex items-center gap-3">
-        <Button
-          size="large"
-          onClick={type === "unverified" ? submit : close}
-          className="w-full whitespace-nowrap"
-        >
-          {intl(data.action)}
-        </Button>
 
         {type === "unverified" ? (
           <Button
@@ -74,6 +62,15 @@ export const Block: React.FC<{
             {intl("global.labels.cancel")}
           </Button>
         ) : null}
+
+        <Button
+          size="large"
+          onClick={type === "unverified" ? submit : close}
+          className="w-full whitespace-nowrap"
+        >
+          {intl(data.action)}
+        </Button>
+
       </div>
     </div>
   );

packages/ui/src/components/Lessons/ManageLesson/Block.tsx

@@ -25,22 +25,20 @@ import { concat, isEmpty } from "lodash";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { arabicTimezoneNames } from "@/constants/labels";
 import { Block } from "@/components/Lessons/ManageLesson/Block";
+import { Link } from "react-router-dom";
+import { Web } from "@litespace/utils/routes";
 
 const LoadingWrapper: React.FC<{
   tutorName: string | null;
-}> = ({ tutorName }) => {
+}> = () => {
   const intl = useFormatMessage();
   const { md } = useMediaQuery();
 
   return (
-    <div className="w-full flex flex-col justify-center items-center gap-8 md:mt-[109px] md:mb-[110px]">
+    <div className="w-full flex flex-col justify-center items-center gap-8 mt-4">
       <Loading
-        size={md ? "medium" : "small"}
-        text={
-          tutorName
-            ? intl("book-lesson.loading-slots", { tutor: tutorName })
-            : undefined
-        }
+        size={md ? "large" : "small"}
+        text={intl("book-lesson.loading-slots")}
       />
     </div>
   );
@@ -54,7 +52,7 @@ const Error: React.FC<{
   const { md } = useMediaQuery();
 
   return (
-    <div className="md:w-full flex flex-col justify-center items-center gap-8 md:mt-[82px] md:mb-[82px]">
+    <div className="md:w-full mt-4">
       <LoadingError
         error={intl("book-lesson.error-slots", { tutor: tutorName })}
         retry={retry}
@@ -115,7 +113,7 @@ const DepletedSubscription: React.FC = () => {
       <NoMoreMinutes className="w-[168px] h-[168px]" />
       <Typography
         tag="p"
-        className="text-caption sm:text-body font-bold text-natural-700"
+        className="text-caption sm:text-body text-natural-700"
       >
         {intl("book-lesson.depleted-subscription")}
       </Typography>
@@ -345,17 +343,18 @@ export const ManageLessonDialog: React.FC<{
             <Typography tag="p" className="text-caption font-bold">
               {intl("book-lesson.title-1")}
             </Typography>
+
             <Typography
               tag="p"
               className="text-tiny md:max-w-[340px] text-natural-600"
             >
-              {intl("book-lesson.title-2")}
+              {intl("book-lesson.title-2", { value: name })}
             </Typography>
           </div>
         </div>
       }
       className={cn(
-        "flex flex-col !w-auto max-w-[350px] md:min-w-[450px] md:max-w-max mx-auto py-4 lg:!py-6 _sm:w-[512px] [&>div:first-child]:!px-4 sm:[&>div:first-child]:!px-0",
+        "flex flex-col !w-auto max-w-[350px] max-h-[324px] md:min-w-[450px] md:max-w-max mx-auto py-4 lg:!py-6 _sm:w-[512px] [&>div:first-child]:!px-4 sm:[&>div:first-child]:!px-0 ",
         {
           "!left-0 right-0 translate-x-0": !sm,
         }
@@ -377,6 +376,15 @@ export const ManageLessonDialog: React.FC<{
         {depletedSubscription && !error && !loading ? (
           <Animation key="depleted-subscription" id="depleted-subscription">
             <DepletedSubscription />
+
+            <Link to={Web.Plans}>
+              <Button
+                className="w-full text-body font-medium mt-4"
+                size="medium"
+              >
+                {intl("book-lesson.button.plans")}
+              </Button>
+            </Link>
           </Animation>
         ) : null}
 
@@ -475,6 +483,7 @@ export const ManageLessonDialog: React.FC<{
                       ],
                   })}
                 </Typography>
+
                 <Confirm
                   disabled={!lessonDetails.slotId || !lessonDetails.start}
                   track={track}

packages/ui/src/components/Lessons/ManageLesson/ManageLessonDialog.tsx

@@ -1,23 +1,21 @@
 import React from "react";
 import { Typography } from "@litespace/ui/Typography";
 import cn from "classnames";
-import Spinner from "@litespace/assets/Spinner";
+import LoadingV2 from "@litespace/assets/LoadingV2";
 
 export const Loading: React.FC<{
   text?: string;
   size?: "small" | "medium" | "large";
 }> = ({ text, size = "small" }) => {
   return (
     <div className="flex flex-col justify-center items-center gap-4">
-      <Spinner
-        className={cn("stroke-natural-600", {
-          "w-spinner-2x h-spinner-2x [&_circle]:stroke-[2]": size === "small",
-          "w-spinner-3x h-spinner-3x [&_circle]:stroke-[1.5]":
-            size === "medium",
-          "w-spinner-4x h-spinner-4x [&_circle]:stroke-[1]": size === "large",
+      <LoadingV2
+        className={cn({
+          "w-spinner-2x h-spinner-2x [&_path]:fill-[2]": size === "small",
+          "w-spinner-3x h-spinner-3x [&_path]:fill-[1.5]": size === "medium",
+          "w-spinner-4x h-spinner-4x [&_path]:fill-[2]": size === "large",
         })}
       />
-
       {text ? (
         <Typography
           tag="span"

packages/ui/src/components/Loading/Loading.tsx

@@ -41,48 +41,50 @@ export const LoadingError: React.FC<{
 
   return (
     // NOTE: don't specify a size for it, do it in the parent component
-    <div className="flex flex-col items-center justify-center mx-auto">
-      <div
-        className={cn(
-          "flex items-center justify-center rounded-full bg-destructive-200 p-[2.5px]",
-          {
-            "w-8 h-8": size === "small",
-            "w-16 h-16": size === "medium",
-            "w-20 h-20": size === "large",
-          }
-        )}
-      >
-        <ExclaimationMarkCircle />
-      </div>
-      <Typography
-        tag="span"
-        className={cn("text-natural-950 text-center mt-6 sm:mt-4 mb-4", {
-          "text-tiny font-normal": size === "small",
-          "text-caption font-semibold": size !== "small",
-        })}
-      >
-        {error || intl("error.loading-error")}
-      </Typography>
-      <div className="flex flex-row items-center justify-center gap-4 w-full">
-        <Button
-          size={size === "large" ? "medium" : "small"}
-          onClick={retry}
-          variant="primary"
-          className="w-full text-tiny"
+      <div className="flex flex-col items-center justify-center mx-auto">
+        <div
+          className={cn(
+            "flex items-center justify-center rounded-full bg-destructive-200 p-[2.5px]",
+            {
+              "w-8 h-8": size === "small",
+              "w-16 h-16": size === "medium",
+              "w-20 h-20": size === "large",
+            }
+          )}
         >
-          {intl("labels.retry")}
-        </Button>
+          <ExclaimationMarkCircle />
+        </div>
+
+        <Typography
+          tag="span"
+          className={cn("text-natural-950 text-center mt-6 sm:mt-4 mb-4", {
+            "text-tiny font-normal": size === "small",
+            "text-caption font-semibold": size !== "small",
+          })}
+        >
+          {error || intl("error.loading-error")}
+        </Typography> <div className="flex flex-row justify-center gap-4 w-full">
         <Button
-          size={size === "large" ? "medium" : "small"}
+          size={size === "large" ? "small" : "medium"}
           variant="secondary"
-          className="w-full text-tiny"
+          className="w-full text-tiny flex-1"
           disabled={saving}
           loading={saving}
           onClick={save}
         >
           {intl("labels.report")}
         </Button>
+
+        <Button
+          size={size === "large" ? "small" : "medium"}
+          onClick={retry}
+          variant="primary"
+          className="w-full text-tiny flex-1"
+        >
+          {intl("labels.retry")}
+        </Button>
+
       </div>
-    </div>
+</div>
   );
 };

packages/ui/src/components/Loading/LoadingError.tsx

@@ -928,14 +928,15 @@
   "book-lesson.has-booked-lessons.title": "تريد حجز جلسة اخري؟",
   "book-lesson.has-booked-lessons.description": "سوف يكون بامكانك حجز جلسة اخري بمجرد انتهائك من حصتك المحجوزة سابقا.",
   "book-lesson.has-booked-lessons.action": "موافق",
-  "book-lesson.title-1": "احجز جلستك الآن",
-  "book-lesson.title-2": "بعد جلستك الأولى ستكون تعرفت علي معلمك مع تحديد مستواك ووضع خطة واضحة للوصول لهدفك. ",
+  "book-lesson.title-1": "أحجز حصتك الأن",
+  "book-lesson.title-2": "أحجز الأن مع {value}",
   "book-lesson.title": "إحجز جلسة مع {tutor}",
-  "book-lesson.depleted-subscription": "دقائقك لا تكفي لحجز جلسة لهذا الأسبوع",
+  "book-lesson.depleted-subscription": "ليس لديك أي دقائق متبقية في الباقة لهذا الأسبوع",
+  "book-lesson.button.plans": "تصفح الباقات",
   "book-lesson.confirm": "تاكيد الموعد",
-  "book-lesson.remind-me": "ذكرني عند توفر المواعيد",
+  "book-lesson.remind-me": "ذكرني عند توفر مواعيد",
   "book-lesson.edit": "تعديل الموعد",
-  "book-lesson.loading-slots": "برجاء الانتظار، جاري احضار جدول {tutor}",
+  "book-lesson.loading-slots": "برجاء الانتظار... جاري تحميل الجدول!",
   "book-lesson.error-slots": "عذرًا، حدث خطأ أثناء تحميل الجدول!",
   "book-lesson.empty-slots": "جميع المواعيد المتاحة محجوزة",
   "book-lesson.empty-slots-at-this-time": "جميع المواعيد المتاحة في هذا الوقت محجوزة",