OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Temporarily fixed eslint rules being disabled in AdminX (#17565)

Browse Source 
no issue
This commit is contained in:
Jono M 2023-08-02 08:37:51 +01:00 committed by GitHub
parent 2b9e322b3e
commit 8000df963b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
64 changed files with 345 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
apps/admin-x-settings/.eslintrc.cjs
View File

@ -17,6 +17,89 @@ module.exports = {
}
},
rules: {
// ----------------------
// Rules COPIED from base config, remove these when the config is fixed
// Style Rules
// Require 4 spaces
indent: ['error', 4],
// Require single quotes for strings & properties (allows template literals)
quotes: ['error', 'single', {allowTemplateLiterals: true}],
'quote-props': ['error', 'as-needed'],
// Require semi colons, always at the end of a line
semi: ['error', 'always'],
'semi-style': ['error', 'last'],
// Don't allow dangling commas
'comma-dangle': ['error', 'never'],
// Always require curly braces, and position them at the end and beginning of lines
curly: 'error',
'brace-style': ['error', '1tbs'],
// Don't allow padding inside of blocks
'padded-blocks': ['error', 'never'],
// Require objects to be consistently formatted with newlines
'object-curly-newline': ['error', {consistent: true}],
// Don't allow more than 1 consecutive empty line or an empty 1st line
'no-multiple-empty-lines': ['error', {max: 1, maxBOF: 0}],
// Variables must be camelcase, but properties are not checked
camelcase: ['error', {properties: 'never'}],
// Allow newlines before dots, not after e.g. .then goes on a new line
'dot-location': ['error', 'property'],
// Prefer dot notation over array notation
'dot-notation': ['error'],
// Spacing rules
// Don't allow multiple spaces anywhere
'no-multi-spaces': 'error',
// Anonymous functions have a sape, named functions never do
'space-before-function-paren': ['error', {anonymous: 'always', named: 'never'}],
// Don't put spaces inside of objects or arrays
'object-curly-spacing': ['error', 'never'],
'array-bracket-spacing': ['error', 'never'],
// Allow a max of one space between colons and values
'key-spacing': ['error', {mode: 'strict'}],
// Require spaces before and after keywords like if, else, try, catch etc
'keyword-spacing': 'error',
// No spaces around semis
'semi-spacing': 'error',
// 1 space around arrows
'arrow-spacing': 'error',
// Don't allow spaces inside parenthesis
'space-in-parens': ['error', 'never'],
// Require single spaces either side of operators
'space-unary-ops': 'error',
'space-infix-ops': 'error',
// Best practice rules
// Require === / !==
eqeqeq: ['error', 'always'],
// Don't allow ++ and --
'no-plusplus': ['error', {allowForLoopAfterthoughts: true}],
// Don't allow eval
'no-eval': 'error',
// Throw errors for unnecessary usage of .call or .apply
'no-useless-call': 'error',
// Don't allow console.* calls
'no-console': 'error',
// Prevent [variable shadowing](https://en.wikipedia.org/wiki/Variable_shadowing)
'no-shadow': ['error'],
// Return rules
// Prevent missing return statements in array functions like map & reduce
'array-callback-return': 'error',
'no-constructor-return': 'error',
'no-promise-executor-return': 'error',
// Arrow function styles
// Do not enforce single lines when using arrow functions.
// https://eslint.org/docs/rules/arrow-body-style
'arrow-body-style': 'off',
'arrow-parens': ['error', 'as-needed', {requireForBlockBody: true}],
'implicit-arrow-linebreak': 'error',
'no-confusing-arrow': 'error',
// ----------------------
// Rules NOT COPIED from base config, keep these
// sort multiple import lines into alphabetical groups
'ghost/sort-imports-es6-autofix/sort-imports-es6': ['error', {
memberSyntaxSortOrder: ['none', 'all', 'single', 'multiple']

16
apps/admin-x-settings/src/App.tsx
View File

@ -5,11 +5,11 @@ import NiceModal from '@ebay/nice-modal-react';
import RoutingProvider from './components/providers/RoutingProvider';
import Settings from './components/Settings';
import Sidebar from './components/Sidebar';
import { GlobalDirtyStateProvider } from './hooks/useGlobalDirtyState';
import { OfficialTheme } from './models/themes';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ServicesProvider } from './components/providers/ServiceProvider';
import { Toaster } from 'react-hot-toast';
import {GlobalDirtyStateProvider} from './hooks/useGlobalDirtyState';
import {OfficialTheme} from './models/themes';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {ServicesProvider} from './components/providers/ServiceProvider';
import {Toaster} from 'react-hot-toast';
interface AppProps {
ghostVersion: string;
@ -26,9 +26,9 @@ function App({ghostVersion, officialThemes}: AppProps) {
<RoutingProvider>
<GlobalDirtyStateProvider>
<div className="admin-x-settings h-[100vh] w-full overflow-y-auto" id="admin-x-root" style={{
height: '100vh',
width: '100%'
}}
height: '100vh',
width: '100%'
}}
>
<Toaster />
<NiceModal.Provider>

2
apps/admin-x-settings/src/admin-x-ds/experimental/Tasklist.stories.tsx
View File

@ -1,5 +1,5 @@
import TaskList from './Tasklist';
import { ReactNode } from 'react';
import {ReactNode} from 'react';
import * as TaskStories from './Task.stories';

2
apps/admin-x-settings/src/admin-x-ds/global/Button.tsx
View File

@ -1,5 +1,5 @@
import Icon from './Icon';
import React, { HTMLProps } from 'react';
import React, {HTMLProps} from 'react';
export type ButtonColor = 'clear' | 'grey' | 'black' | 'green' | 'red' | 'white' | 'outline';
export type ButtonSize = 'sm' | 'md';

2
apps/admin-x-settings/src/admin-x-ds/global/Icon.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, {useEffect, useState} from 'react';
import clsx from 'clsx';
interface UseDynamicSVGImportOptions {

4
apps/admin-x-settings/src/admin-x-ds/global/List.stories.tsx
View File

@ -1,9 +1,9 @@
import type { Meta, StoryObj } from '@storybook/react';
import type {Meta, StoryObj} from '@storybook/react';
import * as ListItemStories from './ListItem.stories';
import List from './List';
import ListItem from './ListItem';
import { ReactNode } from 'react';
import {ReactNode} from 'react';
const meta = {
title: 'Global / List',

4
apps/admin-x-settings/src/admin-x-ds/global/ListItem.stories.tsx
View File

@ -1,5 +1,5 @@
import React, { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import React, {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import Avatar from './Avatar';
import Button from './Button';

4
apps/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import Button from './Button';
import Menu from './Menu';

10
apps/admin-x-settings/src/admin-x-ds/global/SortableList.stories.tsx
View File

@ -1,10 +1,10 @@
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import {useArgs} from '@storybook/preview-api';
import type {Meta, StoryObj} from '@storybook/react';
import SortableList, { SortableListProps } from './SortableList';
import SortableList, {SortableListProps} from './SortableList';
import clsx from 'clsx';
import { arrayMove } from '@dnd-kit/sortable';
import { useState } from 'react';
import {arrayMove} from '@dnd-kit/sortable';
import {useState} from 'react';
const Wrapper = (props: SortableListProps<{id: string}> & {updateArgs: (args: Partial<SortableListProps<{id: string}>>) => void}) => {
// Seems like Storybook recreates items on every render, so we need to keep our own state

4
apps/admin-x-settings/src/admin-x-ds/global/StickyFooter.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import StickyFooter from './StickyFooter';

4
apps/admin-x-settings/src/admin-x-ds/global/Table.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import Table from './Table';
import TableCell from './TableCell';

6
apps/admin-x-settings/src/admin-x-ds/global/Toast.stories.tsx
View File

@ -1,8 +1,8 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import ToastContainer from './ToastContainer';
import { Toaster } from 'react-hot-toast';
import {Toaster} from 'react-hot-toast';
const meta = {
title: 'Global / Toast',

2
apps/admin-x-settings/src/admin-x-ds/global/Toast.tsx
View File

@ -1,7 +1,7 @@
import Icon from './Icon';
import React from 'react';
import clsx from 'clsx';
import { Toast as HotToast, ToastOptions, toast } from 'react-hot-toast';
import {Toast as HotToast, ToastOptions, toast} from 'react-hot-toast';
export type ToastType = 'neutral' | 'success' | 'error' | 'pageError';

4
apps/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChrome.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import DesktopChrome from './DesktopChrome';

4
apps/admin-x-settings/src/admin-x-ds/global/chrome/MobileChrome.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import MobileChrome from './MobileChrome';

4
apps/admin-x-settings/src/admin-x-ds/global/form/Checkbox.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import Checkbox from './Checkbox';

2
apps/admin-x-settings/src/admin-x-ds/global/form/HtmlEditor.tsx
View File

@ -1,4 +1,4 @@
import React, { ReactNode, Suspense, useCallback, useMemo } from 'react';
import React, {ReactNode, Suspense, useCallback, useMemo} from 'react';
export interface HtmlEditorProps {
value?: string

2
apps/admin-x-settings/src/admin-x-ds/global/form/HtmlField.tsx
View File

@ -1,6 +1,6 @@
import Heading from '../Heading';
import Hint from '../Hint';
import HtmlEditor, { HtmlEditorProps } from './HtmlEditor';
import HtmlEditor, {HtmlEditorProps} from './HtmlEditor';
import React from 'react';
import clsx from 'clsx';

4
apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import ImageUpload from './ImageUpload';

6
apps/admin-x-settings/src/admin-x-ds/global/form/Radio.stories.tsx
View File

@ -1,7 +1,7 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import Radio, { RadioOption } from './Radio';
import Radio, {RadioOption} from './Radio';
const meta = {
title: 'Global / Form / Radio',

8
apps/admin-x-settings/src/admin-x-ds/global/form/Select.stories.tsx
View File

@ -1,8 +1,8 @@
import { ReactNode } from 'react';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import {useArgs} from '@storybook/preview-api';
import type {Meta, StoryObj} from '@storybook/react';
import Select, { SelectOption } from './Select';
import Select, {SelectOption} from './Select';
const meta = {
title: 'Global / Form / Select',

2
apps/admin-x-settings/src/admin-x-ds/global/form/Select.tsx
View File

@ -1,4 +1,4 @@
import React, { useId } from 'react';
import React, {useId} from 'react';
import Heading from '../Heading';
import Hint from '../Hint';

6
apps/admin-x-settings/src/admin-x-ds/global/form/TextArea.stories.tsx
View File

@ -1,6 +1,6 @@
import { ReactNode } from 'react';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import {useArgs} from '@storybook/preview-api';
import type {Meta, StoryObj} from '@storybook/react';
import TextArea from './TextArea';

6
apps/admin-x-settings/src/admin-x-ds/global/form/TextField.stories.tsx
View File

@ -1,6 +1,6 @@
import { ReactNode } from 'react';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import {useArgs} from '@storybook/preview-api';
import type {Meta, StoryObj} from '@storybook/react';
import TextField from './TextField';

2
apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
View File

@ -93,7 +93,7 @@ const TextField: React.FC<TextFieldProps> = ({
return (
<div className={`flex flex-col ${containerClassName}`}>
{field}
{title && <Heading className={hideTitle ? 'sr-only' : 'order-1 !text-grey-700 peer-focus:!text-black'} htmlFor={id} useLabelTag={true}>{title}</Heading>}
{title && <Heading className={hideTitle ? 'sr-only' : 'order-1 !text-grey-700 peer-focus:!text-black'} htmlFor={id} useLabelTag={true}>{title}</Heading>}
{hint && <Hint className={'order-3' + hintClassName} color={error ? 'red' : ''}>{hint}</Hint>}
</div>
);

4
apps/admin-x-settings/src/admin-x-ds/global/form/Toggle.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import Toggle from './Toggle';

4
apps/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModal.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryContext, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryContext, StoryObj} from '@storybook/react';
import ConfirmationModal from './ConfirmationModal';
import ConfirmationModalContainer from './ConfirmationModalContainer';

4
apps/admin-x-settings/src/admin-x-ds/global/modal/Modal.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryContext, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryContext, StoryObj} from '@storybook/react';
import Modal from './Modal';
import ModalContainer from './ModalContainer';

6
apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.stories.tsx
View File

@ -1,11 +1,11 @@
import { ReactNode } from 'react';
import type { Meta, StoryContext, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryContext, StoryObj} from '@storybook/react';
import Heading from '../Heading';
import NiceModal from '@ebay/nice-modal-react';
import PreviewModal from './PreviewModal';
import PreviewModalContainer from './PreviewModalContainer';
import { Tab } from '../TabView';
import {Tab} from '../TabView';
const meta = {
title: 'Global / Modal / Preview Modal',

4
apps/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import * as SettingGroupContentStories from './SettingGroupContent.stories';
import * as SettingGroupHeaderStories from './SettingGroupHeader.stories';

4
apps/admin-x-settings/src/admin-x-ds/settings/SettingSection.stories.tsx
View File

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {ReactNode} from 'react';
import type {Meta, StoryObj} from '@storybook/react';
import * as SettingGroupStories from './SettingGroup.stories';
import SettingGroup from './SettingGroup';

2
apps/admin-x-settings/src/admin-x-ds/settings/StripeButton.tsx
View File

@ -1,4 +1,4 @@
import Button, { ButtonProps } from '../global/Button';
import Button, {ButtonProps} from '../global/Button';
import React from 'react';
import clsx from 'clsx';

62
apps/admin-x-settings/src/components/providers/RoutingProvider.tsx
View File

@ -1,12 +1,12 @@
import ChangeThemeModal from "../settings/site/ThemeModal";
import DesignModal from "../settings/site/DesignModal";
import InviteUserModal from "../settings/general/InviteUserModal";
import NavigationModal from "../settings/site/NavigationModal";
import NiceModal from "@ebay/nice-modal-react";
import PortalModal from "../settings/membership/portal/PortalModal";
import React, { createContext, useCallback, useEffect, useState } from "react";
import StripeConnectModal from "../settings/membership/stripe/StripeConnectModal";
import TierDetailModal from "../settings/membership/tiers/TierDetailModal";
import ChangeThemeModal from '../settings/site/ThemeModal';
import DesignModal from '../settings/site/DesignModal';
import InviteUserModal from '../settings/general/InviteUserModal';
import NavigationModal from '../settings/site/NavigationModal';
import NiceModal from '@ebay/nice-modal-react';
import PortalModal from '../settings/membership/portal/PortalModal';
import React, {createContext, useCallback, useEffect, useState} from 'react';
import StripeConnectModal from '../settings/membership/stripe/StripeConnectModal';
import TierDetailModal from '../settings/membership/tiers/TierDetailModal';
type RoutingContextProps = {
route: string;
@ -17,11 +17,11 @@ type RoutingContextProps = {
};
export const RouteContext = createContext<RoutingContextProps>({
route: "",
scrolledRoute: "",
route: '',
scrolledRoute: '',
yScroll: 0,
updateRoute: () => {},
updateScrolled: () => {},
updateScrolled: () => {}
});
function getHashPath(urlPath: string | undefined) {
@ -41,7 +41,7 @@ function getHashPath(urlPath: string | undefined) {
const scrollToSectionGroup = (pathName: string) => {
const element = document.getElementById(pathName);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
element.scrollIntoView({behavior: 'smooth'});
}
};
@ -56,19 +56,19 @@ const handleNavigation = (scroll: boolean = true) => {
const pathName = getHashPath(hash);
if (pathName) {
if (pathName === "design/edit/themes") {
if (pathName === 'design/edit/themes') {
NiceModal.show(ChangeThemeModal);
} else if (pathName === "design/edit") {
} else if (pathName === 'design/edit') {
NiceModal.show(DesignModal);
} else if (pathName === "navigation/edit") {
} else if (pathName === 'navigation/edit') {
NiceModal.show(NavigationModal);
} else if (pathName === "users/invite") {
} else if (pathName === 'users/invite') {
NiceModal.show(InviteUserModal);
} else if (pathName === "portal/edit") {
} else if (pathName === 'portal/edit') {
NiceModal.show(PortalModal);
} else if (pathName === "tiers/add") {
} else if (pathName === 'tiers/add') {
NiceModal.show(TierDetailModal);
} else if (pathName === "stripe-connect") {
} else if (pathName === 'stripe-connect') {
NiceModal.show(StripeConnectModal);
}
@ -78,17 +78,17 @@ const handleNavigation = (scroll: boolean = true) => {
return pathName;
}
return "";
return '';
};
type RouteProviderProps = {
children: React.ReactNode;
};
const RoutingProvider: React.FC<RouteProviderProps> = ({ children }) => {
const [route, setRoute] = useState<string>("");
const RoutingProvider: React.FC<RouteProviderProps> = ({children}) => {
const [route, setRoute] = useState<string>('');
const [yScroll, setYScroll] = useState(0);
const [scrolledRoute, setScrolledRoute] = useState<string>("");
const [scrolledRoute, setScrolledRoute] = useState<string>('');
const updateRoute = useCallback(
(newPath: string) => {
@ -116,21 +116,21 @@ const RoutingProvider: React.FC<RouteProviderProps> = ({ children }) => {
};
const handleScroll = () => {
const element = document.getElementById("admin-x-root");
const element = document.getElementById('admin-x-root');
const scrollPosition = element!.scrollTop;
setYScroll(scrollPosition);
};
const element = document.getElementById("admin-x-root");
const element = document.getElementById('admin-x-root');
const matchedRoute = handleNavigation();
setRoute(matchedRoute);
element!.addEventListener("scroll", handleScroll);
element!.addEventListener('scroll', handleScroll);
window.addEventListener("hashchange", handleHashChange);
window.addEventListener('hashchange', handleHashChange);
return () => {
element!.removeEventListener("scroll", handleScroll);
window.removeEventListener("hashchange", handleHashChange);
element!.removeEventListener('scroll', handleScroll);
window.removeEventListener('hashchange', handleHashChange);
};
}, []);
@ -141,7 +141,7 @@ const RoutingProvider: React.FC<RouteProviderProps> = ({ children }) => {
scrolledRoute,
yScroll,
updateRoute,
updateScrolled,
updateScrolled
}}
>
{children}

4
apps/admin-x-settings/src/components/settings/email/Newsletters.tsx
View File

@ -1,10 +1,10 @@
import Button from '../../../admin-x-ds/global/Button';
import NewslettersList from './newsletters/NewslettersList';
import React, { useState } from 'react';
import React, {useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import TabView from '../../../admin-x-ds/global/TabView';
import useRouting from '../../../hooks/useRouting';
import { useBrowseNewsletters } from '../../../utils/api/newsletters';
import {useBrowseNewsletters} from '../../../utils/api/newsletters';
const Newsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
const {updateRoute} = useRouting();

20
apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
View File

@ -1,5 +1,5 @@
import Form from '../../../../admin-x-ds/global/form/Form';
import NiceModal, { useModal } from '@ebay/nice-modal-react';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import ButtonGroup from '../../../../admin-x-ds/global/ButtonGroup';
import Heading from '../../../../admin-x-ds/global/Heading';
@ -7,20 +7,20 @@ import Hint from '../../../../admin-x-ds/global/Hint';
import Icon from '../../../../admin-x-ds/global/Icon';
import ImageUpload from '../../../../admin-x-ds/global/form/ImageUpload';
import NewsletterPreview from './NewsletterPreview';
import React, { useState } from 'react';
import Select, { SelectOption } from '../../../../admin-x-ds/global/form/Select';
import React, {useState} from 'react';
import Select, {SelectOption} from '../../../../admin-x-ds/global/form/Select';
import StickyFooter from '../../../../admin-x-ds/global/StickyFooter';
import TabView, { Tab } from '../../../../admin-x-ds/global/TabView';
import TabView, {Tab} from '../../../../admin-x-ds/global/TabView';
import TextArea from '../../../../admin-x-ds/global/form/TextArea';
import TextField from '../../../../admin-x-ds/global/form/TextField';
import Toggle from '../../../../admin-x-ds/global/form/Toggle';
import useForm from '../../../../hooks/useForm';
import useSettings from '../../../../hooks/useSettings';
import { Newsletter } from '../../../../types/api';
import { PreviewModalContent } from '../../../../admin-x-ds/global/modal/PreviewModal';
import { fullEmailAddress, getSettingValues } from '../../../../utils/helpers';
import { getImageUrl, useUploadImage } from '../../../../utils/api/images';
import { useEditNewsletter } from '../../../../utils/api/newsletters';
import {Newsletter} from '../../../../types/api';
import {PreviewModalContent} from '../../../../admin-x-ds/global/modal/PreviewModal';
import {fullEmailAddress, getSettingValues} from '../../../../utils/helpers';
import {getImageUrl, useUploadImage} from '../../../../utils/api/images';
import {useEditNewsletter} from '../../../../utils/api/newsletters';
interface NewsletterDetailModalProps {
newsletter: Newsletter
@ -248,7 +248,7 @@ const NewsletterDetailModal: React.FC<NewsletterDetailModalProps> = ({newsletter
await editNewsletter(formState);
modal.remove();
}
})
});
const updateNewsletter = (fields: Partial<Newsletter>) => {
updateForm(state => ({...state, ...fields}));

10
apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreview.tsx
View File

@ -6,10 +6,10 @@ import LatestPosts3 from '../../../../assets/images/latest-posts-3.png';
import React from 'react';
import clsx from 'clsx';
import useSettings from '../../../../hooks/useSettings';
import { ReactComponent as GhostOrb } from '../../../../admin-x-ds/assets/images/ghost-orb.svg';
import { Newsletter } from '../../../../types/api';
import { fullEmailAddress, getSettingValues } from '../../../../utils/helpers';
import { useGlobalData } from '../../../providers/DataProvider';
import {ReactComponent as GhostOrb} from '../../../../admin-x-ds/assets/images/ghost-orb.svg';
import {Newsletter} from '../../../../types/api';
import {fullEmailAddress, getSettingValues} from '../../../../utils/helpers';
import {useGlobalData} from '../../../providers/DataProvider';
const NewsletterPreview: React.FC<{newsletter: Newsletter}> = ({newsletter}) => {
const {currentUser} = useGlobalData();
@ -35,7 +35,7 @@ const NewsletterPreview: React.FC<{newsletter: Newsletter}> = ({newsletter}) =>
const currentYear = new Date().getFullYear();
const showCommentCta = newsletter.show_comment_cta && commentsEnabled !== 'off';
const showFeedback = newsletter.feedback_enabled && config.labs.audienceFeedback
const showFeedback = newsletter.feedback_enabled && config.labs.audienceFeedback;
return (
<div className="relative flex grow flex-col">

2
apps/admin-x-settings/src/components/settings/email/newsletters/NewslettersList.tsx
View File

@ -5,7 +5,7 @@ import React from 'react';
import Table from '../../../../admin-x-ds/global/Table';
import TableCell from '../../../../admin-x-ds/global/TableCell';
import TableRow from '../../../../admin-x-ds/global/TableRow';
import { Newsletter } from '../../../../types/api';
import {Newsletter} from '../../../../types/api';
interface NewslettersListProps {
tab?: string;

8
apps/admin-x-settings/src/components/settings/general/InviteUserModal.tsx
View File

@ -4,10 +4,10 @@ import Radio from '../../../admin-x-ds/global/form/Radio';
import TextField from '../../../admin-x-ds/global/form/TextField';
import useRouting from '../../../hooks/useRouting';
import validator from 'validator';
import { showToast } from '../../../admin-x-ds/global/Toast';
import { useAddInvite } from '../../../utils/api/invites';
import { useBrowseRoles } from '../../../utils/api/roles';
import { useEffect, useRef, useState } from 'react';
import {showToast} from '../../../admin-x-ds/global/Toast';
import {useAddInvite} from '../../../utils/api/invites';
import {useBrowseRoles} from '../../../utils/api/roles';
import {useEffect, useRef, useState} from 'react';
type RoleType = 'administrator' | 'editor' | 'author' | 'contributor';

4
apps/admin-x-settings/src/components/settings/general/SocialAccounts.tsx
View File

@ -1,10 +1,10 @@
import React, { useRef, useState } from 'react';
import React, {useRef, useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import TextField from '../../../admin-x-ds/global/form/TextField';
import useSettingGroup from '../../../hooks/useSettingGroup';
import validator from 'validator';
import { getSettingValues } from '../../../utils/helpers';
import {getSettingValues} from '../../../utils/helpers';
function validateFacebookUrl(newUrl: string) {
const errMessage = 'The URL must be in a format like https://www.facebook.com/yourPage';

6
apps/admin-x-settings/src/components/settings/general/Twitter.tsx
View File

@ -4,9 +4,9 @@ import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import TextField from '../../../admin-x-ds/global/form/TextField';
import useSettingGroup from '../../../hooks/useSettingGroup';
import { ReactComponent as TwitterLogo } from '../../../admin-x-ds/assets/images/twitter-logo.svg';
import { getImageUrl, useUploadImage } from '../../../utils/api/images';
import { getSettingValues } from '../../../utils/helpers';
import {ReactComponent as TwitterLogo} from '../../../admin-x-ds/assets/images/twitter-logo.svg';
import {getImageUrl, useUploadImage} from '../../../utils/api/images';
import {getSettingValues} from '../../../utils/helpers';
const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => {
const {

24
apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx
View File

@ -3,24 +3,24 @@ import ConfirmationModal from '../../../admin-x-ds/global/modal/ConfirmationModa
import Heading from '../../../admin-x-ds/global/Heading';
import Icon from '../../../admin-x-ds/global/Icon';
import ImageUpload from '../../../admin-x-ds/global/form/ImageUpload';
import Menu, { MenuItem } from '../../../admin-x-ds/global/Menu';
import Menu, {MenuItem} from '../../../admin-x-ds/global/Menu';
import Modal from '../../../admin-x-ds/global/modal/Modal';
import NiceModal, { useModal } from '@ebay/nice-modal-react';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import Radio from '../../../admin-x-ds/global/form/Radio';
import React, { useEffect, useRef, useState } from 'react';
import React, {useEffect, useRef, useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import TextField from '../../../admin-x-ds/global/form/TextField';
import Toggle from '../../../admin-x-ds/global/form/Toggle';
import useStaffUsers from '../../../hooks/useStaffUsers';
import validator from 'validator';
import { User } from '../../../types/api';
import { getImageUrl, useUploadImage } from '../../../utils/api/images';
import { isAdminUser, isOwnerUser } from '../../../utils/helpers';
import { showToast } from '../../../admin-x-ds/global/Toast';
import { toast } from 'react-hot-toast';
import { useBrowseRoles } from '../../../utils/api/roles';
import { useDeleteUser, useEditUser, useMakeOwner, useUpdatePassword } from '../../../utils/api/users';
import {User} from '../../../types/api';
import {getImageUrl, useUploadImage} from '../../../utils/api/images';
import {isAdminUser, isOwnerUser} from '../../../utils/helpers';
import {showToast} from '../../../admin-x-ds/global/Toast';
import {toast} from 'react-hot-toast';
import {useBrowseRoles} from '../../../utils/api/roles';
import {useDeleteUser, useEditUser, useMakeOwner, useUpdatePassword} from '../../../utils/api/users';
interface CustomHeadingProps {
children?: React.ReactNode;
@ -104,7 +104,7 @@ const BasicInputs: React.FC<UserDetailProps> = ({errors, validators, user, setUs
<SettingGroupContent>
<TextField
error={!!errors?.name}
hint={errors?.name || "Use real name so people can recognize you"}
hint={errors?.name || 'Use real name so people can recognize you'}
title="Full name"
value={user.name}
onBlur={(e) => {
@ -633,7 +633,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user}) => {
if (error) {
showToast({
type: 'pageError',
message: "Can't save user! One or more fields have errors, please doublecheck you filled all mandatory fields"
message: 'Can\'t save user! One or more fields have errors, please doublecheck you filled all mandatory fields'
});
setSaveState('');
return;

14
apps/admin-x-settings/src/components/settings/membership/Tiers.tsx
View File

@ -1,13 +1,13 @@
import Button from '../../../admin-x-ds/global/Button';
import React, { useState } from 'react';
import React, {useState} from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import StripeButton from '../../../admin-x-ds/settings/StripeButton';
import TabView from '../../../admin-x-ds/global/TabView';
import TiersList from './tiers/TiersList';
import useRouting from '../../../hooks/useRouting';
import { Tier } from '../../../types/api';
import { checkStripeEnabled, getActiveTiers, getArchivedTiers } from '../../../utils/helpers';
import { useGlobalData } from '../../providers/DataProvider';
import {Tier} from '../../../types/api';
import {checkStripeEnabled, getActiveTiers, getArchivedTiers} from '../../../utils/helpers';
import {useGlobalData} from '../../providers/DataProvider';
const Tiers: React.FC<{ keywords: string[] }> = ({keywords}) => {
const [selectedTab, setSelectedTab] = useState('active-tiers');
@ -44,11 +44,11 @@ const Tiers: React.FC<{ keywords: string[] }> = ({keywords}) => {
}
];
let content
let content;
if (checkStripeEnabled(settings, config)) {
content = <TabView selectedTab={selectedTab} tabs={tabs} onTabChange={setSelectedTab} />
content = <TabView selectedTab={selectedTab} tabs={tabs} onTabChange={setSelectedTab} />;
} else {
content = <TiersList tab='free-tier' tiers={activeTiers.filter(tier => tier.type === 'free')} />
content = <TiersList tab='free-tier' tiers={activeTiers.filter(tier => tier.type === 'free')} />;
}
return (

6
apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from 'react';
import React, {useEffect, useRef, useState} from 'react';
import useSettingGroup from '../../../../hooks/useSettingGroup';
import { Setting, SiteData, Tier } from '../../../../types/api';
import { getSettingValue } from '../../../../utils/helpers';
import {Setting, SiteData, Tier} from '../../../../types/api';
import {getSettingValue} from '../../../../utils/helpers';
type PortalFrameProps = {
settings: Setting[];

10
apps/admin-x-settings/src/components/settings/membership/portal/SignupOptions.tsx
View File

@ -1,12 +1,12 @@
import CheckboxGroup from '../../../../admin-x-ds/global/form/CheckboxGroup';
import Form from '../../../../admin-x-ds/global/form/Form';
import HtmlField from '../../../../admin-x-ds/global/form/HtmlField';
import React, { useEffect, useMemo } from 'react';
import React, {useEffect, useMemo} from 'react';
import Toggle from '../../../../admin-x-ds/global/form/Toggle';
import { CheckboxProps } from '../../../../admin-x-ds/global/form/Checkbox';
import { Setting, SettingValue, Tier } from '../../../../types/api';
import { checkStripeEnabled, getSettingValues } from '../../../../utils/helpers';
import { useGlobalData } from '../../../providers/DataProvider';
import {CheckboxProps} from '../../../../admin-x-ds/global/form/Checkbox';
import {Setting, SettingValue, Tier} from '../../../../types/api';
import {checkStripeEnabled, getSettingValues} from '../../../../utils/helpers';
import {useGlobalData} from '../../../providers/DataProvider';
const SignupOptions: React.FC<{
localSettings: Setting[]

44
apps/admin-x-settings/src/components/settings/membership/stripe/StripeConnectModal.tsx
View File

@ -6,8 +6,8 @@ import GhostLogo from '../../../../assets/images/orb-squircle.png';
import GhostLogoPink from '../../../../assets/images/orb-pink.png';
import Heading from '../../../../admin-x-ds/global/Heading';
import Modal from '../../../../admin-x-ds/global/modal/Modal';
import NiceModal, { useModal } from '@ebay/nice-modal-react';
import React, { useState } from 'react';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React, {useState} from 'react';
import StripeButton from '../../../../admin-x-ds/settings/StripeButton';
import StripeLogo from '../../../../assets/images/stripe-emblem.svg';
import TextArea from '../../../../admin-x-ds/global/form/TextArea';
@ -16,15 +16,15 @@ import Toggle from '../../../../admin-x-ds/global/form/Toggle';
import useRouting from '../../../../hooks/useRouting';
import useSettingGroup from '../../../../hooks/useSettingGroup';
import useSettings from '../../../../hooks/useSettings';
import { ApiError } from '../../../../utils/apiRequests';
import { ReactComponent as StripeVerified } from '../../../../assets/images/stripe-verified.svg';
import { checkStripeEnabled, getGhostPaths, getSettingValue, getSettingValues } from '../../../../utils/helpers';
import { showToast } from '../../../../admin-x-ds/global/Toast';
import { toast } from 'react-hot-toast';
import { useBrowseMembers } from '../../../../utils/api/members';
import { useBrowseTiers, useEditTier } from '../../../../utils/api/tiers';
import { useDeleteStripeSettings, useEditSettings } from '../../../../utils/api/settings';
import { useGlobalData } from '../../../providers/DataProvider';
import {ApiError} from '../../../../utils/apiRequests';
import {ReactComponent as StripeVerified} from '../../../../assets/images/stripe-verified.svg';
import {checkStripeEnabled, getGhostPaths, getSettingValue, getSettingValues} from '../../../../utils/helpers';
import {showToast} from '../../../../admin-x-ds/global/Toast';
import {toast} from 'react-hot-toast';
import {useBrowseMembers} from '../../../../utils/api/members';
import {useBrowseTiers, useEditTier} from '../../../../utils/api/tiers';
import {useDeleteStripeSettings, useEditSettings} from '../../../../utils/api/settings';
import {useGlobalData} from '../../../providers/DataProvider';
const RETRY_PRODUCT_SAVE_POLL_LENGTH = 1000;
const RETRY_PRODUCT_SAVE_MAX_POLL = 15 * RETRY_PRODUCT_SAVE_POLL_LENGTH;
@ -64,7 +64,7 @@ const Connect: React.FC = () => {
const saveTier = async () => {
const {data} = await fetchActiveTiers();
const tier = data?.tiers[0]
const tier = data?.tiers[0];
if (tier) {
tier.monthly_price = 500;
@ -75,7 +75,7 @@ const Connect: React.FC = () => {
/** To allow Stripe config to be ready in backend, we poll the save tier request */
while (pollTimeout < RETRY_PRODUCT_SAVE_MAX_POLL) {
await new Promise((resolve) => {
setTimeout(resolve, RETRY_PRODUCT_SAVE_POLL_LENGTH)
setTimeout(resolve, RETRY_PRODUCT_SAVE_POLL_LENGTH);
});
try {
@ -118,7 +118,7 @@ const Connect: React.FC = () => {
} else {
setError('Please enter a secure key');
}
}
};
const {apiRoot} = getGhostPaths();
const stripeConnectUrl = `${apiRoot}/members/stripe_connect?mode=${testMode ? 'test' : 'live'}`;
@ -152,7 +152,7 @@ const Connected: React.FC<{onClose?: () => void}> = ({onClose}) => {
const [stripeConnectAccountName, stripeConnectLivemode] = getSettingValues(settings, ['stripe_connect_account_name', 'stripe_connect_livemode']);
const {refetch: fetchMembers, isFetching: isFetchingMembers} = useBrowseMembers({
searchParams: { filter: 'status:paid', limit: '0' },
searchParams: {filter: 'status:paid', limit: '0'},
enabled: false
});
@ -160,11 +160,11 @@ const Connected: React.FC<{onClose?: () => void}> = ({onClose}) => {
const openDisconnectStripeModal = async () => {
const {data} = await fetchMembers();
const hasActiveStripeSubscriptions = Boolean(data?.meta?.pagination.total)
const hasActiveStripeSubscriptions = Boolean(data?.meta?.pagination.total);
// const hasActiveStripeSubscriptions = false; //...
// this.ghostPaths.url.api('/members/') + '?filter=status:paid&limit=0';
NiceModal.show(ConfirmationModal, {
NiceModal.show(ConfirmationModal, {
title: 'Are you sure you want to disconnect?',
prompt: <>
{hasActiveStripeSubscriptions && <p className="text-red">
@ -233,20 +233,20 @@ const Direct: React.FC<{onClose: () => void}> = ({onClose}) => {
showToast({
type: 'pageError',
message: 'Failed to save settings. Please check you copied both keys correctly.'
})
});
return;
}
throw e;
}
}
};
return (
<div>
<Heading level={3}>Connect Stripe</Heading>
<Form marginBottom={false} marginTop>
<TextField title='Publishable key' value={publishableKey?.toString()} onChange={(e) => updateSetting('stripe_publishable_key', e.target.value)} />
<TextField title='Secure key' value={secretKey?.toString()} onChange={(e) => updateSetting('stripe_secret_key', e.target.value)} />
<TextField title='Publishable key' value={publishableKey?.toString()} onChange={e => updateSetting('stripe_publishable_key', e.target.value)} />
<TextField title='Secure key' value={secretKey?.toString()} onChange={e => updateSetting('stripe_secret_key', e.target.value)} />
<Button className='mt-5' color='green' disabled={saveState === 'saving'} label='Save Stripe settings' onClick={onSubmit} />
</Form>
</div>
@ -256,7 +256,7 @@ const Direct: React.FC<{onClose: () => void}> = ({onClose}) => {
const StripeConnectModal: React.FC = () => {
const {config} = useGlobalData();
const {settings} = useSettings();
const stripeConnectAccountId = getSettingValue(settings, 'stripe_connect_account_id')
const stripeConnectAccountId = getSettingValue(settings, 'stripe_connect_account_id');
const {updateRoute} = useRouting();
const [step, setStep] = useState<'start' | 'connect'>('start');
const mainModal = useModal();

18
apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx
View File

@ -3,8 +3,8 @@ import Form from '../../../../admin-x-ds/global/form/Form';
import Heading from '../../../../admin-x-ds/global/Heading';
import Icon from '../../../../admin-x-ds/global/Icon';
import Modal from '../../../../admin-x-ds/global/modal/Modal';
import NiceModal, { useModal } from '@ebay/nice-modal-react';
import React, { useState } from 'react';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React, {useState} from 'react';
import Select from '../../../../admin-x-ds/global/form/Select';
import SortableList from '../../../../admin-x-ds/global/SortableList';
import TextField from '../../../../admin-x-ds/global/form/TextField';
@ -14,12 +14,12 @@ import useForm from '../../../../hooks/useForm';
import useRouting from '../../../../hooks/useRouting';
import useSettingGroup from '../../../../hooks/useSettingGroup';
import useSortableIndexedList from '../../../../hooks/useSortableIndexedList';
import { Tier } from '../../../../types/api';
import { currencies, currencyFromDecimal, currencyGroups, currencyToDecimal, getSymbol } from '../../../../utils/currency';
import { getSettingValues } from '../../../../utils/helpers';
import { showToast } from '../../../../admin-x-ds/global/Toast';
import { toast } from 'react-hot-toast';
import { useAddTier, useEditTier } from '../../../../utils/api/tiers';
import {Tier} from '../../../../types/api';
import {currencies, currencyFromDecimal, currencyGroups, currencyToDecimal, getSymbol} from '../../../../utils/currency';
import {getSettingValues} from '../../../../utils/helpers';
import {showToast} from '../../../../admin-x-ds/global/Toast';
import {toast} from 'react-hot-toast';
import {useAddTier, useEditTier} from '../../../../utils/api/tiers';
interface TierDetailModalProps {
tier?: Tier
@ -123,7 +123,7 @@ const TierDetailModal: React.FC<TierDetailModalProps> = ({tier}) => {
if (Object.values(validators).filter(validator => validator()).length) {
showToast({
type: 'pageError',
message: "Can't save tier! One or more fields have errors, please doublecheck you filled all mandatory fields"
message: 'Can\'t save tier! One or more fields have errors, please doublecheck you filled all mandatory fields'
});
return;
}

8
apps/admin-x-settings/src/components/settings/membership/tiers/TiersList.tsx
View File

@ -5,10 +5,10 @@ import NoValueLabel from '../../../../admin-x-ds/global/NoValueLabel';
import React from 'react';
import TierDetailModal from './TierDetailModal';
import useRouting from '../../../../hooks/useRouting';
import { Tier } from '../../../../types/api';
import { currencyToDecimal, getSymbol } from '../../../../utils/currency';
import { numberWithCommas } from '../../../../utils/helpers';
import { useEditTier } from '../../../../utils/api/tiers';
import {Tier} from '../../../../types/api';
import {currencyToDecimal, getSymbol} from '../../../../utils/currency';
import {numberWithCommas} from '../../../../utils/helpers';
import {useEditTier} from '../../../../utils/api/tiers';
interface TiersListProps {
tab?: 'active-tiers' | 'archive-tiers' | 'free-tier';

18
apps/admin-x-settings/src/components/settings/site/DesignModal.tsx
View File

@ -1,21 +1,21 @@
import BrandSettings, { BrandSettingValues } from './designAndBranding/BrandSettings';
import BrandSettings, {BrandSettingValues} from './designAndBranding/BrandSettings';
// import Button from '../../../admin-x-ds/global/Button';
// import ChangeThemeModal from './ThemeModal';
import Icon from '../../../admin-x-ds/global/Icon';
import NiceModal, { NiceModalHandler, useModal } from '@ebay/nice-modal-react';
import React, { useEffect, useState } from 'react';
import NiceModal, {NiceModalHandler, useModal} from '@ebay/nice-modal-react';
import React, {useEffect, useState} from 'react';
import StickyFooter from '../../../admin-x-ds/global/StickyFooter';
import TabView, { Tab } from '../../../admin-x-ds/global/TabView';
import TabView, {Tab} from '../../../admin-x-ds/global/TabView';
import ThemePreview from './designAndBranding/ThemePreview';
import ThemeSettings from './designAndBranding/ThemeSettings';
import useForm from '../../../hooks/useForm';
import useRouting from '../../../hooks/useRouting';
import useSettings from '../../../hooks/useSettings';
import { CustomThemeSetting, Setting, SettingValue } from '../../../types/api';
import { PreviewModalContent } from '../../../admin-x-ds/global/modal/PreviewModal';
import { getHomepageUrl, getSettingValues } from '../../../utils/helpers';
import { useBrowseCustomThemeSettings, useEditCustomThemeSettings } from '../../../utils/api/customThemeSettings';
import { useBrowsePosts } from '../../../utils/api/posts';
import {CustomThemeSetting, Setting, SettingValue} from '../../../types/api';
import {PreviewModalContent} from '../../../admin-x-ds/global/modal/PreviewModal';
import {getHomepageUrl, getSettingValues} from '../../../utils/helpers';
import {useBrowseCustomThemeSettings, useEditCustomThemeSettings} from '../../../utils/api/customThemeSettings';
import {useBrowsePosts} from '../../../utils/api/posts';
const Sidebar: React.FC<{
brandSettings: BrandSettingValues

10
apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
View File

@ -4,17 +4,17 @@ import Button from '../../../admin-x-ds/global/Button';
import ConfirmationModal from '../../../admin-x-ds/global/modal/ConfirmationModal';
import FileUpload from '../../../admin-x-ds/global/form/FileUpload';
import Modal from '../../../admin-x-ds/global/modal/Modal';
import NiceModal, { NiceModalHandler, useModal } from '@ebay/nice-modal-react';
import NiceModal, {NiceModalHandler, useModal} from '@ebay/nice-modal-react';
import OfficialThemes from './theme/OfficialThemes';
import PageHeader from '../../../admin-x-ds/global/layout/PageHeader';
import React, { useState } from 'react';
import React, {useState} from 'react';
import TabView from '../../../admin-x-ds/global/TabView';
import ThemeInstalledModal from './theme/ThemeInstalledModal';
import ThemePreview from './theme/ThemePreview';
import useRouting from '../../../hooks/useRouting';
import { OfficialTheme } from '../../../models/themes';
import { Theme } from '../../../types/api';
import { useBrowseThemes, useInstallTheme, useUploadTheme } from '../../../utils/api/themes';
import {OfficialTheme} from '../../../models/themes';
import {Theme} from '../../../types/api';
import {useBrowseThemes, useInstallTheme, useUploadTheme} from '../../../utils/api/themes';
interface ThemeToolbarProps {
selectedTheme: OfficialTheme|null;

8
apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
View File

@ -6,9 +6,9 @@ import Select from '../../../../admin-x-ds/global/form/Select';
import SettingGroupContent from '../../../../admin-x-ds/settings/SettingGroupContent';
import TextField from '../../../../admin-x-ds/global/form/TextField';
import Toggle from '../../../../admin-x-ds/global/form/Toggle';
import { CustomThemeSetting } from '../../../../types/api';
import { getImageUrl, useUploadImage } from '../../../../utils/api/images';
import { humanizeSettingKey } from '../../../../utils/helpers';
import {CustomThemeSetting} from '../../../../types/api';
import {getImageUrl, useUploadImage} from '../../../../utils/api/images';
import {humanizeSettingKey} from '../../../../utils/helpers';
const ThemeSetting: React.FC<{
setting: CustomThemeSetting,
@ -78,7 +78,7 @@ const ThemeSetting: React.FC<{
const ThemeSettings: React.FC<{ settings: CustomThemeSetting[], updateSetting: (setting: CustomThemeSetting) => void }> = ({settings, updateSetting}) => {
return (
<SettingGroupContent className='mt-7'>
{settings.map(setting => <ThemeSetting key={setting.key} setSetting={(value) => updateSetting({...setting, value} as CustomThemeSetting)} setting={setting} />)}
{settings.map(setting => <ThemeSetting key={setting.key} setSetting={value => updateSetting({...setting, value} as CustomThemeSetting)} setting={setting} />)}
</SettingGroupContent>
);
};

2
apps/admin-x-settings/src/hooks/useForm.ts
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useState } from 'react';
import {useCallback, useEffect, useState} from 'react';
export type Dirtyable<Data> = Data & {
dirty?: boolean;

8
apps/admin-x-settings/src/hooks/useSettings.tsx
View File

@ -1,7 +1,7 @@
import { Setting } from '../types/api';
import { useCallback, useMemo } from 'react';
import { useEditSettings } from '../utils/api/settings';
import { useGlobalData } from '../components/providers/DataProvider';
import {Setting} from '../types/api';
import {useCallback, useMemo} from 'react';
import {useEditSettings} from '../utils/api/settings';
import {useGlobalData} from '../components/providers/DataProvider';
function serialiseSettingsData(settings: Setting[]): Setting[] {
return settings.map((setting) => {

4
apps/admin-x-settings/src/utils/api/customThemeSettings.ts
View File

@ -1,5 +1,5 @@
import { CustomThemeSetting, Setting } from '../../types/api';
import { createMutation, createQuery } from '../apiRequests';
import {CustomThemeSetting, Setting} from '../../types/api';
import {createMutation, createQuery} from '../apiRequests';
export interface CustomThemeSettingsResponseType {
custom_theme_settings: CustomThemeSetting[];

2
apps/admin-x-settings/src/utils/api/invites.ts
View File

@ -1,4 +1,4 @@
import { Meta, createMutation, createQuery } from '../apiRequests';
import {Meta, createMutation, createQuery} from '../apiRequests';
export interface UserInvite {
created_at: string;

4
apps/admin-x-settings/src/utils/api/members.ts
View File

@ -1,5 +1,5 @@
import { Member } from '../../types/api';
import { Meta, createQuery } from '../apiRequests';
import {Member} from '../../types/api';
import {Meta, createQuery} from '../apiRequests';
export interface MembersResponseType {
meta?: Meta

4
apps/admin-x-settings/src/utils/api/newsletters.ts
View File

@ -1,5 +1,5 @@
import { Meta, createMutation, createQuery } from '../apiRequests';
import { Newsletter } from '../../types/api';
import {Meta, createMutation, createQuery} from '../apiRequests';
import {Newsletter} from '../../types/api';
export interface NewslettersResponseType {
meta?: Meta

4
apps/admin-x-settings/src/utils/api/settings.ts
View File

@ -1,5 +1,5 @@
import { Meta, createMutation, createQuery } from '../apiRequests';
import { Setting } from '../../types/api';
import {Meta, createMutation, createQuery} from '../apiRequests';
import {Setting} from '../../types/api';
export type SettingsResponseMeta = Meta & { sent_email_verification?: boolean }

4
apps/admin-x-settings/src/utils/api/themes.ts
View File

@ -1,5 +1,5 @@
import { InstalledTheme, Theme } from '../../types/api';
import { createMutation, createQuery } from '../apiRequests';
import {InstalledTheme, Theme} from '../../types/api';
import {createMutation, createQuery} from '../apiRequests';
export interface ThemesResponseType {
themes: Theme[];

4
apps/admin-x-settings/src/utils/api/tiers.ts
View File

@ -1,5 +1,5 @@
import { Meta, createMutation, createQuery } from '../apiRequests';
import { Tier } from '../../types/api';
import {Meta, createMutation, createQuery} from '../apiRequests';
import {Tier} from '../../types/api';
export interface TiersResponseType {
meta?: Meta

6
apps/admin-x-settings/src/utils/api/users.ts
View File

@ -1,5 +1,5 @@
import { Meta, createMutation, createQuery } from '../apiRequests';
import { User } from '../../types/api';
import {Meta, createMutation, createQuery} from '../apiRequests';
import {User} from '../../types/api';
export interface UsersResponseType {
meta?: Meta;
@ -44,7 +44,7 @@ export const useBrowseUsers = createQuery<UsersResponseType>({
export const useCurrentUser = createQuery<User>({
dataType,
path: '/users/me/',
returnData: (originalData) => (originalData as UsersResponseType).users?.[0]
returnData: originalData => (originalData as UsersResponseType).users?.[0]
});
export const useEditUser = createMutation<UsersResponseType, User>({

14
apps/admin-x-settings/src/utils/apiRequests.ts
View File

@ -1,6 +1,6 @@
import { QueryClient, UseQueryOptions, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { getGhostPaths } from './helpers';
import { useServices } from '../components/providers/ServiceProvider';
import {QueryClient, UseQueryOptions, useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
import {getGhostPaths} from './helpers';
import {useServices} from '../components/providers/ServiceProvider';
export interface Meta {
pagination: {
@ -68,7 +68,7 @@ export const useFetchApi = () => {
if (response.status > 299) {
const data = response.headers.get('content-type')?.includes('application/json') ? await response.json() : undefined;
throw new ApiError(response, data)
throw new ApiError(response, data);
} else if (response.status === 204) {
return;
} else {
@ -139,11 +139,11 @@ const mutate = <ResponseData, Payload>({fetchApi, path, payload, searchParams, o
const url = apiUrl(path, searchParams || defaultSearchParams);
const generatedBody = payload && body?.(payload);
let requestBody: string | FormData | undefined = undefined
let requestBody: string | FormData | undefined = undefined;
if (generatedBody instanceof FormData) {
requestBody = generatedBody
requestBody = generatedBody;
} else if (generatedBody) {
requestBody = JSON.stringify(generatedBody)
requestBody = JSON.stringify(generatedBody);
}
return fetchApi(url, {

20
apps/admin-x-settings/test/e2e/membership/tiers.test.ts
View File

@ -1,12 +1,12 @@
import { expect, test } from '@playwright/test';
import { mockApi, responseFixtures, updatedSettingsResponse } from '../../utils/e2e';
import {expect, test} from '@playwright/test';
import {mockApi, responseFixtures, updatedSettingsResponse} from '../../utils/e2e';
const settingsWithStripe = updatedSettingsResponse([
{ key: 'stripe_connect_publishable_key', value: 'pk_test_123' },
{ key: 'stripe_connect_secret_key', value: 'sk_test_123' },
{ key: 'stripe_connect_display_name', value: 'Dummy' },
{ key: 'stripe_connect_account_id', value: 'acct_123' }
])
{key: 'stripe_connect_publishable_key', value: 'pk_test_123'},
{key: 'stripe_connect_secret_key', value: 'sk_test_123'},
{key: 'stripe_connect_display_name', value: 'Dummy'},
{key: 'stripe_connect_account_id', value: 'acct_123'}
]);
test.describe('Tier settings', async () => {
test('Supports creating a new tier', async ({page}) => {
@ -47,13 +47,13 @@ test.describe('Tier settings', async () => {
visibility: 'public',
created_at: new Date().toISOString(),
updated_at: new Date().toISOString()
}
};
const lastApiRequests = await mockApi({page, responses: {
tiers: {
add: { tiers: [newTier] },
add: {tiers: [newTier]},
// This request will be reloaded after the new tier is added
browse: { tiers: [...responseFixtures.tiers.tiers, newTier] }
browse: {tiers: [...responseFixtures.tiers.tiers, newTier]}
}
}});

4
apps/admin-x-settings/test/e2e/site/theme.test.ts
View File

@ -1,5 +1,5 @@
import { expect, test } from '@playwright/test';
import { mockApi, responseFixtures } from '../../utils/e2e';
import {expect, test} from '@playwright/test';
import {mockApi, responseFixtures} from '../../utils/e2e';
test.describe('Theme settings', async () => {
test('Browsing and installing default themes', async ({page}) => {

30
apps/admin-x-settings/test/utils/e2e.ts
View File

@ -1,18 +1,18 @@
import { ConfigResponseType } from '../../src/utils/api/config'
import { CustomThemeSettingsResponseType } from '../../src/utils/api/customThemeSettings'
import { ImagesResponseType } from '../../src/utils/api/images'
import { InvitesResponseType } from '../../src/utils/api/invites'
import { LabelsResponseType } from '../../src/utils/api/labels'
import { OffersResponseType } from '../../src/utils/api/offers'
import { Page, Request } from '@playwright/test'
import { PostsResponseType } from '../../src/utils/api/posts'
import { RolesResponseType } from '../../src/utils/api/roles'
import { SettingsResponseType } from '../../src/utils/api/settings'
import { SiteResponseType } from '../../src/utils/api/site'
import { ThemesResponseType } from '../../src/utils/api/themes'
import { TiersResponseType } from '../../src/utils/api/tiers'
import { UsersResponseType } from '../../src/utils/api/users'
import { readFileSync } from 'fs'
import {ConfigResponseType} from '../../src/utils/api/config';
import {CustomThemeSettingsResponseType} from '../../src/utils/api/customThemeSettings';
import {ImagesResponseType} from '../../src/utils/api/images';
import {InvitesResponseType} from '../../src/utils/api/invites';
import {LabelsResponseType} from '../../src/utils/api/labels';
import {OffersResponseType} from '../../src/utils/api/offers';
import {Page, Request} from '@playwright/test';
import {PostsResponseType} from '../../src/utils/api/posts';
import {RolesResponseType} from '../../src/utils/api/roles';
import {SettingsResponseType} from '../../src/utils/api/settings';
import {SiteResponseType} from '../../src/utils/api/site';
import {ThemesResponseType} from '../../src/utils/api/themes';
import {TiersResponseType} from '../../src/utils/api/tiers';
import {UsersResponseType} from '../../src/utils/api/users';
import {readFileSync} from 'fs';
export const responseFixtures = {
settings: JSON.parse(readFileSync(`${__dirname}/responses/settings.json`).toString()) as SettingsResponseType,