feat: polonto

2024-07-21 19:24:11 +07:00 · 2024-07-21 19:24:11 +07:00 · 98aeb6d59b
parent bea6446123
commit 98aeb6d59b
9 changed files with 74 additions and 38 deletions
--- 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;
--- 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"
--- 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 [];
  }

--- 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
--- 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!
--- 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}
--- 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')}
--- 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>
--- 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,
  },
 };