Merge branch 'main' into yevhen/tjs-61-testing-javascript-course-comp…

…letion-certificate

apps/epic-web/src/trpc/routers/bonuses.ts

@@ -83,7 +83,6 @@ export const bonusesRouter = router({
               upgradedFromId: z.string().nullable(),
               bulkCouponId: z.string().nullable(),
               redeemedBulkCouponId: z.string().nullable(),
-              merchantPurchaseId: z.string().nullable(),
             })
             .parse({
               id: v4(),
@@ -101,7 +100,6 @@ export const bonusesRouter = router({
               upgradedFromId: null,
               bulkCouponId: null,
               redeemedBulkCouponId: null,
-              merchantPurchaseId: null,
             })
 
           json = await ctx.prisma.purchase.create({data: purchaseData})

apps/total-typescript/src/certificate/certificate-form.tsx

@@ -80,7 +80,7 @@ const CertificateForm: React.FC<React.PropsWithChildren<{module: Module}>> = ({
   }
 
   return (
-    <Dialog.Portal>
+    <Dialog.Portal container={window.document.getElementById('layout')}>
       <Dialog.Overlay className="fixed inset-0 z-30 bg-black/20 backdrop-blur-sm" />
       <Dialog.Content className="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] border border-gray-700/50 bg-gray-800 p-[25px] shadow-2xl shadow-black/40 focus:outline-none">
         <Dialog.Title className="border-b border-gray-700 pb-3 text-xl font-semibold">

apps/total-typescript/src/certificate/module-certificate.tsx

@@ -7,8 +7,13 @@ import cx from 'classnames'
 import Balancer from 'react-wrap-balancer'
 import * as Dialog from '@radix-ui/react-dialog'
 import CertificateForm from './certificate-form'
+import {cn} from '@skillrecordings/ui/utils/cn'
 
-const ModuleCertificate: React.FC<{module: Module}> = ({module}) => {
+const ModuleCertificate: React.FC<{
+  module: Module
+  withTitle?: boolean
+  className?: string
+}> = ({module, withTitle = true, className}) => {
   const {data: moduleProgress, status: moduleProgressStatus} =
     trpc.moduleProgress.bySlug.useQuery({
       slug: module.slug.current,
@@ -17,10 +22,17 @@ const ModuleCertificate: React.FC<{module: Module}> = ({module}) => {
 
   return moduleProgressStatus === 'success' ? (
     <Dialog.Root>
-      <div className="flex w-full flex-col items-start justify-center py-8 sm:max-w-sm">
-        <h2 className="flex items-center gap-1 pb-2 text-2xl font-semibold">
-          Certificate
-        </h2>
+      <div
+        className={cn(
+          'flex w-full flex-col items-start justify-center py-8 sm:max-w-sm',
+          className,
+        )}
+      >
+        {withTitle && (
+          <h2 className="flex items-center gap-1 pb-2 text-2xl font-semibold">
+            Certificate
+          </h2>
+        )}
         <div className="relative flex w-full items-center justify-center rounded">
           <div className="relative flex aspect-[1.414/1] h-full w-full flex-col items-center justify-center overflow-hidden rounded border border-gray-300/10 shadow-xl shadow-black/10">
             <Image

apps/total-typescript/src/components/app/navigation.tsx

@@ -89,8 +89,8 @@ const DesktopNav: React.FC<DesktopNavProps> = ({isMinified}) => {
   const {subscriber, loadingSubscriber} = useConvertkit()
 
   return (
-    <ul className={cx('hidden w-full items-center justify-end md:flex')}>
-      <div
+    <div className={cx('hidden w-full items-center justify-end md:flex')}>
+      <ul
         className={cn(
           ' left-0 top-0 flex h-full w-full items-center justify-start  ',
           {
@@ -155,8 +155,8 @@ const DesktopNav: React.FC<DesktopNavProps> = ({isMinified}) => {
           className="font-semibold"
           // icon={BookIcon}
         />
-      </div>
-      <div className="flex h-full flex-shrink-0 items-center justify-center">
+      </ul>
+      <ul className="flex h-full flex-shrink-0 items-center justify-center">
         {status === 'loading' ? null : <SearchBar isMinified={isMinified} />}
         {status === 'unauthenticated' && (
           <NavLink
@@ -205,8 +205,8 @@ const DesktopNav: React.FC<DesktopNavProps> = ({isMinified}) => {
         ) : (
           <div aria-hidden="true" />
         )}
-      </div>
-    </ul>
+      </ul>
+    </div>
   )
 }
 
@@ -793,40 +793,44 @@ const NavToggle: React.FC<NavToggleProps> = ({
   const path02Controls = useAnimationControls()
 
   return (
-    <button
-      className="z-10 mr-2 flex h-12 w-12 items-center justify-center rounded-md p-1 md:hidden"
-      onClick={async () => {
-        // menuControls.start(isMenuOpened ? 'close' : 'open')
-        track('clicked mobile nav toggle')
-        setMenuOpened(!isMenuOpened)
-        if (!isMenuOpened) {
-          await path02Controls.start(path02Variants.moving)
-          path01Controls.start(path01Variants.open)
-          path02Controls.start(path02Variants.open)
-        } else {
-          path01Controls.start(path01Variants.closed)
-          await path02Controls.start(path02Variants.moving)
-          path02Controls.start(path02Variants.closed)
-        }
-      }}
-    >
-      <svg width="24" height="24" viewBox="0 0 24 24">
-        <motion.path
-          {...path01Variants.closed}
-          animate={path01Controls}
-          transition={{duration: 0.2}}
-          stroke="currentColor"
-          strokeWidth={1.5}
-        />
-        <motion.path
-          {...path02Variants.closed}
-          animate={path02Controls}
-          transition={{duration: 0.2}}
-          stroke="currentColor"
-          strokeWidth={1.5}
-        />
-      </svg>
-    </button>
+    <li>
+      <button
+        aria-label="Toggle Menu"
+        aria-expanded={isMenuOpened}
+        className="z-10 mr-2 flex h-12 w-12 items-center justify-center rounded-md p-1 md:hidden"
+        onClick={async () => {
+          // menuControls.start(isMenuOpened ? 'close' : 'open')
+          track('clicked mobile nav toggle')
+          setMenuOpened(!isMenuOpened)
+          if (!isMenuOpened) {
+            await path02Controls.start(path02Variants.moving)
+            path01Controls.start(path01Variants.open)
+            path02Controls.start(path02Variants.open)
+          } else {
+            path01Controls.start(path01Variants.closed)
+            await path02Controls.start(path02Variants.moving)
+            path02Controls.start(path02Variants.closed)
+          }
+        }}
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24">
+          <motion.path
+            {...path01Variants.closed}
+            animate={path01Controls}
+            transition={{duration: 0.2}}
+            stroke="currentColor"
+            strokeWidth={1.5}
+          />
+          <motion.path
+            {...path02Variants.closed}
+            animate={path02Controls}
+            transition={{duration: 0.2}}
+            stroke="currentColor"
+            strokeWidth={1.5}
+          />
+        </svg>
+      </button>
+    </li>
   )
 }
 

apps/total-typescript/src/components/heading.tsx

@@ -38,7 +38,7 @@ const Heading: React.FC<React.PropsWithChildren<HeadingProps>> = ({
   return (
     <header
       className={cn(
-        'flex w-full flex-col items-center overflow-x-hidden pt-40 text-center',
+        'flex w-full flex-col items-center overflow-x-hidden pb-5 pt-40 text-center',
         className,
       )}
     >

apps/total-typescript/src/feedback-widget/feedback-context.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import FeedbackDialog from './feedback-dialog'
+// import FeedbackDialog from './feedback-dialog'
+import dynamic from 'next/dynamic'
 
 type FeedbackContextType = {
   isFeedbackDialogOpen: boolean
   setIsFeedbackDialogOpen: (value: boolean, location?: string) => void
-  feedbackComponent: React.ReactElement
+  feedbackComponent: React.ReactElement | null
   location: string
 }
 
@@ -27,7 +28,8 @@ export const FeedbackProvider: React.FC<React.PropsWithChildren<any>> = ({
   const [isFeedbackDialogOpen, setIsFeedbackDialogOpen] =
     React.useState<boolean>(false)
   const [location, setLocation] = React.useState<string>('navigation')
-
+  const FeedbackDialog =
+    isFeedbackDialogOpen && dynamic(() => import('./feedback-dialog'))
   return (
     <FeedbackContext.Provider
       value={{
@@ -36,7 +38,8 @@ export const FeedbackProvider: React.FC<React.PropsWithChildren<any>> = ({
           location && setLocation(location)
           setIsFeedbackDialogOpen(value)
         },
-        feedbackComponent: <FeedbackDialog />,
+        feedbackComponent:
+          isFeedbackDialogOpen && FeedbackDialog ? <FeedbackDialog /> : null,
         location,
       }}
     >

apps/total-typescript/src/pages/check-your-email.tsx

@@ -7,6 +7,7 @@ const CheckYourEmail = () => {
   return (
     <Layout meta={{title: 'Check your email'}}>
       <CheckYourEmailTemplate
+        title={'Check Your Email'}
         image={
           <div className="flex max-w-screen-md items-center justify-center">
             <Image

apps/total-typescript/src/pages/confirmed.tsx

@@ -4,8 +4,13 @@ import {Signature} from './confirm'
 import {track} from '@skillrecordings/skill-lesson/utils/analytics'
 import {Button} from '@skillrecordings/ui'
 import Link from 'next/link'
+import {useSession} from 'next-auth/react'
+import {useConvertkit} from '@skillrecordings/skill-lesson/hooks/use-convertkit'
 
 const ConfirmedSubscriptionPage = () => {
+  const {data: session} = useSession()
+  const {subscriber, loadingSubscriber} = useConvertkit()
+
   return (
     <Layout footer={null}>
       <main className="flex flex-grow flex-col items-center justify-center px-5 py-32">
@@ -18,18 +23,20 @@ const ConfirmedSubscriptionPage = () => {
             You're all set to receive emails from{' '}
             {process.env.NEXT_PUBLIC_SITE_TITLE}.
           </p>
-          <Button
-            asChild
-            size="lg"
-            onClick={() => {
-              track('clicked log in', {
-                location: 'confirmed subscription',
-              })
-            }}
-            className="h-12 bg-gradient-to-tr from-[#4BCCE5] to-[#8AF7F1] text-lg font-semibold"
-          >
-            <Link href="/login">Continue to Login</Link>
-          </Button>
+          {!session && (
+            <Button
+              asChild
+              size="lg"
+              onClick={() => {
+                track('clicked log in', {
+                  location: 'confirmed subscription',
+                })
+              }}
+              className="h-12 bg-gradient-to-tr from-[#4BCCE5] to-[#8AF7F1] text-base font-semibold"
+            >
+              <Link href="/login?prefill=true">Continue to Login</Link>
+            </Button>
+          )}
         </div>
       </main>
     </Layout>