From 98aeb6d59b984a3ca64a30620c461428ed1829b7 Mon Sep 17 00:00:00 2001
From: Nevo David <nevo@notu.co>
Date: Sun, 21 Jul 2024 19:24:11 +0700
Subject: [PATCH] feat: polonto

---
 apps/frontend/src/app/polonto.css             | 23 +-----------
 .../components/launches/add.edit.model.tsx    |  2 +-
 .../launches/helpers/linkedin.component.tsx   |  5 ++-
 .../src/components/launches/polonto.tsx       | 34 ++++++++++++-----
 .../providers/high.order.provider.tsx         |  4 +-
 .../launches/providers/medium/medium.tags.tsx |  1 +
 .../providers/youtube/youtube.provider.tsx    |  2 +
 .../src/components/media/media.component.tsx  | 37 +++++++++++++++++--
 .../database/prisma/subscriptions/pricing.ts  |  4 ++
 9 files changed, 74 insertions(+), 38 deletions(-)

diff --git a/apps/frontend/src/app/polonto.css b/apps/frontend/src/app/polonto.css
index dbcbe156..1e9da138 100644
--- a/apps/frontend/src/app/polonto.css
+++ b/apps/frontend/src/app/polonto.css
@@ -2568,19 +2568,6 @@ span.bp5-icon:empty.bp5-icon-large{
   border-color:rgba(17, 20, 24, 0.15);
 }
 
-a{
-  color:#215db0;
-}
-a:hover{
-  color:#215db0;
-}
-a .bp5-icon, a .bp5-icon-standard, a .bp5-icon-large{
-  color:inherit;
-}
-a code{
-  color:inherit;
-}
-
 .bp5-code,
 .bp5-running-text code{
   background:rgba(255, 255, 255, 0.7);
@@ -2805,13 +2792,7 @@ a > .bp5-running-text code{
 .bp5-text-small{
   font-size:12px;
 }
-a{
-  text-decoration:none;
-}
-a:hover{
-  cursor:pointer;
-  text-decoration:underline;
-}
+
 .bp5-code, .bp5-running-text code{
   font-family:monospace;
   text-transform:none;
@@ -2954,7 +2935,7 @@ a > .bp5-dark .bp5-running-text code{
   color:#fa999c;
 }
 
-:focus{
+.polonto :focus{
   outline:rgba(45, 114, 210, 0.6) solid 2px;
   outline-offset:2px;
   -moz-outline-radius:6px;
diff --git a/apps/frontend/src/components/launches/add.edit.model.tsx b/apps/frontend/src/components/launches/add.edit.model.tsx
index a2fadfcd..234ec36b 100644
--- a/apps/frontend/src/components/launches/add.edit.model.tsx
+++ b/apps/frontend/src/components/launches/add.edit.model.tsx
@@ -400,7 +400,7 @@ export const AddEditModal: FC<{
                               //   .getCommands()
                               //   .filter((f) => f.name === 'image'),
                               // newImage,
-                              postSelector(dateState),
+                              // postSelector(dateState),
                             ]}
                             value={p.content}
                             preview="edit"
diff --git a/apps/frontend/src/components/launches/helpers/linkedin.component.tsx b/apps/frontend/src/components/launches/helpers/linkedin.component.tsx
index 29e9bb74..a50c3b70 100644
--- a/apps/frontend/src/components/launches/helpers/linkedin.component.tsx
+++ b/apps/frontend/src/components/launches/helpers/linkedin.component.tsx
@@ -80,6 +80,9 @@ export const LinkedinCompany: FC<{
   const [company, setCompany] = useState<any>(null);
 
   const getCompany = async () => {
+    if (!company) {
+      return ;
+    }
     const {options} = await (
       await fetch('/integrations/function', {
         method: 'POST',
@@ -141,7 +144,7 @@ export const LinkedinCompany: FC<{
 };
 
 export const linkedinCompany = (identifier: string, id: string): ICommand[] => {
-  if (identifier !== 'linkedin') {
+  if (identifier !== 'linkedin' && identifier !== 'linkedin-page') {
     return [];
   }
 
diff --git a/apps/frontend/src/components/launches/polonto.tsx b/apps/frontend/src/components/launches/polonto.tsx
index c260362f..839a7958 100644
--- a/apps/frontend/src/components/launches/polonto.tsx
+++ b/apps/frontend/src/components/launches/polonto.tsx
@@ -1,4 +1,11 @@
-import { createContext, FC, useContext, useEffect, useState } from 'react';
+import {
+  createContext,
+  FC,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
 import { createStore } from 'polotno/model/store';
 import Workspace from 'polotno/canvas/workspace';
@@ -9,15 +16,13 @@ import ZoomButtons from 'polotno/toolbar/zoom-buttons';
 import { Button } from '@gitroom/react/form/button';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { PictureGeneratorSection } from '@gitroom/frontend/components/launches/polonto/polonto.picture.generation';
+import { useUser } from '@gitroom/frontend/components/layout/user.context';
 
 const store = createStore({
   key: 'Aqml_02mqf6YTKC0jYZ8',
   showCredit: false,
 });
 
-// @ts-ignore
-DEFAULT_SECTIONS.push(PictureGeneratorSection)
-
 // @ts-ignore
 const CloseContext = createContext({ close: {} as any, setMedia: {} as any });
 
@@ -56,18 +61,29 @@ const Polonto: FC<{
   setMedia: (params: { id: string; path: string }) => void;
   type?: 'image' | 'video';
   closeModal: () => void;
+  width?: number;
+  height?: number;
 }> = (props) => {
   const { setMedia, type, closeModal } = props;
+  const user = useUser();
+
+  console.log(user);
+  const features = useMemo(() => {
+    return [
+      ...DEFAULT_SECTIONS,
+      ...(user?.tier?.image_generator ? [PictureGeneratorSection] : []),
+    ] as any[];
+  }, [user?.tier?.image_generator]);
 
   useEffect(() => {
-    const page = store.addPage({
-      width: 540,
-      height: 675,
+    store.addPage({
+      width: props.width || 540,
+      height: props.height || 675,
     });
 
     return () => {
       store.clear();
-    }
+    };
   }, []);
   return (
     <div className="fixed left-0 top-0 bg-black/80 z-[300] w-full min-h-full p-[60px] animate-fade">
@@ -103,7 +119,7 @@ const Polonto: FC<{
           >
             <PolotnoContainer style={{ width: '100%', height: '1000px' }}>
               <SidePanelWrap>
-                <SidePanel store={store} sections={DEFAULT_SECTIONS} />
+                <SidePanel store={store} sections={features} />
               </SidePanelWrap>
               <WorkspaceWrap>
                 <Toolbar
diff --git a/apps/frontend/src/components/launches/providers/high.order.provider.tsx b/apps/frontend/src/components/launches/providers/high.order.provider.tsx
index 5da567ab..aa5e18b9 100644
--- a/apps/frontend/src/components/launches/providers/high.order.provider.tsx
+++ b/apps/frontend/src/components/launches/providers/high.order.provider.tsx
@@ -304,8 +304,8 @@ export const withProvider = (
                                 // ...commands
                                 //   .getCommands()
                                 //   .filter((f) => f.name !== 'image'),
-                                newImage,
-                                postSelector(date),
+                                // newImage,
+                                // postSelector(date),
                                 ...linkedinCompany(
                                   integration?.identifier!,
                                   integration?.id!
diff --git a/apps/frontend/src/components/launches/providers/medium/medium.tags.tsx b/apps/frontend/src/components/launches/providers/medium/medium.tags.tsx
index 7c458875..eb600855 100644
--- a/apps/frontend/src/components/launches/providers/medium/medium.tags.tsx
+++ b/apps/frontend/src/components/launches/providers/medium/medium.tags.tsx
@@ -49,6 +49,7 @@ export const MediumTags: FC<{
     <div>
       <div className={`${interClass} text-[14px] mb-[6px]`}>{label}</div>
       <ReactTags
+        placeholderText="Add a tag"
         suggestions={suggestionsArray}
         selected={tagValue}
         onAdd={onAddition}
diff --git a/apps/frontend/src/components/launches/providers/youtube/youtube.provider.tsx b/apps/frontend/src/components/launches/providers/youtube/youtube.provider.tsx
index 9d7bad31..03560661 100644
--- a/apps/frontend/src/components/launches/providers/youtube/youtube.provider.tsx
+++ b/apps/frontend/src/components/launches/providers/youtube/youtube.provider.tsx
@@ -38,6 +38,8 @@ const YoutubeSettings: FC = () => {
       <div className="mt-[20px]">
         <MediaComponent
           type="image"
+          width={1280}
+          height={720}
           label="Thumbnail"
           description="Thumbnail picture (optional)"
           {...register('thumbnail')}
diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx
index 86c462d1..ef22f67d 100644
--- a/apps/frontend/src/components/media/media.component.tsx
+++ b/apps/frontend/src/components/media/media.component.tsx
@@ -15,7 +15,10 @@ import { useToaster } from '@gitroom/react/toaster/toaster';
 import { LoadingComponent } from '@gitroom/frontend/components/layout/loading';
 import { MultipartFileUploader } from '@gitroom/frontend/components/media/new.uploader';
 import dynamic from 'next/dynamic';
-const Polonto = dynamic(() => import('@gitroom/frontend/components/launches/polonto'));
+import { useUser } from '@gitroom/frontend/components/layout/user.context';
+const Polonto = dynamic(
+  () => import('@gitroom/frontend/components/launches/polonto')
+);
 const showModalEmitter = new EventEmitter();
 
 export const ShowMediaBoxModal: FC = () => {
@@ -211,6 +214,7 @@ export const MultiMediaComponent: FC<{
   }) => void;
 }> = (props) => {
   const { name, label, error, description, onChange, value } = props;
+  const user = useUser();
   useEffect(() => {
     if (value) {
       setCurrentMedia(value);
@@ -257,7 +261,9 @@ export const MultiMediaComponent: FC<{
     <>
       <div className="flex flex-col gap-[8px] bg-[#131B2C] rounded-bl-[8px]">
         {modal && <MediaBox setMedia={changeMedia} closeModal={showModal} />}
-        {mediaModal && <Polonto setMedia={changeMedia} closeModal={closeDesignModal} />}
+        {mediaModal && !!user?.tier?.ai &&  (
+          <Polonto setMedia={changeMedia} closeModal={closeDesignModal} />
+        )}
         <div className="flex gap-[10px]">
           <div className="flex">
             <Button
@@ -344,9 +350,12 @@ export const MediaComponent: FC<{
     target: { name: string; value?: { id: string; path: string } };
   }) => void;
   type?: 'image' | 'video';
+  width?: number;
+  height?: number;
 }> = (props) => {
-  const { name, type, label, description, onChange, value } = props;
+  const { name, type, label, description, onChange, value, width, height } = props;
   const { getValues } = useSettings();
+  const user = useUser();
   useEffect(() => {
     const settings = getValues()[props.name];
     if (settings) {
@@ -354,9 +363,18 @@ export const MediaComponent: FC<{
     }
   }, []);
   const [modal, setShowModal] = useState(false);
+  const [mediaModal, setMediaModal] = useState(false);
   const [currentMedia, setCurrentMedia] = useState(value);
   const mediaDirectory = useMediaDirectory();
 
+  const closeDesignModal = useCallback(() => {
+    setMediaModal(false);
+  }, [modal]);
+
+  const showDesignModal = useCallback(() => {
+    setMediaModal(true);
+  }, [modal]);
+
   const changeMedia = useCallback((m: { path: string; id: string }) => {
     setCurrentMedia(m);
     onChange({ target: { name, value: m } });
@@ -376,6 +394,14 @@ export const MediaComponent: FC<{
       {modal && (
         <MediaBox setMedia={changeMedia} closeModal={showModal} type={type} />
       )}
+      {mediaModal && !!user?.tier?.ai && (
+        <Polonto
+          width={width}
+          height={height}
+          setMedia={changeMedia}
+          closeModal={closeDesignModal}
+        />
+      )}
       <div className="text-[14px]">{label}</div>
       <div className="text-[12px]">{description}</div>
       {!!currentMedia && (
@@ -387,8 +413,11 @@ export const MediaComponent: FC<{
           />
         </div>
       )}
-      <div className="flex">
+      <div className="flex gap-[5px]">
         <Button onClick={showModal}>Select</Button>
+        <Button onClick={showDesignModal} className="!bg-[#832AD5]">
+          Editor
+        </Button>
         <Button secondary={true} onClick={clearMedia}>
           Clear
         </Button>
diff --git a/libraries/nestjs-libraries/src/database/prisma/subscriptions/pricing.ts b/libraries/nestjs-libraries/src/database/prisma/subscriptions/pricing.ts
index 92f771d1..0142a842 100644
--- a/libraries/nestjs-libraries/src/database/prisma/subscriptions/pricing.ts
+++ b/libraries/nestjs-libraries/src/database/prisma/subscriptions/pricing.ts
@@ -9,6 +9,7 @@ export interface PricingInnerInterface {
   featured_by_gitroom: boolean;
   ai: boolean;
   import_from_channels: boolean;
+  image_generator?: boolean;
 }
 export interface PricingInterface {
   [key: string]: PricingInnerInterface;
@@ -25,6 +26,7 @@ export const pricing: PricingInterface = {
     featured_by_gitroom: false,
     ai: false,
     import_from_channels: false,
+    image_generator: false,
   },
   STANDARD: {
     current: 'STANDARD',
@@ -37,6 +39,7 @@ export const pricing: PricingInterface = {
     community_features: false,
     featured_by_gitroom: false,
     import_from_channels: true,
+    image_generator: false,
   },
   PRO: {
     current: 'PRO',
@@ -49,5 +52,6 @@ export const pricing: PricingInterface = {
     featured_by_gitroom: true,
     ai: true,
     import_from_channels: true,
+    image_generator: true,
   },
 };