+
+ {(category) => (
+ {
+ form.setValue(
+ 'categories',
+ categories.filter((item) => item.id !== category.id),
+ { shouldDirty: true },
+ );
+ }}
+ />
+ )}
+
+
+
+
+ );
+}
+
+const styles = {
+ selectedItem: css`
+ padding: ${spacing[12]};
+ display: flex;
+ align-items: center;
+ gap: ${spacing[16]};
+
+ &:not(:last-child) {
+ border-bottom: 1px solid ${colorTokens.stroke.divider};
+ }
+ `,
+ selectedContent: css`
+ width: 100%;
+ `,
+ selectedTitle: css`
+ ${typography.small()};
+ color: ${colorTokens.text.primary};
+ margin-bottom: ${spacing[4]};
+ `,
+ selectedSubTitle: css`
+ ${typography.small()};
+ color: ${colorTokens.text.hints};
+ `,
+ selectedThumb: css`
+ height: 48px;
+ `,
+ thumbnail: css`
+ width: 48px;
+ height: 48px;
+ border-radius: ${borderRadius[4]};
+ object-fit: cover;
+ `,
+};
diff --git a/assets/react/v3/entries/pro/membership-settings/components/IconsAndFeatures.tsx b/assets/react/v3/entries/pro/membership-settings/components/IconsAndFeatures.tsx
new file mode 100644
index 0000000000..dca0d3157c
--- /dev/null
+++ b/assets/react/v3/entries/pro/membership-settings/components/IconsAndFeatures.tsx
@@ -0,0 +1,111 @@
+import Button from '@/v3/shared/atoms/Button';
+import SVGIcon from '@/v3/shared/atoms/SVGIcon';
+import { borderRadius, colorTokens, spacing } from '@/v3/shared/config/styles';
+import { typography } from '@/v3/shared/config/typography';
+import For from '@/v3/shared/controls/For';
+import Show from '@/v3/shared/controls/Show';
+import { css } from '@emotion/react';
+import { __ } from '@wordpress/i18n';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import FormFeatureItem from './fields/FormFeatureItem';
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { nanoid } from '@/v3/shared/utils/util';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+
+export default function IconsAndFeatures() {
+ const form = useFormContext();
+ const { fields, append, remove, move } = useFieldArray({
+ control: form.control,
+ name: 'features',
+ });
+
+ const sensors = useSensors(
+ useSensor(PointerSensor),
+ useSensor(KeyboardSensor, {
+ coordinateGetter: sortableKeyboardCoordinates,
+ }),
+ );
+
+ return (
+
+ 
+
+
+
+ {title}
+ {subTitle}
+
+
+
+
+ 0}>
+
+
+ );
+}
+
+const styles = {
+ wrapper: css`
+ background-color: ${colorTokens.background.white};
+ border: 1px solid ${colorTokens.stroke.divider};
+ border-radius: ${borderRadius[6]};
+ padding: ${spacing[12]} ${spacing[16]};
+ `,
+ header: css`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ label {
+ ${typography.caption()};
+ color: ${colorTokens.text.title};
+ }
+
+ button {
+ color: ${colorTokens.icon.default};
+ border: 1px solid ${colorTokens.stroke.default};
+ border-radius: ${borderRadius[4]};
+ padding: 3px;
+ }
+ `,
+ features: css`
+ display: flex;
+ flex-direction: column;
+ gap: ${spacing[8]};
+ padding: ${spacing[12]} 0 ${spacing[8]};
+ `,
+};
diff --git a/assets/react/v3/entries/pro/membership-settings/components/MembershipFormFields.tsx b/assets/react/v3/entries/pro/membership-settings/components/MembershipFormFields.tsx
new file mode 100644
index 0000000000..78c7af448f
--- /dev/null
+++ b/assets/react/v3/entries/pro/membership-settings/components/MembershipFormFields.tsx
@@ -0,0 +1,444 @@
+import { css } from '@emotion/react';
+import { __, sprintf } from '@wordpress/i18n';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { borderRadius, Breakpoint, colorTokens, spacing } from '@Config/styles';
+import { typography } from '@Config/typography';
+import FormInput from '@/v3/shared/components/fields/FormInput';
+import FormInputWithContent from '@/v3/shared/components/fields/FormInputWithContent';
+import { styleUtils } from '@/v3/shared/utils/style-utils';
+import FormSelectInput from '@/v3/shared/components/fields/FormSelectInput';
+import { requiredRule } from '@Utils/validation';
+import { tutorConfig } from '@/v3/shared/config/config';
+import FormInputWithPresets from '@/v3/shared/components/fields/FormInputWithPresets';
+import FormCheckbox from '@/v3/shared/components/fields/FormCheckbox';
+import Show from '@/v3/shared/controls/Show';
+import FormTimeInput from '@/v3/shared/components/fields/FormTimeInput';
+import FormDateInput from '@/v3/shared/components/fields/FormDateInput';
+import FormSwitch from '@/v3/shared/components/fields/FormSwitch';
+import { CURRENT_VIEWPORT } from '@/v3/shared/config/constants';
+
+import FormRadioGroup from '@/v3/shared/components/fields/FormRadioGroup';
+import IconsAndFeatures from './IconsAndFeatures';
+import Categories from './Categories';
+import { type MembershipFormData } from '../services/memberships';
+const { tutor_currency } = tutorConfig;
+
+export default function MembershipFormFields() {
+ const form = useFormContext
+
+
+
+
+ {
+ const { active, over } = event;
+ if (!over) {
+ return;
+ }
+
+ if (active.id !== over.id) {
+ const activeIndex = fields.findIndex((item) => item.id === active.id);
+ const overIndex = fields.findIndex((item) => item.id === over.id);
+
+ move(activeIndex, overIndex);
+ }
+ }}
+ >
+
+
+ {(item, index) => (
+ !!value?.content || __('Content is required', 'tutor'),
+ }}
+ render={(controllerProps) => (
+ remove(index)} />
+ )}
+ />
+ )}
+
+
+
+
+
+ (
+ (
+ {
+ if (value === 'Until cancelled') {
+ return true;
+ }
+
+ if (Number(value) <= 0) {
+ return __('Renew plan must be greater than 0', 'tutor');
+ }
+ return true;
+ },
+ }}
+ render={(controllerProps) => (
+
+
+
+ {
+ if (Number(value) <= 0) {
+ return __('Price must be greater than 0', 'tutor');
+ }
+ },
+ }}
+ render={(controllerProps) => (
+ {
+ if (Number(value) < 1) {
+ return __('This value must be equal to or greater than 1', 'tutor');
+ }
+ },
+ }}
+ render={(controllerProps) => (
+ (
+
: __('Recurring Options', 'tutor')}
+ options={[
+ { label: __('Day(s)', 'tutor'), value: 'day' },
+ { label: __('Week(s)', 'tutor'), value: 'week' },
+ { label: __('Month(s)', 'tutor'), value: 'month' },
+ { label: __('Year(s)', 'tutor'), value: 'year' },
+ ]}
+ removeOptionsMinWidth
+ />
+ )}
+ />
+
+
+
+
+
+
+ );
+}
+
+const styles = {
+ container: css`
+ width: 100%;
+ max-width: 640px;
+ margin: 0 auto;
+ border: 1px solid ${colorTokens.stroke.default};
+ border-radius: ${borderRadius.card};
+ padding: ${spacing[16]};
+
+ display: flex;
+ flex-direction: column;
+ gap: ${spacing[12]};
+ `,
+ salePriceWrapper: css`
+ background-color: ${colorTokens.background.white};
+ display: flex;
+ flex-direction: column;
+ gap: ${spacing[20]};
+
+ padding: ${spacing[12]};
+ border: 1px solid ${colorTokens.stroke.default};
+ border-radius: ${borderRadius.card};
+ `,
+ salePriceInputs: css`
+ display: flex;
+ flex-direction: column;
+ gap: ${spacing[8]};
+ `,
+ inputGroup: css`
+ display: grid;
+ grid-template-columns: 1fr 0.7fr 1fr 1fr;
+ align-items: start;
+ gap: ${spacing[8]};
+
+ ${Breakpoint.mobile} {
+ grid-template-columns: 1fr;
+ }
+ `,
+ datetimeWrapper: css`
+ label {
+ ${typography.caption()};
+ color: ${colorTokens.text.title};
+ }
+ `,
+ planTypeWrapper: css`
+ display: flex;
+ gap: ${spacing[8]};
+ `,
+};
diff --git a/assets/react/v3/entries/pro/membership-settings/components/MembershipItem.tsx b/assets/react/v3/entries/pro/membership-settings/components/MembershipItem.tsx
new file mode 100644
index 0000000000..be4a97e603
--- /dev/null
+++ b/assets/react/v3/entries/pro/membership-settings/components/MembershipItem.tsx
@@ -0,0 +1,284 @@
+import {
+ type MembershipSettings,
+ type MembershipPlan,
+ useDeleteMembershipPlanMutation,
+ type DurationUnit,
+ useDuplicateMembershipPlanMutation,
+} from '../services/memberships';
+import MembershipModal from './modals/MembershipModal';
+import { __, sprintf } from '@wordpress/i18n';
+import SVGIcon from '@/v3/shared/atoms/SVGIcon';
+import { useModal } from '@/v3/shared/components/modals/Modal';
+import { css } from '@emotion/react';
+import { borderRadius, colorTokens, fontSize, fontWeight, lineHeight, spacing } from '@/v3/shared/config/styles';
+import { Controller, useFormContext } from 'react-hook-form';
+import FormSwitch from '@/v3/shared/components/fields/FormSwitch';
+import ThreeDots from '@/v3/shared/molecules/ThreeDots';
+import { useState } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { animateLayoutChanges } from '@/v3/shared/utils/dndkit';
+import { CSS } from '@dnd-kit/utilities';
+import StaticConfirmationModal from '@/v3/shared/components/modals/StaticConfirmationModal';
+import Show from '@/v3/shared/controls/Show';
+import { formatPrice } from '@/v3/shared/utils/currency';
+import { makeFirstCharacterUpperCase } from '@/v3/shared/utils/util';
+import { AnimationType } from '@/v3/shared/hooks/useAnimation';
+
+interface MembershipItemProps {
+ data: MembershipPlan;
+ index: number;
+}
+
+function formatRepeatUnit(unit: Omit
+
+
+ {
+ if (value && regularPrice && Number(value) >= Number(regularPrice)) {
+ return __('Sale price should be less than regular price', 'tutor');
+ }
+
+ if (value && regularPrice && Number(value) <= 0) {
+ return __('Sale price should be greater than 0', 'tutor');
+ }
+
+ return undefined;
+ },
+ }}
+ render={(props) => (
+
+
+
+
+
+
+
+ (
+ (
+
+
+
+
+
+ {
+ const startDate = form.watch(`sale_price_from_date`);
+ const endDate = value;
+ if (startDate && endDate) {
+ return new Date(startDate) > new Date(endDate)
+ ? __('Sales End date should be greater than start date', 'tutor')
+ : undefined;
+ }
+ return undefined;
+ },
+ },
+ deps: ['sale_price_from_date'],
+ }}
+ render={(controllerProps) => (
+ {
+ const startDate = form.watch(`sale_price_from_date`);
+ const startTime = form.watch(`sale_price_from_time`);
+ const endDate = form.watch(`sale_price_to_date`);
+ const endTime = value;
+ if (startDate && endDate && startTime && endTime) {
+ return new Date(`${startDate} ${startTime}`) > new Date(`${endDate} ${endTime}`)
+ ? __('Sales End time should be greater than start time', 'tutor')
+ : undefined;
+ }
+ return undefined;
+ },
+ },
+ deps: ['sale_price_from_date', 'sale_price_from_time', 'sale_price_to_date'],
+ }}
+ render={(controllerProps) => (
+
+
+
+
+
+ );
+}
+
+const styles = {
+ wrapper: css`
+ background-color: ${colorTokens.background.white};
+ padding: ${spacing[16]} ${spacing[24]};
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+
+ &:hover {
+ [data-drag-button] {
+ display: block;
+ }
+ }
+
+ &:not(:last-of-type) {
+ border-bottom: 1px solid ${colorTokens.stroke.divider};
+ }
+
+ &:first-of-type {
+ border-top-left-radius: ${borderRadius[6]};
+ border-top-right-radius: ${borderRadius[6]};
+ }
+
+ &:last-of-type {
+ border-bottom-left-radius: ${borderRadius[6]};
+ border-bottom-right-radius: ${borderRadius[6]};
+ }
+ `,
+ content: css`
+ display: flex;
+ align-items: center;
+ gap: ${spacing[12]};
+
+ svg {
+ color: ${colorTokens.icon.default};
+ }
+ `,
+ planInfo: css`
+ display: flex;
+ flex-direction: column;
+ gap: ${spacing[6]};
+ `,
+ planTitle: css`
+ display: flex;
+ align-items: center;
+ gap: ${spacing[8]};
+
+ font-size: ${fontSize[16]};
+ line-height: ${lineHeight[20]};
+ font-weight: ${fontWeight.regular};
+ color: ${colorTokens.text.primary};
+
+ strong {
+ font-weight: ${fontWeight.medium};
+ }
+
+ span {
+ height: 2px;
+ width: 2px;
+ border-radius: ${borderRadius.circle};
+ background-color: ${colorTokens.icon.default};
+ }
+ `,
+ planPerMonth: css`
+ color: ${colorTokens.text.title};
+ `,
+ planFeatures: css`
+ font-size: ${fontSize[11]};
+ line-height: ${lineHeight[16]};
+ color: ${colorTokens.text.hints};
+ `,
+ actions: css`
+ display: flex;
+ align-items: center;
+ gap: ${spacing[16]};
+ `,
+ dragButton: css`
+ display: flex;
+ align-items: center;
+ padding: 0;
+ color: ${colorTokens.icon.default};
+ background: transparent;
+ border: none;
+ cursor: grab;
+
+ position: absolute;
+ height: 100%;
+ left: -${spacing[24]};
+ top: 0;
+ display: none;
+
+ :focus-visible {
+ border-radius: ${borderRadius[4]};
+ outline: 2px solid ${colorTokens.stroke.brand};
+ }
+ `,
+ pipe: css`
+ display: inline-block;
+ color: ${colorTokens.stroke.divider};
+ padding-inline: ${spacing[8]};
+ `,
+};
diff --git a/assets/react/v3/entries/pro/membership-settings/components/MembershipList.tsx b/assets/react/v3/entries/pro/membership-settings/components/MembershipList.tsx
new file mode 100644
index 0000000000..c9186b5782
--- /dev/null
+++ b/assets/react/v3/entries/pro/membership-settings/components/MembershipList.tsx
@@ -0,0 +1,88 @@
+import Button from '@/v3/shared/atoms/Button';
+import SVGIcon from '@/v3/shared/atoms/SVGIcon';
+import For from '@/v3/shared/controls/For';
+import { __ } from '@wordpress/i18n';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import MembershipItem from './MembershipItem';
+import { type MembershipSettings } from '../services/memberships';
+import { css } from '@emotion/react';
+import { colorTokens, spacing } from '@/v3/shared/config/styles';
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+
+interface MembershipListProps {
+ onNewMembershipClick: () => void;
+}
+
+export default function MembershipList({ onNewMembershipClick }: MembershipListProps) {
+ const form = useFormContext
+
+
+
+
+ {data.plan_name}
+
+
+
+
+ {data.plan_name}
+
+
+ {sprintf(
+ __('%s per %s', 'tutor'),
+ formatPrice(Number(data.regular_price)),
+ makeFirstCharacterUpperCase(data.recurring_interval),
+ )}
+
+
+
+
+ {sprintf(
+ __('Renews every %s %s', 'tutor'),
+ data.recurring_value.toString().padStart(2, '0'),
+ formatRepeatUnit(data.recurring_interval, Number(data.recurring_value)),
+ )}
+
+
+ {
+ setIsOpen(true);
+ }}
+ closePopover={() => setIsOpen(false)}
+ >
+
+
+
+
+ );
+}
+
+const styles = {
+ wrapper: css`
+ display: flex;
+ flex-direction: column;
+ gap: ${spacing[16]};
+ `,
+ membershipList: css`
+ background-color: ${colorTokens.background.white};
+ border: 1px solid ${colorTokens.stroke.divider};
+ border-radius: ${spacing[6]};
+ `,
+};
diff --git a/assets/react/v3/entries/pro/membership-settings/components/MembershipSettings.tsx b/assets/react/v3/entries/pro/membership-settings/components/MembershipSettings.tsx
new file mode 100644
index 0000000000..13db1457cf
--- /dev/null
+++ b/assets/react/v3/entries/pro/membership-settings/components/MembershipSettings.tsx
@@ -0,0 +1,91 @@
+import { useEffect } from 'react';
+import { FormProvider } from 'react-hook-form';
+import { css } from '@emotion/react';
+import { LoadingSection } from '@Atoms/LoadingSpinner';
+import Show from '@Controls/Show';
+import { spacing } from '@Config/styles';
+import { useFormWithGlobalError } from '@Hooks/useFormWithGlobalError';
+import { type MembershipSettings, useMembershipSettingsQuery } from '../services/memberships';
+import EmptyState from '../molecules/EmptyState';
+import { useModal } from '@/v3/shared/components/modals/Modal';
+import MembershipModal from './modals/MembershipModal';
+import SVGIcon from '@/v3/shared/atoms/SVGIcon';
+import { __ } from '@wordpress/i18n';
+import MembershipList from './MembershipList';
+
+function MembershipSettings() {
+ const { showModal } = useModal();
+ const form = useFormWithGlobalError
+ {
+ const { active, over } = event;
+ if (!over) {
+ return;
+ }
+
+ if (active.id !== over.id) {
+ const activeIndex = fields.findIndex((item) => item.id === active.id);
+ const overIndex = fields.findIndex((item) => item.id === over.id);
+
+ move(activeIndex, overIndex);
+ }
+ }}
+ >
+
+
+
+
+
+ {(item, idx) =>
+
+
+
+ }
+ >
+ {__('New Membership Level', 'tutor')}
+
+
+
+
+
+
+
+ ({ id, plan_name, is_enabled })),
+ })}
+ />
+
+ );
+}
+
+export default MembershipSettings;
+
+const styles = {
+ wrapper: css`
+ display: flex;
+ flex-direction: column;
+ gap: ${spacing[16]};
+ `,
+};
diff --git a/assets/react/v3/entries/pro/membership-settings/components/fields/FormFeatureItem.tsx b/assets/react/v3/entries/pro/membership-settings/components/fields/FormFeatureItem.tsx
new file mode 100644
index 0000000000..c472405927
--- /dev/null
+++ b/assets/react/v3/entries/pro/membership-settings/components/fields/FormFeatureItem.tsx
@@ -0,0 +1,274 @@
+import Button from '@/v3/shared/atoms/Button';
+import SVGIcon from '@/v3/shared/atoms/SVGIcon';
+import FormFieldWrapper from '@/v3/shared/components/fields/FormFieldWrapper';
+import { animateLayoutChanges } from '@/v3/shared/utils/dndkit';
+import { borderRadius, Breakpoint, colorTokens, shadow, spacing, zIndex } from '@/v3/shared/config/styles';
+import { typography } from '@/v3/shared/config/typography';
+import For from '@/v3/shared/controls/For';
+import { type FormControllerProps } from '@/v3/shared/utils/form';
+import { css } from '@emotion/react';
+import { CSS } from '@dnd-kit/utilities';
+import { useState } from 'react';
+import { featureIcons } from '../../config/constants';
+import { Portal, usePortalPopover } from '@/v3/shared/hooks/usePortalPopover';
+import { isRTL } from '@/v3/shared/config/constants';
+import { __ } from '@wordpress/i18n';
+import { useSortable } from '@dnd-kit/sortable';
+
+export interface Feature {
+ id: string;
+ icon: string;
+ content: string;
+}
+
+interface FormFeatureItemProps extends FormControllerProps
+
+ {(inputProps) => {
+ return (
+ <>
+ {
+ setIsOpen(false);
+ }}
+ onEscape={() => {
+ setIsOpen(false);
+ }}
+ >
+
+
+ );
+ }}
+
+
+ );
+}
+
+const styles = {
+ featureItem: css`
+ position: relative;
+ display: flex;
+
+ &:hover {
+ button[data-delete-button] {
+ opacity: 1;
+ }
+ }
+ `,
+ input: css`
+ &.tutor-input-field {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ padding: ${spacing[4]} ${spacing[36]} ${spacing[4]} ${spacing[8]};
+
+ &:focus {
+ border-radius: ${borderRadius[6]};
+ }
+ }
+ `,
+ iconSelector: css`
+ height: 40px;
+ display: flex;
+ align-items: center;
+ background-color: ${colorTokens.background.white};
+ color: ${colorTokens.icon.hover};
+ border: 1px solid ${colorTokens.stroke.default};
+ border-right: none;
+ border-top-left-radius: ${borderRadius[6]};
+ border-bottom-left-radius: ${borderRadius[6]};
+ cursor: pointer;
+ transition: background-color 0.25s;
+
+ :hover {
+ background-color: ${colorTokens.background.hover};
+ }
+
+ :focus-visible {
+ border-radius: ${borderRadius[4]};
+ outline: 2px solid ${colorTokens.stroke.brand};
+ outline-offset: 2px;
+ z-index: 1;
+ }
+ `,
+ dragButton: css`
+ display: flex;
+ align-items: center;
+ padding: 0;
+ color: ${colorTokens.icon.default};
+ background: transparent;
+ border: none;
+ cursor: grab;
+
+ :focus-visible {
+ border-radius: ${borderRadius[4]};
+ outline: 2px solid ${colorTokens.stroke.brand};
+ }
+ `,
+ deleteButton: css`
+ display: flex;
+ position: absolute;
+ right: ${spacing[12]};
+ top: ${spacing[8]};
+ padding: 0;
+ color: ${colorTokens.icon.default};
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity 0.25s;
+
+ :focus-visible {
+ border-radius: ${borderRadius[2]};
+ outline: 2px solid ${colorTokens.stroke.brand};
+ outline-offset: 2px;
+ opacity: 1;
+ }
+
+ ${Breakpoint.mobile} {
+ opacity: 1;
+ }
+ `,
+ popoverWrapper: css`
+ position: absolute;
+ width: 100%;
+ z-index: ${zIndex.dropdown};
+ background-color: ${colorTokens.background.white};
+ box-shadow: ${shadow.popover};
+ border-radius: ${borderRadius[6]};
+ max-height: 300px;
+ overflow-y: auto;
+ `,
+ popoverHeader: css`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid ${colorTokens.stroke.divider};
+ padding: ${spacing[8]};
+
+ label {
+ ${typography.caption('medium')};
+ color: ${colorTokens.text.title};
+ }
+
+ button {
+ padding: 0px;
+ }
+ `,
+ popoverContent: css`
+ display: flex;
+ flex-wrap: wrap;
+ gap: ${spacing[8]};
+ padding: ${spacing[12]};
+ `,
+ popoverContentButton: css`
+ display: flex;
+ background-color: ${colorTokens.background.default};
+ color: ${colorTokens.icon.hover};
+ border: none;
+ border-radius: ${borderRadius[4]};
+ padding: ${spacing[8]};
+ cursor: pointer;
+ transition:
+ background-color 0.25s,
+ box-shadow 0.25s;
+
+ :hover {
+ background-color: ${colorTokens.background.hover};
+ box-shadow: inset 0px 0px 0px 1px ${colorTokens.action.primary.hover};
+ }
+
+ :focus-visible {
+ border-radius: ${borderRadius[6]};
+ outline: 2px solid ${colorTokens.stroke.brand};
+ outline-offset: 2px;
+ z-index: 1;
+ }
+ `,
+};
diff --git a/assets/react/v3/entries/pro/membership-settings/components/modals/MembershipModal.tsx b/assets/react/v3/entries/pro/membership-settings/components/modals/MembershipModal.tsx
new file mode 100644
index 0000000000..6dd3f71c38
--- /dev/null
+++ b/assets/react/v3/entries/pro/membership-settings/components/modals/MembershipModal.tsx
@@ -0,0 +1,103 @@
+import { lazy, Suspense, useEffect } from 'react';
+import { css } from '@emotion/react';
+import { __ } from '@wordpress/i18n';
+import { FormProvider } from 'react-hook-form';
+
+import Button from '@Atoms/Button';
+import SVGIcon from '@Atoms/SVGIcon';
+
+import { type ModalProps } from '@Components/modals/Modal';
+import ModalWrapper from '@Components/modals/ModalWrapper';
+
+import { Breakpoint, spacing } from '@Config/styles';
+import { useFormWithGlobalError } from '@Hooks/useFormWithGlobalError';
+import {
+ convertFormDataToPayload,
+ convertPlanToFormData,
+ defaultValues,
+ type MembershipPlan,
+ useSaveMembershipPlanMutation,
+} from '../../services/memberships';
+import { LoadingSection } from '@/v3/shared/atoms/LoadingSpinner';
+const MembershipFormFields = lazy(() => import('../MembershipFormFields'));
+
+interface MembershipModalProps extends ModalProps {
+ closeModal: (props?: { action: 'CONFIRM' | 'CLOSE' }) => void;
+ plan?: MembershipPlan;
+}
+
+export default function MembershipModal({ title, subtitle, icon, plan, closeModal }: MembershipModalProps) {
+ const form = useFormWithGlobalError({
+ defaultValues: plan ? convertPlanToFormData(plan) : defaultValues,
+ });
+
+ const saveMembershipPlanMutation = useSaveMembershipPlanMutation();
+
+ useEffect(() => {
+ if (plan) {
+ form.reset(convertPlanToFormData(plan));
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [plan]);
+
+ function handleSubmit() {
+ form.handleSubmit(async (data) => {
+ const payload = convertFormDataToPayload(data);
+ const response = await saveMembershipPlanMutation.mutateAsync(payload);
+ if (response.status_code === 200 || response.status_code === 201) {
+ closeModal({ action: 'CONFIRM' });
+ }
+ })();
+ }
+
+ const isFormDirty = form.formState.isDirty;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {(icon: keyof typeof featureIcons) => {
+ return (
+
+
+
+
+
+ 
+
+ );
+};
+
+export default EmptyState;
+
+const styles = {
+ wrapper: css`
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ gap: ${spacing[8]};
+
+ background-color: ${colorTokens.background.white};
+ border: 1px solid ${colorTokens.stroke.divider};
+ border-radius: ${borderRadius[6]};
+ padding: ${spacing[32]} ${spacing[24]};
+
+ img {
+ max-width: 234px;
+ }
+ `,
+ title: css`
+ ${typography.heading6('medium')};
+ line-height: ${lineHeight[28]};
+ `,
+ content: css`
+ ${typography.body()};
+ line-height: ${lineHeight[22]};
+ color: ${colorTokens.text.title};
+ margin-bottom: ${spacing[12]};
+ max-width: 306px;
+ text-align: center;
+ `,
+};
diff --git a/assets/react/v3/entries/pro/membership-settings/services/memberships.ts b/assets/react/v3/entries/pro/membership-settings/services/memberships.ts
new file mode 100644
index 0000000000..3266075db4
--- /dev/null
+++ b/assets/react/v3/entries/pro/membership-settings/services/memberships.ts
@@ -0,0 +1,272 @@
+import { useToast } from '@/v3/shared/atoms/Toast';
+import { DateFormats } from '@/v3/shared/config/constants';
+import { type ErrorResponse } from '@/v3/shared/utils/form';
+import { type TutorMutationResponse } from '@/v3/shared/utils/types';
+import { convertGMTtoLocalDate, convertToErrorMessage, convertToGMT } from '@/v3/shared/utils/util';
+import { wpAjaxInstance } from '@Utils/api';
+import endpoints from '@Utils/endpoints';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { format } from 'date-fns';
+import { type Feature } from '../components/fields/FormFeatureItem';
+
+export interface Category {
+ id: number;
+ title: string;
+ image: string;
+ total_courses: string;
+}
+
+export interface MembershipPlan {
+ id: string;
+ is_enabled: boolean;
+ plan_name: string | null;
+ plan_order: string;
+ plan_type: 'full_site' | 'category';
+ categories: Category[];
+ payment_type: string;
+ short_description: string | null;
+ description: string | null;
+ provide_certificate: '0' | '1';
+ recurring_interval: string;
+ recurring_limit: string;
+ recurring_value: string;
+ regular_price: string;
+ sale_price: string | null;
+ sale_price_from: string | null;
+ sale_price_to: string | null;
+ enrollment_fee: string | null;
+ is_featured: '0' | '1';
+ featured_text: string | null;
+}
+
+export interface MembershipSettings {
+ plans: MembershipPlan[];
+}
+
+export interface MembershipFormData {
+ id?: string;
+ plan_name: string;
+ plan_type: 'full_site' | 'category';
+ short_description: string;
+ features: Feature[];
+ categories: Category[];
+ recurring_value: string;
+ recurring_interval: string;
+ recurring_limit: string;
+ regular_price: string;
+ offer_sale_price: boolean;
+ sale_price: string;
+ schedule_sale_price: boolean;
+ sale_price_from_date: string;
+ sale_price_from_time: string;
+ sale_price_to_date: string;
+ sale_price_to_time: string;
+ charge_enrollment_fee: boolean;
+ enrollment_fee: string;
+ do_not_provide_certificate: boolean;
+ is_featured: boolean;
+ featured_text: string;
+}
+
+export const defaultValues: MembershipFormData = {
+ plan_name: '',
+ plan_type: 'full_site',
+ short_description: '',
+ features: [],
+ categories: [],
+ recurring_value: '',
+ recurring_interval: '',
+ recurring_limit: '',
+ regular_price: '',
+ offer_sale_price: false,
+ sale_price: '',
+ schedule_sale_price: false,
+ sale_price_from_date: '',
+ sale_price_from_time: '',
+ sale_price_to_date: '',
+ sale_price_to_time: '',
+ charge_enrollment_fee: false,
+ enrollment_fee: '',
+ do_not_provide_certificate: false,
+ is_featured: false,
+ featured_text: '',
+};
+
+export type DurationUnit = 'hour' | 'day' | 'week' | 'month' | 'year';
+
+export type MembershipPayload = {
+ id?: string; // only for update
+ plan_name: string;
+ short_description: string;
+ description: string;
+ plan_type: 'category' | 'full_site';
+ cat_ids?: number[];
+ recurring_value: string;
+ recurring_interval: Omit{__('No Membership Added Yet', 'tutor')}
+{__('Set up memberships or package plans to sell on your site.', 'tutor')}
+ }
+ >
+ {__('New Membership Level', 'tutor')}
+
+
+ {
+ const filteredItems = categoryList.filter((category) => category.id !== item.id);
+ const isNewItem = filteredItems?.length === categoryList.length;
+
+ if (isNewItem) {
+ form.setValue('categories', [...filteredItems, item]);
+ } else {
+ form.setValue('categories', filteredItems);
+ }
+ }}
+ checked={categoryList.map((category) => category.id).includes(item.id)}
+ />
+ 
+
+ );
+ },
+ width: 720,
+ },
+ ];
+
+ if (categoryListQuery.isLoading) {
+ return
+
+ {item.title}
+ {`${item.total_courses} ${__('Courses', 'tutor')}`}
+{__('Something went wrong', 'tutor')}
;
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CategoryListTable;
+
+const styles = {
+ tableActions: css`
+ padding: ${spacing[20]};
+ `,
+ tableWrapper: css`
+ max-height: calc(100vh - 350px);
+ overflow: auto;
+ `,
+ paginatorWrapper: css`
+ margin: ${spacing[20]} ${spacing[16]};
+ `,
+ checkboxWrapper: css`
+ display: flex;
+ align-items: center;
+ gap: ${spacing[12]};
+ `,
+ courseItem: css`
+ ${typography.caption()};
+ margin-left: ${spacing[4]};
+ `,
+ thumbnail: css`
+ width: 48px;
+ height: 48px;
+ border-radius: ${borderRadius[4]};
+ `,
+ errorMessage: css`
+ height: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ `,
+};
diff --git a/assets/react/v3/shared/components/modals/CourseCategorySelectModal/CourseListTable.tsx b/assets/react/v3/shared/components/modals/CourseCategorySelectModal/CourseListTable.tsx
new file mode 100644
index 0000000000..55937a2981
--- /dev/null
+++ b/assets/react/v3/shared/components/modals/CourseCategorySelectModal/CourseListTable.tsx
@@ -0,0 +1,185 @@
+import Checkbox from '@Atoms/CheckBox';
+import { LoadingSection } from '@Atoms/LoadingSpinner';
+import { borderRadius, colorTokens, spacing } from '@Config/styles';
+import { typography } from '@Config/typography';
+import { usePaginatedTable } from '@Hooks/usePaginatedTable';
+import Paginator from '@Molecules/Paginator';
+import Table, { type Column } from '@Molecules/Table';
+import { css } from '@emotion/react';
+
+import coursePlaceholder from '@Images/course-placeholder.png';
+import { __, sprintf } from '@wordpress/i18n';
+import type { UseFormReturn } from 'react-hook-form';
+import SearchField from './SearchField';
+import { type Course, useCourseCategoryQuery } from '@/v3/shared/services/course_category';
+
+interface CourseListTableProps {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ form: UseFormReturn
+ {
+ const filteredItems = courseList.filter((course) => course.id !== item.id);
+ const isNewItem = filteredItems?.length === courseList.length;
+
+ if (isNewItem) {
+ form.setValue(type, [...filteredItems, item]);
+ } else {
+ form.setValue(type, filteredItems);
+ }
+ }}
+ checked={courseList.map((course) => course.id).includes(item.id)}
+ />
+
+
+ );
+ },
+ },
+ {
+ Header: __('Price', 'tutor'),
+ Cell: (item) => {
+ return (
+
+
+ {item.title}
+ {item.author}
+
+ {item.plan_start_price ? (
+ {sprintf(__('Starting from %s', 'tutor'), item.plan_start_price)}
+ ) : (
+ <>
+ {item.sale_price ? item.sale_price : item.regular_price}
+ {item.sale_price && {item.regular_price}}
+
+ )}
+
+ );
+ },
+ },
+ ];
+
+ if (courseListQuery.isLoading) {
+ return {__('Something went wrong', 'tutor')}
;
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CourseListTable;
+
+const styles = {
+ tableActions: css`
+ padding: ${spacing[20]};
+ `,
+ tableWrapper: css`
+ max-height: calc(100vh - 350px);
+ overflow: auto;
+ `,
+ paginatorWrapper: css`
+ margin: ${spacing[20]} ${spacing[16]};
+ `,
+ checkboxWrapper: css`
+ display: flex;
+ align-items: center;
+ gap: ${spacing[12]};
+ `,
+ courseItem: css`
+ ${typography.caption()};
+ margin-left: ${spacing[4]};
+ `,
+ thumbnail: css`
+ width: 48px;
+ height: 48px;
+ border-radius: ${borderRadius[4]};
+ `,
+ checkboxLabel: css`
+ ${typography.body()};
+ color: ${colorTokens.text.primary};
+ `,
+ price: css`
+ display: flex;
+ gap: ${spacing[4]};
+ justify-content: end;
+ `,
+ discountPrice: css`
+ text-decoration: line-through;
+ color: ${colorTokens.text.subdued};
+ `,
+ errorMessage: css`
+ height: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ `,
+ startingFrom: css`
+ color: ${colorTokens.text.hints};
+ `,
+};
diff --git a/assets/react/v3/shared/components/modals/CourseCategorySelectModal/SearchField.tsx b/assets/react/v3/shared/components/modals/CourseCategorySelectModal/SearchField.tsx
new file mode 100644
index 0000000000..52251faa35
--- /dev/null
+++ b/assets/react/v3/shared/components/modals/CourseCategorySelectModal/SearchField.tsx
@@ -0,0 +1,44 @@
+import SVGIcon from '@Atoms/SVGIcon';
+import FormInputWithContent from '@Components/fields/FormInputWithContent';
+import { useDebounce } from '@Hooks/useDebounce';
+import { useFormWithGlobalError } from '@Hooks/useFormWithGlobalError';
+import type { Filter } from '@Hooks/usePaginatedTable';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from 'react';
+import { Controller } from 'react-hook-form';
+
+interface FilterFormValues {
+ search: string;
+}
+
+interface SearchFieldProps {
+ onFilterItems: (filter: Filter) => void;
+}
+
+const SearchField = ({ onFilterItems }: SearchFieldProps) => {
+ const actionsForm = useFormWithGlobalError
+
+
+
+