youtube onboarding

apps/frontend/src/components/billing/first.billing.component.tsx

@@ -5,7 +5,6 @@ import useSWR from 'swr';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { useVariables } from '@gitroom/react/helpers/variable.context';
 import { loadStripe, Stripe } from '@stripe/stripe-js';
-import { useSearchParams } from 'next/navigation';
 import { OrganizationSelector } from '@gitroom/frontend/components/layout/organization.selector';
 import { LanguageComponent } from '@gitroom/frontend/components/layout/language.component';
 import { AttachToFeedbackIcon } from '@gitroom/frontend/components/new-layout/sentry.feedback.component';
@@ -24,6 +23,8 @@ import {
 import { useT } from '@gitroom/react/translation/get.transation.service.client';
 import { useUser } from '@gitroom/frontend/components/layout/user.context';
 import { useDubClickId } from '@gitroom/frontend/components/layout/dubAnalytics';
+import Image from 'next/image';
+import { useModals } from '@gitroom/frontend/components/layout/new-modal';
 
 const ModeComponent = dynamic(
   () => import('@gitroom/frontend/components/layout/mode.component'),
@@ -50,6 +51,7 @@ export const FirstBillingComponent = () => {
   const [tier, setTier] = useState('STANDARD');
   const [period, setPeriod] = useState('MONTHLY');
   const fetch = useFetch();
+  const modals = useModals();
   const t = useT();
 
   useEffect(() => {
@@ -69,6 +71,21 @@ export const FirstBillingComponent = () => {
     ).json();
   }, [tier, period]);
 
+  const showYouTube = () => {
+    modals.openModal({
+      title: 'Grow Fast With Postiz (Play the video)',
+      children: (
+        <iframe
+          className="h-full aspect-video min-w-[800px]"
+          src="https://www.youtube.com/embed/BdsCVvEYgHU?si=vvhaZJ8I5oXXvVJS?autoplay=1"
+          title="Postiz Tutorial"
+          allow="autoplay"
+          allowFullScreen
+        />
+      ),
+    });
+  };
+
   const { data, isLoading } = useSWR(
     `/billing-${tier}-${period}`,
     loadCheckout,
@@ -101,6 +118,21 @@ export const FirstBillingComponent = () => {
           )}
         </div>
 
+        <div className="flex" onClick={showYouTube}>
+          <div className="tablet:mb-[32px] cursor-pointer mt-[32px] flex gap-[10px] items-center underline hover:font-[700]">
+            <div>
+              <Image
+                className="text-[12px]"
+                src="/icons/platforms/youtube.svg"
+                width={22.5}
+                height={16}
+                alt="YouTube"
+              />
+            </div>
+            <div>See the power of Postiz (click here)</div>
+          </div>
+        </div>
+
         {!!user?.allowTrial && (
           <div className="flex mt-[32px] mb-[10px] gap-[15px] tablet:mt-[32px] tablet:mb-[32px] text-[16px] font-[500] mobile:flex-col">
             <div className="flex gap-[8px]">