feat: v2
This commit is contained in:
Nevo David
parent
b5e58d9747
commit
f38f5f9695
|
|
@ -1,5 +1,4 @@
|
|||
export const dynamic = 'force-dynamic';
|
||||
import { AnalyticsComponent } from '@gitroom/frontend/components/analytics/analytics.component';
|
||||
import { Metadata } from 'next';
|
||||
import { PlatformAnalytics } from '@gitroom/frontend/components/platform-analytics/platform.analytics';
|
||||
import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';
|
||||
|
|
@ -8,9 +7,5 @@ export const metadata: Metadata = {
|
|||
description: '',
|
||||
};
|
||||
export default async function Index() {
|
||||
return (
|
||||
<>
|
||||
{isGeneralServerSide() ? <PlatformAnalytics /> : <AnalyticsComponent />}
|
||||
</>
|
||||
);
|
||||
return <PlatformAnalytics />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,5 +7,9 @@ export const metadata: Metadata = {
|
|||
description: '',
|
||||
};
|
||||
export default async function Page() {
|
||||
return <BillingComponent />;
|
||||
return (
|
||||
<div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
|
||||
<BillingComponent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { LayoutSettings } from '@gitroom/frontend/components/layout/layout.settings';
|
||||
import { LayoutComponent } from '@gitroom/frontend/components/new-layout/layout.component';
|
||||
|
||||
export default async function Layout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <LayoutSettings>{children}</LayoutSettings>;
|
||||
return <LayoutComponent>{children}</LayoutComponent>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
import { Buyer } from '@gitroom/frontend/components/marketplace/buyer';
|
||||
export const dynamic = 'force-dynamic';
|
||||
import { Metadata } from 'next';
|
||||
import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';
|
||||
export const metadata: Metadata = {
|
||||
title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Marketplace`,
|
||||
description: '',
|
||||
};
|
||||
export default async function Index({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: {
|
||||
code: string;
|
||||
};
|
||||
}) {
|
||||
return <Buyer />;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { BuyerSeller } from '@gitroom/frontend/components/marketplace/buyer.seller';
|
||||
import { ReactNode } from 'react';
|
||||
export default function Layout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<BuyerSeller />
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
export const dynamic = 'force-dynamic';
|
||||
import { Metadata } from 'next';
|
||||
import { cookies } from 'next/headers';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';
|
||||
export const metadata: Metadata = {
|
||||
title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Marketplace`,
|
||||
description: '',
|
||||
};
|
||||
export default async function Index({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: {
|
||||
code: string;
|
||||
};
|
||||
}) {
|
||||
const currentCookie = cookies()?.get('marketplace')?.value;
|
||||
return redirect(
|
||||
currentCookie === 'buyer' ? '/marketplace/buyer' : '/marketplace/seller'
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { Seller } from '@gitroom/frontend/components/marketplace/seller';
|
||||
export const dynamic = 'force-dynamic';
|
||||
import { Metadata } from 'next';
|
||||
import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';
|
||||
export const metadata: Metadata = {
|
||||
title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Marketplace`,
|
||||
description: '',
|
||||
};
|
||||
export default async function Index({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: {
|
||||
code: string;
|
||||
};
|
||||
}) {
|
||||
return <Seller />;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { MediaLayoutComponent } from '@gitroom/frontend/components/new-layout/layout.media.component';
|
||||
|
||||
export default async function Page() {
|
||||
return <MediaLayoutComponent />
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { Messages } from '@gitroom/frontend/components/messages/messages';
|
||||
export const dynamic = 'force-dynamic';
|
||||
import { Metadata } from 'next';
|
||||
import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';
|
||||
export const metadata: Metadata = {
|
||||
title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Messages`,
|
||||
description: '',
|
||||
};
|
||||
export default async function Index() {
|
||||
return <Messages />;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Layout } from '@gitroom/frontend/components/messages/layout';
|
||||
export const dynamic = 'force-dynamic';
|
||||
import { ReactNode } from 'react';
|
||||
export default async function LayoutWrapper({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return <Layout renderChildren={children} />;
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { getT } from '@gitroom/react/translation/get.translation.service.backend';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
import { Metadata } from 'next';
|
||||
import { isGeneralServerSide } from '@gitroom/helpers/utils/is.general.server.side';
|
||||
export const metadata: Metadata = {
|
||||
title: `${isGeneralServerSide() ? 'Postiz' : 'Gitroom'} Messages`,
|
||||
description: '',
|
||||
};
|
||||
export default async function Index() {
|
||||
const t = await getT();
|
||||
|
||||
return (
|
||||
<div className="bg-customColor3 h-[951px] flex flex-col rounded-[4px] border border-customColor6">
|
||||
<div className="bg-customColor8 h-[64px]" />
|
||||
<div className="flex-1 flex justify-center items-center text-[20px]">
|
||||
{t(
|
||||
'select_a_conversation_and_chat_away',
|
||||
'Select a conversation and chat away.'
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,9 +7,5 @@ export const metadata: Metadata = {
|
|||
description: '',
|
||||
};
|
||||
export default async function Index() {
|
||||
return (
|
||||
<>
|
||||
<Plugs />
|
||||
</>
|
||||
);
|
||||
return <Plugs />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,79 @@
|
|||
:root {
|
||||
.dark {
|
||||
--color-primary: #000000;
|
||||
--new-bgColor: #0e0e0e;
|
||||
--new-bgColorInner: #1a1919;
|
||||
--new-bgLineColor: #212121;
|
||||
--new-textItemFocused: #1a1919;
|
||||
--new-textItemBlur: #999999;
|
||||
--new-boxFocused: #fff;
|
||||
--new-textColor: 255 255 255;
|
||||
--new-blockSeparator: #272626;
|
||||
--new-btn-simple: #313030;
|
||||
--new-btn-text: #ffffff;
|
||||
--new-btn-primary: #612bd3;
|
||||
--new-ai-btn: #d82d7e;
|
||||
--new-box-hover: #201f1f;
|
||||
--new-table-border: #2b2b2b;
|
||||
--new-table-header: #1e1d1d;
|
||||
--new-table-text: #9c9c9c;
|
||||
--new-table-text-focused: #fc69ff;
|
||||
--new-small-strips: #191818;
|
||||
--new-big-strips: #161515;
|
||||
--new-col-color: #2c2b2b;
|
||||
--new-menu-dots: #696868;
|
||||
--new-menu-hover: #fff;
|
||||
--menu-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.50);
|
||||
}
|
||||
.light {
|
||||
--new-bgColor: #f0f2f4;
|
||||
--new-bgColorInner: #ffffff;
|
||||
--new-bgLineColor: #e7e9eb;
|
||||
--new-textItemFocused: #3900b2;
|
||||
--new-textItemBlur: #777b7f;
|
||||
--new-boxFocused: #ebe8ff;
|
||||
--new-textColor: 14 14 14;
|
||||
--new-blockSeparator: #f2f2f4;
|
||||
--new-btn-simple: #ECEEF1;
|
||||
--new-btn-text: #0E0E0E;
|
||||
--new-btn-primary: #612bd3;
|
||||
--new-ai-btn: #d82d7e;
|
||||
--new-box-hover: #f4f6f8;
|
||||
--new-table-border: #e7e9eb;
|
||||
--new-table-header: #f5f7f9;
|
||||
--new-table-text: #777b7f;
|
||||
--new-table-text-focused: #fc69ff;
|
||||
--new-small-strips: #191818;
|
||||
--new-big-strips: #F5F7F9;
|
||||
--new-col-color: #EFF1F3;
|
||||
--new-menu-dots: #696868;
|
||||
--new-menu-hover: #000;
|
||||
--menu-shadow: -22px 83px 24px 0 rgba(55, 52, 75, 0.00), -14px 53px 22px 0 rgba(55, 52, 75, 0.01), -8px 30px 19px 0 rgba(55, 52, 75, 0.05), -3px 13px 14px 0 rgba(55, 52, 75, 0.09), -1px 3px 8px 0 rgba(55, 52, 75, 0.10);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
.dark {
|
||||
--color-primary: #0e0e0e;
|
||||
--color-secondary: #090b13;
|
||||
--color-text: #ffffff;
|
||||
--color-third: #080b13;
|
||||
--color-forth: #612ad5;
|
||||
--color-fifth: #28344f;
|
||||
--color-sixth: #0b101b;
|
||||
--color-fifth: var(--new-bgLineColor);
|
||||
--color-sixth: var(--new-table-header);
|
||||
--color-seventh: #7236f1;
|
||||
--color-gray: #8c8c8c;
|
||||
--color-input: #131b2c;
|
||||
--color-input: var(--new-table-header);
|
||||
--color-input-text: #64748b;
|
||||
--color-table-border: #1f2941;
|
||||
--color-table-border: var(--new-table-border);
|
||||
--color-custom1: #324264;
|
||||
--color-custom2: #141c2c;
|
||||
--color-custom3: #0b0f1c;
|
||||
--color-custom4: #8155dd;
|
||||
--color-custom5: #e9e9f1;
|
||||
--color-custom6: #172034;
|
||||
--color-custom6: var(--new-bgLineColor);
|
||||
--color-custom7: #7950f2;
|
||||
--color-custom8: #0f1524;
|
||||
--color-custom8: var(--new-btn-simple);
|
||||
--color-custom9: #354258;
|
||||
--color-custom10: #e4b895;
|
||||
--color-custom11: #8b90ff;
|
||||
|
|
@ -70,16 +124,16 @@
|
|||
--color-modalCustom: #000000;
|
||||
}
|
||||
.light {
|
||||
--color-primary: #fff;
|
||||
--color-primary: #f0f2f4;
|
||||
--color-secondary: #fff;
|
||||
--color-text: #000;
|
||||
--color-third: white;
|
||||
--color-forth: #612ad5;
|
||||
--color-fifth: #efefef;
|
||||
--color-sixth: #fff;
|
||||
--color-fifth: var(--new-bgLineColor);
|
||||
--color-sixth: var(--new-table-header);
|
||||
--color-seventh: #7236f1;
|
||||
--color-gray: #8c8c8c;
|
||||
--color-input: #f8f8f8;
|
||||
--color-input: var(--new-table-header);
|
||||
--color-input-text: #64748b;
|
||||
--color-table-border: #efefef;
|
||||
--color-custom1: #324264;
|
||||
|
|
@ -87,9 +141,9 @@
|
|||
--color-custom3: #fff;
|
||||
--color-custom4: #8155dd;
|
||||
--color-custom5: #e9e9f1;
|
||||
--color-custom6: #fff;
|
||||
--color-custom6: var(--new-bgLineColor);
|
||||
--color-custom7: #7950f2;
|
||||
--color-custom8: #efefef;
|
||||
--color-custom8: var(--new-btn-simple);
|
||||
--color-custom9: #354258;
|
||||
--color-custom10: #e4b895;
|
||||
--color-custom11: #8b90ff;
|
||||
|
|
@ -139,4 +193,4 @@
|
|||
--color-custom55: #d5d7e1;
|
||||
--color-modalCustom: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,10 +6,15 @@
|
|||
@import '@uppy/core/dist/style.css';
|
||||
@import '@uppy/dashboard/dist/style.css';
|
||||
|
||||
body,
|
||||
html {
|
||||
@apply bg-primary;
|
||||
body {
|
||||
background: var(--new-bgColor) !important;
|
||||
color: var(--new-btn-text);
|
||||
}
|
||||
|
||||
body * {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -89,13 +94,14 @@ html {
|
|||
}
|
||||
|
||||
.react-tags {
|
||||
@apply border border-fifth bg-input;
|
||||
@apply border border-newTableBorder placeholder-textColor;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
height: 44px;
|
||||
border-radius: 4px;
|
||||
/* shared font styles */
|
||||
font-size: 14px;
|
||||
background-color: var(--new-bgColorInner);
|
||||
height: 42px;
|
||||
border-radius: 8px;
|
||||
/* shared font styles */
|
||||
line-height: 1.2;
|
||||
/* clicking anywhere will focus the input */
|
||||
cursor: text;
|
||||
|
|
@ -104,6 +110,11 @@ html {
|
|||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.react-tags input {
|
||||
@apply placeholder-textColor;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.react-tags.is-active {
|
||||
@apply border-customColor51;
|
||||
}
|
||||
|
|
@ -398,6 +409,7 @@ div div .set-font-family {
|
|||
transform: translate(-50%, -50%);
|
||||
white-space: nowrap;
|
||||
opacity: 30%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loading-shimmer {
|
||||
|
|
@ -434,20 +446,29 @@ div div .set-font-family {
|
|||
}
|
||||
|
||||
.tags-top .react-tags__combobox {
|
||||
margin-left: 5px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.tags-top .react-tags__combobox {
|
||||
height: 44px;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
background-color: var(--color-input);
|
||||
background-color: var(--new-bgColorInner);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
min-width: 150px;
|
||||
text-align: left;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
border-color: var(--color-fifth);
|
||||
border-radius: 8px;
|
||||
border-color: var(--new-table-border);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tags-top input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tags-top input::placeholder {
|
||||
color: var(--new-textColor);
|
||||
}
|
||||
|
||||
.tags-top .react-tags__list,
|
||||
|
|
@ -537,7 +558,7 @@ html[dir='rtl'] [dir='ltr'] {
|
|||
}
|
||||
|
||||
.ProseMirror:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ProseMirror .mention {
|
||||
|
|
@ -545,34 +566,63 @@ html[dir='rtl'] [dir='ltr'] {
|
|||
color: #ae8afc;
|
||||
}
|
||||
|
||||
.ProseMirror ul, .preview ul {
|
||||
.ProseMirror ul,
|
||||
.preview ul {
|
||||
list-style: disc;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.preview ul, .preview li {
|
||||
.preview ul,
|
||||
.preview li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ProseMirror h1, .preview h1 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
.ProseMirror h1,
|
||||
.preview h1 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ProseMirror * {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.ProseMirror h2, .preview h2 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
.ProseMirror h2,
|
||||
.preview h2 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ProseMirror h3, .preview h3 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
.ProseMirror h3,
|
||||
.preview h3 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.preview p {
|
||||
min-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.repeated-strip {
|
||||
background: repeating-linear-gradient(
|
||||
135deg,
|
||||
var(--new-bgColorInner),
|
||||
var(--new-bgColorInner) 4px,
|
||||
var(--new-big-strips) 4px,
|
||||
var(--new-big-strips) 8px
|
||||
);
|
||||
}
|
||||
|
||||
.mantine-Modal-inner {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.mantine-Modal-modal {
|
||||
padding: 0;
|
||||
@apply bg-newBgColorInner;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.mantine-Overlay-root {
|
||||
background: rgba(65, 64, 66, 0.3) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { FC, useEffect, useMemo, useRef } from 'react';
|
|||
import DrawChart from 'chart.js/auto';
|
||||
import { TotalList } from '@gitroom/frontend/components/analytics/stars.and.forks.interface';
|
||||
import { chunk } from 'lodash';
|
||||
import useCookie from 'react-use-cookie';
|
||||
function mergeDataPoints(data: TotalList[], numPoints: number): TotalList[] {
|
||||
const res = chunk(data, Math.ceil(data.length / numPoints));
|
||||
return res.map((row) => {
|
||||
|
|
@ -17,6 +18,7 @@ export const ChartSocial: FC<{
|
|||
data: TotalList[];
|
||||
}> = (props) => {
|
||||
const { data } = props;
|
||||
const [mode] = useCookie('mode', 'dark');
|
||||
const list = useMemo(() => {
|
||||
return mergeDataPoints(data, 7);
|
||||
}, [data]);
|
||||
|
|
@ -26,8 +28,8 @@ export const ChartSocial: FC<{
|
|||
const gradient = ref.current
|
||||
.getContext('2d')
|
||||
.createLinearGradient(0, 0, 0, ref.current.height);
|
||||
gradient.addColorStop(0, 'rgb(20,101,6)'); // Start color with some transparency
|
||||
gradient.addColorStop(1, 'rgb(9, 11, 19, 1)');
|
||||
gradient.addColorStop(0, 'rgb(90,46,203)'); // Start color with some transparency
|
||||
gradient.addColorStop(1, 'rgb(65, 38, 136, 1)');
|
||||
chart.current = new DrawChart(ref.current!, {
|
||||
type: 'line',
|
||||
options: {
|
||||
|
|
@ -64,7 +66,7 @@ export const ChartSocial: FC<{
|
|||
labels: list.map((row) => row.date),
|
||||
datasets: [
|
||||
{
|
||||
borderColor: '#fff',
|
||||
borderColor: mode === 'dark' ? '#fff' : '#000',
|
||||
// @ts-ignore
|
||||
label: 'Total',
|
||||
backgroundColor: gradient,
|
||||
|
|
|
|||
|
|
@ -57,13 +57,6 @@ For example, you can schedule your posts on X, Facebook, Instagram, TikTok, YouT
|
|||
'If you have a team with multiple members, you can invite them to your workspace to collaborate on your posts and add their personal channels'
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t('faq_what_is_ai_auto_complete', 'What is AI auto-complete?'),
|
||||
description: t(
|
||||
'faq_we_automate_chatgpt_to_help_you_write',
|
||||
'We automate ChatGPT to help you write your social posts and articles'
|
||||
),
|
||||
},
|
||||
];
|
||||
};
|
||||
export const FAQSection: FC<{
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { object, string } from 'yup';
|
|||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { web3List } from '@gitroom/frontend/components/launches/web3/web3.list';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { ModalWrapperComponent } from '@gitroom/frontend/components/new-launch/modal.wrapper.component';
|
||||
const resolver = classValidatorResolver(ApiKeyDto);
|
||||
export const useAddProvider = (update?: () => void) => {
|
||||
const modal = useModals();
|
||||
|
|
@ -26,10 +27,14 @@ export const useAddProvider = (update?: () => void) => {
|
|||
title: '',
|
||||
withCloseButton: false,
|
||||
classNames: {
|
||||
modal: 'bg-transparent text-textColor',
|
||||
modal: 'text-textColor',
|
||||
},
|
||||
children: <AddProviderComponent update={update} {...data} />,
|
||||
size: 'auto',
|
||||
children: (
|
||||
<ModalWrapperComponent title="Add Channel">
|
||||
<AddProviderComponent update={update} {...data} />
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
});
|
||||
}, []);
|
||||
};
|
||||
|
|
@ -42,24 +47,29 @@ export const AddProviderButton: FC<{
|
|||
|
||||
return (
|
||||
<button
|
||||
className="text-white p-[8px] rounded-md bg-forth flex gap-[5px]"
|
||||
className="text-btnText bg-btnSimple h-[44px] pt-[12px] pb-[14px] ps-[16px] pe-[20px] justify-center items-center flex rounded-[8px] gap-[8px]"
|
||||
onClick={add}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 32 32"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7 26C7 26.2652 6.89464 26.5196 6.70711 26.7071C6.51957 26.8946 6.26522 27 6 27C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26C5 25.7348 4.89464 25.4804 4.70711 25.2929C4.51957 25.1054 4.26522 25 4 25C3.73478 25 3.48043 24.8946 3.29289 24.7071C3.10536 24.5196 3 24.2652 3 24C3 23.7348 3.10536 23.4804 3.29289 23.2929C3.48043 23.1054 3.73478 23 4 23C4.79565 23 5.55871 23.3161 6.12132 23.8787C6.68393 24.4413 7 25.2044 7 26ZM4 19C3.73478 19 3.48043 19.1054 3.29289 19.2929C3.10536 19.4804 3 19.7348 3 20C3 20.2652 3.10536 20.5196 3.29289 20.7071C3.48043 20.8946 3.73478 21 4 21C5.32608 21 6.59785 21.5268 7.53553 22.4645C8.47322 23.4021 9 24.6739 9 26C9 26.2652 9.10536 26.5196 9.29289 26.7071C9.48043 26.8946 9.73478 27 10 27C10.2652 27 10.5196 26.8946 10.7071 26.7071C10.8946 26.5196 11 26.2652 11 26C10.998 24.1441 10.2599 22.3648 8.94755 21.0524C7.63523 19.7401 5.85591 19.002 4 19ZM4 15C3.73478 15 3.48043 15.1054 3.29289 15.2929C3.10536 15.4804 3 15.7348 3 16C3 16.2652 3.10536 16.5196 3.29289 16.7071C3.48043 16.8946 3.73478 17 4 17C6.38614 17.0026 8.67378 17.9517 10.361 19.639C12.0483 21.3262 12.9974 23.6139 13 26C13 26.2652 13.1054 26.5196 13.2929 26.7071C13.4804 26.8946 13.7348 27 14 27C14.2652 27 14.5196 26.8946 14.7071 26.7071C14.8946 26.5196 15 26.2652 15 26C14.9967 23.0836 13.8367 20.2877 11.7745 18.2255C9.71234 16.1633 6.91637 15.0033 4 15ZM27 5H5C4.46957 5 3.96086 5.21071 3.58579 5.58579C3.21071 5.96086 3 6.46957 3 7V12C3 12.2652 3.10536 12.5196 3.29289 12.7071C3.48043 12.8946 3.73478 13 4 13C7.4467 13.0036 10.7512 14.3744 13.1884 16.8116C15.6256 19.2488 16.9964 22.5533 17 26C17 26.2652 17.1054 26.5196 17.2929 26.7071C17.4804 26.8946 17.7348 27 18 27H27C27.5304 27 28.0391 26.7893 28.4142 26.4142C28.7893 26.0391 29 25.5304 29 25V7C29 6.46957 28.7893 5.96086 28.4142 5.58579C28.0391 5.21071 27.5304 5 27 5Z"
|
||||
fill="white"
|
||||
d="M1.66675 10.0417C3.35907 10.2299 4.93698 10.9884 6.14101 12.1924C7.34504 13.3964 8.10353 14.9743 8.29175 16.6667M1.66675 13.4167C2.46749 13.58 3.20253 13.9751 3.7804 14.553C4.35827 15.1309 4.75344 15.8659 4.91675 16.6667M1.66675 16.6667H1.67508M11.6667 17.5H14.3334C15.7335 17.5 16.4336 17.5 16.9684 17.2275C17.4388 16.9878 17.8212 16.6054 18.0609 16.135C18.3334 15.6002 18.3334 14.9001 18.3334 13.5V6.5C18.3334 5.09987 18.3334 4.3998 18.0609 3.86502C17.8212 3.39462 17.4388 3.01217 16.9684 2.77248C16.4336 2.5 15.7335 2.5 14.3334 2.5H5.66675C4.26662 2.5 3.56655 2.5 3.03177 2.77248C2.56137 3.01217 2.17892 3.39462 1.93923 3.86502C1.66675 4.3998 1.66675 5.09987 1.66675 6.5V6.66667"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1 text-start">{t('add_channel', 'Add Channel')}</div>
|
||||
<div className="text-start text-[16px] group-[.sidebar]:hidden">
|
||||
{t('add_channel', 'Add Channel')}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
@ -261,28 +271,7 @@ export const CustomVariables: FC<{
|
|||
const t = useT();
|
||||
|
||||
return (
|
||||
<div className="rounded-[4px] border border-customColor6 bg-sixth px-[16px] pb-[16px] relative">
|
||||
<TopTitle title={`Custom URL`} />
|
||||
<button
|
||||
onClick={close || modals.closeAll}
|
||||
className="outline-none absolute end-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div className="rounded-[4px] relative">
|
||||
<FormProvider {...methods}>
|
||||
<form
|
||||
className="gap-[8px] flex flex-col pt-[10px]"
|
||||
|
|
@ -443,31 +432,10 @@ export const AddProviderComponent: FC<{
|
|||
const t = useT();
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-[20px] rounded-[4px] border border-customColor6 bg-sixth px-[16px] pb-[16px] relative">
|
||||
<div className="w-full flex flex-col gap-[20px] rounded-[4px] relative">
|
||||
<div className="flex flex-col">
|
||||
<TopTitle title="Add Channel" />
|
||||
<button
|
||||
onClick={close}
|
||||
className="outline-none absolute end-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<h2 className="pt-[16px] pb-[10px]">{t('social', 'Social')}</h2>
|
||||
<div className="grid grid-cols-3 gap-[10px] justify-items-center justify-center">
|
||||
<div className="grid grid-cols-5 gap-[10px] justify-items-center justify-center">
|
||||
{social.map((item) => (
|
||||
<div
|
||||
key={item.identifier}
|
||||
|
|
@ -484,7 +452,7 @@ export const AddProviderComponent: FC<{
|
|||
}
|
||||
: {})}
|
||||
className={
|
||||
'w-[200px] h-[100px] text-[14px] bg-input text-textColor relative justify-center items-center flex flex-col gap-[10px] cursor-pointer'
|
||||
'w-full h-[100px] text-[14px] p-[10px] rounded-[8px] bg-newTableHeader text-textColor relative justify-center items-center flex flex-col gap-[10px] cursor-pointer'
|
||||
}
|
||||
>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ ${type}
|
|||
}
|
||||
: {})}
|
||||
className={clsx(
|
||||
'relative ms-[10px] rounded-[4px] gap-[8px] !text-primary justify-center items-center flex border border-dashed border-customColor21 bg-input',
|
||||
'relative ms-[10px] rounded-[4px] gap-[8px] !text-primary justify-center items-center flex border border-dashed border-newBgLineColor bg-newColColor',
|
||||
value.length < 30 && 'opacity-25'
|
||||
)}
|
||||
>
|
||||
|
|
@ -104,7 +104,7 @@ ${type}
|
|||
</Button>
|
||||
{value.length >= 30 && !loading && (
|
||||
<div className="text-[12px] ms-[10px] -mt-[10px] w-[200px] absolute top-[100%] z-[500] start-0 hidden group-hover:block">
|
||||
<ul className="cursor-pointer rounded-[4px] border border-dashed border-customColor21 mt-[3px] p-[5px] bg-customColor2">
|
||||
<ul className="cursor-pointer rounded-[4px] border border-dashed mt-[3px] p-[5px] border-newBgLineColor bg-newColColor">
|
||||
{list.map((p) => (
|
||||
<li onClick={generateImage(p)} key={p} className="hover:bg-sixth">
|
||||
{p}
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@ export const AiVideo: FC<{
|
|||
}
|
||||
: {})}
|
||||
className={clsx(
|
||||
'relative ms-[10px] rounded-[4px] gap-[8px] !text-primary justify-center items-center flex border border-dashed border-customColor21 bg-input',
|
||||
'relative ms-[10px] rounded-[4px] gap-[8px] !text-primary justify-center items-center flex border border-dashed border-newBgLineColor bg-newColColor',
|
||||
value.length < 30 && 'opacity-25'
|
||||
)}
|
||||
>
|
||||
|
|
@ -244,7 +244,7 @@ export const AiVideo: FC<{
|
|||
</Button>
|
||||
{value.length >= 30 && !loading && (
|
||||
<div className="text-[12px] ms-[10px] -mt-[10px] w-[200px] absolute top-[100%] z-[500] start-0 hidden group-hover:block">
|
||||
<ul className="cursor-pointer rounded-[4px] border border-dashed border-customColor21 mt-[3px] p-[5px] bg-customColor2">
|
||||
<ul className="cursor-pointer rounded-[4px] border border-dashed border-newBgLineColor bg-newColColor mt-[3px] p-[5px]">
|
||||
{data.map((p: any) => (
|
||||
<li
|
||||
onClick={generateVideo(p)}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import { useSearchParams } from 'next/navigation';
|
|||
import isoWeek from 'dayjs/plugin/isoWeek';
|
||||
import weekOfYear from 'dayjs/plugin/weekOfYear';
|
||||
import { extend } from 'dayjs';
|
||||
import useCookie from 'react-use-cookie';
|
||||
extend(isoWeek);
|
||||
extend(weekOfYear);
|
||||
export const CalendarContext = createContext({
|
||||
|
|
@ -109,7 +110,8 @@ export const CalendarWeekProvider: FC<{
|
|||
const [internalData, setInternalData] = useState([] as any[]);
|
||||
const [trendings] = useState<string[]>([]);
|
||||
const searchParams = useSearchParams();
|
||||
const display = searchParams.get('display') || 'week';
|
||||
const [displaySaved, setDisplaySaved] = useCookie('calendar-display', 'week');
|
||||
const display = searchParams.get('display') || displaySaved;
|
||||
const [filters, setFilters] = useState({
|
||||
currentDay: +(searchParams.get('day') || dayjs().day()) as
|
||||
| 0
|
||||
|
|
@ -166,6 +168,7 @@ export const CalendarWeekProvider: FC<{
|
|||
display: 'week' | 'month' | 'day';
|
||||
customer: string | null;
|
||||
}) => {
|
||||
setDisplaySaved(filters.display);
|
||||
setFilters(filters);
|
||||
setInternalData([]);
|
||||
const path = [
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ import { AddEditModal } from '@gitroom/frontend/components/new-launch/add.edit.m
|
|||
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
|
||||
import { useVariables } from '@gitroom/react/helpers/variable.context';
|
||||
import { stripHtmlValidation } from '@gitroom/helpers/utils/strip.html.validation';
|
||||
import { ModalWrapperComponent } from '../new-launch/modal.wrapper.component';
|
||||
|
||||
// Extend dayjs with necessary plugins
|
||||
extend(isSameOrAfter);
|
||||
|
|
@ -142,10 +143,10 @@ export const DayView = () => {
|
|||
);
|
||||
}, [integrations, posts]);
|
||||
return (
|
||||
<div className="flex flex-col gap-[10px]">
|
||||
<div className="flex flex-col gap-[10px] flex-1">
|
||||
{options.map((option) => (
|
||||
<Fragment key={option[0].time}>
|
||||
<div className="text-center text-[20px]">
|
||||
<div className="text-center text-[14px]">
|
||||
{dayjs()
|
||||
.utc()
|
||||
.startOf('day')
|
||||
|
|
@ -155,7 +156,7 @@ export const DayView = () => {
|
|||
</div>
|
||||
<div
|
||||
key={option[0].time}
|
||||
className="bg-secondary min-h-[60px] border-[2px] border-secondary rounded-[10px] flex justify-center items-center gap-[10px] mb-[20px]"
|
||||
className="min-h-[60px] rounded-[10px] flex justify-center items-center gap-[10px] mb-[20px]"
|
||||
>
|
||||
<CalendarContext.Provider
|
||||
value={{
|
||||
|
|
@ -202,27 +203,39 @@ export const WeekView = () => {
|
|||
}, [i18next.resolvedLanguage, currentYear, currentWeek]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen overflow-hidden text-textColor flex-1">
|
||||
<div className="flex flex-col text-textColor flex-1">
|
||||
<div className="flex-1">
|
||||
<div className="grid grid-cols-8 bg-customColor31 gap-[1px] border-customColor31 border rounded-[10px]">
|
||||
<div className="bg-customColor20 sticky top-0 z-10 bg-gray-900"></div>
|
||||
<div className="grid [grid-template-columns:136px_repeat(7,_minmax(0,_1fr))] gap-[4px] rounded-[10px]">
|
||||
<div className="z-10 bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px]"></div>
|
||||
{localizedDays.map((day, index) => (
|
||||
<div
|
||||
key={day.name}
|
||||
className="sticky top-0 z-10 bg-customColor20 p-2 text-center"
|
||||
className="z-10 p-2 text-center bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px]"
|
||||
>
|
||||
<div>{day.name}</div>
|
||||
<div className={clsx("text-xs", day.day === dayjs().format('L') && 'text-yellow-300')}>{day.day}</div>
|
||||
<div className="text-[14px] font-[500] text-newTableText">
|
||||
{day.name}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'text-[14px] font-[600] flex items-center justify-center gap-[6px]',
|
||||
day.day === dayjs().format('L') && 'text-newTableTextFocused'
|
||||
)}
|
||||
>
|
||||
{day.day === dayjs().format('L') && (
|
||||
<div className="w-[6px] h-[6px] bg-newTableTextFocused rounded-full" />
|
||||
)}
|
||||
{day.day}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{hours.map((hour) => (
|
||||
<Fragment key={hour}>
|
||||
<div className="p-2 pe-4 bg-secondary text-center items-center justify-center flex">
|
||||
<div className="p-2 pe-4 text-center items-center justify-center flex text-[14px] text-newTableText">
|
||||
{convertTimeFormatBasedOnLocality(hour)}
|
||||
</div>
|
||||
{days.map((day, indexDay) => (
|
||||
<Fragment key={`${currentYear}-${currentWeek}-${day}-${hour}`}>
|
||||
<div className="relative bg-secondary">
|
||||
<div className="relative">
|
||||
<CalendarColumn
|
||||
getDate={dayjs()
|
||||
.year(currentYear)
|
||||
|
|
@ -287,13 +300,13 @@ export const MonthView = () => {
|
|||
}, [currentYear, currentMonth]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen overflow-hidden text-textColor flex-1">
|
||||
<div className="flex flex-col text-textColor flex-1">
|
||||
<div className="flex-1 flex">
|
||||
<div className="grid grid-cols-7 grid-rows-[40px_auto] bg-customColor31 gap-[1px] border-customColor31 border rounded-[10px] flex-1">
|
||||
<div className="grid grid-cols-7 grid-rows-[62px_auto] gap-[4px] rounded-[10px] flex-1">
|
||||
{localizedDays.map((day) => (
|
||||
<div
|
||||
key={day}
|
||||
className="sticky top-0 z-10 bg-customColor20 p-2 text-center"
|
||||
className="z-10 p-2 bg-newTableHeader flex justify-center items-center flex-col h-[62px] rounded-[8px]"
|
||||
>
|
||||
<div>{day}</div>
|
||||
</div>
|
||||
|
|
@ -301,7 +314,7 @@ export const MonthView = () => {
|
|||
{calendarDays.map((date, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-secondary text-center items-center justify-center flex min-h-[100px]"
|
||||
className="text-center items-center justify-center flex min-h-[100px]"
|
||||
>
|
||||
<CalendarColumn
|
||||
getDate={dayjs(date.day).endOf('day')}
|
||||
|
|
@ -458,7 +471,7 @@ export const CalendarColumn: FC<{
|
|||
const integration = await getIntegration(postInfo);
|
||||
modal.openModal({
|
||||
classNames: {
|
||||
modal: 'bg-transparent text-textColor',
|
||||
modal: 'text-textColor',
|
||||
},
|
||||
size: 'auto',
|
||||
withCloseButton: false,
|
||||
|
|
@ -514,7 +527,7 @@ export const CalendarColumn: FC<{
|
|||
closeOnEscape: false,
|
||||
withCloseButton: false,
|
||||
classNames: {
|
||||
modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor',
|
||||
modal: 'w-[100%] max-w-[1400px] text-textColor',
|
||||
},
|
||||
children: (
|
||||
<ExistingData value={data}>
|
||||
|
|
@ -564,26 +577,28 @@ export const CalendarColumn: FC<{
|
|||
? undefined
|
||||
: await new Promise((resolve) => {
|
||||
modal.openModal({
|
||||
title: t('select_set', 'Select a Set'),
|
||||
title: '',
|
||||
closeOnClickOutside: true,
|
||||
closeOnEscape: true,
|
||||
withCloseButton: true,
|
||||
withCloseButton: false,
|
||||
onClose: () => resolve('exit'),
|
||||
classNames: {
|
||||
modal: 'bg-secondary text-textColor',
|
||||
modal: 'text-textColor',
|
||||
},
|
||||
children: (
|
||||
<SetSelectionModal
|
||||
sets={sets}
|
||||
onSelect={(selectedSet) => {
|
||||
resolve(selectedSet);
|
||||
modal.closeAll();
|
||||
}}
|
||||
onContinueWithoutSet={() => {
|
||||
resolve(undefined);
|
||||
modal.closeAll();
|
||||
}}
|
||||
/>
|
||||
<ModalWrapperComponent title={t('select_set', 'Select a Set')}>
|
||||
<SetSelectionModal
|
||||
sets={sets}
|
||||
onSelect={(selectedSet) => {
|
||||
resolve(selectedSet);
|
||||
modal.closeAll();
|
||||
}}
|
||||
onContinueWithoutSet={() => {
|
||||
resolve(undefined);
|
||||
modal.closeAll();
|
||||
}}
|
||||
/>
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
});
|
||||
});
|
||||
|
|
@ -595,7 +610,7 @@ export const CalendarColumn: FC<{
|
|||
closeOnEscape: false,
|
||||
withCloseButton: false,
|
||||
classNames: {
|
||||
modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor',
|
||||
modal: 'w-[100%] max-w-[1400px] text-textColor',
|
||||
},
|
||||
children: (
|
||||
<AddEditModal
|
||||
|
|
@ -632,9 +647,13 @@ export const CalendarColumn: FC<{
|
|||
closeOnEscape: true,
|
||||
withCloseButton: false,
|
||||
classNames: {
|
||||
modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor',
|
||||
modal: 'w-[100%] max-w-[1400px]',
|
||||
},
|
||||
children: <StatisticsModal postId={id} />,
|
||||
children: (
|
||||
<ModalWrapperComponent title={t('statistics', 'Statistics')}>
|
||||
<StatisticsModal postId={id} />
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
size: '80%',
|
||||
// title: `Adding posts for ${getDate.format('DD/MM/YYYY HH:mm')}`,
|
||||
});
|
||||
|
|
@ -671,34 +690,30 @@ export const CalendarColumn: FC<{
|
|||
|
||||
const addProvider = useAddProvider();
|
||||
return (
|
||||
<div className="flex flex-col w-full min-h-full" ref={drop as any}>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex flex-col w-full min-h-full',
|
||||
isBeforeNow && 'repeated-strip',
|
||||
isBeforeNow
|
||||
? 'cursor-not-allowed'
|
||||
: 'border border-newTextColor/5 rounded-[8px]'
|
||||
)}
|
||||
ref={drop as any}
|
||||
>
|
||||
{display === 'month' && (
|
||||
<div className={clsx('pt-[5px]', isBeforeNow && 'bg-customColor23')}>
|
||||
{getDate.date()}
|
||||
</div>
|
||||
<div className={clsx('pt-[6px] text-[14px]')}>{getDate.date()}</div>
|
||||
)}
|
||||
<div
|
||||
className={clsx(
|
||||
'relative flex flex-col flex-1 text-white',
|
||||
canDrop && 'bg-white/80',
|
||||
isBeforeNow && postList.length === 0 && 'cursor-not-allowed'
|
||||
'relative flex flex-col flex-1 text-white rounded-[8px] min-h-[70px]',
|
||||
canDrop && 'border border-[#612BD3]'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
{...(canBeTrending
|
||||
? {
|
||||
'data-tooltip-id': 'tooltip',
|
||||
'data-tooltip-content': t(
|
||||
'predicted_github_trending_change',
|
||||
'Predicted GitHub Trending Change'
|
||||
),
|
||||
}
|
||||
: {})}
|
||||
className={clsx(
|
||||
'flex-col text-[12px] pointer w-full flex scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary',
|
||||
isBeforeNow ? 'bg-customColor23 flex-1' : 'cursor-pointer',
|
||||
isBeforeNow && postList.length === 0 && 'col-calendar',
|
||||
canBeTrending && 'bg-customColor24'
|
||||
isBeforeNow ? 'flex-1' : 'cursor-pointer',
|
||||
isBeforeNow && postList.length === 0 && 'col-calendar'
|
||||
)}
|
||||
>
|
||||
{list.map((post) => (
|
||||
|
|
@ -708,7 +723,7 @@ export const CalendarColumn: FC<{
|
|||
'text-textColor p-[2.5px] relative flex flex-col justify-center items-center'
|
||||
)}
|
||||
>
|
||||
<div className="relative w-full flex flex-col items-center p-[2.5px] h-[66px]">
|
||||
<div className="relative w-full flex flex-col items-center p-[2.5px]">
|
||||
<CalendarItem
|
||||
display={display as 'day' | 'week' | 'month'}
|
||||
isBeforeNow={isBeforeNow}
|
||||
|
|
@ -761,9 +776,13 @@ export const CalendarColumn: FC<{
|
|||
{display !== 'day' && (
|
||||
<div
|
||||
className={clsx(
|
||||
'hover:before:content-["+"] w-full h-full text-seventh rounded-[10px] hover:border hover:border-seventh flex justify-center items-center'
|
||||
'group hover:before:h-[30px] w-full h-full rounded-[10px] flex justify-center items-center text-white'
|
||||
)}
|
||||
/>
|
||||
>
|
||||
<div
|
||||
className={`group-hover:before:content-["+"] pb-[5px] flex justify-center items-center rounded-[8px] transition-all group-hover:bg-btnPrimary w-full h-full max-w-[40px] max-h-[40px]`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{display === 'day' && (
|
||||
<div
|
||||
|
|
@ -776,14 +795,14 @@ export const CalendarColumn: FC<{
|
|||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'relative w-[34px] h-[34px] rounded-full flex justify-center items-center bg-fifth filter transition-all duration-500'
|
||||
'relative w-[34px] h-[34px] rounded-[8px] flex justify-center items-center filter transition-all duration-500'
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src={
|
||||
selectedIntegrations.picture || '/no-picture.jpg'
|
||||
}
|
||||
className="rounded-full"
|
||||
className="rounded-[8px]"
|
||||
alt={selectedIntegrations.identifier}
|
||||
width={32}
|
||||
height={32}
|
||||
|
|
@ -797,7 +816,7 @@ export const CalendarColumn: FC<{
|
|||
) : (
|
||||
<Image
|
||||
src={`/icons/platforms/${selectedIntegrations.identifier}.png`}
|
||||
className="rounded-full absolute z-10 -bottom-[5px] -end-[5px] border border-fifth"
|
||||
className="rounded-[8px] absolute z-10 -bottom-[5px] -end-[5px] border border-fifth"
|
||||
alt={selectedIntegrations.identifier}
|
||||
width={20}
|
||||
height={20}
|
||||
|
|
@ -872,7 +891,7 @@ const CalendarItem: FC<{
|
|||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'text-white bg-forth text-[11px] h-[15px] w-full rounded-tr-[10px] rounded-tl-[10px] flex justify-center gap-[10px] px-[5px]'
|
||||
'text-white text-[11px] max-h-[24px] h-[24px] min-h-[24px] w-full rounded-tr-[10px] rounded-tl-[10px] flex items-center justify-center gap-[10px] px-[5px] bg-btnPrimary'
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: post?.tags?.[0]?.tag?.color,
|
||||
|
|
@ -930,7 +949,7 @@ const CalendarItem: FC<{
|
|||
<div
|
||||
onClick={editPost}
|
||||
className={clsx(
|
||||
'gap-[5px] w-full flex h-full flex-1 rounded-br-[10px] rounded-bl-[10px] border border-seventh px-[5px] p-[2.5px]',
|
||||
'gap-[5px] w-full flex h-full flex-1 rounded-br-[10px] rounded-bl-[10px] p-[8px] text-[14px] bg-newColColor',
|
||||
'relative',
|
||||
isBeforeNow && '!grayscale'
|
||||
)}
|
||||
|
|
@ -942,11 +961,11 @@ const CalendarItem: FC<{
|
|||
)}
|
||||
>
|
||||
<img
|
||||
className="w-[20px] h-[20px] rounded-full"
|
||||
className="w-[20px] h-[20px] rounded-[8px]"
|
||||
src={post.integration.picture! || '/no-picture.jpg'}
|
||||
/>
|
||||
<img
|
||||
className="w-[12px] h-[12px] rounded-full absolute z-10 top-[10px] end-0 border border-fifth"
|
||||
className="w-[12px] h-[12px] rounded-[8px] absolute z-10 top-[10px] end-0 border border-fifth"
|
||||
src={`/icons/platforms/${post.integration?.providerIdentifier}.png`}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1048,7 +1067,7 @@ export const SetSelectionModal: FC<{
|
|||
const t = useT();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 p-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="text-lg font-medium">
|
||||
{t('choose_set_or_continue', 'Choose a set or continue without one')}
|
||||
</div>
|
||||
|
|
@ -1058,7 +1077,7 @@ export const SetSelectionModal: FC<{
|
|||
<div
|
||||
key={set.id}
|
||||
onClick={() => onSelect(set)}
|
||||
className="p-3 border border-tableBorder rounded-lg cursor-pointer hover:bg-customColor31 transition-colors"
|
||||
className="p-3 border border-tableBorder rounded-lg cursor-pointer hover:transition-colors"
|
||||
>
|
||||
<div className="font-medium">{set.name}</div>
|
||||
{set.description && (
|
||||
|
|
@ -1073,7 +1092,7 @@ export const SetSelectionModal: FC<{
|
|||
<div className="flex gap-2 pt-2 border-t border-tableBorder">
|
||||
<button
|
||||
onClick={onContinueWithoutSet}
|
||||
className="flex-1 px-4 py-2 bg-customColor31 text-textColor rounded-lg hover:bg-customColor23 transition-colors"
|
||||
className="flex-1 px-4 py-2 text-textColor rounded-lg hover:transition-colors"
|
||||
>
|
||||
{t('continue_without_set', 'Continue without set')}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -48,30 +48,8 @@ export const CustomerModal: FC<{
|
|||
);
|
||||
const { data } = useSWR('/customers', loadCustomers);
|
||||
return (
|
||||
<div className="rounded-[4px] border border-customColor6 bg-sixth px-[16px] pb-[16px] relative w-full">
|
||||
<TopTitle title={`Move / Add to customer`} />
|
||||
<button
|
||||
className="outline-none absolute end-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
onClick={() => modal.closeAll()}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="mt-[16px]">
|
||||
<div className="relative w-full">
|
||||
<div className="mb-[80px]">
|
||||
<Autocomplete
|
||||
value={customer}
|
||||
onChange={setCustomer}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { useCalendar } from '@gitroom/frontend/components/launches/calendar.cont
|
|||
import clsx from 'clsx';
|
||||
import dayjs from 'dayjs';
|
||||
import { useCallback } from 'react';
|
||||
import { isUSCitizen } from './helpers/isuscitizen.utils';
|
||||
import { SelectCustomer } from '@gitroom/frontend/components/launches/select.customer';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import i18next from 'i18next';
|
||||
|
|
@ -215,50 +214,58 @@ export const Filters = () => {
|
|||
);
|
||||
return (
|
||||
<div className="text-textColor flex flex-col md:flex-row gap-[8px] items-center select-none">
|
||||
<div className="flex flex-grow flex-row items-center">
|
||||
<div
|
||||
onClick={previous}
|
||||
className="cursor-pointer text-textColor rtl:rotate-180"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M13.1644 15.5866C13.3405 15.7628 13.4395 16.0016 13.4395 16.2507C13.4395 16.4998 13.3405 16.7387 13.1644 16.9148C12.9883 17.0909 12.7494 17.1898 12.5003 17.1898C12.2513 17.1898 12.0124 17.0909 11.8363 16.9148L5.58629 10.6648C5.49889 10.5777 5.42954 10.4742 5.38222 10.3602C5.3349 10.2463 5.31055 10.1241 5.31055 10.0007C5.31055 9.87732 5.3349 9.75515 5.38222 9.64119C5.42954 9.52724 5.49889 9.42375 5.58629 9.33665L11.8363 3.08665C12.0124 2.91053 12.2513 2.81158 12.5003 2.81158C12.7494 2.81158 12.9883 2.91053 13.1644 3.08665C13.3405 3.26277 13.4395 3.50164 13.4395 3.75071C13.4395 3.99978 13.3405 4.23865 13.1644 4.41477L7.57925 9.99993L13.1644 15.5866Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="w-[80px] text-center">
|
||||
<div className="flex flex-grow flex-row items-center gap-[20px]">
|
||||
<div className="border h-[42px] border-newTableBorder bg-newTableBorder gap-[1px] flex items-center rounded-[8px] overflow-hidden">
|
||||
<div
|
||||
onClick={setCurrent(week.display as 'day' | 'week' | 'month')}
|
||||
className="bg-secondary py-[3px] rounded-[5px] hover:bg-tableBorder transition-all cursor-pointer"
|
||||
onClick={previous}
|
||||
className="cursor-pointer text-textColor rtl:rotate-180 px-[9px] bg-newBgColorInner h-full flex items-center justify-center hover:text-textItemFocused hover:bg-boxFocused"
|
||||
>
|
||||
Today
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="8"
|
||||
height="12"
|
||||
viewBox="0 0 8 12"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M6.5 11L1.5 6L6.5 1"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="w-[80px] text-center bg-newBgColorInner h-full flex items-center justify-center hover:text-textItemFocused hover:bg-boxFocused">
|
||||
<div
|
||||
onClick={setCurrent(week.display as 'day' | 'week' | 'month')}
|
||||
className="py-[3px] rounded-[5px] transition-all cursor-pointer text-[14px]"
|
||||
>
|
||||
Today
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={next}
|
||||
className="cursor-pointer text-textColor rtl:rotate-180 px-[9px] bg-newBgColorInner h-full flex items-center justify-center hover:text-textItemFocused hover:bg-boxFocused"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="8"
|
||||
height="12"
|
||||
viewBox="0 0 8 12"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M1.5 11L6.5 6L1.5 1"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={next}
|
||||
className="cursor-pointer text-textColor rtl:rotate-180"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M14.4137 10.6633L8.16374 16.9133C7.98761 17.0894 7.74874 17.1884 7.49967 17.1884C7.2506 17.1884 7.01173 17.0894 6.83561 16.9133C6.65949 16.7372 6.56055 16.4983 6.56055 16.2492C6.56055 16.0002 6.65949 15.7613 6.83561 15.5852L12.4223 10L6.83717 4.41331C6.74997 4.3261 6.68079 4.22257 6.6336 4.10863C6.5864 3.99469 6.56211 3.87257 6.56211 3.74925C6.56211 3.62592 6.5864 3.5038 6.6336 3.38986C6.68079 3.27592 6.74997 3.17239 6.83717 3.08518C6.92438 2.99798 7.02791 2.9288 7.14185 2.88161C7.25579 2.83441 7.37791 2.81012 7.50124 2.81012C7.62456 2.81012 7.74668 2.83441 7.86062 2.88161C7.97456 2.9288 8.07809 2.99798 8.1653 3.08518L14.4153 9.33518C14.5026 9.42238 14.5718 9.52596 14.619 9.63997C14.6662 9.75398 14.6904 9.87618 14.6903 9.99957C14.6901 10.123 14.6656 10.2451 14.6182 10.359C14.5707 10.4729 14.5012 10.5763 14.4137 10.6633Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex-1 text-[14px] font-[500]">
|
||||
{week.display === 'day'
|
||||
? `${dayjs()
|
||||
.month(week.currentMonth)
|
||||
|
|
@ -275,11 +282,11 @@ export const Filters = () => {
|
|||
onChange={(customer: string) => setCustomer(customer)}
|
||||
integrations={week.integrations}
|
||||
/>
|
||||
<div className="flex flex-row">
|
||||
<div className="flex flex-row p-[4px] border border-newTableBorder rounded-[8px] text-[14px] font-[500]">
|
||||
<div
|
||||
className={clsx(
|
||||
'border border-tableBorder p-[10px] cursor-pointer',
|
||||
week.display === 'day' && 'bg-tableBorder'
|
||||
'pt-[6px] pb-[5px] cursor-pointer w-[74px] text-center rounded-[6px]',
|
||||
week.display === 'day' && 'text-textItemFocused bg-boxFocused'
|
||||
)}
|
||||
onClick={setDay}
|
||||
>
|
||||
|
|
@ -287,8 +294,8 @@ export const Filters = () => {
|
|||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'border border-tableBorder p-[10px] cursor-pointer',
|
||||
week.display === 'week' && 'bg-tableBorder'
|
||||
'pt-[6px] pb-[5px] cursor-pointer w-[74px] text-center rounded-[6px]',
|
||||
week.display === 'week' && 'text-textItemFocused bg-boxFocused'
|
||||
)}
|
||||
onClick={setWeek}
|
||||
>
|
||||
|
|
@ -296,8 +303,8 @@ export const Filters = () => {
|
|||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'border border-tableBorder p-[10px] cursor-pointer',
|
||||
week.display === 'month' && 'bg-tableBorder'
|
||||
'pt-[6px] pb-[5px] cursor-pointer w-[74px] text-center rounded-[6px]',
|
||||
week.display === 'month' && 'text-textItemFocused bg-boxFocused'
|
||||
)}
|
||||
onClick={setMonth}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import dayjs from 'dayjs';
|
|||
import { Select } from '@gitroom/react/form/select';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { AddEditModal } from '@gitroom/frontend/components/new-launch/add.edit.modal';
|
||||
import { ModalWrapperComponent } from '@gitroom/frontend/components/new-launch/modal.wrapper.component';
|
||||
const FirstStep: FC = (props) => {
|
||||
const { integrations, reloadCalendarView } = useCalendar();
|
||||
const modal = useModals();
|
||||
|
|
@ -275,28 +276,7 @@ export const GeneratorPopup = () => {
|
|||
modals.closeAll();
|
||||
}, []);
|
||||
return (
|
||||
<div className="bg-sixth p-[32px] w-full max-w-[920px] mx-auto flex flex-col rounded-[4px] border border-customColor6 relative">
|
||||
<button
|
||||
onClick={closeAll}
|
||||
className="outline-none absolute end-[20px] top-[15px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-[24px]">{t('generate_posts', 'Generate Posts')}</h1>
|
||||
<div className="w-full flex flex-col rounded-[4px] relative">
|
||||
<FirstStep />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -326,41 +306,50 @@ export const GeneratorComponent = () => {
|
|||
classNames: {
|
||||
modal: 'bg-transparent text-textColor',
|
||||
},
|
||||
size: '100%',
|
||||
size: 'xl',
|
||||
children: (
|
||||
<CalendarWeekProvider {...all}>
|
||||
<GeneratorPopup />
|
||||
<ModalWrapperComponent title="Generate Posts">
|
||||
<GeneratorPopup />
|
||||
</ModalWrapperComponent>
|
||||
</CalendarWeekProvider>
|
||||
),
|
||||
});
|
||||
}, [user, all]);
|
||||
return (
|
||||
<button
|
||||
className="p-[8px] rounded-md bg-red-700 flex justify-center items-center gap-[5px] outline-none text-white"
|
||||
<div
|
||||
className="h-[44px] w-[44px] group-[.sidebar]:w-full bg-ai justify-center items-center flex rounded-[8px] cursor-pointer"
|
||||
onClick={generate}
|
||||
>
|
||||
<svg
|
||||
width="25"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M15.0614 9.67972L16.4756 11.0939L17.8787 9.69083L16.4645 8.27662L15.0614 9.67972ZM16.4645 6.1553L20 9.69083L8.6863 21.0045L5.15076 17.469L16.4645 6.1553Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.364 5.06066L9.59619 6.82843L8.53553 5.76777L10.3033 4L11.364 5.06066ZM6.76778 6.82842L5 5.06067L6.06066 4L7.82843 5.76776L6.76778 6.82842ZM10.3033 10.364L8.53553 8.5962L9.59619 7.53554L11.364 9.3033L10.3033 10.364ZM7.82843 8.5962L6.06066 10.364L5 9.3033L6.76777 7.53554L7.82843 8.5962Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<g clip-path="url(#clip0_1930_7370)">
|
||||
<path
|
||||
d="M5.41675 10.8337L6.07046 12.1411C6.2917 12.5836 6.40232 12.8048 6.55011 12.9965C6.68124 13.1667 6.83375 13.3192 7.00388 13.4503C7.19559 13.5981 7.41684 13.7087 7.85932 13.9299L9.16675 14.5837L7.85932 15.2374C7.41684 15.4586 7.19559 15.5692 7.00388 15.717C6.83375 15.8482 6.68124 16.0007 6.55011 16.1708C6.40232 16.3625 6.2917 16.5837 6.07046 17.0262L5.41675 18.3337L4.76303 17.0262C4.54179 16.5837 4.43117 16.3625 4.28339 16.1708C4.15225 16.0007 3.99974 15.8482 3.82962 15.717C3.6379 15.5692 3.41666 15.4586 2.97418 15.2374L1.66675 14.5837L2.97418 13.9299C3.41666 13.7087 3.6379 13.5981 3.82962 13.4503C3.99974 13.3192 4.15225 13.1667 4.28339 12.9965C4.43117 12.8048 4.54179 12.5836 4.76303 12.1411L5.41675 10.8337Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.5001 1.66699L13.4823 4.22067C13.7173 4.8317 13.8348 5.13721 14.0175 5.39419C14.1795 5.62195 14.3785 5.82095 14.6062 5.9829C14.8632 6.16563 15.1687 6.28313 15.7797 6.51814L18.3334 7.50033L15.7797 8.48251C15.1687 8.71752 14.8632 8.83502 14.6062 9.01775C14.3785 9.1797 14.1795 9.3787 14.0175 9.60646C13.8348 9.86344 13.7173 10.169 13.4823 10.78L12.5001 13.3337L11.5179 10.78C11.2829 10.169 11.1654 9.86344 10.9827 9.60646C10.8207 9.3787 10.6217 9.1797 10.3939 9.01775C10.137 8.83503 9.83145 8.71752 9.22043 8.48251L6.66675 7.50033L9.22043 6.51814C9.83145 6.28313 10.137 6.16563 10.3939 5.9829C10.6217 5.82095 10.8207 5.62195 10.9827 5.39419C11.1654 5.13721 11.2829 4.8317 11.5179 4.22067L12.5001 1.66699Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1930_7370">
|
||||
<rect width="20" height="20" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<div className="flex-1 text-start">
|
||||
{t('generate_posts', 'Generate Posts')}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { FC, ReactNode } from 'react';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import clsx from 'clsx';
|
||||
|
||||
export const TopTitle: FC<{
|
||||
title: string;
|
||||
shouldExpend?: boolean;
|
||||
removeTitle?: boolean;
|
||||
extraClass?: string;
|
||||
expend?: () => void;
|
||||
collapse?: () => void;
|
||||
children?: ReactNode;
|
||||
titleSize?: string;
|
||||
}> = (props) => {
|
||||
const { title, removeTitle, children, shouldExpend, expend, collapse } =
|
||||
props;
|
||||
|
|
@ -25,42 +28,53 @@ export const TopTitle: FC<{
|
|||
);
|
||||
|
||||
return (
|
||||
<div className="h-[57px] border-b flex items-center border-customColor6 px-[16px] -mx-[16px]">
|
||||
{!removeTitle && <div className="flex-1">{translatedTitle}</div>}
|
||||
{children}
|
||||
{shouldExpend !== undefined && (
|
||||
<div className="cursor-pointer">
|
||||
{!shouldExpend ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="25"
|
||||
onClick={expend}
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M20.25 5V9.5C20.25 9.69891 20.171 9.88968 20.0303 10.0303C19.8897 10.171 19.6989 10.25 19.5 10.25C19.3011 10.25 19.1103 10.171 18.9697 10.0303C18.829 9.88968 18.75 9.69891 18.75 9.5V6.81031L14.0306 11.5306C13.8899 11.6714 13.699 11.7504 13.5 11.7504C13.301 11.7504 13.1101 11.6714 12.9694 11.5306C12.8286 11.3899 12.7496 11.199 12.7496 11C12.7496 10.801 12.8286 10.6101 12.9694 10.4694L17.6897 5.75H15C14.8011 5.75 14.6103 5.67098 14.4697 5.53033C14.329 5.38968 14.25 5.19891 14.25 5C14.25 4.80109 14.329 4.61032 14.4697 4.46967C14.6103 4.32902 14.8011 4.25 15 4.25H19.5C19.6989 4.25 19.8897 4.32902 20.0303 4.46967C20.171 4.61032 20.25 4.80109 20.25 5ZM9.96937 13.4694L5.25 18.1897V15.5C5.25 15.3011 5.17098 15.1103 5.03033 14.9697C4.88968 14.829 4.69891 14.75 4.5 14.75C4.30109 14.75 4.11032 14.829 3.96967 14.9697C3.82902 15.1103 3.75 15.3011 3.75 15.5V20C3.75 20.1989 3.82902 20.3897 3.96967 20.5303C4.11032 20.671 4.30109 20.75 4.5 20.75H9C9.19891 20.75 9.38968 20.671 9.53033 20.5303C9.67098 20.3897 9.75 20.1989 9.75 20C9.75 19.8011 9.67098 19.6103 9.53033 19.4697C9.38968 19.329 9.19891 19.25 9 19.25H6.31031L11.0306 14.5306C11.1714 14.3899 11.2504 14.199 11.2504 14C11.2504 13.801 11.1714 13.6101 11.0306 13.4694C10.8899 13.3286 10.699 13.2496 10.5 13.2496C10.301 13.2496 10.1101 13.3286 9.96937 13.4694Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="25"
|
||||
onClick={collapse}
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M13.5004 10.2499V6.49993C13.5004 6.30102 13.5794 6.11025 13.7201 5.9696C13.8607 5.82895 14.0515 5.74993 14.2504 5.74993C14.4493 5.74993 14.6401 5.82895 14.7807 5.9696C14.9214 6.11025 15.0004 6.30102 15.0004 6.49993V8.43962L18.9698 4.4693C19.1105 4.32857 19.3014 4.24951 19.5004 4.24951C19.6994 4.24951 19.8903 4.32857 20.031 4.4693C20.1718 4.61003 20.2508 4.80091 20.2508 4.99993C20.2508 5.19895 20.1718 5.38982 20.031 5.53055L16.0607 9.49993H18.0004C18.1993 9.49993 18.3901 9.57895 18.5307 9.7196C18.6714 9.86025 18.7504 10.051 18.7504 10.2499C18.7504 10.4488 18.6714 10.6396 18.5307 10.7803C18.3901 10.9209 18.1993 10.9999 18.0004 10.9999H14.2504C14.0515 10.9999 13.8607 10.9209 13.7201 10.7803C13.5794 10.6396 13.5004 10.4488 13.5004 10.2499ZM9.75042 13.9999H6.00042C5.8015 13.9999 5.61074 14.0789 5.47009 14.2196C5.32943 14.3603 5.25042 14.551 5.25042 14.7499C5.25042 14.9488 5.32943 15.1396 5.47009 15.2803C5.61074 15.4209 5.8015 15.4999 6.00042 15.4999H7.9401L3.96979 19.4693C3.82906 19.61 3.75 19.8009 3.75 19.9999C3.75 20.199 3.82906 20.3898 3.96979 20.5306C4.11052 20.6713 4.30139 20.7503 4.50042 20.7503C4.69944 20.7503 4.89031 20.6713 5.03104 20.5306L9.00042 16.5602V18.4999C9.00042 18.6988 9.07943 18.8896 9.22009 19.0303C9.36074 19.1709 9.5515 19.2499 9.75042 19.2499C9.94933 19.2499 10.1401 19.1709 10.2807 19.0303C10.4214 18.8896 10.5004 18.6988 10.5004 18.4999V14.7499C10.5004 14.551 10.4214 14.3603 10.2807 14.2196C10.1401 14.0789 9.94933 13.9999 9.75042 13.9999ZM16.0607 15.4999H18.0004C18.1993 15.4999 18.3901 15.4209 18.5307 15.2803C18.6714 15.1396 18.7504 14.9488 18.7504 14.7499C18.7504 14.551 18.6714 14.3603 18.5307 14.2196C18.3901 14.0789 18.1993 13.9999 18.0004 13.9999H14.2504C14.0515 13.9999 13.8607 14.0789 13.7201 14.2196C13.5794 14.3603 13.5004 14.551 13.5004 14.7499V18.4999C13.5004 18.6988 13.5794 18.8896 13.7201 19.0303C13.8607 19.1709 14.0515 19.2499 14.2504 19.2499C14.4493 19.2499 14.6401 19.1709 14.7807 19.0303C14.9214 18.8896 15.0004 18.6988 15.0004 18.4999V16.5602L18.9698 20.5306C19.0395 20.6002 19.1222 20.6555 19.2132 20.6932C19.3043 20.7309 19.4019 20.7503 19.5004 20.7503C19.599 20.7503 19.6965 20.7309 19.7876 20.6932C19.8786 20.6555 19.9614 20.6002 20.031 20.5306C20.1007 20.4609 20.156 20.3781 20.1937 20.2871C20.2314 20.1961 20.2508 20.0985 20.2508 19.9999C20.2508 19.9014 20.2314 19.8038 20.1937 19.7128C20.156 19.6217 20.1007 19.539 20.031 19.4693L16.0607 15.4999ZM9.75042 5.74993C9.5515 5.74993 9.36074 5.82895 9.22009 5.9696C9.07943 6.11025 9.00042 6.30102 9.00042 6.49993V8.43962L5.03104 4.4693C4.89031 4.32857 4.69944 4.24951 4.50042 4.24951C4.30139 4.24951 4.11052 4.32857 3.96979 4.4693C3.82906 4.61003 3.75 4.80091 3.75 4.99993C3.75 5.19895 3.82906 5.38982 3.96979 5.53055L7.9401 9.49993H6.00042C5.8015 9.49993 5.61074 9.57895 5.47009 9.7196C5.32943 9.86025 5.25042 10.051 5.25042 10.2499C5.25042 10.4488 5.32943 10.6396 5.47009 10.7803C5.61074 10.9209 5.8015 10.9999 6.00042 10.9999H9.75042C9.94933 10.9999 10.1401 10.9209 10.2807 10.7803C10.4214 10.6396 10.5004 10.4488 10.5004 10.2499V6.49993C10.5004 6.30102 10.4214 6.11025 10.2807 5.9696C10.1401 5.82895 9.94933 5.74993 9.75042 5.74993Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'border-b flex items-center border-newBgLineColor -mx-[24px]',
|
||||
props.extraClass ? props.extraClass : 'h-[57px]'
|
||||
)}
|
||||
>
|
||||
<div className="px-[24px] flex flex-1 items-center">
|
||||
{!removeTitle && (
|
||||
<div className={clsx('flex-1', props.titleSize)}>
|
||||
{translatedTitle}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
{shouldExpend !== undefined && (
|
||||
<div className="cursor-pointer">
|
||||
{!shouldExpend ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="25"
|
||||
onClick={expend}
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M20.25 5V9.5C20.25 9.69891 20.171 9.88968 20.0303 10.0303C19.8897 10.171 19.6989 10.25 19.5 10.25C19.3011 10.25 19.1103 10.171 18.9697 10.0303C18.829 9.88968 18.75 9.69891 18.75 9.5V6.81031L14.0306 11.5306C13.8899 11.6714 13.699 11.7504 13.5 11.7504C13.301 11.7504 13.1101 11.6714 12.9694 11.5306C12.8286 11.3899 12.7496 11.199 12.7496 11C12.7496 10.801 12.8286 10.6101 12.9694 10.4694L17.6897 5.75H15C14.8011 5.75 14.6103 5.67098 14.4697 5.53033C14.329 5.38968 14.25 5.19891 14.25 5C14.25 4.80109 14.329 4.61032 14.4697 4.46967C14.6103 4.32902 14.8011 4.25 15 4.25H19.5C19.6989 4.25 19.8897 4.32902 20.0303 4.46967C20.171 4.61032 20.25 4.80109 20.25 5ZM9.96937 13.4694L5.25 18.1897V15.5C5.25 15.3011 5.17098 15.1103 5.03033 14.9697C4.88968 14.829 4.69891 14.75 4.5 14.75C4.30109 14.75 4.11032 14.829 3.96967 14.9697C3.82902 15.1103 3.75 15.3011 3.75 15.5V20C3.75 20.1989 3.82902 20.3897 3.96967 20.5303C4.11032 20.671 4.30109 20.75 4.5 20.75H9C9.19891 20.75 9.38968 20.671 9.53033 20.5303C9.67098 20.3897 9.75 20.1989 9.75 20C9.75 19.8011 9.67098 19.6103 9.53033 19.4697C9.38968 19.329 9.19891 19.25 9 19.25H6.31031L11.0306 14.5306C11.1714 14.3899 11.2504 14.199 11.2504 14C11.2504 13.801 11.1714 13.6101 11.0306 13.4694C10.8899 13.3286 10.699 13.2496 10.5 13.2496C10.301 13.2496 10.1101 13.3286 9.96937 13.4694Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="25"
|
||||
onClick={collapse}
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M13.5004 10.2499V6.49993C13.5004 6.30102 13.5794 6.11025 13.7201 5.9696C13.8607 5.82895 14.0515 5.74993 14.2504 5.74993C14.4493 5.74993 14.6401 5.82895 14.7807 5.9696C14.9214 6.11025 15.0004 6.30102 15.0004 6.49993V8.43962L18.9698 4.4693C19.1105 4.32857 19.3014 4.24951 19.5004 4.24951C19.6994 4.24951 19.8903 4.32857 20.031 4.4693C20.1718 4.61003 20.2508 4.80091 20.2508 4.99993C20.2508 5.19895 20.1718 5.38982 20.031 5.53055L16.0607 9.49993H18.0004C18.1993 9.49993 18.3901 9.57895 18.5307 9.7196C18.6714 9.86025 18.7504 10.051 18.7504 10.2499C18.7504 10.4488 18.6714 10.6396 18.5307 10.7803C18.3901 10.9209 18.1993 10.9999 18.0004 10.9999H14.2504C14.0515 10.9999 13.8607 10.9209 13.7201 10.7803C13.5794 10.6396 13.5004 10.4488 13.5004 10.2499ZM9.75042 13.9999H6.00042C5.8015 13.9999 5.61074 14.0789 5.47009 14.2196C5.32943 14.3603 5.25042 14.551 5.25042 14.7499C5.25042 14.9488 5.32943 15.1396 5.47009 15.2803C5.61074 15.4209 5.8015 15.4999 6.00042 15.4999H7.9401L3.96979 19.4693C3.82906 19.61 3.75 19.8009 3.75 19.9999C3.75 20.199 3.82906 20.3898 3.96979 20.5306C4.11052 20.6713 4.30139 20.7503 4.50042 20.7503C4.69944 20.7503 4.89031 20.6713 5.03104 20.5306L9.00042 16.5602V18.4999C9.00042 18.6988 9.07943 18.8896 9.22009 19.0303C9.36074 19.1709 9.5515 19.2499 9.75042 19.2499C9.94933 19.2499 10.1401 19.1709 10.2807 19.0303C10.4214 18.8896 10.5004 18.6988 10.5004 18.4999V14.7499C10.5004 14.551 10.4214 14.3603 10.2807 14.2196C10.1401 14.0789 9.94933 13.9999 9.75042 13.9999ZM16.0607 15.4999H18.0004C18.1993 15.4999 18.3901 15.4209 18.5307 15.2803C18.6714 15.1396 18.7504 14.9488 18.7504 14.7499C18.7504 14.551 18.6714 14.3603 18.5307 14.2196C18.3901 14.0789 18.1993 13.9999 18.0004 13.9999H14.2504C14.0515 13.9999 13.8607 14.0789 13.7201 14.2196C13.5794 14.3603 13.5004 14.551 13.5004 14.7499V18.4999C13.5004 18.6988 13.5794 18.8896 13.7201 19.0303C13.8607 19.1709 14.0515 19.2499 14.2504 19.2499C14.4493 19.2499 14.6401 19.1709 14.7807 19.0303C14.9214 18.8896 15.0004 18.6988 15.0004 18.4999V16.5602L18.9698 20.5306C19.0395 20.6002 19.1222 20.6555 19.2132 20.6932C19.3043 20.7309 19.4019 20.7503 19.5004 20.7503C19.599 20.7503 19.6965 20.7309 19.7876 20.6932C19.8786 20.6555 19.9614 20.6002 20.031 20.5306C20.1007 20.4609 20.156 20.3781 20.1937 20.2871C20.2314 20.1961 20.2508 20.0985 20.2508 19.9999C20.2508 19.9014 20.2314 19.8038 20.1937 19.7128C20.156 19.6217 20.1007 19.539 20.031 19.4693L16.0607 15.4999ZM9.75042 5.74993C9.5515 5.74993 9.36074 5.82895 9.22009 5.9696C9.07943 6.11025 9.00042 6.30102 9.00042 6.49993V8.43962L5.03104 4.4693C4.89031 4.32857 4.69944 4.24951 4.50042 4.24951C4.30139 4.24951 4.11052 4.32857 3.96979 4.4693C3.82906 4.61003 3.75 4.80091 3.75 4.99993C3.75 5.19895 3.82906 5.38982 3.96979 5.53055L7.9401 9.49993H6.00042C5.8015 9.49993 5.61074 9.57895 5.47009 9.7196C5.32943 9.86025 5.25042 10.051 5.25042 10.2499C5.25042 10.4488 5.32943 10.6396 5.47009 10.7803C5.61074 10.9209 5.8015 10.9999 6.00042 10.9999H9.75042C9.94933 10.9999 10.1401 10.9209 10.2807 10.7803C10.4214 10.6396 10.5004 10.4488 10.5004 10.2499V6.49993C10.5004 6.30102 10.4214 6.11025 10.2807 5.9696C10.1401 5.82895 9.94933 5.74993 9.75042 5.74993Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -25,7 +25,53 @@ import { useVariables } from '@gitroom/react/helpers/variable.context';
|
|||
import { NewPost } from '@gitroom/frontend/components/launches/new.post';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { useIntegrationList } from '@gitroom/frontend/components/launches/helpers/use.integration.list';
|
||||
import useCookie from 'react-use-cookie';
|
||||
|
||||
export const SVGLine = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="5"
|
||||
height="52"
|
||||
viewBox="0 0 5 52"
|
||||
fill="none"
|
||||
className="rtl:rotate-180"
|
||||
>
|
||||
<path
|
||||
d="M0.5 4C0.5 1.79086 2.29086 0 4.5 0V52C2.29086 52 0.5 50.2091 0.5 48V4Z"
|
||||
fill="url(#paint0_linear_1930_1119)"
|
||||
/>
|
||||
<path
|
||||
d="M0.5 4C0.5 1.79086 2.29086 0 4.5 0V52C2.29086 52 0.5 50.2091 0.5 48V4Z"
|
||||
fill="url(#paint1_radial_1930_1119)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_1930_1119"
|
||||
x1="-7"
|
||||
y1="-27.7727"
|
||||
x2="-2.58929"
|
||||
y2="-28.6843"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#662FDA" />
|
||||
<stop offset="1" stopColor="#5720CB" />
|
||||
</linearGradient>
|
||||
<radialGradient
|
||||
id="paint1_radial_1930_1119"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(1.19333 7.45342) rotate(21.2064) scale(16.1503 188.627)"
|
||||
>
|
||||
<stop stopColor="#8C66FF" />
|
||||
<stop offset="1" stopColor="#8C66FF" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
interface MenuComponentInterface {
|
||||
refreshChannel: (
|
||||
integration: Integration & {
|
||||
|
|
@ -136,7 +182,7 @@ export const MenuGroupComponent: FC<
|
|||
)}
|
||||
<div
|
||||
className={clsx(
|
||||
'gap-[16px] flex flex-col relative',
|
||||
'gap-[12px] flex flex-col relative',
|
||||
!isOpen && 'hidden'
|
||||
)}
|
||||
>
|
||||
|
|
@ -191,16 +237,19 @@ export const MenuComponent: FC<
|
|||
})}
|
||||
key={integration.id}
|
||||
className={clsx(
|
||||
'flex gap-[8px] items-center',
|
||||
'flex gap-[12px] items-center bg-newBgColorInner hover:bg-boxHover group/profile transition-all rounded-e-[8px]',
|
||||
integration.refreshNeeded && 'cursor-pointer'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'relative w-[34px] h-[34px] rounded-full flex justify-center items-center bg-fifth',
|
||||
'relative gap-[6px] flex justify-center items-center',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
<div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity">
|
||||
<SVGLine />
|
||||
</div>
|
||||
{(integration.inBetweenSteps || integration.refreshNeeded) && (
|
||||
<div
|
||||
className="absolute start-0 top-0 w-[39px] h-[46px] cursor-pointer"
|
||||
|
|
@ -210,7 +259,7 @@ export const MenuComponent: FC<
|
|||
: continueIntegration(integration)
|
||||
}
|
||||
>
|
||||
<div className="bg-red-500 w-[15px] h-[15px] rounded-full -start-[5px] -top-[5px] absolute z-[200] text-[10px] flex justify-center items-center">
|
||||
<div className="bg-red-500 w-[15px] h-[15px] rounded-full start-[5px] top-[5px] absolute z-[200] text-[10px] flex justify-center items-center">
|
||||
!
|
||||
</div>
|
||||
<div className="bg-primary/60 w-[39px] h-[46px] start-0 top-0 absolute rounded-full z-[199]" />
|
||||
|
|
@ -219,24 +268,24 @@ export const MenuComponent: FC<
|
|||
<ImageWithFallback
|
||||
fallbackSrc={`/icons/platforms/${integration.identifier}.png`}
|
||||
src={integration.picture || '/no-picture.jpg'}
|
||||
className="rounded-full"
|
||||
className="rounded-[8px]"
|
||||
alt={integration.identifier}
|
||||
width={32}
|
||||
height={32}
|
||||
width={36}
|
||||
height={36}
|
||||
/>
|
||||
{integration.identifier === 'youtube' ? (
|
||||
<img
|
||||
src="/icons/platforms/youtube.svg"
|
||||
className="absolute z-10 -bottom-[5px] -end-[5px]"
|
||||
className="absolute z-10 bottom-[5px] -end-[5px]"
|
||||
width={20}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={`/icons/platforms/${integration.identifier}.png`}
|
||||
className="rounded-full absolute z-10 -bottom-[5px] -end-[5px] border border-fifth"
|
||||
className="rounded-[8px] absolute z-10 bottom-[5px] -end-[5px] border border-fifth"
|
||||
alt={integration.identifier}
|
||||
width={20}
|
||||
height={20}
|
||||
width={18.41}
|
||||
height={18.41}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -253,7 +302,7 @@ export const MenuComponent: FC<
|
|||
: {})}
|
||||
role="Handle"
|
||||
className={clsx(
|
||||
'flex-1 whitespace-nowrap text-ellipsis overflow-hidden cursor-move',
|
||||
'group-[.sidebar]:hidden flex-1 whitespace-nowrap text-ellipsis overflow-hidden cursor-move',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
|
|
@ -285,12 +334,9 @@ export const LaunchesComponent = () => {
|
|||
const fireEvents = useFireEvents();
|
||||
const t = useT();
|
||||
const [reload, setReload] = useState(false);
|
||||
const [collapseMenu, setCollapseMenu] = useCookie('collapseMenu', '0');
|
||||
|
||||
const {
|
||||
isLoading,
|
||||
data: integrations,
|
||||
mutate,
|
||||
} = useIntegrationList();
|
||||
const { isLoading, data: integrations, mutate } = useIntegrationList();
|
||||
|
||||
const totalNonDisabledChannels = useMemo(() => {
|
||||
return (
|
||||
|
|
@ -421,49 +467,71 @@ export const LaunchesComponent = () => {
|
|||
return (
|
||||
<DNDProvider>
|
||||
<CalendarWeekProvider integrations={sortedIntegrations}>
|
||||
<div className="flex flex-1 flex-col">
|
||||
<div className="flex flex-1 relative">
|
||||
<div className="outline-none w-full h-full grid grid-cols[1fr] md:grid-cols-[220px_minmax(0,1fr)] gap-[30px] scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary">
|
||||
<div className="bg-third p-[16px] flex flex-col gap-[24px] min-h-[100%]">
|
||||
<h2 className="text-[20px]">{t('channels')}</h2>
|
||||
<div className="gap-[16px] flex flex-col select-none">
|
||||
{sortedIntegrations.length === 0 && (
|
||||
<div className="text-[12px]">
|
||||
{t('no_channels', 'No channels')}
|
||||
</div>
|
||||
)}
|
||||
{menuIntegrations.map((menu) => (
|
||||
<MenuGroupComponent
|
||||
changeItemGroup={changeItemGroup}
|
||||
key={menu.name}
|
||||
group={menu}
|
||||
mutate={mutate}
|
||||
continueIntegration={continueIntegration}
|
||||
update={update}
|
||||
refreshChannel={refreshChannel}
|
||||
totalNonDisabledChannels={totalNonDisabledChannels}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col gap-[10px]">
|
||||
<AddProviderButton update={() => update(true)} />
|
||||
{sortedIntegrations?.length > 0 && <NewPost />}
|
||||
{sortedIntegrations?.length > 0 &&
|
||||
user?.tier?.ai &&
|
||||
billingEnabled && <GeneratorComponent />}
|
||||
<div className="mt-[5px]">
|
||||
{process.env.NEXT_PUBLIC_VERSION
|
||||
? `${process.env.NEXT_PUBLIC_VERSION}`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-[14px]">
|
||||
<Filters />
|
||||
<Calendar />
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all',
|
||||
collapseMenu === '1' ? 'group sidebar w-[100px]' : 'w-[260px]'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">{t('channels')}</h2>
|
||||
<div onClick={() => setCollapseMenu(collapseMenu === '1' ? '0' : '1')} className="group-[.sidebar]:rotate-[180deg] group-[.sidebar]:mx-auto text-btnText bg-btnSimple rounded-[6px] w-[24px] h-[24px] flex items-center justify-center cursor-pointer select-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="7"
|
||||
height="13"
|
||||
viewBox="0 0 7 13"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M6 11.5L1 6.5L6 1.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[8px] group-[.sidebar]:mx-auto group-[.sidebar]:w-[44px]">
|
||||
<AddProviderButton update={() => update(true)} />
|
||||
<div className="flex gap-[8px] group-[.sidebar]:flex-col">
|
||||
{sortedIntegrations?.length > 0 && <NewPost />}
|
||||
{sortedIntegrations?.length > 0 &&
|
||||
user?.tier?.ai &&
|
||||
billingEnabled && <GeneratorComponent />}
|
||||
</div>
|
||||
<div className="mt-[5px]">
|
||||
{process.env.NEXT_PUBLIC_VERSION
|
||||
? `${process.env.NEXT_PUBLIC_VERSION}`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
<div className="gap-[32px] flex flex-col select-none flex-1">
|
||||
{sortedIntegrations.length === 0 && (
|
||||
<div className="text-[12px]">
|
||||
{t('no_channels', 'No channels')}
|
||||
</div>
|
||||
)}
|
||||
{menuIntegrations.map((menu) => (
|
||||
<MenuGroupComponent
|
||||
changeItemGroup={changeItemGroup}
|
||||
key={menu.name}
|
||||
group={menu}
|
||||
mutate={mutate}
|
||||
continueIntegration={continueIntegration}
|
||||
update={update}
|
||||
refreshChannel={refreshChannel}
|
||||
totalNonDisabledChannels={totalNonDisabledChannels}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
|
||||
<Filters />
|
||||
<div className="flex-1 flex">
|
||||
<Calendar />
|
||||
</div>
|
||||
</div>
|
||||
</CalendarWeekProvider>
|
||||
</DNDProvider>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import { useRouter } from 'next/navigation';
|
|||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { AddEditModal } from '@gitroom/frontend/components/new-launch/add.edit.modal';
|
||||
import dayjs from 'dayjs';
|
||||
import { ModalWrapperComponent } from '@gitroom/frontend/components/new-launch/modal.wrapper.component';
|
||||
export const Menu: FC<{
|
||||
canEnable: boolean;
|
||||
canDisable: boolean;
|
||||
|
|
@ -142,7 +143,11 @@ export const Menu: FC<{
|
|||
withCloseButton: false,
|
||||
closeOnEscape: false,
|
||||
closeOnClickOutside: false,
|
||||
children: <TimeTable integration={findIntegration!} mutate={mutate} />,
|
||||
children: (
|
||||
<ModalWrapperComponent title="Time Table Slots" ask={true}>
|
||||
<TimeTable integration={findIntegration!} mutate={mutate} />
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
});
|
||||
setShow(false);
|
||||
}, [integrations]);
|
||||
|
|
@ -236,21 +241,23 @@ export const Menu: FC<{
|
|||
);
|
||||
modal.openModal({
|
||||
classNames: {
|
||||
modal: 'w-[100%] max-w-[600px] bg-transparent text-textColor',
|
||||
modal: 'md',
|
||||
},
|
||||
size: '100%',
|
||||
title: '',
|
||||
withCloseButton: false,
|
||||
closeOnEscape: true,
|
||||
closeOnClickOutside: true,
|
||||
children: (
|
||||
<CustomerModal
|
||||
// @ts-ignore
|
||||
integration={findIntegration}
|
||||
onClose={() => {
|
||||
mutate();
|
||||
toast.show('Customer Updated', 'success');
|
||||
}}
|
||||
/>
|
||||
<ModalWrapperComponent title="Move / Add to customer">
|
||||
<CustomerModal
|
||||
// @ts-ignore
|
||||
integration={findIntegration}
|
||||
onClose={() => {
|
||||
mutate();
|
||||
toast.show('Customer Updated', 'success');
|
||||
}}
|
||||
/>
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
});
|
||||
setShow(false);
|
||||
|
|
@ -260,14 +267,16 @@ export const Menu: FC<{
|
|||
title: '',
|
||||
withCloseButton: false,
|
||||
classNames: {
|
||||
modal: 'bg-transparent text-textColor',
|
||||
modal: 'md',
|
||||
},
|
||||
children: (
|
||||
<CustomVariables
|
||||
identifier={findIntegration.identifier}
|
||||
gotoUrl={(url: string) => router.push(url)}
|
||||
variables={findIntegration.customFields}
|
||||
/>
|
||||
<ModalWrapperComponent title="Custom URL">
|
||||
<CustomVariables
|
||||
identifier={findIntegration.identifier}
|
||||
gotoUrl={(url: string) => router.push(url)}
|
||||
variables={findIntegration.customFields}
|
||||
/>
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
});
|
||||
}, []);
|
||||
|
|
@ -283,20 +292,21 @@ export const Menu: FC<{
|
|||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
className="text-menuDots group-hover/profile:text-menuDotsHover"
|
||||
>
|
||||
<path
|
||||
d="M13.125 12C13.125 12.2225 13.059 12.44 12.9354 12.625C12.8118 12.81 12.6361 12.9542 12.4305 13.0394C12.225 13.1245 11.9988 13.1468 11.7805 13.1034C11.5623 13.06 11.3618 12.9528 11.2045 12.7955C11.0472 12.6382 10.94 12.4377 10.8966 12.2195C10.8532 12.0012 10.8755 11.775 10.9606 11.5695C11.0458 11.3639 11.19 11.1882 11.375 11.0646C11.56 10.941 11.7775 10.875 12 10.875C12.2984 10.875 12.5845 10.9935 12.7955 11.2045C13.0065 11.4155 13.125 11.7016 13.125 12ZM12 6.75C12.2225 6.75 12.44 6.68402 12.625 6.5604C12.81 6.43679 12.9542 6.26109 13.0394 6.05552C13.1245 5.84995 13.1468 5.62375 13.1034 5.40552C13.06 5.1873 12.9528 4.98684 12.7955 4.82951C12.6382 4.67217 12.4377 4.56503 12.2195 4.52162C12.0012 4.47821 11.775 4.50049 11.5695 4.58564C11.3639 4.67078 11.1882 4.81498 11.0646 4.99998C10.941 5.18499 10.875 5.4025 10.875 5.625C10.875 5.92337 10.9935 6.20952 11.2045 6.4205C11.4155 6.63147 11.7016 6.75 12 6.75ZM12 17.25C11.7775 17.25 11.56 17.316 11.375 17.4396C11.19 17.5632 11.0458 17.7389 10.9606 17.9445C10.8755 18.15 10.8532 18.3762 10.8966 18.5945C10.94 18.8127 11.0472 19.0132 11.2045 19.1705C11.3618 19.3278 11.5623 19.435 11.7805 19.4784C11.9988 19.5218 12.225 19.4995 12.4305 19.4144C12.6361 19.3292 12.8118 19.185 12.9354 19C13.059 18.815 13.125 18.5975 13.125 18.375C13.125 18.0766 13.0065 17.7905 12.7955 17.5795C12.5845 17.3685 12.2984 17.25 12 17.25Z"
|
||||
fill="#506490"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
{show && (
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className={`absolute top-[100%] start-0 p-[8px] px-[20px] bg-fifth flex flex-col gap-[16px] z-[100] rounded-[8px] border border-tableBorder ${interClass} text-nowrap`}
|
||||
className={`absolute top-[100%] start-0 p-[12px] bg-newBgColorInner shadow-menu flex flex-col gap-[16px] z-[100] rounded-[8px] border border-tableBorder ${interClass} text-nowrap`}
|
||||
>
|
||||
{canDisable && !findIntegration?.refreshNeeded && (
|
||||
<div
|
||||
className="flex gap-[12px] items-center"
|
||||
className="flex gap-[12px] items-center py-[8px] px-[10px]"
|
||||
onClick={createPost(findIntegration!)}
|
||||
>
|
||||
<div>
|
||||
|
|
@ -313,7 +323,7 @@ export const Menu: FC<{
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px]">
|
||||
<div className="text-[14px]">
|
||||
{t('create_new_post', 'Create a new post')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -322,7 +332,7 @@ export const Menu: FC<{
|
|||
findIntegration?.refreshNeeded &&
|
||||
!findIntegration.customFields && (
|
||||
<div
|
||||
className="flex gap-[12px] items-center"
|
||||
className="flex gap-[12px] items-center py-[8px] px-[10px]"
|
||||
onClick={refreshChannel(findIntegration!)}
|
||||
>
|
||||
<div>
|
||||
|
|
@ -339,14 +349,14 @@ export const Menu: FC<{
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px]">
|
||||
<div className="text-[14px]">
|
||||
{t('reconnect_channel', 'Reconnect channel')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!!findIntegration?.isCustomFields && (
|
||||
<div
|
||||
className="flex gap-[12px] items-center"
|
||||
className="flex gap-[12px] items-center py-[8px] px-[10px]"
|
||||
onClick={updateCredentials}
|
||||
>
|
||||
<div>
|
||||
|
|
@ -363,14 +373,14 @@ export const Menu: FC<{
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px]">
|
||||
<div className="text-[14px]">
|
||||
{t('update_credentials', 'Update Credentials')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{findIntegration?.additionalSettings !== '[]' && (
|
||||
<div
|
||||
className="flex gap-[12px] items-center"
|
||||
className="flex gap-[12px] items-center py-[8px] px-[10px]"
|
||||
onClick={additionalSettings}
|
||||
>
|
||||
<div>
|
||||
|
|
@ -387,14 +397,14 @@ export const Menu: FC<{
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px]">
|
||||
<div className="text-[14px]">
|
||||
{t('additional_settings', 'Additional Settings')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(canChangeProfilePicture || canChangeNickName) && (
|
||||
<div
|
||||
className="flex gap-[12px] items-center"
|
||||
className="flex gap-[12px] items-center py-[8px] px-[10px]"
|
||||
onClick={changeBotPicture}
|
||||
>
|
||||
<div>
|
||||
|
|
@ -411,7 +421,7 @@ export const Menu: FC<{
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px]">
|
||||
<div className="text-[14px]">
|
||||
{t('change_bot', 'Change Bot')}
|
||||
{[
|
||||
canChangeProfilePicture && 'Picture',
|
||||
|
|
@ -422,7 +432,7 @@ export const Menu: FC<{
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-[12px] items-center" onClick={addToCustomer}>
|
||||
<div className="flex gap-[12px] items-center py-[8px] px-[10px]" onClick={addToCustomer}>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -437,11 +447,11 @@ export const Menu: FC<{
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px]">
|
||||
<div className="text-[14px]">
|
||||
{t('move_add_to_customer', 'Move / add to customer')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-[12px] items-center" onClick={editTimeTable}>
|
||||
<div className="flex gap-[12px] items-center py-[8px] px-[10px]" onClick={editTimeTable}>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -456,13 +466,13 @@ export const Menu: FC<{
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px]">
|
||||
<div className="text-[14px]">
|
||||
{t('edit_time_slots', 'Edit Time Slots')}
|
||||
</div>
|
||||
</div>
|
||||
{canEnable && (
|
||||
<div
|
||||
className="flex gap-[12px] items-center"
|
||||
className="flex gap-[12px] items-center py-[8px] px-[10px]"
|
||||
onClick={enableChannel}
|
||||
>
|
||||
<div>
|
||||
|
|
@ -479,7 +489,7 @@ export const Menu: FC<{
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px]">
|
||||
<div className="text-[14px]">
|
||||
{t('enable_channel', 'Enable Channel')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -487,7 +497,7 @@ export const Menu: FC<{
|
|||
|
||||
{canDisable && (
|
||||
<div
|
||||
className="flex gap-[12px] items-center"
|
||||
className="flex gap-[12px] items-center py-[8px] px-[10px]"
|
||||
onClick={disableChannel}
|
||||
>
|
||||
<div>
|
||||
|
|
@ -504,13 +514,13 @@ export const Menu: FC<{
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px]">
|
||||
<div className="text-[14px]">
|
||||
{t('disable_channel', 'Disable Channel')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-[12px] items-center" onClick={deleteChannel}>
|
||||
<div className="flex gap-[12px] items-center py-[8px] px-[10px]" onClick={deleteChannel}>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -525,7 +535,7 @@ export const Menu: FC<{
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px]">{t('delete', 'Delete')}</div>
|
||||
<div className="text-[14px]">{t('delete', 'Delete')}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
|||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { SetSelectionModal } from '@gitroom/frontend/components/launches/calendar';
|
||||
import { AddEditModal } from '@gitroom/frontend/components/new-launch/add.edit.modal';
|
||||
import { ModalWrapperComponent } from '@gitroom/frontend/components/new-launch/modal.wrapper.component';
|
||||
|
||||
export const NewPost = () => {
|
||||
const fetch = useFetch();
|
||||
|
|
@ -20,26 +21,28 @@ export const NewPost = () => {
|
|||
? undefined
|
||||
: await new Promise((resolve) => {
|
||||
modal.openModal({
|
||||
title: t('select_set', 'Select a Set'),
|
||||
title: '',
|
||||
closeOnClickOutside: true,
|
||||
closeOnEscape: true,
|
||||
withCloseButton: true,
|
||||
withCloseButton: false,
|
||||
onClose: () => resolve('exit'),
|
||||
classNames: {
|
||||
modal: 'bg-secondary text-textColor',
|
||||
modal: 'text-textColor',
|
||||
},
|
||||
children: (
|
||||
<SetSelectionModal
|
||||
sets={sets}
|
||||
onSelect={(selectedSet) => {
|
||||
resolve(selectedSet);
|
||||
modal.closeAll();
|
||||
}}
|
||||
onContinueWithoutSet={() => {
|
||||
resolve(undefined);
|
||||
modal.closeAll();
|
||||
}}
|
||||
/>
|
||||
<ModalWrapperComponent title={t('select_set', 'Select a Set')}>
|
||||
<SetSelectionModal
|
||||
sets={sets}
|
||||
onSelect={(selectedSet) => {
|
||||
resolve(selectedSet);
|
||||
modal.closeAll();
|
||||
}}
|
||||
onContinueWithoutSet={() => {
|
||||
resolve(undefined);
|
||||
modal.closeAll();
|
||||
}}
|
||||
/>
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
});
|
||||
});
|
||||
|
|
@ -72,22 +75,26 @@ export const NewPost = () => {
|
|||
return (
|
||||
<button
|
||||
onClick={createAPost}
|
||||
className="p-[8px] rounded-md bg-green-900 flex justify-center items-center gap-[5px] outline-none text-white"
|
||||
className="text-white flex-1 pt-[12px] pb-[14px] ps-[16px] pe-[20px] group-[.sidebar]:p-0 min-h-[44px] max-h-[44px] rounded-md bg-btnPrimary flex justify-center items-center gap-[5px] outline-none"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 32 32"
|
||||
width="21"
|
||||
height="20"
|
||||
viewBox="0 0 21 20"
|
||||
fill="none"
|
||||
className="min-w-[21px] min-h-[20px]"
|
||||
>
|
||||
<path
|
||||
d="M21 4H11C9.14409 4.00199 7.36477 4.74012 6.05245 6.05245C4.74012 7.36477 4.00199 9.14409 4 11V21C4.00199 22.8559 4.74012 24.6352 6.05245 25.9476C7.36477 27.2599 9.14409 27.998 11 28H17C17.1075 27.9999 17.2142 27.9826 17.3162 27.9487C20.595 26.855 26.855 20.595 27.9487 17.3162C27.9826 17.2142 27.9999 17.1075 28 17V11C27.998 9.14409 27.2599 7.36477 25.9476 6.05245C24.6352 4.74012 22.8559 4.00199 21 4ZM17 25.9275V22C17 20.6739 17.5268 19.4021 18.4645 18.4645C19.4021 17.5268 20.6739 17 22 17H25.9275C24.77 19.6938 19.6938 24.77 17 25.9275Z"
|
||||
fill="white"
|
||||
d="M10.5001 4.16699V15.8337M4.66675 10.0003H16.3334"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<div className="flex-1 text-start">
|
||||
{t('create_new_post', 'Create New Post')}
|
||||
<div className="flex-1 text-start text-[16px] group-[.sidebar]:hidden">
|
||||
{t('create_new_post', 'Create Post')}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,28 +21,7 @@ export const StatisticsModal: FC<{
|
|||
loadStatistics
|
||||
);
|
||||
return (
|
||||
<div className="bg-sixth p-[32px] w-full max-w-[920px] mx-auto flex flex-col rounded-[4px] border border-customColor6 relative">
|
||||
<button
|
||||
onClick={closeAll}
|
||||
className="outline-none absolute end-[20px] top-[15px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-[24px]">{t('statistics', 'Statistics')}</h1>
|
||||
<div className="relative">
|
||||
{isLoading ? (
|
||||
<div>{t('loading', 'Loading')}</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -108,29 +108,7 @@ export const TimeTable: FC<{
|
|||
modal.closeAll();
|
||||
}, [currentTimes]);
|
||||
return (
|
||||
<div className="rounded-[4px] border border-customColor6 bg-sixth px-[16px] pb-[16px] relative w-full">
|
||||
<TopTitle title={`Time Table Slots`} />
|
||||
<button
|
||||
onClick={askClose}
|
||||
className="outline-none absolute end-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="relative w-full">
|
||||
<div>
|
||||
<div className="text-[16px] font-bold mt-[16px]">
|
||||
{t('add_time_slot', 'Add Time Slot')}
|
||||
|
|
|
|||
|
|
@ -8,18 +8,21 @@ export const ChromeExtensionComponent = () => {
|
|||
<a
|
||||
href="https://chromewebstore.google.com/detail/postiz/cidhffagahknaeodkplfbcpfeielnkjl"
|
||||
target="_blank"
|
||||
className="hover:text-newTextColor"
|
||||
>
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="me-2"
|
||||
fill="none"
|
||||
viewBox="0.75 0.25 21.5 21.5"
|
||||
width="22"
|
||||
height="22"
|
||||
>
|
||||
<path
|
||||
d="M16 3.5C13.5277 3.5 11.111 4.23311 9.05538 5.60663C6.99976 6.98015 5.39761 8.93238 4.45151 11.2165C3.50542 13.5005 3.25787 16.0139 3.74019 18.4386C4.2225 20.8634 5.41301 23.0907 7.16117 24.8388C8.90933 26.587 11.1366 27.7775 13.5614 28.2598C15.9861 28.7421 18.4995 28.4946 20.7835 27.5485C23.0676 26.6024 25.0199 25.0002 26.3934 22.9446C27.7669 20.889 28.5 18.4723 28.5 16C28.4964 12.6859 27.1782 9.5086 24.8348 7.16518C22.4914 4.82177 19.3141 3.50364 16 3.5ZM16 4.5C18.0667 4.50143 20.095 5.0593 21.8717 6.11505C23.6484 7.1708 25.1081 8.68547 26.0975 10.5H16C14.6261 10.5017 13.3024 11.0169 12.2889 11.9446C11.2754 12.8723 10.6454 14.1453 10.5225 15.5138L6.81376 9.09C7.88392 7.66472 9.27106 6.50801 10.8654 5.71137C12.4598 4.91472 14.2177 4.5 16 4.5ZM16 20.5C15.11 20.5 14.24 20.2361 13.4999 19.7416C12.7599 19.2471 12.1831 18.5443 11.8425 17.7221C11.502 16.8998 11.4128 15.995 11.5865 15.1221C11.7601 14.2492 12.1887 13.4474 12.818 12.818C13.4474 12.1887 14.2492 11.7601 15.1221 11.5865C15.995 11.4128 16.8998 11.5019 17.7221 11.8425C18.5443 12.1831 19.2472 12.7599 19.7416 13.4999C20.2361 14.24 20.5 15.11 20.5 16C20.5 17.1935 20.0259 18.3381 19.182 19.182C18.3381 20.0259 17.1935 20.5 16 20.5ZM4.50001 16C4.49787 13.8844 5.08245 11.8096 6.18876 10.0063L11.2375 18.75C11.2375 18.7612 11.2513 18.7712 11.2588 18.7825C11.9496 19.9629 13.056 20.843 14.3616 21.2506C15.6671 21.6582 17.0778 21.564 18.3175 20.9862L14.605 27.415C11.8188 27.071 9.25413 25.721 7.39328 23.6189C5.53243 21.5168 4.50353 18.8074 4.50001 16ZM16 27.5C15.9038 27.5 15.8088 27.5 15.7138 27.5L20.7625 18.75C20.767 18.742 20.7708 18.7337 20.7738 18.725C21.455 17.5362 21.6668 16.1356 21.3675 14.7985C21.0682 13.4615 20.2794 12.2848 19.1563 11.5H26.5825C27.3261 13.2487 27.6247 15.1544 27.4518 17.0468C27.2788 18.9391 26.6396 20.7591 25.5913 22.3441C24.543 23.929 23.1183 25.2295 21.4446 26.1292C19.7709 27.029 17.9002 27.4999 16 27.5Z"
|
||||
fill="currentColor"
|
||||
d="M11.5 7C9.29086 7 7.5 8.79086 7.5 11C7.5 13.2091 9.29086 15 11.5 15C13.7091 15 15.5 13.2091 15.5 11C15.5 8.79086 13.7091 7 11.5 7ZM11.5 7H20.67M3.45 5.06L8.04 13M10.38 20.94L14.96 13M21.5 11C21.5 16.5228 17.0228 21 11.5 21C5.97715 21 1.5 16.5228 1.5 11C1.5 5.47715 5.97715 1 11.5 1C17.0228 1 21.5 5.47715 21.5 11Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,50 @@ import countries from 'i18n-iso-countries';
|
|||
// Register required locales
|
||||
import countriesEn from 'i18n-iso-countries/langs/en.json';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { AddProviderComponent } from '@gitroom/frontend/components/launches/add.provider.component';
|
||||
import { ModalWrapperComponent } from '../new-launch/modal.wrapper.component';
|
||||
|
||||
import clsx from 'clsx';
|
||||
countries.registerLocale(countriesEn);
|
||||
|
||||
const getCountryCodeForFlag = (languageCode: string) => {
|
||||
// For multi-region languages, here are some common defaults
|
||||
if (languageCode === 'en') return 'GB';
|
||||
if (languageCode === 'es') return 'ES';
|
||||
if (languageCode === 'ar') return 'SA';
|
||||
if (languageCode === 'zh') return 'CN';
|
||||
if (languageCode === 'he') return 'IL';
|
||||
if (languageCode === 'ja') return 'JP';
|
||||
if (languageCode === 'ko') return 'KR';
|
||||
|
||||
// Check if language code itself is a valid country code
|
||||
try {
|
||||
const countryName = countries.getName(languageCode.toUpperCase(), 'en');
|
||||
if (countryName) {
|
||||
return languageCode.toUpperCase();
|
||||
}
|
||||
} catch (e) {
|
||||
// Not a valid country code, continue to next approach
|
||||
}
|
||||
|
||||
// Try to extract region code if language code has a region component (e.g., en-US)
|
||||
const parts = languageCode.split('-');
|
||||
if (parts.length > 1) {
|
||||
const regionCode = parts[1].toUpperCase();
|
||||
try {
|
||||
const countryName = countries.getName(regionCode, 'en');
|
||||
if (countryName) {
|
||||
return regionCode;
|
||||
}
|
||||
} catch (e) {
|
||||
// Not a valid country code, continue to next approach
|
||||
}
|
||||
}
|
||||
|
||||
// For most language codes that match their primary country
|
||||
// Examples: fr->FR, it->IT, de->DE, etc.
|
||||
return languageCode.toUpperCase();
|
||||
};
|
||||
|
||||
export const ChangeLanguageComponent = () => {
|
||||
const currentLanguage = i18next.resolvedLanguage || fallbackLng;
|
||||
const availableLanguages = languages;
|
||||
|
|
@ -46,72 +87,15 @@ export const ChangeLanguageComponent = () => {
|
|||
}
|
||||
}, []);
|
||||
|
||||
// Get appropriate country code for the flag based on language code
|
||||
const getCountryCodeForFlag = useCallback((languageCode: string) => {
|
||||
// For multi-region languages, here are some common defaults
|
||||
if (languageCode === 'en') return 'GB';
|
||||
if (languageCode === 'es') return 'ES';
|
||||
if (languageCode === 'ar') return 'SA';
|
||||
if (languageCode === 'zh') return 'CN';
|
||||
if (languageCode === 'he') return 'IL';
|
||||
if (languageCode === 'ja') return 'JP';
|
||||
if (languageCode === 'ko') return 'KR';
|
||||
|
||||
// Check if language code itself is a valid country code
|
||||
try {
|
||||
const countryName = countries.getName(languageCode.toUpperCase(), 'en');
|
||||
if (countryName) {
|
||||
return languageCode.toUpperCase();
|
||||
}
|
||||
} catch (e) {
|
||||
// Not a valid country code, continue to next approach
|
||||
}
|
||||
|
||||
// Try to extract region code if language code has a region component (e.g., en-US)
|
||||
const parts = languageCode.split('-');
|
||||
if (parts.length > 1) {
|
||||
const regionCode = parts[1].toUpperCase();
|
||||
try {
|
||||
const countryName = countries.getName(regionCode, 'en');
|
||||
if (countryName) {
|
||||
return regionCode;
|
||||
}
|
||||
} catch (e) {
|
||||
// Not a valid country code, continue to next approach
|
||||
}
|
||||
}
|
||||
|
||||
// For most language codes that match their primary country
|
||||
// Examples: fr->FR, it->IT, de->DE, etc.
|
||||
return languageCode.toUpperCase();
|
||||
}, []);
|
||||
return (
|
||||
<div className="bg-sixth p-[32px] w-full max-w-[920px] mx-auto flex flex-col rounded-[4px] border border-customColor6 relative">
|
||||
<button
|
||||
onClick={() => modals.closeModal('change-language')}
|
||||
className="outline-none absolute end-[20px] top-[15px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-[24px] mb-3">{t('change_language', 'Change Language')}</h1>
|
||||
<div className="relative">
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{availableLanguages.map((language) => (
|
||||
<div
|
||||
className={clsx("flex items-center flex-col bg-input p-[20px] cursor-pointer gap-2", language === currentLanguage ? 'border border-textColor' : '')}
|
||||
className={clsx(
|
||||
'flex items-center flex-col bg-newTableHeader hover:bg-newTableBorder p-[20px] cursor-pointer gap-2',
|
||||
language === currentLanguage ? 'border border-textColor' : ''
|
||||
)}
|
||||
key={language}
|
||||
onClick={() => handleLanguageChange(language)}
|
||||
>
|
||||
|
|
@ -135,33 +119,41 @@ export const ChangeLanguageComponent = () => {
|
|||
};
|
||||
export const LanguageComponent = () => {
|
||||
const modal = useModals();
|
||||
const currentLanguage = i18next.resolvedLanguage || fallbackLng;
|
||||
const t = useT();
|
||||
const openModal = () => {
|
||||
modal.openModal({
|
||||
title: '',
|
||||
withCloseButton: false,
|
||||
classNames: {
|
||||
modal: 'bg-transparent text-textColor',
|
||||
},
|
||||
modalId: 'change-language',
|
||||
children: <ChangeLanguageComponent />,
|
||||
children: (
|
||||
<ModalWrapperComponent title={t('change_language', 'Change Language')}>
|
||||
<ChangeLanguageComponent />
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
size: 'lg',
|
||||
centered: true,
|
||||
});
|
||||
};
|
||||
return (
|
||||
<svg
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="me-2 cursor-pointer"
|
||||
<div
|
||||
onClick={openModal}
|
||||
className="rounded-full overflow-hidden h-[22px] w-[22px] relative cursor-pointer"
|
||||
>
|
||||
<path
|
||||
d="M16 3.5C13.5277 3.5 11.111 4.23311 9.05538 5.60663C6.99976 6.98015 5.39761 8.93238 4.45151 11.2165C3.50542 13.5005 3.25787 16.0139 3.74019 18.4386C4.2225 20.8634 5.41301 23.0907 7.16117 24.8388C8.90933 26.587 11.1366 27.7775 13.5614 28.2598C15.9861 28.7421 18.4995 28.4946 20.7835 27.5485C23.0676 26.6024 25.0199 25.0002 26.3934 22.9446C27.7669 20.889 28.5 18.4723 28.5 16C28.4964 12.6859 27.1782 9.5086 24.8348 7.16518C22.4914 4.82177 19.3141 3.50364 16 3.5ZM26.955 19.5H21.1863C21.6046 17.1854 21.6046 14.8146 21.1863 12.5H26.955C27.6817 14.7768 27.6817 17.2232 26.955 19.5ZM16 27.5C15.9346 27.5 15.8699 27.4863 15.81 27.4598C15.7502 27.4333 15.6965 27.3947 15.6525 27.3463C13.9463 25.5088 12.7125 23.1313 12.0513 20.5H19.9488C19.2875 23.1313 18.0538 25.5088 16.3475 27.3463C16.3035 27.3947 16.2498 27.4333 16.19 27.4598C16.1301 27.4863 16.0654 27.5 16 27.5ZM11.8313 19.5C11.3896 17.1876 11.3896 14.8124 11.8313 12.5H20.1688C20.6104 14.8124 20.6104 17.1876 20.1688 19.5H11.8313ZM16 4.5C16.0654 4.50003 16.1301 4.51371 16.19 4.54019C16.2498 4.56667 16.3035 4.60534 16.3475 4.65375C18.0538 6.49125 19.2875 8.875 19.9488 11.5H12.0513C12.7125 8.875 13.9463 6.49125 15.6525 4.65375C15.6965 4.60534 15.7502 4.56667 15.81 4.54019C15.8699 4.51371 15.9346 4.50003 16 4.5ZM26.5825 11.5H20.9763C20.3625 8.90875 19.2263 6.535 17.6438 4.6175C19.5983 4.90355 21.4466 5.68662 23.0117 6.89172C24.5768 8.09681 25.8064 9.68356 26.5825 11.5ZM14.3563 4.6175C12.7775 6.535 11.6375 8.90875 11.0238 11.5H5.41751C6.19366 9.68356 7.42318 8.09681 8.98831 6.89172C10.5534 5.68662 12.4018 4.90355 14.3563 4.6175ZM5.04501 12.5H10.8138C10.3954 14.8146 10.3954 17.1854 10.8138 19.5H5.04501C4.31835 17.2232 4.31835 14.7768 5.04501 12.5ZM5.42001 20.5H11.0238C11.6375 23.0912 12.7738 25.465 14.3563 27.3825C12.4018 27.0964 10.5534 26.3134 8.98831 25.1083C7.42318 23.9032 6.19366 22.3164 5.41751 20.5H5.42001ZM17.6463 27.3825C19.225 25.465 20.365 23.0912 20.9788 20.5H26.585C25.8086 22.3168 24.5787 23.9037 23.0131 25.1088C21.4475 26.314 19.5987 27.0968 17.6438 27.3825H17.6463Z"
|
||||
fill="currentColor"
|
||||
<ReactCountryFlag
|
||||
countryCode={getCountryCodeForFlag(currentLanguage)}
|
||||
svg
|
||||
style={{
|
||||
width: '22px',
|
||||
height: '22px',
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
objectFit: 'cover',
|
||||
}}
|
||||
title={currentLanguage}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import useCookie from 'react-use-cookie';
|
||||
const ModeComponent = () => {
|
||||
const [mode, setMode] = useState(localStorage.getItem('mode') || 'dark');
|
||||
const [mode, setMode] = useCookie('mode', 'dark');
|
||||
|
||||
const changeMode = useCallback(() => {
|
||||
setMode(mode === 'dark' ? 'light' : 'dark');
|
||||
localStorage.setItem('mode', mode === 'dark' ? 'light' : 'dark');
|
||||
}, [mode]);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.classList.remove('dark', 'light');
|
||||
document.body.classList.add(mode);
|
||||
|
|
@ -16,14 +18,17 @@ const ModeComponent = () => {
|
|||
{mode === 'dark' ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 32 32"
|
||||
width="22"
|
||||
height="22"
|
||||
viewBox="0 0 22 22"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M29.0175 17.955C28.9211 17.8588 28.8004 17.7907 28.6683 17.7579C28.5362 17.725 28.3976 17.7288 28.2675 17.7688C26.3175 18.3582 24.244 18.4074 22.2682 17.9113C20.2924 17.4152 18.4882 16.3923 17.0479 14.9516C15.6076 13.5109 14.5852 11.7064 14.0896 9.73049C13.594 7.75454 13.6438 5.68114 14.2337 3.73126C14.2731 3.60124 14.2765 3.46294 14.2434 3.33116C14.2103 3.19938 14.1421 3.07906 14.0459 2.98305C13.9498 2.88704 13.8294 2.81895 13.6976 2.78605C13.5657 2.75315 13.4275 2.75668 13.2975 2.79626C10.7119 3.5895 8.44227 5.1777 6.81123 7.33501C4.96231 9.79013 4.06245 12.8305 4.2773 15.8964C4.49215 18.9623 5.80724 21.8475 7.9805 24.0207C10.1538 26.194 13.0389 27.5091 16.1048 27.7239C19.1708 27.9388 22.2111 27.0389 24.6662 25.19C26.8236 23.559 28.4117 21.2893 29.205 18.7038C29.2445 18.5737 29.248 18.4353 29.215 18.3034C29.1819 18.1715 29.1137 18.0511 29.0175 17.955ZM23.7675 23.9913C21.601 25.6161 18.9212 26.4049 16.22 26.213C13.5188 26.021 10.9774 24.8611 9.06253 22.9462C7.14766 21.0313 5.98776 18.49 5.79579 15.7888C5.60382 13.0875 6.39266 10.4077 8.01748 8.24126C9.1748 6.70679 10.7024 5.49096 12.4575 4.70751C12.088 6.73704 12.2162 8.8259 12.831 10.795C13.4459 12.7642 14.5291 14.5548 15.9878 16.0135C17.4464 17.4722 19.2371 18.5554 21.2062 19.1702C23.1753 19.7851 25.2642 19.9133 27.2937 19.5438C26.5124 21.3011 25.2978 22.8314 23.7637 23.9913H23.7675Z"
|
||||
fill="currentColor"
|
||||
d="M10.75 1V3M10.75 19V21M2.75 11H0.75M5.06412 5.31412L3.6499 3.8999M16.4359 5.31412L17.8501 3.8999M5.06412 16.69L3.6499 18.1042M16.4359 16.69L17.8501 18.1042M20.75 11H18.75M15.75 11C15.75 13.7614 13.5114 16 10.75 16C7.98858 16 5.75 13.7614 5.75 11C5.75 8.23858 7.98858 6 10.75 6C13.5114 6 15.75 8.23858 15.75 11Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
|
|
@ -31,12 +36,15 @@ const ModeComponent = () => {
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 32 32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M15 5V4C15 3.73478 15.1054 3.48043 15.2929 3.29289C15.4804 3.10536 15.7348 3 16 3C16.2652 3 16.5196 3.10536 16.7071 3.29289C16.8946 3.48043 17 3.73478 17 4V5C17 5.26522 16.8946 5.51957 16.7071 5.70711C16.5196 5.89464 16.2652 6 16 6C15.7348 6 15.4804 5.89464 15.2929 5.70711C15.1054 5.51957 15 5.26522 15 5ZM24 16C24 17.5823 23.5308 19.129 22.6518 20.4446C21.7727 21.7602 20.5233 22.7855 19.0615 23.391C17.5997 23.9965 15.9911 24.155 14.4393 23.8463C12.8874 23.5376 11.462 22.7757 10.3431 21.6569C9.22433 20.538 8.4624 19.1126 8.15372 17.5607C7.84504 16.0089 8.00346 14.4003 8.60896 12.9385C9.21447 11.4767 10.2398 10.2273 11.5554 9.34824C12.871 8.46919 14.4177 8 16 8C18.121 8.00232 20.1545 8.84591 21.6543 10.3457C23.1541 11.8455 23.9977 13.879 24 16ZM22 16C22 14.8133 21.6481 13.6533 20.9888 12.6666C20.3295 11.6799 19.3925 10.9108 18.2961 10.4567C17.1997 10.0026 15.9933 9.88378 14.8295 10.1153C13.6656 10.3468 12.5965 10.9182 11.7574 11.7574C10.9182 12.5965 10.3468 13.6656 10.1153 14.8295C9.88378 15.9933 10.0026 17.1997 10.4567 18.2961C10.9108 19.3925 11.6799 20.3295 12.6666 20.9888C13.6533 21.6481 14.8133 22 16 22C17.5908 21.9983 19.116 21.3657 20.2408 20.2408C21.3657 19.116 21.9983 17.5908 22 16ZM7.2925 8.7075C7.48014 8.89514 7.73464 9.00056 8 9.00056C8.26536 9.00056 8.51986 8.89514 8.7075 8.7075C8.89514 8.51986 9.00056 8.26536 9.00056 8C9.00056 7.73464 8.89514 7.48014 8.7075 7.2925L7.7075 6.2925C7.51986 6.10486 7.26536 5.99944 7 5.99944C6.73464 5.99944 6.48014 6.10486 6.2925 6.2925C6.10486 6.48014 5.99944 6.73464 5.99944 7C5.99944 7.26536 6.10486 7.51986 6.2925 7.7075L7.2925 8.7075ZM7.2925 23.2925L6.2925 24.2925C6.10486 24.4801 5.99944 24.7346 5.99944 25C5.99944 25.2654 6.10486 25.5199 6.2925 25.7075C6.48014 25.8951 6.73464 26.0006 7 26.0006C7.26536 26.0006 7.51986 25.8951 7.7075 25.7075L8.7075 24.7075C8.80041 24.6146 8.87411 24.5043 8.92439 24.3829C8.97468 24.2615 9.00056 24.1314 9.00056 24C9.00056 23.8686 8.97468 23.7385 8.92439 23.6171C8.87411 23.4957 8.80041 23.3854 8.7075 23.2925C8.61459 23.1996 8.50429 23.1259 8.3829 23.0756C8.2615 23.0253 8.13139 22.9994 8 22.9994C7.86861 22.9994 7.7385 23.0253 7.6171 23.0756C7.49571 23.1259 7.38541 23.1996 7.2925 23.2925ZM24 9C24.1314 9.0001 24.2615 8.97432 24.3829 8.92414C24.5042 8.87395 24.6146 8.80033 24.7075 8.7075L25.7075 7.7075C25.8951 7.51986 26.0006 7.26536 26.0006 7C26.0006 6.73464 25.8951 6.48014 25.7075 6.2925C25.5199 6.10486 25.2654 5.99944 25 5.99944C24.7346 5.99944 24.4801 6.10486 24.2925 6.2925L23.2925 7.2925C23.1525 7.43236 23.0571 7.61061 23.0185 7.80469C22.9798 7.99878 22.9996 8.19997 23.0754 8.38279C23.1511 8.56561 23.2794 8.72185 23.444 8.83172C23.6086 8.94159 23.8021 9.00016 24 9ZM24.7075 23.2925C24.5199 23.1049 24.2654 22.9994 24 22.9994C23.7346 22.9994 23.4801 23.1049 23.2925 23.2925C23.1049 23.4801 22.9994 23.7346 22.9994 24C22.9994 24.2654 23.1049 24.5199 23.2925 24.7075L24.2925 25.7075C24.3854 25.8004 24.4957 25.8741 24.6171 25.9244C24.7385 25.9747 24.8686 26.0006 25 26.0006C25.1314 26.0006 25.2615 25.9747 25.3829 25.9244C25.5043 25.8741 25.6146 25.8004 25.7075 25.7075C25.8004 25.6146 25.8741 25.5043 25.9244 25.3829C25.9747 25.2615 26.0006 25.1314 26.0006 25C26.0006 24.8686 25.9747 24.7385 25.9244 24.6171C25.8741 24.4957 25.8004 24.3854 25.7075 24.2925L24.7075 23.2925ZM5 15H4C3.73478 15 3.48043 15.1054 3.29289 15.2929C3.10536 15.4804 3 15.7348 3 16C3 16.2652 3.10536 16.5196 3.29289 16.7071C3.48043 16.8946 3.73478 17 4 17H5C5.26522 17 5.51957 16.8946 5.70711 16.7071C5.89464 16.5196 6 16.2652 6 16C6 15.7348 5.89464 15.4804 5.70711 15.2929C5.51957 15.1054 5.26522 15 5 15ZM16 26C15.7348 26 15.4804 26.1054 15.2929 26.2929C15.1054 26.4804 15 26.7348 15 27V28C15 28.2652 15.1054 28.5196 15.2929 28.7071C15.4804 28.8946 15.7348 29 16 29C16.2652 29 16.5196 28.8946 16.7071 28.7071C16.8946 28.5196 17 28.2652 17 28V27C17 26.7348 16.8946 26.4804 16.7071 26.2929C16.5196 26.1054 16.2652 26 16 26ZM28 15H27C26.7348 15 26.4804 15.1054 26.2929 15.2929C26.1054 15.4804 26 15.7348 26 16C26 16.2652 26.1054 16.5196 26.2929 16.7071C26.4804 16.8946 26.7348 17 27 17H28C28.2652 17 28.5196 16.8946 28.7071 16.7071C28.8946 16.5196 29 16.2652 29 16C29 15.7348 28.8946 15.4804 28.7071 15.2929C28.5196 15.1054 28.2652 15 28 15Z"
|
||||
fill="currentColor"
|
||||
d="M21.625 12.9011C20.2967 15.231 17.7898 16.8019 14.916 16.8019C10.6539 16.8019 7.19884 13.3468 7.19884 9.08473C7.19884 6.21071 8.76993 3.70363 11.1001 2.37549C6.20501 2.83962 2.37561 6.96182 2.37561 11.9784C2.37561 17.306 6.69447 21.6248 12.0221 21.6248C17.0384 21.6248 21.1605 17.7959 21.625 12.9011Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
'use client';
|
||||
|
||||
import { useModals } from '@mantine/modals';
|
||||
import React, { FC, Ref, useCallback, useEffect, useMemo } from 'react';
|
||||
import { Input } from '@gitroom/react/form/input';
|
||||
import { Button } from '@gitroom/react/form/button';
|
||||
import { Textarea } from '@gitroom/react/form/textarea';
|
||||
import React, {
|
||||
FC,
|
||||
Ref,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { showMediaBox } from '@gitroom/frontend/components/media/media.component';
|
||||
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
||||
|
|
@ -22,11 +26,10 @@ import { PublicComponent } from '@gitroom/frontend/components/public-api/public.
|
|||
import Link from 'next/link';
|
||||
import { Webhooks } from '@gitroom/frontend/components/webhooks/webhooks';
|
||||
import { Sets } from '@gitroom/frontend/components/sets/sets';
|
||||
import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
|
||||
import { Tabs } from '@mantine/core';
|
||||
import { SignaturesComponent } from '@gitroom/frontend/components/settings/signatures.component';
|
||||
import { Autopost } from '@gitroom/frontend/components/autopost/autopost';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { SVGLine } from '@gitroom/frontend/components/launches/launches.component';
|
||||
export const SettingsPopup: FC<{
|
||||
getRef?: Ref<any>;
|
||||
}> = (props) => {
|
||||
|
|
@ -63,6 +66,7 @@ export const SettingsPopup: FC<{
|
|||
const remove = useCallback(() => {
|
||||
form.setValue('picture', null);
|
||||
}, []);
|
||||
|
||||
const submit = useCallback(async (val: any) => {
|
||||
await fetch('/user/personal', {
|
||||
method: 'POST',
|
||||
|
|
@ -75,7 +79,8 @@ export const SettingsPopup: FC<{
|
|||
swr.mutate('/marketplace/account');
|
||||
close();
|
||||
}, []);
|
||||
const defaultValueForTabs = useMemo(() => {
|
||||
|
||||
const [tab, setTab] = useState(() => {
|
||||
if (user?.tier?.team_members && isGeneral) {
|
||||
return 'teams';
|
||||
}
|
||||
|
|
@ -86,106 +91,126 @@ export const SettingsPopup: FC<{
|
|||
return 'autopost';
|
||||
}
|
||||
return 'sets';
|
||||
}, [user?.tier, isGeneral]);
|
||||
});
|
||||
|
||||
const t = useT();
|
||||
const list = useMemo(() => {
|
||||
const arr = [];
|
||||
// Populate tabs based on user permissions
|
||||
if (user?.tier?.team_members && isGeneral) {
|
||||
arr.push({ tab: 'teams', label: t('teams', 'Teams') });
|
||||
}
|
||||
if (user?.tier?.webhooks) {
|
||||
arr.push({ tab: 'webhooks', label: t('webhooks_1', 'Webhooks') });
|
||||
}
|
||||
if (user?.tier?.autoPost) {
|
||||
arr.push({ tab: 'autopost', label: t('auto_post', 'Auto Post') });
|
||||
}
|
||||
if (user?.tier.current !== 'FREE') {
|
||||
arr.push({ tab: 'sets', label: t('sets', 'Sets') });
|
||||
}
|
||||
if (user?.tier.current !== 'FREE') {
|
||||
arr.push({ tab: 'signatures', label: t('signatures', 'Signatures') });
|
||||
}
|
||||
if (user?.tier?.public_api && isGeneral && showLogout) {
|
||||
arr.push({ tab: 'api', label: t('public_api', 'Public API') });
|
||||
}
|
||||
|
||||
return arr;
|
||||
}, [user, isGeneral, showLogout, t]);
|
||||
|
||||
useEffect(() => {
|
||||
loadProfile();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<form onSubmit={form.handleSubmit(submit)}>
|
||||
{!!getRef && (
|
||||
<button type="submit" className="hidden" ref={getRef}></button>
|
||||
)}
|
||||
<div
|
||||
className={clsx(
|
||||
'w-full mx-auto gap-[24px] flex flex-col relative',
|
||||
!getRef && 'rounded-[4px]'
|
||||
)}
|
||||
>
|
||||
<Tabs
|
||||
defaultValue={defaultValueForTabs}
|
||||
classNames={{
|
||||
root: 'w-full',
|
||||
tabsList: 'border-b border-customColor6 mb-4 gap-[5px]',
|
||||
tab: 'bg-customColor6 hover:bg-forth px-4 py-4 text-[14px] data-[active]:bg-forth data-[active]:text-white text-textColor data-[active]:border-b-2 data-[active]:border-white data-[active]:hover:border-white hover:border-white hover:text-white transition-colors',
|
||||
panel: 'pt-0',
|
||||
}}
|
||||
>
|
||||
<Tabs.List>
|
||||
{/* <Tabs.Tab value="profile">Profile</Tabs.Tab> */}
|
||||
{!!user?.tier?.team_members && isGeneral && (
|
||||
<Tabs.Tab value="teams">{t('teams', 'Teams')}</Tabs.Tab>
|
||||
<>
|
||||
<div className="bg-newBgColorInner p-[20px] flex flex-col transition-all w-[260px]">
|
||||
<div className="flex flex-1 flex-col gap-[15px]">
|
||||
{list.map(({ tab: tabKey, label }) => (
|
||||
<div
|
||||
key={tabKey}
|
||||
className={clsx(
|
||||
'cursor-pointer flex items-center gap-[12px] group/profile hover:bg-boxHover rounded-e-[8px]',
|
||||
tabKey === tab && 'bg-boxHover'
|
||||
)}
|
||||
{!!user?.tier?.webhooks && (
|
||||
<Tabs.Tab value="webhooks">
|
||||
{t('webhooks_1', 'Webhooks')}
|
||||
</Tabs.Tab>
|
||||
)}
|
||||
{!!user?.tier?.autoPost && (
|
||||
<Tabs.Tab value="autopost">
|
||||
{t('auto_post', 'Auto Post')}
|
||||
</Tabs.Tab>
|
||||
)}
|
||||
{user?.tier.current !== 'FREE' && (
|
||||
<Tabs.Tab value="sets">{t('sets', 'Sets')}</Tabs.Tab>
|
||||
)}
|
||||
{user?.tier.current !== 'FREE' && (
|
||||
<Tabs.Tab value="signatures">
|
||||
{t('signatures', 'Signatures')}
|
||||
</Tabs.Tab>
|
||||
)}
|
||||
{!!user?.tier?.public_api && isGeneral && showLogout && (
|
||||
<Tabs.Tab value="api">{t('public_api', 'Public API')}</Tabs.Tab>
|
||||
)}
|
||||
</Tabs.List>
|
||||
|
||||
{!!user?.tier?.team_members && isGeneral && (
|
||||
<Tabs.Panel value="teams" pt="md">
|
||||
<TeamsComponent />
|
||||
</Tabs.Panel>
|
||||
)}
|
||||
|
||||
{!!user?.tier?.webhooks && (
|
||||
<Tabs.Panel value="webhooks" pt="md">
|
||||
<Webhooks />
|
||||
</Tabs.Panel>
|
||||
)}
|
||||
|
||||
{!!user?.tier?.autoPost && (
|
||||
<Tabs.Panel value="autopost" pt="md">
|
||||
<Autopost />
|
||||
</Tabs.Panel>
|
||||
)}
|
||||
|
||||
{user?.tier.current !== 'FREE' && (
|
||||
<Tabs.Panel value="sets" pt="md">
|
||||
<Sets />
|
||||
</Tabs.Panel>
|
||||
)}
|
||||
|
||||
{user?.tier.current !== 'FREE' && (
|
||||
<Tabs.Panel value="signatures" pt="md">
|
||||
<SignaturesComponent />
|
||||
</Tabs.Panel>
|
||||
)}
|
||||
{!!user?.tier?.public_api && isGeneral && showLogout && (
|
||||
<Tabs.Panel value="api" pt="md">
|
||||
<PublicComponent />
|
||||
</Tabs.Panel>
|
||||
)}
|
||||
</Tabs>
|
||||
|
||||
onClick={() => setTab(tabKey)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'h-full w-[4px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity',
|
||||
tabKey === tab && 'opacity-100'
|
||||
)}
|
||||
>
|
||||
<SVGLine />
|
||||
</div>
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
{showLogout && (
|
||||
<div className="mt-4">
|
||||
<LogoutComponent />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</div>
|
||||
<div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
|
||||
<FormProvider {...form}>
|
||||
<form onSubmit={form.handleSubmit(submit)}>
|
||||
{!!getRef && (
|
||||
<button type="submit" className="hidden" ref={getRef}></button>
|
||||
)}
|
||||
<div
|
||||
className={clsx(
|
||||
'w-full mx-auto gap-[24px] flex flex-col relative',
|
||||
!getRef && 'rounded-[4px]'
|
||||
)}
|
||||
>
|
||||
{tab === 'teams' && !!user?.tier?.team_members && isGeneral && (
|
||||
<div>
|
||||
<TeamsComponent />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'webhooks' && !!user?.tier?.webhooks && (
|
||||
<div>
|
||||
<Webhooks />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'autopost' && !!user?.tier?.autoPost && (
|
||||
<div>
|
||||
<Autopost />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'sets' && user?.tier.current !== 'FREE' && (
|
||||
<div>
|
||||
<Sets />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'signatures' && user?.tier.current !== 'FREE' && (
|
||||
<div>
|
||||
<SignaturesComponent />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'api' &&
|
||||
!!user?.tier?.public_api &&
|
||||
isGeneral &&
|
||||
showLogout && (
|
||||
<div>
|
||||
<PublicComponent />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export const SettingsComponent = () => {
|
||||
|
|
|
|||
|
|
@ -2,16 +2,13 @@
|
|||
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useMemo } from 'react';
|
||||
import { useMenuItems } from '@gitroom/frontend/components/layout/top.menu';
|
||||
import { useMenuItem } from '@gitroom/frontend/components/layout/top.menu';
|
||||
export const Title = () => {
|
||||
const path = usePathname();
|
||||
const menuItems = useMenuItems();
|
||||
const { all: menuItems } = useMenuItem();
|
||||
const currentTitle = useMemo(() => {
|
||||
return menuItems.find((item) => path.indexOf(item.path) > -1)?.name;
|
||||
}, [path]);
|
||||
return (
|
||||
<div className="flex">
|
||||
<h1 className="text-[24px] mb-5 flex-1">{currentTitle}</h1>
|
||||
</div>
|
||||
);
|
||||
|
||||
return <h1>{currentTitle}</h1>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,92 +1,293 @@
|
|||
'use client';
|
||||
|
||||
import { FC } from 'react';
|
||||
import Link from 'next/link';
|
||||
import clsx from 'clsx';
|
||||
import { FC, ReactNode } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useUser } from '@gitroom/frontend/components/layout/user.context';
|
||||
import { useVariables } from '@gitroom/react/helpers/variable.context';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
export const useMenuItems = () => {
|
||||
import { MenuItem } from '@gitroom/frontend/components/new-layout/menu-item';
|
||||
|
||||
interface MenuItemInterface {
|
||||
name: string;
|
||||
icon: ReactNode;
|
||||
path: string;
|
||||
role?: string[];
|
||||
hide?: boolean;
|
||||
requireBilling?: boolean;
|
||||
}
|
||||
|
||||
export const useMenuItem = () => {
|
||||
const { isGeneral } = useVariables();
|
||||
const t = useT();
|
||||
|
||||
return [
|
||||
...(!isGeneral
|
||||
? [
|
||||
{
|
||||
name: t('analytics', 'Analytics'),
|
||||
icon: 'analytics',
|
||||
path: '/analytics',
|
||||
},
|
||||
]
|
||||
: []),
|
||||
const firstMenu = [
|
||||
{
|
||||
name: isGeneral ? t('calendar', 'Calendar') : t('launches', 'Launches'),
|
||||
icon: 'launches',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="23"
|
||||
viewBox="0 0 21 23"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M19.5 9.5H1.5M14.5 1.5V5.5M6.5 1.5V5.5M6.3 21.5H14.7C16.3802 21.5 17.2202 21.5 17.862 21.173C18.4265 20.8854 18.8854 20.4265 19.173 19.862C19.5 19.2202 19.5 18.3802 19.5 16.7V8.3C19.5 6.61984 19.5 5.77976 19.173 5.13803C18.8854 4.57354 18.4265 4.1146 17.862 3.82698C17.2202 3.5 16.3802 3.5 14.7 3.5H6.3C4.61984 3.5 3.77976 3.5 3.13803 3.82698C2.57354 4.1146 2.1146 4.57354 1.82698 5.13803C1.5 5.77976 1.5 6.61984 1.5 8.3V16.7C1.5 18.3802 1.5 19.2202 1.82698 19.862C2.1146 20.4265 2.57354 20.8854 3.13803 21.173C3.77976 21.5 4.61984 21.5 6.3 21.5Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
path: '/launches',
|
||||
},
|
||||
...(isGeneral
|
||||
? [
|
||||
{
|
||||
name: t('analytics', 'Analytics'),
|
||||
icon: 'analytics',
|
||||
path: '/analytics',
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(!isGeneral
|
||||
? [
|
||||
{
|
||||
name: t('settings', 'Settings'),
|
||||
icon: 'settings',
|
||||
path: '/settings',
|
||||
role: ['ADMIN', 'SUPERADMIN'],
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
name: t('analytics', 'Analytics'),
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="19"
|
||||
viewBox="0 0 20 19"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M18.5 18H3.01111C2.48217 18 2.2177 18 2.01568 17.8971C1.83797 17.8065 1.69349 17.662 1.60294 17.4843C1.5 17.2823 1.5 17.0178 1.5 16.4889V1M18.5 4.77778L13.3676 9.91019C13.1806 10.0972 13.0871 10.1907 12.9793 10.2257C12.8844 10.2565 12.7823 10.2565 12.6874 10.2257C12.5796 10.1907 12.4861 10.0972 12.2991 9.91019L10.5343 8.14537C10.3472 7.95836 10.2537 7.86486 10.1459 7.82982C10.0511 7.79901 9.94892 7.79901 9.85407 7.82982C9.74625 7.86486 9.65275 7.95836 9.46574 8.14537L5.27778 12.3333M18.5 4.77778H14.7222M18.5 4.77778V8.55556"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
path: '/analytics',
|
||||
},
|
||||
{
|
||||
name: t('media', 'Media'),
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="21"
|
||||
viewBox="0 0 20 21"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7.50008 3L6.66675 7.16667M13.3334 3L12.5001 7.16667M18.3334 7.16667H1.66675M5.66675 18H14.3334C15.7335 18 16.4336 18 16.9684 17.7275C17.4388 17.4878 17.8212 17.1054 18.0609 16.635C18.3334 16.1002 18.3334 15.4001 18.3334 14V7C18.3334 5.59987 18.3334 4.8998 18.0609 4.36502C17.8212 3.89462 17.4388 3.51217 16.9684 3.27248C16.4336 3 15.7335 3 14.3334 3H5.66675C4.26662 3 3.56655 3 3.03177 3.27248C2.56137 3.51217 2.17892 3.89462 1.93923 4.36502C1.66675 4.8998 1.66675 5.59987 1.66675 7V14C1.66675 15.4001 1.66675 16.1002 1.93923 16.635C2.17892 17.1054 2.56137 17.4878 3.03177 17.7275C3.56655 18 4.26662 18 5.66675 18Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
path: '/media',
|
||||
},
|
||||
{
|
||||
name: t('plugs', 'Plugs'),
|
||||
icon: 'plugs',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="19"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M11.6711 6.21205C11.3397 5.88068 11.174 5.715 11.1119 5.52395C11.0573 5.35589 11.0573 5.17486 11.1119 5.00681C11.174 4.81575 11.3397 4.65007 11.6711 4.3187L14.0461 1.94369C13.4158 1.65867 12.7162 1.5 11.9795 1.5C9.20677 1.5 6.95901 3.74776 6.95901 6.5205C6.95901 6.93138 7.00837 7.33073 7.10148 7.71294C7.20119 8.12224 7.25104 8.32689 7.24219 8.45618C7.23292 8.59154 7.21274 8.66355 7.15032 8.78401C7.0907 8.89907 6.97646 9.0133 6.748 9.24177L1.52013 14.4696C0.826947 15.1628 0.826948 16.2867 1.52013 16.9799C2.21332 17.6731 3.3372 17.6731 4.03039 16.9799L9.25825 11.752C9.48672 11.5236 9.60095 11.4093 9.71601 11.3497C9.83647 11.2873 9.90848 11.2671 10.0438 11.2578C10.1731 11.249 10.3778 11.2988 10.7871 11.3985C11.1693 11.4916 11.5686 11.541 11.9795 11.541C14.7523 11.541 17 9.29325 17 6.5205C17 5.78382 16.8413 5.0842 16.5563 4.45394L14.1813 6.82895C13.8499 7.16032 13.6843 7.326 13.4932 7.38808C13.3252 7.44269 13.1441 7.44269 12.9761 7.38808C12.785 7.326 12.6193 7.16032 12.288 6.82895L11.6711 6.21205Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
path: '/plugs',
|
||||
},
|
||||
{
|
||||
name: t('integrations', 'Integrations'),
|
||||
icon: 'integrations',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="19"
|
||||
viewBox="0 0 20 19"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M6.175 3.125C6.175 1.9514 7.1264 1 8.3 1C9.47361 1 10.425 1.9514 10.425 3.125V4.4H11.275C12.4632 4.4 13.0572 4.4 13.5258 4.59411C14.1507 4.85292 14.6471 5.34934 14.9059 5.97416C15.1 6.44277 15.1 7.03685 15.1 8.225H16.375C17.5486 8.225 18.5 9.1764 18.5 10.35C18.5 11.5236 17.5486 12.475 16.375 12.475H15.1V13.92C15.1 15.3481 15.1 16.0622 14.8221 16.6077C14.5776 17.0875 14.1875 17.4776 13.7077 17.7221C13.1622 18 12.4481 18 11.02 18H10.425V16.5125C10.425 15.4563 9.56874 14.6 8.5125 14.6C7.45626 14.6 6.6 15.4563 6.6 16.5125V18H5.58C4.15187 18 3.4378 18 2.89232 17.7221C2.41251 17.4776 2.02241 17.0875 1.77793 16.6077C1.5 16.0622 1.5 15.3481 1.5 13.92V12.475H2.775C3.94861 12.475 4.9 11.5236 4.9 10.35C4.9 9.1764 3.94861 8.225 2.775 8.225H1.5C1.5 7.03685 1.5 6.44277 1.69411 5.97416C1.95292 5.34934 2.44934 4.85292 3.07416 4.59411C3.54277 4.4 4.13685 4.4 5.325 4.4H6.175V3.125Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
path: '/third-party',
|
||||
},
|
||||
] satisfies MenuItemInterface[] as MenuItemInterface[];
|
||||
|
||||
const secondMenu = [
|
||||
{
|
||||
name: t('affiliate', 'Affiliate'),
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="21"
|
||||
viewBox="0 0 20 21"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M15.0004 6.467C14.9504 6.45866 14.8921 6.45866 14.8421 6.467C13.6921 6.42533 12.7754 5.48366 12.7754 4.31699C12.7754 3.12533 13.7337 2.16699 14.9254 2.16699C16.1171 2.16699 17.0754 3.13366 17.0754 4.31699C17.0671 5.48366 16.1504 6.42533 15.0004 6.467Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.1419 12.5338C15.2836 12.7255 16.5419 12.5255 17.4253 11.9338C18.6003 11.1505 18.6003 9.86713 17.4253 9.08379C16.5336 8.49213 15.2586 8.29212 14.1169 8.49212"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.97466 6.467C5.02466 6.45866 5.08299 6.45866 5.13299 6.467C6.28299 6.42533 7.19966 5.48366 7.19966 4.31699C7.19966 3.12533 6.24133 2.16699 5.04966 2.16699C3.85799 2.16699 2.89966 3.13366 2.89966 4.31699C2.90799 5.48366 3.82466 6.42533 4.97466 6.467Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.83304 12.5338C4.69137 12.7255 3.43304 12.5255 2.54971 11.9338C1.37471 11.1505 1.37471 9.86713 2.54971 9.08379C3.44137 8.49213 4.71637 8.29212 5.85804 8.49212"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.0001 12.6916C9.95014 12.6833 9.89181 12.6833 9.84181 12.6916C8.69181 12.6499 7.77515 11.7083 7.77515 10.5416C7.77515 9.34994 8.73348 8.3916 9.92514 8.3916C11.1168 8.3916 12.0751 9.35827 12.0751 10.5416C12.0668 11.7083 11.1501 12.6583 10.0001 12.6916Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.5751 15.3158C6.4001 16.0992 6.4001 17.3825 7.5751 18.1658C8.90843 19.0575 11.0918 19.0575 12.4251 18.1658C13.6001 17.3825 13.6001 16.0992 12.4251 15.3158C11.1001 14.4325 8.90843 14.4325 7.5751 15.3158Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
path: 'https://affiliate.postiz.com',
|
||||
role: ['ADMIN', 'SUPERADMIN', 'USER'],
|
||||
requireBilling: true,
|
||||
},
|
||||
{
|
||||
name: t('billing', 'Billing'),
|
||||
icon: 'billing',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="21"
|
||||
viewBox="0 0 20 21"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7.08341 12.7225C7.08341 13.7964 7.95397 14.667 9.02786 14.667H10.8334C11.984 14.667 12.9167 13.7343 12.9167 12.5837C12.9167 11.4331 11.984 10.5003 10.8334 10.5003H9.16675C8.01615 10.5003 7.08341 9.56759 7.08341 8.41699C7.08341 7.2664 8.01615 6.33366 9.16675 6.33366H10.9723C12.0462 6.33366 12.9167 7.20422 12.9167 8.2781M10.0001 5.08366V6.33366M10.0001 14.667V15.917M18.3334 10.5003C18.3334 15.1027 14.6025 18.8337 10.0001 18.8337C5.39771 18.8337 1.66675 15.1027 1.66675 10.5003C1.66675 5.89795 5.39771 2.16699 10.0001 2.16699C14.6025 2.16699 18.3334 5.89795 18.3334 10.5003Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
path: '/billing',
|
||||
role: ['ADMIN', 'SUPERADMIN'],
|
||||
requireBilling: true,
|
||||
},
|
||||
{
|
||||
name: t('settings', 'Settings'),
|
||||
icon: 'settings',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="21"
|
||||
viewBox="0 0 20 21"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7.82912 16.6429L8.31616 17.7383C8.46094 18.0644 8.69722 18.3414 8.99635 18.5358C9.29547 18.7303 9.64458 18.8337 10.0013 18.8337C10.3581 18.8337 10.7072 18.7303 11.0063 18.5358C11.3055 18.3414 11.5417 18.0644 11.6865 17.7383L12.1736 16.6429C12.3469 16.2542 12.6386 15.9302 13.0069 15.717C13.3776 15.5032 13.8063 15.4121 14.2319 15.4568L15.4236 15.5837C15.7783 15.6212 16.1363 15.555 16.4541 15.3931C16.772 15.2312 17.0361 14.9806 17.2143 14.6716C17.3928 14.3628 17.4778 14.0089 17.4591 13.6527C17.4403 13.2966 17.3186 12.9535 17.1087 12.6651L16.4032 11.6957C16.152 11.3479 16.0177 10.9293 16.0199 10.5003C16.0198 10.0725 16.1553 9.65562 16.4069 9.30959L17.1125 8.34014C17.3223 8.05179 17.444 7.70872 17.4628 7.35255C17.4815 6.99639 17.3965 6.64244 17.218 6.33366C17.0398 6.02469 16.7757 5.77407 16.4578 5.61218C16.14 5.4503 15.782 5.3841 15.4273 5.42162L14.2356 5.54847C13.81 5.59317 13.3813 5.50209 13.0106 5.28829C12.6415 5.07387 12.3498 4.74812 12.1773 4.35773L11.6865 3.26236C11.5417 2.9363 11.3055 2.65925 11.0063 2.46482C10.7072 2.27039 10.3581 2.16693 10.0013 2.16699C9.64458 2.16693 9.29547 2.27039 8.99635 2.46482C8.69722 2.65925 8.46094 2.9363 8.31616 3.26236L7.82912 4.35773C7.65656 4.74812 7.36485 5.07387 6.99579 5.28829C6.62513 5.50209 6.19634 5.59317 5.77079 5.54847L4.57542 5.42162C4.22069 5.3841 3.8627 5.4503 3.54485 5.61218C3.22699 5.77407 2.96293 6.02469 2.78468 6.33366C2.60619 6.64244 2.52116 6.99639 2.5399 7.35255C2.55864 7.70872 2.68034 8.05179 2.89023 8.34014L3.59579 9.30959C3.8474 9.65562 3.9829 10.0725 3.98282 10.5003C3.9829 10.9282 3.8474 11.345 3.59579 11.6911L2.89023 12.6605C2.68034 12.9489 2.55864 13.2919 2.5399 13.6481C2.52116 14.0043 2.60619 14.3582 2.78468 14.667C2.96311 14.9758 3.2272 15.2263 3.54501 15.3882C3.86282 15.55 4.22072 15.6163 4.57542 15.579L5.76708 15.4522C6.19264 15.4075 6.62143 15.4986 6.99208 15.7124C7.36252 15.9262 7.65559 16.252 7.82912 16.6429Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.99985 13.0003C11.3806 13.0003 12.4999 11.881 12.4999 10.5003C12.4999 9.11961 11.3806 8.00033 9.99985 8.00033C8.61914 8.00033 7.49985 9.11961 7.49985 10.5003C7.49985 11.881 8.61914 13.0003 9.99985 13.0003Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
path: '/settings',
|
||||
role: ['ADMIN', 'SUPERADMIN'],
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
name: t('affiliate', 'Affiliate'),
|
||||
icon: 'affiliate',
|
||||
path: 'https://affiliate.postiz.com',
|
||||
role: ['ADMIN', 'SUPERADMIN', 'USER'],
|
||||
requireBilling: true,
|
||||
},
|
||||
];
|
||||
] satisfies MenuItemInterface[] as MenuItemInterface[];
|
||||
|
||||
return {
|
||||
all: [...firstMenu, ...secondMenu],
|
||||
firstMenu,
|
||||
secondMenu,
|
||||
};
|
||||
};
|
||||
|
||||
export const TopMenu: FC = () => {
|
||||
const path = usePathname();
|
||||
const user = useUser();
|
||||
const { billingEnabled } = useVariables();
|
||||
const menuItems = useMenuItems();
|
||||
const { firstMenu, secondMenu } = useMenuItem();
|
||||
const { isGeneral, billingEnabled } = useVariables();
|
||||
return (
|
||||
<div className="flex flex-col h-full animate-normalFadeDown order-3 md:order-2 col-span-2 md:col-span-1">
|
||||
<ul className="gap-0 md:gap-1 flex flex-1 items-center text-[18px]">
|
||||
{menuItems
|
||||
<>
|
||||
<div className="flex flex-1 flex-col gap-[16px]">
|
||||
{
|
||||
// @ts-ignore
|
||||
user?.orgId &&
|
||||
// @ts-ignore
|
||||
(user.tier !== 'FREE' || !isGeneral || !billingEnabled) &&
|
||||
firstMenu
|
||||
.filter((f) => {
|
||||
if (f.hide) {
|
||||
return false;
|
||||
}
|
||||
if (f.requireBilling && !billingEnabled) {
|
||||
return false;
|
||||
}
|
||||
if (f.name === 'Billing' && user?.isLifetime) {
|
||||
return false;
|
||||
}
|
||||
if (f.role) {
|
||||
return f.role.includes(user?.role!);
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((item, index) => (
|
||||
<MenuItem
|
||||
path={item.path}
|
||||
label={item.name}
|
||||
icon={item.icon}
|
||||
key={item.name}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="flex flex-col gap-[16px]">
|
||||
{secondMenu
|
||||
.filter((f) => {
|
||||
if (f.hide) {
|
||||
return false;
|
||||
|
|
@ -103,34 +304,14 @@ export const TopMenu: FC = () => {
|
|||
return true;
|
||||
})
|
||||
.map((item, index) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
prefetch={true}
|
||||
target={item.path.indexOf('http') > -1 ? '_blank' : '_self'}
|
||||
href={item.path}
|
||||
className={clsx(
|
||||
'flex gap-2 items-center box px-[6px] md:px-[24px] py-[8px]',
|
||||
menuItems
|
||||
.filter((f) => {
|
||||
if (f.hide) {
|
||||
return false;
|
||||
}
|
||||
if (f.role) {
|
||||
return f.role.includes(user?.role!);
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((p) => (path.indexOf(p.path) > -1 ? index : -1))
|
||||
.indexOf(index) === index
|
||||
? 'text-primary showbox'
|
||||
: 'text-gray'
|
||||
)}
|
||||
>
|
||||
<span>{item.name}</span>
|
||||
</Link>
|
||||
</li>
|
||||
<MenuItem
|
||||
path={item.path}
|
||||
label={item.name}
|
||||
icon={item.icon}
|
||||
key={item.name}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -156,6 +156,7 @@ export const showMediaBox = (
|
|||
const CHUNK_SIZE = 1024 * 1024;
|
||||
export const MediaBox: FC<{
|
||||
setMedia: (params: { id: string; path: string }[]) => void;
|
||||
standalone?: boolean;
|
||||
type?: 'image' | 'video';
|
||||
closeModal: () => void;
|
||||
}> = (props) => {
|
||||
|
|
@ -182,6 +183,9 @@ export const MediaBox: FC<{
|
|||
|
||||
const setNewMedia = useCallback(
|
||||
(media: Media) => () => {
|
||||
if (props.standalone) {
|
||||
return;
|
||||
}
|
||||
setSelectedMedia(
|
||||
selectedMedia.find((p) => p.id === media.id)
|
||||
? selectedMedia.filter((f) => f.id !== media.id)
|
||||
|
|
@ -200,12 +204,18 @@ export const MediaBox: FC<{
|
|||
|
||||
const addNewMedia = useCallback(
|
||||
(media: Media[]) => () => {
|
||||
if (props.standalone) {
|
||||
return;
|
||||
}
|
||||
setSelectedMedia((currentMedia) => [...currentMedia, ...media]);
|
||||
// closeModal();
|
||||
},
|
||||
[selectedMedia]
|
||||
);
|
||||
const addMedia = useCallback(async () => {
|
||||
if (props.standalone) {
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
setMedia(selectedMedia);
|
||||
closeModal();
|
||||
|
|
@ -223,6 +233,11 @@ export const MediaBox: FC<{
|
|||
0,
|
||||
untilLastMedia === -1 ? newData.results.length : untilLastMedia
|
||||
);
|
||||
|
||||
if (props.standalone) {
|
||||
return;
|
||||
}
|
||||
|
||||
addNewMedia(onlyNewMedia)();
|
||||
},
|
||||
[mutate, addNewMedia, mediaList, selectedMedia]
|
||||
|
|
@ -290,6 +305,9 @@ export const MediaBox: FC<{
|
|||
},
|
||||
[mutate]
|
||||
);
|
||||
|
||||
const refNew = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.pages) {
|
||||
setPages(data.pages);
|
||||
|
|
@ -299,37 +317,69 @@ export const MediaBox: FC<{
|
|||
}
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
refNew?.current?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}, []);
|
||||
|
||||
const t = useT();
|
||||
|
||||
return (
|
||||
<div className="removeEditor fixed start-0 top-0 bg-primary/80 z-[300] w-full min-h-full p-4 md:p-[60px] animate-fade">
|
||||
<div className="max-w-[1000px] w-full h-full bg-sixth border-tableBorder border-2 rounded-xl relative mx-auto">
|
||||
<div
|
||||
{...(props.standalone
|
||||
? {
|
||||
className:
|
||||
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all',
|
||||
}
|
||||
: {
|
||||
ref: refNew,
|
||||
className:
|
||||
'removeEditor fixed start-0 top-0 bg-primary/80 z-[300] w-full min-h-full p-4 md:p-[60px] animate-fade',
|
||||
})}
|
||||
>
|
||||
<div
|
||||
{...(props.standalone
|
||||
? {}
|
||||
: {
|
||||
className:
|
||||
'max-w-[1000px] w-full h-full bg-newBgColorInner border-tableBorder border-2 rounded-xl relative mx-auto',
|
||||
})}
|
||||
>
|
||||
<DropFiles onDrop={dragAndDrop}>
|
||||
<div className="pb-[20px] px-[20px] w-full h-full">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex-1">
|
||||
<TopTitle title="Media Library" />
|
||||
{!props.standalone ? (
|
||||
<TopTitle title="Media Library" />
|
||||
) : (
|
||||
<div className="h-[100px]" />
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="outline-none z-[300] absolute end-[20px] top-[15px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
{!props.standalone ? (
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="outline-none z-[300] absolute end-[20px] top-[15px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
||||
<div className="absolute flex justify-center mt-[55px] items-center pointer-events-none text-center h-[57px] w-full start-0 rounded-lg transition-all group text-sm font-semibold bg-transparent text-gray-800 hover:bg-gray-100 focus:text-primary-500">
|
||||
{t(
|
||||
|
|
@ -402,7 +452,10 @@ export const MediaBox: FC<{
|
|||
<>
|
||||
{selectedMedia.length > 0 && (
|
||||
<div className="flex justify-center absolute top-[7px] text-white">
|
||||
<Button onClick={addMedia} className="!text-white">
|
||||
<Button
|
||||
onClick={props.standalone ? () => {} : addMedia}
|
||||
className="!text-white"
|
||||
>
|
||||
<span className="!text-white">
|
||||
{t('add_selected_media', 'Add selected media')}
|
||||
</span>
|
||||
|
|
@ -429,11 +482,11 @@ export const MediaBox: FC<{
|
|||
? 'border-4 border-forth'
|
||||
: 'border-tableBorder border-2'
|
||||
)}
|
||||
onClick={setNewMedia(media)}
|
||||
onClick={props.standalone ? () => {} : setNewMedia(media)}
|
||||
>
|
||||
<div
|
||||
onClick={removeItem(media)}
|
||||
className="border border-red-400 !text-white flex justify-center items-center absolute w-[20px] h-[20px] rounded-full bg-red-700 -top-[5px] -end-[5px]"
|
||||
className="border border-red-400 !text-white flex justify-center items-center absolute w-[20px] z-[100] h-[20px] rounded-full bg-red-700 -top-[5px] -end-[5px]"
|
||||
>
|
||||
X
|
||||
</div>
|
||||
|
|
@ -576,7 +629,7 @@ export const MultiMediaComponent: FC<{
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-[8px] bg-input rounded-bl-[8px] select-none w-full">
|
||||
<div className="flex flex-col gap-[8px] bg-bigStrip rounded-bl-[8px] select-none w-full">
|
||||
{modal && <MediaBox setMedia={changeMedia} closeModal={showModal} />}
|
||||
{mediaModal && !!user?.tier?.ai && !dummy && (
|
||||
<Polonto setMedia={changeMedia} closeModal={closeDesignModal} />
|
||||
|
|
@ -585,7 +638,7 @@ export const MultiMediaComponent: FC<{
|
|||
<div className="flex gap-[10px]">
|
||||
<Button
|
||||
onClick={showModal}
|
||||
className="ms-[10px] !px-[0] !h-[80px] w-[80px] rounded-[4px] mb-[10px] gap-[8px] !text-primary justify-center items-center flex border border-dashed border-customColor21 bg-input"
|
||||
className="ms-[10px] !px-[0] !h-[80px] w-[80px] rounded-[4px] mb-[10px] gap-[8px] !text-primary justify-center items-center flex border border-dashed border-newBgLineColor bg-newColColor"
|
||||
>
|
||||
<div className="flex flex-col gap-[5px] items-center">
|
||||
<div>
|
||||
|
|
@ -681,11 +734,11 @@ export const MultiMediaComponent: FC<{
|
|||
)}
|
||||
</div>
|
||||
{!dummy && (
|
||||
<div className="flex gap-[10px] bg-customColor55 w-full">
|
||||
<div className="flex gap-[10px] bg-newBgLineColor w-full">
|
||||
<div className="flex py-[10px]">
|
||||
<Button
|
||||
onClick={designMedia}
|
||||
className="ms-[10px] rounded-[4px] gap-[8px] !text-primary justify-center items-center w-[127px] flex border border-dashed border-customColor21 bg-input"
|
||||
className="ms-[10px] rounded-[4px] gap-[8px] !text-primary justify-center items-center w-[127px] flex border border-dashed border-newBgLineColor bg-newColColor"
|
||||
>
|
||||
<div className="flex gap-[5px] items-center">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -569,8 +569,8 @@ export const Editor: FC<{
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className="relative bg-customColor2" id={id}>
|
||||
<div className="flex gap-[5px] bg-customColor55 border-b border-t border-customColor3 justify-center items-center p-[5px]">
|
||||
<div className="relative bg-bigStrip" id={id}>
|
||||
<div className="flex gap-[5px] bg-newBgLineColor border-b border-t border-customColor3 justify-center items-center p-[5px]">
|
||||
<SignatureBox editor={editorRef?.current?.editor} />
|
||||
<UText
|
||||
editor={editorRef?.current?.editor}
|
||||
|
|
@ -664,7 +664,7 @@ export const Editor: FC<{
|
|||
</div>
|
||||
<div className="w-full h-[46px] pointer-events-none" />
|
||||
<div
|
||||
className="flex bg-customColor2"
|
||||
className="flex bg-newBgLineColor"
|
||||
onClick={() => {
|
||||
if (editorRef?.current?.editor?.isFocused) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -195,9 +195,7 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
p?.integration?.identifier || ''
|
||||
);
|
||||
const totalCharacters =
|
||||
weightedLength > strip.length
|
||||
? weightedLength
|
||||
: strip.length;
|
||||
weightedLength > strip.length ? weightedLength : strip.length;
|
||||
|
||||
return totalCharacters > (p.maximumCharacters || 1000000);
|
||||
});
|
||||
|
|
@ -314,16 +312,18 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
<>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex flex-col md:flex-row p-[10px] rounded-[4px] bg-modalCustom gap-[20px]'
|
||||
'flex flex-col md:flex-row bg-newBgLineColor gap-[1px] rounded-[24px]'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex flex-1 flex-col gap-[16px] transition-all duration-700 whitespace-nowrap'
|
||||
'flex flex-1 flex-col gap-[16px] transition-all duration-700 whitespace-nowrap bg-newBgColorInner rounded-s-[24px]'
|
||||
)}
|
||||
>
|
||||
<div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-customColor6 bg-sixth p-[16px] pt-0">
|
||||
<div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] p-[24px] pt-0">
|
||||
<TopTitle
|
||||
extraClass="h-[75px]"
|
||||
titleSize="text-[24px]"
|
||||
title={
|
||||
dummy
|
||||
? 'Generate an API request'
|
||||
|
|
@ -350,8 +350,8 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative min-h-[68px] flex flex-col rounded-[4px] border border-customColor6 bg-sixth">
|
||||
<div className="gap-[10px] relative flex flex-col justify-center items-center min-h-full pe-[16px]">
|
||||
<div className="relative min-h-[68px] flex flex-col rounded-[4px]">
|
||||
<div className="gap-[10px] relative flex flex-col justify-center items-center min-h-full px-[24px]">
|
||||
<div
|
||||
id="add-edit-post-dialog-buttons"
|
||||
className="flex flex-row flex-wrap w-full h-full gap-[10px] justify-end items-center"
|
||||
|
|
@ -453,11 +453,11 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex-grow w-[650px] max-w-[650px] min-w-[650px] flex gap-[20px] flex-col rounded-[4px] border-customColor6 bg-sixth flex-1 transition-all duration-700'
|
||||
'px-[24px] flex-grow rounded-e-[24px] w-[650px] max-w-[650px] min-w-[650px] flex gap-[20px] flex-col rounded-[4px] bg-newBgColorInner border-newBgLineColor flex-1 transition-all duration-700'
|
||||
)}
|
||||
>
|
||||
<div className="mx-[16px]">
|
||||
<TopTitle title="" removeTitle={true}>
|
||||
<div>
|
||||
<TopTitle title="" removeTitle={true} extraClass="h-[75px]">
|
||||
<div className="flex flex-1 gap-[10px]">
|
||||
<div>
|
||||
{!dummy && (
|
||||
|
|
@ -492,7 +492,7 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
</svg>
|
||||
</TopTitle>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col p-[16px] pt-0">
|
||||
<div className="flex-1 flex flex-col pt-0 pb-[24px]">
|
||||
<ShowAllProviders ref={ref} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
import { FC, ReactNode, useEffect, useRef } from 'react';
|
||||
import { useModals } from '@mantine/modals';
|
||||
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
|
||||
export const ModalWrapperComponent: FC<{
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
customClose?: () => void;
|
||||
ask?: boolean;
|
||||
}> = ({ title, children, ask, customClose }) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const modal = useModals();
|
||||
const t = useT();
|
||||
const closeModal = async () => {
|
||||
if (
|
||||
ask &&
|
||||
!(await deleteDialog(
|
||||
t(
|
||||
'are_you_sure_you_want_to_close_the_window',
|
||||
'Are you sure you want to close the window?'
|
||||
),
|
||||
t('yes_close', 'Yes, close')
|
||||
))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (customClose) {
|
||||
customClose();
|
||||
return;
|
||||
}
|
||||
|
||||
modal.closeAll();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
ref?.current?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative">
|
||||
<div className="absolute -top-[30px] left-0" ref={ref} />
|
||||
</div>
|
||||
<div
|
||||
className="p-[32px] flex flex-col text-newTextColor bg-newBgColorInner rounded-[24px]"
|
||||
>
|
||||
<div className="flex items-start mb-[24px]">
|
||||
<div className="flex-1 text-[24px]">{title}</div>
|
||||
<div className="cursor-pointer" onClick={closeModal}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="21"
|
||||
viewBox="0 0 21 21"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M16.5 4.5L4.5 16.5M4.5 4.5L16.5 16.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -21,6 +21,7 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
|||
import useSWR from 'swr';
|
||||
import { InternalChannels } from '@gitroom/frontend/components/launches/internal.channels';
|
||||
import { capitalize } from 'lodash';
|
||||
import clsx from 'clsx';
|
||||
|
||||
class Empty {
|
||||
@IsOptional()
|
||||
|
|
@ -240,30 +241,27 @@ export const withProvider = function <T extends object>(params: {
|
|||
>
|
||||
<FormProvider {...form}>
|
||||
<div className={current ? '' : 'hidden'}>
|
||||
<div className="flex gap-[4px] mb-[20px]">
|
||||
<div className="flex gap-[4px] mb-[20px] p-[4px] border border-newTableBorder rounded-[8px]">
|
||||
<div className="flex-1 flex">
|
||||
<Button
|
||||
<div
|
||||
onClick={() => setTab(0)}
|
||||
secondary={tab !== 0 && !!SettingsComponent}
|
||||
className="rounded-[4px] flex-1 overflow-hidden whitespace-nowrap"
|
||||
className={clsx("cursor-pointer rounded-[4px] flex-1 overflow-hidden whitespace-nowrap text-center pt-[6px] pb-[5px]", tab !== 0 && !!SettingsComponent ? '' : 'text-textItemFocused bg-boxFocused')}
|
||||
>
|
||||
{t('preview', 'Preview')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{current &&
|
||||
(!!SettingsComponent || !!data?.internalPlugs?.length) && (
|
||||
<div className="flex-1 flex">
|
||||
<Button
|
||||
<div
|
||||
onClick={() => setTab(1)}
|
||||
secondary={tab !== 1}
|
||||
className="rounded-[4px] flex-1 overflow-hidden whitespace-nowrap"
|
||||
className={clsx("cursor-pointer rounded-[4px] flex-1 overflow-hidden whitespace-nowrap text-center pt-[6px] pb-[5px]", tab !== 1 ? '' : 'text-textItemFocused bg-boxFocused')}
|
||||
>
|
||||
{t('settings', 'Settings')} (
|
||||
{capitalize(
|
||||
selectedIntegration.integration.identifier.split('-')[0]
|
||||
)}
|
||||
)
|
||||
</Button>
|
||||
)})
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -183,10 +183,10 @@ export const ShowAllProviders = forwardRef((props, ref) => {
|
|||
}}
|
||||
>
|
||||
<div className="flex gap-[4px] mb-[20px]">
|
||||
<div className="flex-1 flex">
|
||||
<Button className="rounded-[4px] flex-1 overflow-hidden whitespace-nowrap">
|
||||
<div className="flex-1 flex p-[4px] border border-newTableBorder rounded-[8px]">
|
||||
<div className="rounded-[4px] flex-1 overflow-hidden whitespace-nowrap text-center pt-[6px] pb-[5px] text-textItemFocused bg-boxFocused">
|
||||
{t('preview', 'Preview')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{global?.[0]?.content?.length === 0 ? (
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export const SelectCurrent: FC = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="left-0 absolute w-full z-[100] px-[16px]">
|
||||
<div className="left-0 absolute w-full z-[100] px-[24px]">
|
||||
<div
|
||||
ref={contentRef}
|
||||
className={clsx(
|
||||
|
|
@ -85,7 +85,7 @@ export const SelectCurrent: FC = () => {
|
|||
setHide(true);
|
||||
setCurrent('global');
|
||||
}}
|
||||
className="cursor-pointer flex gap-[8px] items-center bg-customColor2 p-[10px] rounded-tl-[4px] rounded-tr-[4px]"
|
||||
className="cursor-pointer flex gap-[8px] items-center bg-newBgLineColor p-[10px] rounded-tl-[4px] rounded-tr-[4px]"
|
||||
>
|
||||
<div className={clsx(current !== 'global' ? 'opacity-40' : '')}>
|
||||
<svg
|
||||
|
|
@ -109,7 +109,7 @@ export const SelectCurrent: FC = () => {
|
|||
setCurrent(integration.id);
|
||||
}}
|
||||
key={integration.id}
|
||||
className="cursor-pointer flex gap-[8px] items-center bg-customColor2 p-[10px] rounded-tl-[4px] rounded-tr-[4px]"
|
||||
className="cursor-pointer flex gap-[8px] items-center bg-newBgLineColor p-[10px] rounded-tl-[4px] rounded-tr-[4px]"
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
import { BillingComponent } from '@gitroom/frontend/components/billing/billing.component';
|
||||
import { useUser } from '@gitroom/frontend/components/layout/user.context';
|
||||
import { useVariables } from '@gitroom/react/helpers/variable.context';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { Logo } from '@gitroom/frontend/components/new-layout/logo';
|
||||
|
||||
export const BillingAfter = () => {
|
||||
const user = useUser();
|
||||
const { isGeneral, billingEnabled } = useVariables();
|
||||
const t = useT();
|
||||
return (
|
||||
<div className="flex-1 rounded-3xl px-0 py-[17px] flex flex-col max-w-[1440px] mx-auto">
|
||||
<div className="flex justify-center mb-[10px]"><Logo /></div>
|
||||
<div className="text-center mb-[20px] text-xl [@media(max-width:1024px)]:text-xl">
|
||||
<h1 className="text-3xl [@media(max-width:1024px)]:text-xl">
|
||||
{t(
|
||||
'join_10000_entrepreneurs_who_use_postiz',
|
||||
'Join 10,000+ Entrepreneurs Who Use Postiz'
|
||||
)}
|
||||
<br />
|
||||
{t(
|
||||
'to_manage_all_your_social_media_channels',
|
||||
'To Manage All Your Social Media Channels'
|
||||
)}
|
||||
</h1>
|
||||
<br />
|
||||
{user?.allowTrial && (
|
||||
<div className="table mx-auto">
|
||||
<div className="flex gap-[5px] items-center">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M16.2806 9.21937C16.3504 9.28903 16.4057 9.37175 16.4434 9.46279C16.4812 9.55384 16.5006 9.65144 16.5006 9.75C16.5006 9.84856 16.4812 9.94616 16.4434 10.0372C16.4057 10.1283 16.3504 10.211 16.2806 10.2806L11.0306 15.5306C10.961 15.6004 10.8783 15.6557 10.7872 15.6934C10.6962 15.7312 10.5986 15.7506 10.5 15.7506C10.4014 15.7506 10.3038 15.7312 10.2128 15.6934C10.1218 15.6557 10.039 15.6004 9.96938 15.5306L7.71938 13.2806C7.57865 13.1399 7.49959 12.949 7.49959 12.75C7.49959 12.551 7.57865 12.3601 7.71938 12.2194C7.86011 12.0786 8.05098 11.9996 8.25 11.9996C8.44903 11.9996 8.6399 12.0786 8.78063 12.2194L10.5 13.9397L15.2194 9.21937C15.289 9.14964 15.3718 9.09432 15.4628 9.05658C15.5538 9.01884 15.6514 8.99941 15.75 8.99941C15.8486 8.99941 15.9462 9.01884 16.0372 9.05658C16.1283 9.09432 16.211 9.14964 16.2806 9.21937ZM21.75 12C21.75 13.9284 21.1782 15.8134 20.1068 17.4168C19.0355 19.0202 17.5127 20.2699 15.7312 21.0078C13.9496 21.7458 11.9892 21.9389 10.0979 21.5627C8.20656 21.1865 6.46928 20.2579 5.10571 18.8943C3.74215 17.5307 2.81355 15.7934 2.43735 13.9021C2.06114 12.0108 2.25422 10.0504 2.99218 8.26884C3.73013 6.48726 4.97982 4.96451 6.58319 3.89317C8.18657 2.82183 10.0716 2.25 12 2.25C14.585 2.25273 17.0634 3.28084 18.8913 5.10872C20.7192 6.93661 21.7473 9.41498 21.75 12ZM20.25 12C20.25 10.3683 19.7661 8.77325 18.8596 7.41655C17.9531 6.05984 16.6646 5.00242 15.1571 4.37799C13.6497 3.75357 11.9909 3.59019 10.3905 3.90852C8.79017 4.22685 7.32016 5.01259 6.16637 6.16637C5.01259 7.32015 4.22685 8.79016 3.90853 10.3905C3.5902 11.9908 3.75358 13.6496 4.378 15.1571C5.00242 16.6646 6.05984 17.9531 7.41655 18.8596C8.77326 19.7661 10.3683 20.25 12 20.25C14.1873 20.2475 16.2843 19.3775 17.8309 17.8309C19.3775 16.2843 20.2475 14.1873 20.25 12Z"
|
||||
fill="#06ff00"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{t('100_no_risk_trial', '100% no-risk trial')}</div>
|
||||
</div>
|
||||
<div className="flex gap-[5px] items-center">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M16.2806 9.21937C16.3504 9.28903 16.4057 9.37175 16.4434 9.46279C16.4812 9.55384 16.5006 9.65144 16.5006 9.75C16.5006 9.84856 16.4812 9.94616 16.4434 10.0372C16.4057 10.1283 16.3504 10.211 16.2806 10.2806L11.0306 15.5306C10.961 15.6004 10.8783 15.6557 10.7872 15.6934C10.6962 15.7312 10.5986 15.7506 10.5 15.7506C10.4014 15.7506 10.3038 15.7312 10.2128 15.6934C10.1218 15.6557 10.039 15.6004 9.96938 15.5306L7.71938 13.2806C7.57865 13.1399 7.49959 12.949 7.49959 12.75C7.49959 12.551 7.57865 12.3601 7.71938 12.2194C7.86011 12.0786 8.05098 11.9996 8.25 11.9996C8.44903 11.9996 8.6399 12.0786 8.78063 12.2194L10.5 13.9397L15.2194 9.21937C15.289 9.14964 15.3718 9.09432 15.4628 9.05658C15.5538 9.01884 15.6514 8.99941 15.75 8.99941C15.8486 8.99941 15.9462 9.01884 16.0372 9.05658C16.1283 9.09432 16.211 9.14964 16.2806 9.21937ZM21.75 12C21.75 13.9284 21.1782 15.8134 20.1068 17.4168C19.0355 19.0202 17.5127 20.2699 15.7312 21.0078C13.9496 21.7458 11.9892 21.9389 10.0979 21.5627C8.20656 21.1865 6.46928 20.2579 5.10571 18.8943C3.74215 17.5307 2.81355 15.7934 2.43735 13.9021C2.06114 12.0108 2.25422 10.0504 2.99218 8.26884C3.73013 6.48726 4.97982 4.96451 6.58319 3.89317C8.18657 2.82183 10.0716 2.25 12 2.25C14.585 2.25273 17.0634 3.28084 18.8913 5.10872C20.7192 6.93661 21.7473 9.41498 21.75 12ZM20.25 12C20.25 10.3683 19.7661 8.77325 18.8596 7.41655C17.9531 6.05984 16.6646 5.00242 15.1571 4.37799C13.6497 3.75357 11.9909 3.59019 10.3905 3.90852C8.79017 4.22685 7.32016 5.01259 6.16637 6.16637C5.01259 7.32015 4.22685 8.79016 3.90853 10.3905C3.5902 11.9908 3.75358 13.6496 4.378 15.1571C5.00242 16.6646 6.05984 17.9531 7.41655 18.8596C8.77326 19.7661 10.3683 20.25 12 20.25C14.1873 20.2475 16.2843 19.3775 17.8309 17.8309C19.3775 16.2843 20.2475 14.1873 20.25 12Z"
|
||||
fill="#06ff00"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
{t(
|
||||
'pay_nothing_for_the_first_7_days',
|
||||
'Pay nothing for the first 7 days'
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-[5px] items-center">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M16.2806 9.21937C16.3504 9.28903 16.4057 9.37175 16.4434 9.46279C16.4812 9.55384 16.5006 9.65144 16.5006 9.75C16.5006 9.84856 16.4812 9.94616 16.4434 10.0372C16.4057 10.1283 16.3504 10.211 16.2806 10.2806L11.0306 15.5306C10.961 15.6004 10.8783 15.6557 10.7872 15.6934C10.6962 15.7312 10.5986 15.7506 10.5 15.7506C10.4014 15.7506 10.3038 15.7312 10.2128 15.6934C10.1218 15.6557 10.039 15.6004 9.96938 15.5306L7.71938 13.2806C7.57865 13.1399 7.49959 12.949 7.49959 12.75C7.49959 12.551 7.57865 12.3601 7.71938 12.2194C7.86011 12.0786 8.05098 11.9996 8.25 11.9996C8.44903 11.9996 8.6399 12.0786 8.78063 12.2194L10.5 13.9397L15.2194 9.21937C15.289 9.14964 15.3718 9.09432 15.4628 9.05658C15.5538 9.01884 15.6514 8.99941 15.75 8.99941C15.8486 8.99941 15.9462 9.01884 16.0372 9.05658C16.1283 9.09432 16.211 9.14964 16.2806 9.21937ZM21.75 12C21.75 13.9284 21.1782 15.8134 20.1068 17.4168C19.0355 19.0202 17.5127 20.2699 15.7312 21.0078C13.9496 21.7458 11.9892 21.9389 10.0979 21.5627C8.20656 21.1865 6.46928 20.2579 5.10571 18.8943C3.74215 17.5307 2.81355 15.7934 2.43735 13.9021C2.06114 12.0108 2.25422 10.0504 2.99218 8.26884C3.73013 6.48726 4.97982 4.96451 6.58319 3.89317C8.18657 2.82183 10.0716 2.25 12 2.25C14.585 2.25273 17.0634 3.28084 18.8913 5.10872C20.7192 6.93661 21.7473 9.41498 21.75 12ZM20.25 12C20.25 10.3683 19.7661 8.77325 18.8596 7.41655C17.9531 6.05984 16.6646 5.00242 15.1571 4.37799C13.6497 3.75357 11.9909 3.59019 10.3905 3.90852C8.79017 4.22685 7.32016 5.01259 6.16637 6.16637C5.01259 7.32015 4.22685 8.79016 3.90853 10.3905C3.5902 11.9908 3.75358 13.6496 4.378 15.1571C5.00242 16.6646 6.05984 17.9531 7.41655 18.8596C8.77326 19.7661 10.3683 20.25 12 20.25C14.1873 20.2475 16.2843 19.3775 17.8309 17.8309C19.3775 16.2843 20.2475 14.1873 20.25 12Z"
|
||||
fill="#06ff00"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
{t('cancel_anytime_hassle_free', 'Cancel anytime, hassle-free')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<BillingComponent />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
'use client';
|
||||
|
||||
import { ReactNode, useCallback } from 'react';
|
||||
import { Logo } from '@gitroom/frontend/components/new-layout/logo';
|
||||
import { MenuItem } from '@gitroom/frontend/components/new-layout/menu-item';
|
||||
import { Plus_Jakarta_Sans } from 'next/font/google';
|
||||
const ModeComponent = dynamic(
|
||||
() => import('@gitroom/frontend/components/layout/mode.component'),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
import clsx from 'clsx';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { useVariables } from '@gitroom/react/helpers/variable.context';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import { CheckPayment } from '@gitroom/frontend/components/layout/check.payment';
|
||||
import { ToolTip } from '@gitroom/frontend/components/layout/top.tip';
|
||||
import { ShowMediaBoxModal } from '@gitroom/frontend/components/media/media.component';
|
||||
import { ShowLinkedinCompany } from '@gitroom/frontend/components/launches/helpers/linkedin.component';
|
||||
import { MediaSettingsLayout } from '@gitroom/frontend/components/launches/helpers/media.settings.component';
|
||||
import { Toaster } from '@gitroom/react/toaster/toaster';
|
||||
import { ShowPostSelector } from '@gitroom/frontend/components/post-url-selector/post.url.selector';
|
||||
import { NewSubscription } from '@gitroom/frontend/components/layout/new.subscription';
|
||||
import { Onboarding } from '@gitroom/frontend/components/onboarding/onboarding';
|
||||
import { Support } from '@gitroom/frontend/components/layout/support';
|
||||
import { ContinueProvider } from '@gitroom/frontend/components/layout/continue.provider';
|
||||
import { ContextWrapper } from '@gitroom/frontend/components/layout/user.context';
|
||||
import { CopilotKit } from '@copilotkit/react-core';
|
||||
import { MantineWrapper } from '@gitroom/react/helpers/mantine.wrapper';
|
||||
import { Impersonate } from '@gitroom/frontend/components/layout/impersonate';
|
||||
import { Title } from '@gitroom/frontend/components/layout/title';
|
||||
import { TopMenu } from '@gitroom/frontend/components/layout/top.menu';
|
||||
import { LanguageComponent } from '@gitroom/frontend/components/layout/language.component';
|
||||
import { ChromeExtensionComponent } from '@gitroom/frontend/components/layout/chrome.extension.component';
|
||||
import NotificationComponent from '@gitroom/frontend/components/notifications/notification.component';
|
||||
import { BillingAfter } from '@gitroom/frontend/components/new-layout/billing.after';
|
||||
|
||||
const jakartaSans = Plus_Jakarta_Sans({
|
||||
weight: ['600', '500'],
|
||||
style: ['normal', 'italic'],
|
||||
subsets: ['latin'],
|
||||
});
|
||||
|
||||
export const LayoutComponent = ({ children }: { children: ReactNode }) => {
|
||||
const fetch = useFetch();
|
||||
|
||||
const { backendUrl, billingEnabled, isGeneral } = useVariables();
|
||||
const searchParams = useSearchParams();
|
||||
const load = useCallback(async (path: string) => {
|
||||
return await (await fetch(path)).json();
|
||||
}, []);
|
||||
const { data: user, mutate } = useSWR('/user/self', load, {
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
revalidateIfStale: false,
|
||||
refreshWhenOffline: false,
|
||||
refreshWhenHidden: false,
|
||||
});
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<ContextWrapper user={user}>
|
||||
<CopilotKit
|
||||
credentials="include"
|
||||
runtimeUrl={backendUrl + '/copilot/chat'}
|
||||
>
|
||||
<MantineWrapper>
|
||||
{user.tier === 'FREE' && searchParams.get('check') && (
|
||||
<CheckPayment check={searchParams.get('check')!} mutate={mutate} />
|
||||
)}
|
||||
<ToolTip />
|
||||
<ShowMediaBoxModal />
|
||||
<ShowLinkedinCompany />
|
||||
<MediaSettingsLayout />
|
||||
<Toaster />
|
||||
<ShowPostSelector />
|
||||
<NewSubscription />
|
||||
{user.tier !== 'FREE' && <Onboarding />}
|
||||
<Support />
|
||||
<ContinueProvider />
|
||||
<div
|
||||
className={clsx(
|
||||
'flex flex-col min-h-screen min-w-screen text-newTextColor p-[12px]',
|
||||
jakartaSans.className
|
||||
)}
|
||||
>
|
||||
{/*<div>{user?.admin ? <Impersonate /> : <div />}</div>*/}
|
||||
{user.tier === 'FREE' && isGeneral && billingEnabled ? (
|
||||
<BillingAfter />
|
||||
) : (
|
||||
<div className="flex-1 flex gap-[8px]">
|
||||
<div className="flex flex-col bg-newBgColorInner w-[80px] rounded-[12px]">
|
||||
<div className="fixed h-full w-[64px] start-[17px] flex flex-1 top-0">
|
||||
<div className="flex flex-col h-full gap-[32px] flex-1 py-[12px]">
|
||||
<Logo />
|
||||
<TopMenu />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 bg-newBgLineColor rounded-[12px] overflow-hidden flex flex-col gap-[1px]">
|
||||
<div className="flex bg-newBgColorInner h-[80px] px-[20px] items-center">
|
||||
<div className="text-[24px] font-[600] flex flex-1">
|
||||
<Title />
|
||||
</div>
|
||||
<div className="flex gap-[20px] text-textItemBlur">
|
||||
<div className="hover:text-newTextColor">
|
||||
<ModeComponent />
|
||||
</div>
|
||||
<div className="w-[1px] h-[20px] bg-blockSeparator" />
|
||||
<LanguageComponent />
|
||||
<ChromeExtensionComponent />
|
||||
<div className="w-[1px] h-[20px] bg-blockSeparator" />
|
||||
<NotificationComponent />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-1 gap-[1px]">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</MantineWrapper>
|
||||
</CopilotKit>
|
||||
</ContextWrapper>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
'use client';
|
||||
|
||||
import { MediaBox } from '@gitroom/frontend/components/media/media.component';
|
||||
|
||||
export const MediaLayoutComponent = () => {
|
||||
return (
|
||||
<MediaBox setMedia={() => {}} closeModal={() => {}} standalone={true} />
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
'use client';
|
||||
|
||||
export const Logo = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="60"
|
||||
height="60"
|
||||
viewBox="0 0 60 60"
|
||||
fill="none"
|
||||
className="mt-[8px]"
|
||||
>
|
||||
<path
|
||||
d="M12.8816 11.4648C12.9195 12.0781 12.9731 12.7698 13.0342 13.5594L15.2408 42.0719C15.4874 45.2588 15.6107 46.8522 16.3251 48.0214C16.9535 49.0498 17.8913 49.853 19.0042 50.3156C20.2694 50.8416 21.8629 50.7183 25.0497 50.4717L46.8877 48.7817C48.9537 48.6218 50.3501 48.5137 51.3952 48.2628C51.0447 49.0858 50.5039 49.8189 49.8121 50.3992C48.7623 51.2797 47.205 51.6389 44.0905 52.3574L22.7476 57.2805C19.633 57.9989 18.0757 58.3581 16.7463 58.0264C15.5769 57.7346 14.5299 57.0801 13.7554 56.1566C12.8749 55.1069 12.5156 53.5496 11.7972 50.435L5.36942 22.569C4.651 19.4544 4.29178 17.8972 4.62351 16.5677C4.91531 15.3983 5.56982 14.3513 6.49325 13.5768C7.54303 12.6963 9.10032 12.3371 12.2149 11.6186L12.8816 11.4648Z"
|
||||
fill="#612BD3"
|
||||
/>
|
||||
<path
|
||||
d="M47.0122 2.5752C47.9217 2.57909 48.5299 2.67533 49.0386 2.88672C50.0099 3.29052 50.829 3.99206 51.3774 4.88965C51.6647 5.35982 51.8537 5.94554 51.9976 6.84375C52.1427 7.7505 52.2327 8.91127 52.3569 10.5166L54.564 39.0283C54.6882 40.6337 54.7769 41.7946 54.7729 42.7129C54.7691 43.6226 54.6729 44.2305 54.4614 44.7393C54.0576 45.7105 53.3561 46.5287 52.4585 47.0771C51.9883 47.3644 51.4027 47.5534 50.5044 47.6973C49.5977 47.8424 48.4376 47.9334 46.8325 48.0576L24.9937 49.748C23.3886 49.8723 22.2282 49.961 21.3101 49.957C20.4003 49.9531 19.7925 49.8561 19.2837 49.6445C18.3124 49.2407 17.4933 48.5402 16.9448 47.6426C16.6576 47.1724 16.4685 46.5867 16.3247 45.6885C16.1795 44.7817 16.0896 43.621 15.9653 42.0156L13.7583 13.5029C13.6341 11.8979 13.5454 10.7375 13.5493 9.81934C13.5532 8.90971 13.6494 8.30172 13.8608 7.79297C14.2646 6.82169 14.9662 6.00253 15.8638 5.4541C16.3339 5.16692 16.9197 4.97778 17.8179 4.83398C18.7246 4.68882 19.8854 4.59884 21.4907 4.47461L43.3286 2.78418C44.9336 2.65997 46.094 2.57129 47.0122 2.5752Z"
|
||||
stroke="#131019"
|
||||
stroke-width="1.45254"
|
||||
/>
|
||||
<path
|
||||
d="M21.5681 5.49237L43.4061 3.80233C45.0283 3.67679 46.1402 3.59211 47.007 3.59582C47.8534 3.59945 48.3108 3.69053 48.6454 3.82963C49.4173 4.15056 50.0679 4.70763 50.5037 5.421C50.6927 5.7302 50.853 6.16816 50.9868 7.00389C51.1239 7.85984 51.2113 8.97152 51.3368 10.5937L53.5434 39.1062C53.6689 40.7284 53.7536 41.8403 53.7499 42.7071C53.7463 43.5535 53.6552 44.0109 53.5161 44.3455C53.1952 45.1174 52.6381 45.7679 51.9247 46.2038C51.6155 46.3927 51.1776 46.5531 50.3418 46.6869C49.4859 46.824 48.3742 46.9114 46.752 47.0369L24.914 48.7269C23.2918 48.8525 22.1799 48.9372 21.3131 48.9335C20.4667 48.9298 20.0093 48.8387 19.6747 48.6996C18.9028 48.3787 18.2522 47.8216 17.8164 47.1083C17.6274 46.7991 17.4671 46.3611 17.3333 45.5254C17.1962 44.6694 17.1088 43.5578 16.9833 41.9356L14.7767 13.4231C14.6512 11.8009 14.5665 10.689 14.5702 9.82217C14.5738 8.97581 14.6649 8.51838 14.804 8.1838C15.1249 7.41186 15.682 6.76133 16.3954 6.32545C16.7046 6.13653 17.1425 5.97616 17.9783 5.84235C18.8342 5.70531 19.9459 5.61791 21.5681 5.49237Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M31.0188 12.0956L31.2277 14.7969C31.6025 14.3332 32.0909 13.9331 32.6929 13.5967C33.2931 13.2362 34.0374 13.0217 34.9259 12.953C35.7423 12.8899 36.5227 12.9865 37.2672 13.243C38.0357 13.4976 38.723 13.9517 39.3291 14.6054C39.9574 15.2332 40.4832 16.0983 40.9067 17.2009C41.3301 18.3035 41.604 19.6592 41.7284 21.268C41.8175 22.4205 41.7985 23.5814 41.6715 24.7507C41.5685 25.9182 41.3002 26.9776 40.8665 27.929C40.4328 28.8805 39.806 29.6777 38.9861 30.3209C38.1884 30.9381 37.1532 31.2959 35.8806 31.3943C34.9681 31.4649 34.2385 31.4005 33.6917 31.2012C33.143 30.9779 32.7236 30.7084 32.4335 30.3927L33.1102 39.145L28.0238 40.8427L25.8323 12.4966L31.0188 12.0956ZM33.9095 28.3944C34.5338 28.3462 35.0463 28.1012 35.4469 27.6596C35.8457 27.194 36.1392 26.6157 36.3273 25.9248C36.5395 25.2321 36.662 24.4738 36.6949 23.6499C36.75 22.8002 36.746 21.9672 36.6829 21.1508C36.5808 19.8301 36.38 18.7949 36.0804 18.0451C35.8049 17.2934 35.4972 16.7495 35.1572 16.4135C34.8153 16.0534 34.4846 15.8374 34.165 15.7655C33.8694 15.6918 33.6376 15.6614 33.4695 15.6744C33.0373 15.7078 32.6292 15.8963 32.2451 16.2401C31.8592 16.5598 31.5934 17.0272 31.4477 17.6423L32.2246 27.6913C32.3595 27.8741 32.5665 28.0514 32.8455 28.2231C33.1226 28.3707 33.4773 28.4278 33.9095 28.3944Z"
|
||||
fill="#131019"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
'use client';
|
||||
import { FC, ReactNode } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import clsx from 'clsx';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const MenuItem: FC<{ label: string; icon: ReactNode; path: string }> = ({
|
||||
label,
|
||||
icon,
|
||||
path,
|
||||
}) => {
|
||||
const currentPath = usePathname();
|
||||
const isActive = path.indexOf(currentPath) === 0;
|
||||
|
||||
return (
|
||||
<Link
|
||||
prefetch={true}
|
||||
href={path}
|
||||
className={clsx(
|
||||
'w-full h-[54px] py-[8px] px-[6px] gap-[4px] flex flex-col text-[10px] font-[600] items-center justify-center rounded-[12px] hover:text-textItemFocused hover:bg-boxFocused',
|
||||
isActive ? 'text-textItemFocused bg-boxFocused' : 'text-textItemBlur'
|
||||
)}
|
||||
>
|
||||
<div>{icon}</div>
|
||||
<div className="text-[10px]">{label}</div>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
|
@ -112,22 +112,31 @@ const NotificationComponent = () => {
|
|||
return (
|
||||
<div className="relative cursor-pointer select-none" ref={ref}>
|
||||
<div onClick={changeShow}>
|
||||
{data && data.total > 0 && (
|
||||
<div className="w-[13px] h-[13px] bg-red-500 rounded-full absolute -start-[2px] -top-[2px] text-[10px] text-center flex justify-center items-center">
|
||||
{data.total}
|
||||
</div>
|
||||
)}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
className="hover:text-newTextColor"
|
||||
>
|
||||
<path
|
||||
d="M20.7927 16.4944C20.2724 15.5981 19.4989 13.0622 19.4989 9.75C19.4989 7.76088 18.7087 5.85322 17.3022 4.4467C15.8957 3.04018 13.988 2.25 11.9989 2.25C10.0098 2.25 8.10214 3.04018 6.69561 4.4467C5.28909 5.85322 4.49891 7.76088 4.49891 9.75C4.49891 13.0631 3.72454 15.5981 3.20423 16.4944C3.07135 16.7222 3.00091 16.9811 3.00001 17.2449C2.9991 17.5086 3.06776 17.768 3.19907 17.9967C3.33037 18.2255 3.51968 18.4156 3.74789 18.5478C3.9761 18.6801 4.23515 18.7498 4.49891 18.75H8.32485C8.49789 19.5967 8.95806 20.3577 9.62754 20.9042C10.297 21.4507 11.1347 21.7492 11.9989 21.7492C12.8631 21.7492 13.7008 21.4507 14.3703 20.9042C15.0398 20.3577 15.4999 19.5967 15.673 18.75H19.4989C19.7626 18.7496 20.0215 18.6798 20.2496 18.5475C20.4777 18.4151 20.6669 18.225 20.7981 17.9963C20.9292 17.7676 20.9978 17.5083 20.9969 17.2446C20.9959 16.9809 20.9255 16.7222 20.7927 16.4944ZM11.9989 20.25C11.5337 20.2499 11.0801 20.1055 10.7003 19.8369C10.3205 19.5683 10.0333 19.1886 9.87829 18.75H14.1195C13.9645 19.1886 13.6773 19.5683 13.2975 19.8369C12.9178 20.1055 12.4641 20.2499 11.9989 20.25ZM4.49891 17.25C5.22079 16.0087 5.99891 13.1325 5.99891 9.75C5.99891 8.1587 6.63105 6.63258 7.75627 5.50736C8.88149 4.38214 10.4076 3.75 11.9989 3.75C13.5902 3.75 15.1163 4.38214 16.2416 5.50736C17.3668 6.63258 17.9989 8.1587 17.9989 9.75C17.9989 13.1297 18.7752 16.0059 19.4989 17.25H4.49891Z"
|
||||
fill="currentColor"
|
||||
d="M14 21H10M18 8C18 6.4087 17.3679 4.88258 16.2427 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.8826 2.63214 7.75738 3.75736C6.63216 4.88258 6.00002 6.4087 6.00002 8C6.00002 11.0902 5.22049 13.206 4.34968 14.6054C3.61515 15.7859 3.24788 16.3761 3.26134 16.5408C3.27626 16.7231 3.31488 16.7926 3.46179 16.9016C3.59448 17 4.19261 17 5.38887 17H18.6112C19.8074 17 20.4056 17 20.5382 16.9016C20.6852 16.7926 20.7238 16.7231 20.7387 16.5408C20.7522 16.3761 20.3849 15.7859 19.6504 14.6054C18.7795 13.206 18 11.0902 18 8Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
{data && data.total > 0 && (
|
||||
<circle
|
||||
cx="17.0625"
|
||||
cy="5"
|
||||
r="4"
|
||||
fill="#FF3EA2"
|
||||
stroke="#1A1919"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
</div>
|
||||
{show && <NotificationOpenComponent />}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { web3List } from '@gitroom/frontend/components/launches/web3/web3.list';
|
|||
import { timer } from '@gitroom/helpers/utils/timer';
|
||||
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { ModalWrapperComponent } from '@gitroom/frontend/components/new-launch/modal.wrapper.component';
|
||||
export const ConnectChannels: FC = () => {
|
||||
const fetch = useFetch();
|
||||
const { isGeneral } = useVariables();
|
||||
|
|
@ -33,17 +34,6 @@ export const ConnectChannels: FC = () => {
|
|||
}, []);
|
||||
const [reload, setReload] = useState(false);
|
||||
|
||||
// const getSocialLink = useCallback(
|
||||
// (identifier: string) => async () => {
|
||||
// const { url } = await (
|
||||
// await fetch('/integrations/social/' + identifier)
|
||||
// ).json();
|
||||
//
|
||||
// window.open(url, 'Social Connect', 'width=700,height=700');
|
||||
// },
|
||||
// []
|
||||
// );
|
||||
|
||||
const openWeb3 = async (id: string) => {
|
||||
const { component: Web3Providers } = web3List.find(
|
||||
(item) => item.identifier === id
|
||||
|
|
@ -142,21 +132,6 @@ export const ConnectChannels: FC = () => {
|
|||
window.open(url, 'Social Connect', 'width=700,height=700');
|
||||
};
|
||||
|
||||
// if (isExternal) {
|
||||
// modal.closeAll();
|
||||
//
|
||||
// modal.openModal({
|
||||
// title: '',
|
||||
// withCloseButton: false,
|
||||
// classNames: {
|
||||
// modal: 'bg-transparent text-textColor',
|
||||
// },
|
||||
// children: <UrlModal gotoUrl={gotoIntegration} />,
|
||||
// });
|
||||
//
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (isWeb3) {
|
||||
openWeb3(identifier);
|
||||
return;
|
||||
|
|
@ -183,9 +158,11 @@ export const ConnectChannels: FC = () => {
|
|||
setPopups(list.map((p: any) => p.id));
|
||||
return list;
|
||||
}, []);
|
||||
|
||||
const { data: integrations, mutate } = useSWR('/integrations/list', load, {
|
||||
fallbackData: [],
|
||||
});
|
||||
|
||||
const user = useUser();
|
||||
const totalNonDisabledChannels = useMemo(() => {
|
||||
return (
|
||||
|
|
@ -193,6 +170,7 @@ export const ConnectChannels: FC = () => {
|
|||
?.length || 0
|
||||
);
|
||||
}, [integrations]);
|
||||
|
||||
const sortedIntegrations = useMemo(() => {
|
||||
return orderBy(
|
||||
integrations,
|
||||
|
|
@ -242,9 +220,13 @@ export const ConnectChannels: FC = () => {
|
|||
return (
|
||||
<>
|
||||
{!!showCustom && (
|
||||
<div className="absolute w-full h-full top-0 start-0 bg-black/40 z-[400]">
|
||||
<div className="absolute w-full h-full top-0 start-0 z-[400]">
|
||||
<div className="absolute w-full h-full bg-primary/80 start-0 top-0 z-[200] p-[50px] flex justify-center">
|
||||
<div className="w-[400px]">{showCustom}</div>
|
||||
<div className="w-[400px]">
|
||||
<ModalWrapperComponent title="" customClose={() => setShowCustom(undefined)}>
|
||||
{showCustom}
|
||||
</ModalWrapperComponent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -260,7 +242,7 @@ export const ConnectChannels: FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-col gap-[24px]">
|
||||
<div className="flex gap-[4px] flex-col">
|
||||
<div className="text-[20px]">
|
||||
{t('connect_channels', 'Connect Channels')}
|
||||
|
|
@ -268,13 +250,92 @@ export const ConnectChannels: FC = () => {
|
|||
<div className="text-[14px] text-customColor18">
|
||||
{t(
|
||||
'connect_your_social_media_and_publishing_websites_channels_to_schedule_posts_later',
|
||||
'Connect your social media and publishing websites channels to\n schedule posts later'
|
||||
'Connect your social media and publishing websites channels to\n schedule posts later'
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex border border-customColor47 rounded-[4px] mt-[16px]">
|
||||
<div className="flex-1 flex flex-col p-[16px] gap-[10px]">
|
||||
<div className="text-[18px]">{t('social', 'Social')}</div>
|
||||
{sortedIntegrations.length !== 0 && (
|
||||
<div className="border border-customColor47 rounded-[4px] p-[16px]">
|
||||
<div className="gap-[16px] flex flex-col">
|
||||
{sortedIntegrations.length === 0 && (
|
||||
<div className="text-[12px]">
|
||||
{t('no_channels', 'No channels')}
|
||||
</div>
|
||||
)}
|
||||
{sortedIntegrations.map((integration) => (
|
||||
<div
|
||||
key={integration.id}
|
||||
className="flex gap-[8px] items-center"
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'relative w-[34px] h-[34px] rounded-full flex justify-center items-center bg-fifth',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
{integration.inBetweenSteps && (
|
||||
<div
|
||||
className="absolute start-0 top-0 w-[39px] h-[46px] cursor-pointer"
|
||||
onClick={continueIntegration(integration)}
|
||||
>
|
||||
<div className="bg-red-500 w-[15px] h-[15px] rounded-full -start-[5px] -top-[5px] absolute z-[200] text-[10px] flex justify-center items-center">
|
||||
!
|
||||
</div>
|
||||
<div className="bg-primary/60 w-[39px] h-[46px] start-0 top-0 absolute rounded-full z-[199]" />
|
||||
</div>
|
||||
)}
|
||||
<Image
|
||||
src={integration.picture}
|
||||
className="rounded-full"
|
||||
alt={integration.identifier}
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
<Image
|
||||
src={`/icons/platforms/${integration.identifier}.png`}
|
||||
className="rounded-full absolute z-10 -bottom-[5px] -end-[5px] border border-fifth"
|
||||
alt={integration.identifier}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
{...(integration.disabled &&
|
||||
totalNonDisabledChannels === user?.totalChannels
|
||||
? {
|
||||
'data-tooltip-id': 'tooltip',
|
||||
'data-tooltip-content':
|
||||
'This channel is disabled, please upgrade your plan to enable it.',
|
||||
}
|
||||
: {})}
|
||||
className={clsx(
|
||||
'flex-1',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
{integration.name}
|
||||
</div>
|
||||
<Menu
|
||||
canChangeProfilePicture={integration.changeProfile}
|
||||
canChangeNickName={integration.changeNickName}
|
||||
mutate={mutate}
|
||||
onChange={update}
|
||||
id={integration.id}
|
||||
refreshChannel={refreshChannel}
|
||||
canEnable={
|
||||
user?.totalChannels! > totalNonDisabledChannels &&
|
||||
integration.disabled
|
||||
}
|
||||
canDisable={!integration.disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex mb-[16px]">
|
||||
<div className="flex-1 flex flex-col gap-[10px]">
|
||||
<div className="grid grid-cols-3 gap-[16px]">
|
||||
{data?.social.map((social: any) => (
|
||||
<div
|
||||
|
|
@ -296,113 +357,13 @@ export const ConnectChannels: FC = () => {
|
|||
height={32}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-inputText text-[10px] tracking-[1.2px] uppercase">
|
||||
<div className="text-textColor text-[10px] tracking-[1.2px] uppercase">
|
||||
{social.name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{!isGeneral && (
|
||||
<div className="flex-1 flex flex-col p-[16px] gap-[10px]">
|
||||
<div className="text-[18px]">
|
||||
{t('publishing_platforms', 'Publishing Platforms')}
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-[16px]">
|
||||
{data?.article.map((article: any) => (
|
||||
<div
|
||||
onClick={() => setIdentifier(article)}
|
||||
key={article.identifier}
|
||||
className="h-[96px] bg-input flex flex-col justify-center items-center gap-[10px] cursor-pointer"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
src={`/icons/platforms/${article.identifier}.png`}
|
||||
className="rounded-full w-[32px] h-[32px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-inputText text-[10px] tracking-[1.2px] uppercase">
|
||||
{article.name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="my-[24px] border border-customColor47 rounded-[4px] p-[16px]">
|
||||
<div className="gap-[16px] flex flex-col">
|
||||
{sortedIntegrations.length === 0 && (
|
||||
<div className="text-[12px]">
|
||||
{t('no_channels', 'No channels')}
|
||||
</div>
|
||||
)}
|
||||
{sortedIntegrations.map((integration) => (
|
||||
<div key={integration.id} className="flex gap-[8px] items-center">
|
||||
<div
|
||||
className={clsx(
|
||||
'relative w-[34px] h-[34px] rounded-full flex justify-center items-center bg-fifth',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
{integration.inBetweenSteps && (
|
||||
<div
|
||||
className="absolute start-0 top-0 w-[39px] h-[46px] cursor-pointer"
|
||||
onClick={continueIntegration(integration)}
|
||||
>
|
||||
<div className="bg-red-500 w-[15px] h-[15px] rounded-full -start-[5px] -top-[5px] absolute z-[200] text-[10px] flex justify-center items-center">
|
||||
!
|
||||
</div>
|
||||
<div className="bg-primary/60 w-[39px] h-[46px] start-0 top-0 absolute rounded-full z-[199]" />
|
||||
</div>
|
||||
)}
|
||||
<Image
|
||||
src={integration.picture}
|
||||
className="rounded-full"
|
||||
alt={integration.identifier}
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
<Image
|
||||
src={`/icons/platforms/${integration.identifier}.png`}
|
||||
className="rounded-full absolute z-10 -bottom-[5px] -end-[5px] border border-fifth"
|
||||
alt={integration.identifier}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
{...(integration.disabled &&
|
||||
totalNonDisabledChannels === user?.totalChannels
|
||||
? {
|
||||
'data-tooltip-id': 'tooltip',
|
||||
'data-tooltip-content':
|
||||
'This channel is disabled, please upgrade your plan to enable it.',
|
||||
}
|
||||
: {})}
|
||||
className={clsx(
|
||||
'flex-1',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
{integration.name}
|
||||
</div>
|
||||
<Menu
|
||||
canChangeProfilePicture={integration.changeProfile}
|
||||
canChangeNickName={integration.changeNickName}
|
||||
mutate={mutate}
|
||||
onChange={update}
|
||||
id={integration.id}
|
||||
refreshChannel={refreshChannel}
|
||||
canEnable={
|
||||
user?.totalChannels! > totalNonDisabledChannels &&
|
||||
integration.disabled
|
||||
}
|
||||
canDisable={!integration.disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -3,279 +3,28 @@
|
|||
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useModals } from '@mantine/modals';
|
||||
import clsx from 'clsx';
|
||||
import { GithubOnboarding } from '@gitroom/frontend/components/onboarding/github.onboarding';
|
||||
import { SettingsPopup } from '@gitroom/frontend/components/layout/settings.component';
|
||||
import { Button } from '@gitroom/react/form/button';
|
||||
import { ConnectChannels } from '@gitroom/frontend/components/onboarding/connect.channels';
|
||||
import { useVariables } from '@gitroom/react/helpers/variable.context';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
export const Step: FC<{
|
||||
step: number;
|
||||
title: string;
|
||||
currentStep: number;
|
||||
lastStep: number;
|
||||
}> = (props) => {
|
||||
const t = useT();
|
||||
import { ModalWrapperComponent } from '@gitroom/frontend/components/new-launch/modal.wrapper.component';
|
||||
|
||||
const { step, title, currentStep, lastStep } = props;
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="mb-[8px]">
|
||||
<div className="w-[24px] h-[24px]">
|
||||
{step === currentStep && currentStep !== lastStep && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M9.02439 3.47341C8.99956 3.378 8.99379 3.27862 9.00741 3.18097C9.02102 3.08333 9.05376 2.98932 9.10374 2.90433C9.15372 2.81935 9.21996 2.74505 9.29869 2.6857C9.37741 2.62634 9.46706 2.58309 9.56252 2.55841C11.1614 2.14606 12.8387 2.14606 14.4375 2.55841C14.6146 2.60375 14.769 2.71221 14.8718 2.8634C14.9746 3.01459 15.0185 3.19811 14.9955 3.37945C14.9725 3.5608 14.884 3.72749 14.7467 3.84821C14.6095 3.96892 14.4328 4.03533 14.25 4.03497C14.1867 4.03464 14.1238 4.02646 14.0625 4.0106C12.7097 3.66167 11.2904 3.66167 9.93752 4.0106C9.7452 4.06021 9.54107 4.03151 9.36988 3.93081C9.1987 3.8301 9.07445 3.66561 9.02439 3.47341ZM5.04283 5.16935C3.88656 6.34678 3.0479 7.79831 2.60533 9.3881C2.55224 9.5798 2.57749 9.78474 2.6755 9.95783C2.77352 10.1309 2.93628 10.258 3.12799 10.3111C3.31969 10.3642 3.52463 10.3389 3.69772 10.2409C3.87081 10.1429 3.99787 9.98011 4.05095 9.78841C4.42508 8.4427 5.13475 7.214 6.11345 6.21747C6.24147 6.07348 6.30915 5.88574 6.30248 5.69318C6.2958 5.50062 6.21528 5.31802 6.0776 5.18323C5.93992 5.04845 5.75565 4.97182 5.56299 4.96923C5.37034 4.96665 5.18408 5.03831 5.04283 5.16935ZM4.05095 14.2078C4.02461 14.1129 3.97982 14.0241 3.91916 13.9464C3.85849 13.8688 3.78313 13.8039 3.69738 13.7554C3.61163 13.707 3.51718 13.6758 3.4194 13.6638C3.32162 13.6519 3.22244 13.6593 3.12752 13.6856C3.0326 13.7119 2.94379 13.7567 2.86618 13.8174C2.78857 13.8781 2.72366 13.9534 2.67517 14.0392C2.62668 14.1249 2.59556 14.2194 2.58357 14.3172C2.57159 14.4149 2.57898 14.5141 2.60533 14.609C3.04816 16.1987 3.88679 17.6502 5.04283 18.8278C5.18232 18.9696 5.37244 19.0503 5.57138 19.0519C5.77031 19.0536 5.96176 18.9762 6.10361 18.8367C6.24546 18.6972 6.32609 18.5071 6.32776 18.3081C6.32943 18.1092 6.252 17.9178 6.11252 17.7759C5.13502 16.7797 4.42578 15.5522 4.05095 14.2078ZM14.0625 19.9893C12.7097 20.3386 11.2903 20.3386 9.93752 19.9893C9.84161 19.963 9.74142 19.956 9.64279 19.9688C9.54415 19.9815 9.44903 20.0137 9.36297 20.0636C9.27691 20.1134 9.20163 20.1799 9.1415 20.2591C9.08137 20.3384 9.0376 20.4288 9.01273 20.5251C8.98786 20.6214 8.9824 20.7216 8.99665 20.8201C9.01091 20.9185 9.04459 21.0131 9.09576 21.0984C9.14692 21.1837 9.21454 21.2579 9.29467 21.3169C9.3748 21.3758 9.46585 21.4181 9.56252 21.4415C11.1614 21.8539 12.8387 21.8539 14.4375 21.4415C14.6274 21.3894 14.7892 21.2646 14.8879 21.0942C14.9866 20.9238 15.0143 20.7215 14.9651 20.5308C14.9159 20.3401 14.7936 20.1765 14.6247 20.0752C14.4559 19.9739 14.2539 19.943 14.0625 19.9893ZM20.8735 13.6875C20.7785 13.6611 20.6792 13.6538 20.5814 13.6658C20.4836 13.6778 20.3891 13.709 20.3033 13.7576C20.2175 13.8062 20.1422 13.8712 20.0816 13.9489C20.021 14.0267 19.9762 14.1156 19.95 14.2106C19.5761 15.5561 18.8664 16.7846 17.8875 17.7806C17.8185 17.8509 17.764 17.9341 17.7272 18.0255C17.6903 18.1168 17.6718 18.2145 17.6727 18.313C17.6737 18.4115 17.694 18.5089 17.7325 18.5995C17.771 18.6902 17.8271 18.7724 17.8974 18.8414C17.9677 18.9104 18.0509 18.9649 18.1422 19.0017C18.2336 19.0386 18.3313 19.0571 18.4298 19.0562C18.5283 19.0552 18.6257 19.0349 18.7163 18.9964C18.807 18.9579 18.8891 18.9018 18.9581 18.8315C20.1146 17.6542 20.9533 16.2027 21.3956 14.6128C21.4223 14.5177 21.4299 14.4184 21.4181 14.3204C21.4062 14.2224 21.3752 14.1277 21.3267 14.0417C21.2781 13.9558 21.2131 13.8802 21.1354 13.8194C21.0576 13.7586 20.9686 13.7138 20.8735 13.6875ZM19.9491 9.7931C19.9754 9.88802 20.0202 9.97682 20.0809 10.0544C20.1415 10.132 20.2169 10.197 20.3027 10.2454C20.3884 10.2939 20.4829 10.3251 20.5806 10.337C20.6784 10.349 20.7776 10.3416 20.8725 10.3153C20.9674 10.2889 21.0562 10.2442 21.1339 10.1835C21.2115 10.1228 21.2764 10.0475 21.3249 9.96172C21.3734 9.87597 21.4045 9.78151 21.4165 9.68373C21.4284 9.58595 21.4211 9.48677 21.3947 9.39185C20.9523 7.80198 20.1136 6.3504 18.9572 5.1731C18.8881 5.10286 18.8059 5.04692 18.7152 5.00846C18.6245 4.97 18.5272 4.94978 18.4287 4.94895C18.3302 4.94812 18.2325 4.96671 18.1411 5.00364C18.0498 5.04057 17.9667 5.09512 17.8964 5.16419C17.8262 5.23326 17.7702 5.31548 17.7318 5.40617C17.6933 5.49686 17.6731 5.59424 17.6723 5.69274C17.6714 5.79124 17.69 5.88894 17.727 5.98026C17.7639 6.07158 17.8185 6.15474 17.8875 6.22497C18.8653 7.22055 19.5746 8.44788 19.9491 9.79216V9.7931Z"
|
||||
fill="#8155DD"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{(currentStep > step || currentStep == lastStep) && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM16.2806 10.2806L11.0306 15.5306C10.961 15.6004 10.8783 15.6557 10.7872 15.6934C10.6962 15.7312 10.5986 15.7506 10.5 15.7506C10.4014 15.7506 10.3038 15.7312 10.2128 15.6934C10.1218 15.6557 10.039 15.6004 9.96938 15.5306L7.71938 13.2806C7.57865 13.1399 7.49959 12.949 7.49959 12.75C7.49959 12.551 7.57865 12.3601 7.71938 12.2194C7.86011 12.0786 8.05098 11.9996 8.25 11.9996C8.44903 11.9996 8.6399 12.0786 8.78063 12.2194L10.5 13.9397L15.2194 9.21937C15.2891 9.14969 15.3718 9.09442 15.4628 9.0567C15.5539 9.01899 15.6515 8.99958 15.75 8.99958C15.8486 8.99958 15.9461 9.01899 16.0372 9.0567C16.1282 9.09442 16.2109 9.14969 16.2806 9.21937C16.3503 9.28906 16.4056 9.37178 16.4433 9.46283C16.481 9.55387 16.5004 9.65145 16.5004 9.75C16.5004 9.84855 16.481 9.94613 16.4433 10.0372C16.4056 10.1282 16.3503 10.2109 16.2806 10.2806Z"
|
||||
fill="#8155DD"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{step > currentStep && currentStep !== lastStep && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7661 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25Z"
|
||||
fill="#172034"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-[4px] text-[10px] text-customColor18 tracking-[1.2px]">
|
||||
{t('step', 'STEP')}
|
||||
{step}
|
||||
</div>
|
||||
<div
|
||||
className={clsx('text-[12px]', step > currentStep && 'text-inputText')}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export const StepSpace: FC = () => {
|
||||
return (
|
||||
<div className="flex-1 justify-center items-center flex px-[20px]">
|
||||
<div className="h-[1px] w-full bg-white"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const SkipOnboarding: FC = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const t = useT();
|
||||
|
||||
const onSkip = useCallback(() => {
|
||||
const keys = Array.from(searchParams.keys());
|
||||
const buildNewQuery = keys
|
||||
.reduce((all, current) => {
|
||||
if (current === 'onboarding') {
|
||||
return all;
|
||||
}
|
||||
const value = searchParams.get(current);
|
||||
all.push(`${current}=${value}`);
|
||||
return all;
|
||||
}, [] as string[])
|
||||
.join('&');
|
||||
router.push(`?${buildNewQuery}`);
|
||||
}, [searchParams]);
|
||||
return (
|
||||
<Button
|
||||
secondary={true}
|
||||
className="border-[2px] border-customColor21"
|
||||
onClick={onSkip}
|
||||
>
|
||||
{t('skip_onboarding', 'Skip onboarding')}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
const Welcome: FC = () => {
|
||||
const [seller, setSeller] = useState(false);
|
||||
const { isGeneral } = useVariables();
|
||||
const [lastStep, setLastStep] = useState(isGeneral ? 3 : 4);
|
||||
const [step, setStep] = useState(1);
|
||||
const ref = useRef();
|
||||
const router = useRouter();
|
||||
const t = useT();
|
||||
|
||||
const nextStep = useCallback(
|
||||
(stepIt?: number) => () => {
|
||||
setStep(stepIt ? stepIt : step + 1);
|
||||
},
|
||||
[step]
|
||||
);
|
||||
const firstNext = useCallback(() => {
|
||||
// @ts-ignore
|
||||
ref?.current?.click();
|
||||
nextStep(2)();
|
||||
}, [nextStep]);
|
||||
const goToAnalytics = useCallback(() => {
|
||||
router.push('/analytics');
|
||||
}, []);
|
||||
const goToLaunches = useCallback(() => {
|
||||
router.push('/launches');
|
||||
}, []);
|
||||
const buyPosts = useCallback(() => {
|
||||
router.push('/marketplace/buyer');
|
||||
}, []);
|
||||
const sellPosts = useCallback(() => {
|
||||
nextStep()();
|
||||
setLastStep(isGeneral ? 4 : 5);
|
||||
setSeller(true);
|
||||
}, [step]);
|
||||
const connectBankAccount = useCallback(() => {
|
||||
router.push('/marketplace/seller');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-sixth p-[32px] w-full max-w-[920px] mx-auto flex flex-col gap-[24px] rounded-[4px] border border-customColor6 relative">
|
||||
<h1 className="text-[24px]">{t('onboarding', 'Onboarding')}</h1>
|
||||
<div className="flex">
|
||||
<Step
|
||||
title="Connect Channels"
|
||||
step={1}
|
||||
currentStep={step}
|
||||
lastStep={lastStep}
|
||||
/>
|
||||
<StepSpace />
|
||||
{!isGeneral && (
|
||||
<>
|
||||
<Step
|
||||
title="Connect Github"
|
||||
step={2}
|
||||
currentStep={step}
|
||||
lastStep={2}
|
||||
/>
|
||||
<StepSpace />
|
||||
</>
|
||||
)}
|
||||
<Step
|
||||
title="Finish"
|
||||
step={3 - (isGeneral ? 1 : 0)}
|
||||
currentStep={step}
|
||||
lastStep={2}
|
||||
/>
|
||||
{/*<StepSpace />*/}
|
||||
{/*<Step title="Finish" step={4 - (isGeneral ? 1 : 0)} currentStep={step} lastStep={lastStep} />*/}
|
||||
{seller && (
|
||||
<>
|
||||
<StepSpace />
|
||||
<Step
|
||||
title="Sell Posts"
|
||||
step={5 - (isGeneral ? 1 : 0)}
|
||||
currentStep={step}
|
||||
lastStep={lastStep}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{step === 1 && !isGeneral && (
|
||||
<div>
|
||||
<GithubOnboarding />
|
||||
<div className="flex justify-end gap-[8px]">
|
||||
{/*<SkipOnboarding />*/}
|
||||
<Button onClick={nextStep()}>{t('next', 'Next')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="relative">
|
||||
{step === 2 - (isGeneral ? 1 : 0) && (
|
||||
<div>
|
||||
<ConnectChannels />
|
||||
<div className="flex justify-end gap-[8px]">
|
||||
{/*<SkipOnboarding />*/}
|
||||
<Button onClick={nextStep()}>{t('next', 'Next')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{step === 3 - (isGeneral ? 1 : 0) && (
|
||||
<div className="items-center justify-center flex flex-col gap-[24px]">
|
||||
<div className="items-center justify-center flex flex-col">
|
||||
<img src="/success.svg" alt="success" />
|
||||
</div>
|
||||
<div className="text-[18px] text-center">
|
||||
{t(
|
||||
'you_are_done_from_here_you_can',
|
||||
'You are done, from here you can:'
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
<div
|
||||
className={clsx(
|
||||
isGeneral ? 'grid' : 'grid grid-cols-2 gap-[8px]'
|
||||
)}
|
||||
>
|
||||
{!isGeneral && (
|
||||
<Button onClick={goToAnalytics}>
|
||||
{t('view_analytics', 'View Analytics')}
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={goToLaunches}>
|
||||
{t('schedule_a_new_post', 'Schedule a new post')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/*<div className="grid grid-cols-2 gap-[8px]">*/}
|
||||
{/* /!*<Button onClick={buyPosts}>Buy posts from Influencers</Button>*!/*/}
|
||||
{/* /!*<Button onClick={sellPosts}>Sell your services</Button>*!/*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{step === 4 - (isGeneral ? 1 : 0) && (
|
||||
<div>
|
||||
<div className="text-[24px] mb-[24px]">
|
||||
{t(
|
||||
'to_sell_posts_you_would_have_to',
|
||||
'To sell posts you would have to:'
|
||||
)}
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
{t(
|
||||
'1_connect_at_least_one_channel',
|
||||
'1. Connect at least one channel'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{t('2_connect_you_bank_account', '2. Connect you bank account')}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="grid grid-cols-2 gap-[8px] mt-[24px]">
|
||||
<Button onClick={() => setStep(isGeneral ? 2 : 3)}>
|
||||
{t('go_back_to_connect_channels', 'Go back to connect channels')}
|
||||
</Button>
|
||||
<Button onClick={connectBankAccount}>
|
||||
{t(
|
||||
'move_to_the_seller_page_to_connect_you_bank',
|
||||
'Move to the seller page to connect you bank'
|
||||
)}
|
||||
</Button>
|
||||
<Button onClick={goToLaunches}>Close</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -286,6 +35,8 @@ export const Onboarding: FC = () => {
|
|||
const query = useSearchParams();
|
||||
const modal = useModals();
|
||||
const modalOpen = useRef(false);
|
||||
const t = useT();
|
||||
|
||||
useEffect(() => {
|
||||
const onboarding = query.get('onboarding');
|
||||
if (!onboarding) {
|
||||
|
|
@ -298,11 +49,12 @@ export const Onboarding: FC = () => {
|
|||
title: '',
|
||||
withCloseButton: false,
|
||||
closeOnEscape: false,
|
||||
classNames: {
|
||||
modal: 'bg-transparent text-textColor',
|
||||
},
|
||||
size: '100%',
|
||||
children: <Welcome />,
|
||||
size: '900px',
|
||||
children: (
|
||||
<ModalWrapperComponent title={t('onboarding', 'Onboarding')}>
|
||||
<Welcome />
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
});
|
||||
}, [query]);
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ import { useRouter } from 'next/navigation';
|
|||
import { useToaster } from '@gitroom/react/toaster/toaster';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { useVariables } from '@gitroom/react/helpers/variable.context';
|
||||
import useCookie from 'react-use-cookie';
|
||||
import { SVGLine } from '@gitroom/frontend/components/launches/launches.component';
|
||||
const allowedIntegrations = [
|
||||
'facebook',
|
||||
'instagram',
|
||||
|
|
@ -34,6 +36,7 @@ export const PlatformAnalytics = () => {
|
|||
const [current, setCurrent] = useState(0);
|
||||
const [key, setKey] = useState(7);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const [collapseMenu, setCollapseMenu] = useCookie('collapseMenu', '0');
|
||||
const toaster = useToaster();
|
||||
const load = useCallback(async () => {
|
||||
const int = (
|
||||
|
|
@ -150,11 +153,38 @@ export const PlatformAnalytics = () => {
|
|||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex gap-[30px] flex-1">
|
||||
<div className="p-[16px] bg-customColor48 overflow-hidden flex w-[220px]">
|
||||
<div className="flex gap-[16px] flex-col overflow-hidden">
|
||||
<div className="text-[20px] mb-[8px]">
|
||||
{t('channels', 'Channels')}
|
||||
<>
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all',
|
||||
collapseMenu === '1' ? 'group sidebar w-[100px]' : 'w-[260px]'
|
||||
)}
|
||||
>
|
||||
<div className="flex gap-[12px] flex-col">
|
||||
<div className="flex items-center">
|
||||
<h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">
|
||||
{t('channels')}
|
||||
</h2>
|
||||
<div
|
||||
onClick={() => setCollapseMenu(collapseMenu === '1' ? '0' : '1')}
|
||||
className="group-[.sidebar]:rotate-[180deg] group-[.sidebar]:mx-auto text-btnText bg-btnSimple rounded-[6px] w-[24px] h-[24px] flex items-center justify-center cursor-pointer select-none"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="7"
|
||||
height="13"
|
||||
viewBox="0 0 7 13"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M6 11.5L1 6.5L6 1.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{sortedIntegrations.map((integration, index) => (
|
||||
<div
|
||||
|
|
@ -174,14 +204,14 @@ export const PlatformAnalytics = () => {
|
|||
setCurrent(index);
|
||||
}}
|
||||
className={clsx(
|
||||
'flex gap-[8px] items-center',
|
||||
'flex gap-[12px] items-center group/profile justify-center hover:bg-boxHover rounded-e-[8px]',
|
||||
currentIntegration.id !== integration.id &&
|
||||
'opacity-20 hover:opacity-100 cursor-pointer'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'relative w-[34px] h-[34px] rounded-full flex justify-center items-center bg-fifth',
|
||||
'relative rounded-full flex justify-center items-center gap-[6px]',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
|
|
@ -193,25 +223,28 @@ export const PlatformAnalytics = () => {
|
|||
<div className="bg-primary/60 w-[39px] h-[46px] start-0 top-0 absolute rounded-full z-[199]" />
|
||||
</div>
|
||||
)}
|
||||
<div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity">
|
||||
<SVGLine />
|
||||
</div>
|
||||
<ImageWithFallback
|
||||
fallbackSrc={`/icons/platforms/${integration.identifier}.png`}
|
||||
src={integration.picture}
|
||||
className="rounded-full"
|
||||
className="rounded-[8px]"
|
||||
alt={integration.identifier}
|
||||
width={32}
|
||||
height={32}
|
||||
width={36}
|
||||
height={36}
|
||||
/>
|
||||
<Image
|
||||
src={`/icons/platforms/${integration.identifier}.png`}
|
||||
className="rounded-full absolute z-10 -bottom-[5px] -end-[5px] border border-fifth"
|
||||
className="rounded-[8px] absolute z-10 bottom-[5px] -end-[5px] border border-fifth"
|
||||
alt={integration.identifier}
|
||||
width={20}
|
||||
height={20}
|
||||
width={18.41}
|
||||
height={18.41}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex-1 whitespace-nowrap text-ellipsis overflow-hidden',
|
||||
'flex-1 whitespace-nowrap text-ellipsis overflow-hidden group-[.sidebar]:hidden',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
|
|
@ -221,31 +254,32 @@ export const PlatformAnalytics = () => {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
{!!options.length && (
|
||||
<div className="flex-1 flex flex-col gap-[14px]">
|
||||
<div className="max-w-[200px]">
|
||||
<Select
|
||||
className="bg-customColor49 !border-0"
|
||||
label=""
|
||||
name="date"
|
||||
disableForm={true}
|
||||
hideErrors={true}
|
||||
onChange={(e) => setKey(+e.target.value)}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.key} value={option.key}>
|
||||
{option.value}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
|
||||
{!!options.length && (
|
||||
<div className="flex-1 flex flex-col gap-[14px]">
|
||||
<div className="max-w-[200px]">
|
||||
<Select
|
||||
label=""
|
||||
name="date"
|
||||
disableForm={true}
|
||||
hideErrors={true}
|
||||
onChange={(e) => setKey(+e.target.value)}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.key} value={option.key}>
|
||||
{option.value}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
{!!keys && !!currentIntegration && !refresh && (
|
||||
<RenderAnalytics integration={currentIntegration} date={keys} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
{!!keys && !!currentIntegration && !refresh && (
|
||||
<RenderAnalytics integration={currentIntegration} date={keys} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export const RenderAnalytics: FC<{
|
|||
)}
|
||||
{data?.map((p: any, index: number) => (
|
||||
<div key={`pl-${index}`} className="flex">
|
||||
<div className="flex-1 bg-secondary py-[10px] px-[16px] gap-[10px] flex flex-col">
|
||||
<div className="flex-1 bg-newTableHeader rounded-[8px] py-[10px] px-[16px] gap-[10px] flex flex-col">
|
||||
<div className="flex items-center gap-[14px]">
|
||||
<div className="text-[20px]">{p.label}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
|
|||
import { Slider } from '@gitroom/react/form/slider';
|
||||
import { useToaster } from '@gitroom/react/toaster/toaster';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { ModalWrapperComponent } from '@gitroom/frontend/components/new-launch/modal.wrapper.component';
|
||||
export function convertBackRegex(s: string) {
|
||||
const matches = s.match(/\/(.*)\/([a-z]*)/);
|
||||
const pattern = matches?.[1] || '';
|
||||
|
|
@ -133,57 +134,27 @@ export const PlugPop: FC<{
|
|||
return (
|
||||
<FormProvider {...form}>
|
||||
<form onSubmit={form.handleSubmit(submit)}>
|
||||
<div className="fixed start-0 top-0 bg-primary/80 z-[300] w-full min-h-full p-4 md:p-[60px] animate-fade">
|
||||
<div className="max-w-[1000px] w-full h-full bg-sixth border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative mx-auto">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex-1">
|
||||
<TopTitle title={`Auto Plug: ${plug.title}`} />
|
||||
<div className="relative mx-auto">
|
||||
<div className="my-[20px]">{plug.description}</div>
|
||||
<div>
|
||||
{plug.fields.map((field) => (
|
||||
<div key={field.name}>
|
||||
{field.type === 'richtext' ? (
|
||||
<TextArea name={field.name} placeHolder={field.placeholder} />
|
||||
) : (
|
||||
<Input
|
||||
name={field.name}
|
||||
label={field.description}
|
||||
className="w-full mt-[8px] p-[8px] border border-tableBorder rounded-md text-black"
|
||||
placeholder={field.placeholder}
|
||||
type={field.type}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={closeAll}
|
||||
className="outline-none absolute end-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="my-[20px]">{plug.description}</div>
|
||||
<div>
|
||||
{plug.fields.map((field) => (
|
||||
<div key={field.name}>
|
||||
{field.type === 'richtext' ? (
|
||||
<TextArea
|
||||
name={field.name}
|
||||
placeHolder={field.placeholder}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
name={field.name}
|
||||
label={field.description}
|
||||
className="w-full mt-[8px] p-[8px] border border-tableBorder rounded-md text-black"
|
||||
placeholder={field.placeholder}
|
||||
type={field.type}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-[20px]">
|
||||
<Button type="submit">{t('activate', 'Activate')}</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-[20px]">
|
||||
<Button type="submit">{t('activate', 'Activate')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -227,7 +198,7 @@ export const PlugItem: FC<{
|
|||
<div
|
||||
onClick={() => addPlug(data)}
|
||||
key={plug.title}
|
||||
className="w-full h-[300px] bg-customColor48 hover:bg-customColor2 hover:border-customColor48 hover:border"
|
||||
className="w-full h-[300px] rounded-[8px] bg-newTableHeader hover:bg-newTableBorder"
|
||||
>
|
||||
<div key={plug.title} className="p-[16px] h-full flex flex-col flex-1">
|
||||
<div className="flex">
|
||||
|
|
@ -267,24 +238,23 @@ export const Plug = () => {
|
|||
plugFunction: string;
|
||||
}) => {
|
||||
modals.openModal({
|
||||
classNames: {
|
||||
modal: 'bg-transparent text-textColor',
|
||||
},
|
||||
withCloseButton: false,
|
||||
onClose() {
|
||||
mutate();
|
||||
},
|
||||
size: '100%',
|
||||
size: '500px',
|
||||
children: (
|
||||
<PlugPop
|
||||
plug={p}
|
||||
data={data}
|
||||
settings={{
|
||||
identifier: plug.identifier,
|
||||
providerId: plug.providerId,
|
||||
name: plug.name,
|
||||
}}
|
||||
/>
|
||||
<ModalWrapperComponent title={`Auto Plug: ${p.title}`}>
|
||||
<PlugPop
|
||||
plug={p}
|
||||
data={data}
|
||||
settings={{
|
||||
identifier: plug.identifier,
|
||||
providerId: plug.providerId,
|
||||
name: plug.name,
|
||||
}}
|
||||
/>
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ import { useToaster } from '@gitroom/react/toaster/toaster';
|
|||
import { PlugsContext } from '@gitroom/frontend/components/plugs/plugs.context';
|
||||
import { Plug } from '@gitroom/frontend/components/plugs/plug';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import useCookie from 'react-use-cookie';
|
||||
import { SVGLine } from '@gitroom/frontend/components/launches/launches.component';
|
||||
export const Plugs = () => {
|
||||
const fetch = useFetch();
|
||||
const router = useRouter();
|
||||
|
|
@ -37,6 +39,8 @@ export const Plugs = () => {
|
|||
fallbackData: [],
|
||||
});
|
||||
|
||||
const [collapseMenu, setCollapseMenu] = useCookie('collapseMenu', '0');
|
||||
|
||||
const t = useT();
|
||||
|
||||
const sortedIntegrations = useMemo(() => {
|
||||
|
|
@ -96,11 +100,38 @@ export const Plugs = () => {
|
|||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex gap-[30px] flex-1">
|
||||
<div className="p-[16px] bg-customColor48 overflow-hidden flex w-[220px]">
|
||||
<div className="flex gap-[16px] flex-col overflow-hidden">
|
||||
<div className="text-[20px] mb-[8px]">
|
||||
{t('channels', 'Channels')}
|
||||
<>
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all',
|
||||
collapseMenu === '1' ? 'group sidebar w-[100px]' : 'w-[260px]'
|
||||
)}
|
||||
>
|
||||
<div className="flex gap-[12px] flex-col">
|
||||
<div className="flex items-center">
|
||||
<h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">
|
||||
{t('channels')}
|
||||
</h2>
|
||||
<div
|
||||
onClick={() => setCollapseMenu(collapseMenu === '1' ? '0' : '1')}
|
||||
className="group-[.sidebar]:rotate-[180deg] group-[.sidebar]:mx-auto text-btnText bg-btnSimple rounded-[6px] w-[24px] h-[24px] flex items-center justify-center cursor-pointer select-none"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="7"
|
||||
height="13"
|
||||
viewBox="0 0 7 13"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M6 11.5L1 6.5L6 1.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{sortedIntegrations.map((integration, index) => (
|
||||
<div
|
||||
|
|
@ -120,14 +151,14 @@ export const Plugs = () => {
|
|||
setCurrent(index);
|
||||
}}
|
||||
className={clsx(
|
||||
'flex gap-[8px] items-center',
|
||||
'flex gap-[8px] items-center justify-center group/profile hover:bg-boxHover rounded-e-[8px]',
|
||||
currentIntegration.id !== integration.id &&
|
||||
'opacity-20 hover:opacity-100 cursor-pointer'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'relative w-[34px] h-[34px] rounded-full flex justify-center items-center bg-fifth',
|
||||
'relative rounded-full flex justify-center items-center gap-[8px]',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
|
|
@ -139,25 +170,28 @@ export const Plugs = () => {
|
|||
<div className="bg-primary/60 w-[39px] h-[46px] start-0 top-0 absolute rounded-full z-[199]" />
|
||||
</div>
|
||||
)}
|
||||
<div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity">
|
||||
<SVGLine />
|
||||
</div>
|
||||
<ImageWithFallback
|
||||
fallbackSrc={`/icons/platforms/${integration.identifier}.png`}
|
||||
src={integration.picture}
|
||||
className="rounded-full"
|
||||
className="rounded-[8px]"
|
||||
alt={integration.identifier}
|
||||
width={32}
|
||||
height={32}
|
||||
width={36}
|
||||
height={36}
|
||||
/>
|
||||
<Image
|
||||
src={`/icons/platforms/${integration.identifier}.png`}
|
||||
className="rounded-full absolute z-10 -bottom-[5px] -end-[5px] border border-fifth"
|
||||
className="rounded-[8px] absolute z-10 bottom-[5px] -end-[5px] border border-fifth"
|
||||
alt={integration.identifier}
|
||||
width={20}
|
||||
height={20}
|
||||
width={18.41}
|
||||
height={18.41}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex-1 whitespace-nowrap text-ellipsis overflow-hidden',
|
||||
'flex-1 whitespace-nowrap text-ellipsis overflow-hidden group-[.sidebar]:hidden',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
|
|
@ -167,11 +201,11 @@ export const Plugs = () => {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-[14px]">
|
||||
<div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
|
||||
<PlugsContext.Provider value={currentIntegrationPlug}>
|
||||
<Plug />
|
||||
</PlugsContext.Provider>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@ const AddOrRemoveSignature: FC<{
|
|||
<CopilotTextarea
|
||||
disableBranding={true}
|
||||
className={clsx(
|
||||
'!min-h-40 !max-h-80 p-2 overflow-x-hidden scrollbar scrollbar-thumb-[#612AD5] bg-customColor2 outline-none'
|
||||
'!min-h-40 !max-h-80 p-2 overflow-x-hidden scrollbar scrollbar-thumb-[#612AD5] bg-bigStrip outline-none'
|
||||
)}
|
||||
value={text}
|
||||
onChange={(e) => {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
|||
import interClass from '@gitroom/react/helpers/inter.font';
|
||||
import { useToaster } from '@gitroom/react/toaster/toaster';
|
||||
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
|
||||
import useCookie from 'react-use-cookie';
|
||||
import { SVGLine } from '@gitroom/frontend/components/launches/launches.component';
|
||||
|
||||
export const ThirdPartyMenuComponent: FC<{
|
||||
reload: () => void;
|
||||
|
|
@ -102,64 +104,95 @@ export const ThirdPartyComponent = () => {
|
|||
}, []);
|
||||
|
||||
const { data, isLoading, mutate } = useSWR('third-party', integrations);
|
||||
const [collapseMenu, setCollapseMenu] = useCookie('collapseMenu', '0');
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col">
|
||||
<div className="flex flex-1 relative">
|
||||
<div className="outline-none w-full h-full grid grid-cols[1fr] md:grid-cols-[220px_minmax(0,1fr)] gap-[30px] scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary">
|
||||
<div className="bg-third p-[16px] flex flex-col gap-[24px] min-h-[100%]">
|
||||
<h2 className="text-[20px]">{t('integrations')}</h2>
|
||||
<div className="flex flex-col gap-[10px]">
|
||||
<div className="flex-1 flex flex-col gap-[14px]">
|
||||
<div className={clsx('gap-[16px] flex flex-col relative')}>
|
||||
{!isLoading && !data?.length ? (
|
||||
<div>No Integrations Yet</div>
|
||||
) : (
|
||||
data?.map((p: any) => (
|
||||
<div
|
||||
key={p.id}
|
||||
className={clsx('flex gap-[8px] items-center')}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'relative w-[34px] h-[34px] rounded-full flex justify-center items-center bg-fifth'
|
||||
)}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={p.title}
|
||||
>
|
||||
<ImageWithFallback
|
||||
fallbackSrc={`/icons/third-party/${p.identifier}.png`}
|
||||
src={`/icons/third-party/${p.identifier}.png`}
|
||||
className="rounded-full"
|
||||
alt={p.title}
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
// @ts-ignore
|
||||
role="Handle"
|
||||
className={clsx(
|
||||
'flex-1 whitespace-nowrap text-ellipsis overflow-hidden'
|
||||
)}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={p.title}
|
||||
>
|
||||
{p.name}
|
||||
</div>
|
||||
<ThirdPartyMenuComponent reload={mutate} tParty={p} />
|
||||
<>
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all',
|
||||
collapseMenu === '1' ? 'group sidebar w-[100px]' : 'w-[260px]'
|
||||
)}
|
||||
>
|
||||
<div className="flex gap-[12px] flex-col">
|
||||
<div className="flex items-center">
|
||||
<h2 className="group-[.sidebar]:hidden flex-1 text-[20px] font-[500]">
|
||||
{t('integrations')}
|
||||
</h2>
|
||||
<div
|
||||
onClick={() => setCollapseMenu(collapseMenu === '1' ? '0' : '1')}
|
||||
className="group-[.sidebar]:rotate-[180deg] group-[.sidebar]:mx-auto text-btnText bg-btnSimple rounded-[6px] w-[24px] h-[24px] flex items-center justify-center cursor-pointer select-none"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="7"
|
||||
height="13"
|
||||
viewBox="0 0 7 13"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M6 11.5L1 6.5L6 1.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[10px]">
|
||||
<div className="flex-1 flex flex-col gap-[14px]">
|
||||
<div className={clsx('gap-[16px] flex flex-col relative justify-center group/profile hover:bg-boxHover rounded-e-[8px]')}>
|
||||
{!isLoading && !data?.length ? (
|
||||
<div>No Integrations Yet</div>
|
||||
) : (
|
||||
data?.map((p: any) => (
|
||||
<div
|
||||
key={p.id}
|
||||
className={clsx('flex gap-[8px] items-center')}
|
||||
>
|
||||
<div className="h-full w-[4px] -ms-[12px] rounded-s-[3px] opacity-0 group-hover/profile:opacity-100 transition-opacity">
|
||||
<SVGLine />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'relative rounded-full flex justify-center items-center bg-fifth'
|
||||
)}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={p.title}
|
||||
>
|
||||
<ImageWithFallback
|
||||
fallbackSrc={`/icons/third-party/${p.identifier}.png`}
|
||||
src={`/icons/third-party/${p.identifier}.png`}
|
||||
className="rounded-full"
|
||||
alt={p.title}
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
// @ts-ignore
|
||||
role="Handle"
|
||||
className={clsx(
|
||||
'flex-1 whitespace-nowrap text-ellipsis overflow-hidden group-[.sidebar]:hidden'
|
||||
)}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={p.title}
|
||||
>
|
||||
{p.name}
|
||||
</div>
|
||||
<ThirdPartyMenuComponent reload={mutate} tParty={p} />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ThirdPartyListComponent reload={mutate} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
|
||||
<ThirdPartyListComponent reload={mutate} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,14 +4,13 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
|||
import useSWR from 'swr';
|
||||
import React, { FC, useCallback, useState } from 'react';
|
||||
import { Button } from '@gitroom/react/form/button';
|
||||
import { string } from 'yup';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useModals } from '@mantine/modals';
|
||||
import { FieldValues, FormProvider, useForm } from 'react-hook-form';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
|
||||
import { Input } from '@gitroom/react/form/input';
|
||||
import { useToaster } from '@gitroom/react/toaster/toaster';
|
||||
import { ModalWrapperComponent } from '@gitroom/frontend/components/new-launch/modal.wrapper.component';
|
||||
|
||||
export const ApiModal: FC<{
|
||||
identifier: string;
|
||||
|
|
@ -39,61 +38,43 @@ export const ApiModal: FC<{
|
|||
modal.closeAll();
|
||||
}, []);
|
||||
|
||||
const submit = useCallback(async (data: FieldValues) => {
|
||||
setLoading(true);
|
||||
const add = await fetch(`/third-party/${identifier}`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
api: data.api,
|
||||
}),
|
||||
});
|
||||
const submit = useCallback(
|
||||
async (data: FieldValues) => {
|
||||
setLoading(true);
|
||||
const add = await fetch(`/third-party/${identifier}`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
api: data.api,
|
||||
}),
|
||||
});
|
||||
|
||||
if (add.ok) {
|
||||
toaster.show('Integration added successfully', 'success');
|
||||
if (closePopup) {
|
||||
closePopup();
|
||||
} else {
|
||||
modal.closeAll();
|
||||
if (add.ok) {
|
||||
toaster.show('Integration added successfully', 'success');
|
||||
if (closePopup) {
|
||||
closePopup();
|
||||
} else {
|
||||
modal.closeAll();
|
||||
}
|
||||
router.refresh();
|
||||
if (update) update();
|
||||
return;
|
||||
}
|
||||
router.refresh();
|
||||
if (update) update();
|
||||
return;
|
||||
}
|
||||
|
||||
const {message} = await add.json();
|
||||
const { message } = await add.json();
|
||||
|
||||
methods.setError('api', {
|
||||
message,
|
||||
});
|
||||
methods.setError('api', {
|
||||
message,
|
||||
});
|
||||
|
||||
setLoading(false);
|
||||
}, [props]);
|
||||
setLoading(false);
|
||||
},
|
||||
[props]
|
||||
);
|
||||
|
||||
const t = useT();
|
||||
|
||||
return (
|
||||
<div className="rounded-[4px] border border-customColor6 bg-sixth px-[16px] pb-[16px] relative">
|
||||
<TopTitle title={`Add API key for ${title}`} />
|
||||
<button
|
||||
onClick={close}
|
||||
className="outline-none absolute end-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<FormProvider {...methods}>
|
||||
<form
|
||||
className="gap-[8px] flex flex-col"
|
||||
|
|
@ -103,7 +84,9 @@ export const ApiModal: FC<{
|
|||
<Input label="API Key" name="api" />
|
||||
</div>
|
||||
<div>
|
||||
<Button loading={loading} type="submit">{t('add_integration', 'Add Integration')}</Button>
|
||||
<Button loading={loading} type="submit">
|
||||
{t('add_integration', 'Add Integration')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
|
|
@ -111,7 +94,7 @@ export const ApiModal: FC<{
|
|||
);
|
||||
};
|
||||
|
||||
export const ThirdPartyListComponent: FC<{reload: () => void}> = (props) => {
|
||||
export const ThirdPartyListComponent: FC<{ reload: () => void }> = (props) => {
|
||||
const fetch = useFetch();
|
||||
const modals = useModals();
|
||||
const { reload } = props;
|
||||
|
|
@ -122,19 +105,20 @@ export const ThirdPartyListComponent: FC<{reload: () => void}> = (props) => {
|
|||
|
||||
const { data } = useSWR('third-party-list', integrationsList);
|
||||
|
||||
const addApiKey = useCallback((title: string, identifier: string) => () => {
|
||||
modals.openModal({
|
||||
title: '',
|
||||
withCloseButton: false,
|
||||
classNames: {
|
||||
modal: 'bg-transparent text-textColor',
|
||||
},
|
||||
children: (
|
||||
<ApiModal identifier={identifier} title={title} update={reload} />
|
||||
),
|
||||
});
|
||||
}, []);
|
||||
|
||||
const addApiKey = useCallback(
|
||||
(title: string, identifier: string) => () => {
|
||||
modals.openModal({
|
||||
title: '',
|
||||
withCloseButton: false,
|
||||
children: (
|
||||
<ModalWrapperComponent title={`Add API key for ${title}`}>
|
||||
<ApiModal identifier={identifier} title={title} update={reload} />
|
||||
</ModalWrapperComponent>
|
||||
),
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-4 gap-[10px] justify-items-center justify-center">
|
||||
|
|
@ -142,7 +126,7 @@ export const ThirdPartyListComponent: FC<{reload: () => void}> = (props) => {
|
|||
<div
|
||||
onClick={addApiKey(p.title, p.identifier)}
|
||||
key={p.identifier}
|
||||
className="w-full h-full p-[20px] min-h-[100px] text-[14px] bg-third hover:bg-input transition-all text-textColor relative flex flex-col gap-[15px] cursor-pointer"
|
||||
className="w-full h-full p-[20px] min-h-[100px] text-[14px] bg-newTableHeader hover:bg-newTableBorder rounded-[8px] transition-all text-textColor relative flex flex-col gap-[15px] cursor-pointer"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
|
|
@ -150,9 +134,7 @@ export const ThirdPartyListComponent: FC<{reload: () => void}> = (props) => {
|
|||
src={`/icons/third-party/${p.identifier}.png`}
|
||||
/>
|
||||
</div>
|
||||
<div className="whitespace-pre-wrap text-left text-lg">
|
||||
{p.title}
|
||||
</div>
|
||||
<div className="whitespace-pre-wrap text-left text-lg">{p.title}</div>
|
||||
<div className="whitespace-pre-wrap text-left">{p.description}</div>
|
||||
<div className="w-full flex">
|
||||
<Button className="w-full">Add</Button>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import React, {
|
|||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
||||
|
|
@ -58,6 +59,7 @@ export const ThirdPartyPopup: FC<{
|
|||
}> = (props) => {
|
||||
const { closeModal, thirdParties, allData, onChange } = props;
|
||||
const [thirdParty, setThirdParty] = useState<any>(null);
|
||||
const refNew = useRef(null);
|
||||
|
||||
const setActivateExitButton = useLaunchStore((e) => e.setActivateExitButton);
|
||||
useEffect(() => {
|
||||
|
|
@ -83,11 +85,20 @@ export const ThirdPartyPopup: FC<{
|
|||
closeModal();
|
||||
}, [setThirdParty, closeModal]);
|
||||
|
||||
useEffect(() => {
|
||||
refNew?.current?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="removeEditor fixed start-0 top-0 bg-primary/80 z-[300] w-full min-h-full animate-fade bg-black/30"
|
||||
className="removeEditor fixed start-0 top-0 bg-primary/80 z-[300] w-full min-h-full animate-fade bg-black/30 rounded-[24px]"
|
||||
onClick={closeModal}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="absolute -top-[50px] left-0" ref={refNew} />
|
||||
</div>
|
||||
<div
|
||||
className="max-w-[1000px] w-full h-full bg-sixth border-tableBorder border-2 rounded-xl relative mx-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
|
|
@ -213,7 +224,7 @@ export const ThirdPartyMedia: FC<{
|
|||
<div className="relative group">
|
||||
<Button
|
||||
className={clsx(
|
||||
'relative ms-[10px] !px-[10px] rounded-[4px] gap-[8px] !text-primary justify-center items-center flex border border-dashed border-customColor21 bg-input'
|
||||
'relative ms-[10px] !px-[10px] rounded-[4px] gap-[8px] !text-primary justify-center items-center flex border border-dashed border-newBgLineColor bg-newColColor'
|
||||
)}
|
||||
onClick={() => setPopup(true)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ module.exports = {
|
|||
colors: {
|
||||
primary: 'var(--color-primary)',
|
||||
secondary: 'var(--color-secondary)',
|
||||
textColor: 'var(--color-text)',
|
||||
textColor: 'var(--new-btn-text)',
|
||||
third: 'var(--color-third)',
|
||||
forth: 'var(--color-forth)',
|
||||
fifth: 'var(--color-fifth)',
|
||||
|
|
@ -72,6 +72,30 @@ module.exports = {
|
|||
customColor54: 'var(--color-custom54)',
|
||||
customColor55: 'var(--color-custom55)',
|
||||
modalCustom: 'var(--color-modalCustom)',
|
||||
|
||||
|
||||
|
||||
newBgColor: 'var(--new-bgColor)',
|
||||
newBgColorInner: 'var(--new-bgColorInner)',
|
||||
newBgLineColor: 'var(--new-bgLineColor)',
|
||||
textItemFocused: 'var(--new-textItemFocused)',
|
||||
textItemBlur: 'var(--new-textItemBlur)',
|
||||
boxFocused: 'var(--new-boxFocused)',
|
||||
newTextColor: 'rgb(var(--new-textColor) / <alpha-value>)',
|
||||
blockSeparator: 'var(--new-blockSeparator)',
|
||||
btnSimple: 'var(--new-btn-simple)',
|
||||
btnText: 'var(--new-btn-text)',
|
||||
btnPrimary: 'var(--new-btn-primary)',
|
||||
ai: 'var(--new-ai-btn)',
|
||||
boxHover: 'var(--new-box-hover)',
|
||||
newTableBorder: 'var(--new-table-border)',
|
||||
newTableHeader: 'var(--new-table-header)',
|
||||
newTableText: 'var(--new-table-text)',
|
||||
newTableTextFocused: 'var(--new-table-text-focused)',
|
||||
newColColor: 'var(--new-col-color)',
|
||||
menuDots: 'var(--new-menu-dots)',
|
||||
menuDotsHover: 'var(--new-menu-hover)',
|
||||
bigStrip: 'var(--new-big-strips)',
|
||||
},
|
||||
gridTemplateColumns: {
|
||||
13: 'repeat(13, minmax(0, 1fr));',
|
||||
|
|
@ -97,6 +121,7 @@ module.exports = {
|
|||
yellow: '0 0 60px 20px #6b6237',
|
||||
yellowToast: '0px 0px 50px rgba(252, 186, 3, 0.3)',
|
||||
greenToast: '0px 0px 50px rgba(60, 124, 90, 0.3)',
|
||||
menu: 'var(--menu-shadow)'
|
||||
},
|
||||
// that is actual animation
|
||||
keyframes: (theme) => ({
|
||||
|
|
|
|||
|
|
@ -63,14 +63,14 @@ export const Input: FC<
|
|||
)}
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-input h-[44px] border-fifth border rounded-[4px] text-inputText placeholder-inputText flex items-center justify-center',
|
||||
'bg-newBgColorInner h-[42px] border-newTableBorder border rounded-[8px] text-textColor placeholder-textColor flex items-center justify-center',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{icon && <div className="ps-[16px]">{icon}</div>}
|
||||
<input
|
||||
className={clsx(
|
||||
'h-full bg-transparent outline-none flex-1',
|
||||
'h-full bg-transparent outline-none flex-1 text-[14px] text-textColor',
|
||||
icon ? 'pl-[8px] pe-[16px]' : 'px-[16px]'
|
||||
)}
|
||||
{...(disableForm ? {} : form.register(props.name))}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export const Select: FC<
|
|||
ref={ref}
|
||||
{...(disableForm ? {} : form.register(props.name, extraForm))}
|
||||
className={clsx(
|
||||
'bg-input h-[44px] px-[16px] outline-none border-fifth border rounded-[4px] text-inputText placeholder-inputText',
|
||||
'h-[42px] bg-newBgColorInner px-[16px] outline-none border-newTableBorder border rounded-[8px] text-[14px]',
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const MantineWrapper = (props: { children: ReactNode }) => {
|
|||
modalProps={{
|
||||
dir,
|
||||
classNames: {
|
||||
modal: 'bg-primary text-white border-fifth border',
|
||||
modal: 'bg-primary text-white',
|
||||
close: 'bg-black hover:bg-black cursor-pointer',
|
||||
},
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@
|
|||
"customer": "Customer:",
|
||||
"repeat_post_every": "Repeat Post Every...",
|
||||
"use_this_media": "Use this media",
|
||||
"create_new_post": "Create New Post",
|
||||
"create_new_post": "Create Post",
|
||||
"update_post": "Update Existing Post",
|
||||
"merge_comments_into_one_post": "Merge comments into one post",
|
||||
"accounts_that_will_engage": "Accounts that will engage:",
|
||||
|
|
@ -447,10 +447,10 @@
|
|||
"choose_upload_without_posting_description": "Choose upload without posting if you want to review and edit your content within TikTok's app before publishing. This gives you access to TikTok's built-in editing tools and lets you make final adjustments before posting.",
|
||||
"faq_am_i_going_to_be_charged_by_postiz": "Am I going to be charged by Postiz?",
|
||||
"faq_to_confirm_credit_card_information_postiz_will_hold": "To confirm credit card information Postiz will hold $2 and release it immediately",
|
||||
"faq_can_i_trust_postiz_gitroom": "Can I trust Postiz/Gitroom?",
|
||||
"faq_postiz_gitroom_is_proudly_open_source": "Postiz/Gitroom is proudly open-source! We believe in an ethical and transparent culture, meaning that Postiz/Gitroom will live forever. You can check out the entire code or use it for personal projects. To view the open-source repository, <a href=\"https://github.com/gitroomhq/postiz-app\" target=\"_blank\" style=\"text-decoration: underline;\">click here</a>.",
|
||||
"faq_can_i_trust_postiz_gitroom": "Can I trust Postiz?",
|
||||
"faq_postiz_gitroom_is_proudly_open_source": "Postiz is proudly open-source! We believe in an ethical and transparent culture, meaning that Postiz will live forever. You can check out the entire code or use it for personal projects. To view the open-source repository, <a href=\"https://github.com/gitroomhq/postiz-app\" target=\"_blank\" style=\"text-decoration: underline;\">click here</a>.",
|
||||
"faq_what_are_channels": "What are channels?",
|
||||
"faq_postiz_gitroom_allows_you_to_schedule_posts": "Postiz/Gitroom allows you to schedule your posts between different channels.\nA channel is a publishing platform where you can schedule your posts.\nFor example, you can schedule your posts on X, Facebook, Instagram, TikTok, YouTube, Reddit, Linkedin, Dribbble, Threads and Pinterest.",
|
||||
"faq_postiz_gitroom_allows_you_to_schedule_posts": "Postiz allows you to schedule your posts between different channels.\nA channel is a publishing platform where you can schedule your posts.\nFor example, you can schedule your posts on X, Facebook, Instagram, TikTok, YouTube, Reddit, Linkedin, Dribbble, Threads and Pinterest.",
|
||||
"faq_what_are_team_members": "What are team members?",
|
||||
"faq_if_you_have_a_team_with_multiple_members": "If you have a team with multiple members, you can invite them to your workspace to collaborate on your posts and add their personal channels",
|
||||
"faq_what_is_ai_auto_complete": "What is AI auto-complete?",
|
||||
|
|
|
|||
Loading…
Reference in New Issue