first commit

common/resources/client/admin/plans/requests/use-create-product.ts

@@ -0,0 +1,44 @@
+import {Product} from '../../../billing/product';
+import {useTrans} from '../../../i18n/use-trans';
+import {useNavigate} from '../../../utils/hooks/use-navigate';
+import {useMutation} from '@tanstack/react-query';
+import {toast} from '../../../ui/toast/toast';
+import {message} from '../../../i18n/message';
+import {apiClient, queryClient} from '../../../http/query-client';
+import {DatatableDataQueryKey} from '../../../datatable/requests/paginated-resources';
+import {Price} from '../../../billing/price';
+import {onFormQueryError} from '../../../errors/on-form-query-error';
+import {UseFormReturn} from 'react-hook-form';
+
+const endpoint = 'billing/products';
+
+export interface CreateProductPayload
+  extends Omit<Partial<Product>, 'feature_list' | 'prices'> {
+  feature_list: {value: string}[];
+  prices: Omit<Price, 'id'>[];
+}
+
+export function useCreateProduct(form: UseFormReturn<CreateProductPayload>) {
+  const {trans} = useTrans();
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: (payload: CreateProductPayload) => createProduct(payload),
+    onSuccess: () => {
+      toast(trans(message('Plan created')));
+      queryClient.invalidateQueries({queryKey: [endpoint]});
+      queryClient.invalidateQueries({
+        queryKey: DatatableDataQueryKey('billing/products'),
+      });
+      navigate('/admin/plans');
+    },
+    onError: err => onFormQueryError(err, form),
+  });
+}
+
+function createProduct(payload: CreateProductPayload): Promise<Response> {
+  const backendPayload = {
+    ...payload,
+    feature_list: payload.feature_list.map(feature => feature.value),
+  };
+  return apiClient.post(endpoint, backendPayload).then(r => r.data);
+}

common/resources/client/admin/plans/requests/use-delete-product.ts

@@ -0,0 +1,34 @@
+import {useMutation} from '@tanstack/react-query';
+import {apiClient, queryClient} from '../../../http/query-client';
+import {BackendResponse} from '../../../http/backend-response/backend-response';
+import {toast} from '../../../ui/toast/toast';
+import {useTrans} from '../../../i18n/use-trans';
+import {message} from '../../../i18n/message';
+import {DatatableDataQueryKey} from '../../../datatable/requests/paginated-resources';
+import {showHttpErrorToast} from '../../../utils/http/show-http-error-toast';
+
+const endpoint = (id: number) => `billing/products/${id}`;
+
+interface Response extends BackendResponse {}
+
+interface Payload {
+  productId: number;
+}
+
+export function useDeleteProduct() {
+  const {trans} = useTrans();
+  return useMutation({
+    mutationFn: (payload: Payload) => updateProduct(payload),
+    onSuccess: () => {
+      toast(trans(message('Plan deleted')));
+      queryClient.invalidateQueries({
+        queryKey: DatatableDataQueryKey('billing/products'),
+      });
+    },
+    onError: err => showHttpErrorToast(err),
+  });
+}
+
+function updateProduct({productId}: Payload): Promise<Response> {
+  return apiClient.delete(endpoint(productId)).then(r => r.data);
+}

common/resources/client/admin/plans/requests/use-product.ts

@@ -0,0 +1,23 @@
+import {useQuery} from '@tanstack/react-query';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {apiClient} from '@common/http/query-client';
+import {useParams} from 'react-router-dom';
+import {Product} from '@common/billing/product';
+
+const Endpoint = (id: number | string) => `billing/products/${id}`;
+
+export interface FetchRoleResponse extends BackendResponse {
+  product: Product;
+}
+
+export function useProduct() {
+  const {productId} = useParams();
+  return useQuery({
+    queryKey: [Endpoint(productId!)],
+    queryFn: () => fetchProduct(productId!),
+  });
+}
+
+function fetchProduct(productId: number | string): Promise<FetchRoleResponse> {
+  return apiClient.get(Endpoint(productId)).then(response => response.data);
+}

common/resources/client/admin/plans/requests/use-sync-products.ts

@@ -0,0 +1,24 @@
+import {useMutation} from '@tanstack/react-query';
+import {apiClient} from '../../../http/query-client';
+import {useTrans} from '../../../i18n/use-trans';
+import {BackendResponse} from '../../../http/backend-response/backend-response';
+import {toast} from '../../../ui/toast/toast';
+import {message} from '../../../i18n/message';
+import {showHttpErrorToast} from '../../../utils/http/show-http-error-toast';
+
+interface Response extends BackendResponse {}
+
+export function useSyncProducts() {
+  const {trans} = useTrans();
+  return useMutation({
+    mutationFn: () => syncPlans(),
+    onSuccess: () => {
+      toast(trans(message('Plans synced')));
+    },
+    onError: err => showHttpErrorToast(err, message('Could not sync plans')),
+  });
+}
+
+function syncPlans(): Promise<Response> {
+  return apiClient.post('billing/products/sync').then(r => r.data);
+}

common/resources/client/admin/plans/requests/use-update-product.ts

@@ -0,0 +1,52 @@
+import {useMutation} from '@tanstack/react-query';
+import {apiClient, queryClient} from '../../../http/query-client';
+import {BackendResponse} from '../../../http/backend-response/backend-response';
+import {toast} from '../../../ui/toast/toast';
+import {useTrans} from '../../../i18n/use-trans';
+import {message} from '../../../i18n/message';
+import {DatatableDataQueryKey} from '../../../datatable/requests/paginated-resources';
+import {Product} from '../../../billing/product';
+import {useNavigate} from '../../../utils/hooks/use-navigate';
+import {CreateProductPayload} from './use-create-product';
+import {UseFormReturn} from 'react-hook-form';
+import {onFormQueryError} from '../../../errors/on-form-query-error';
+
+interface Response extends BackendResponse {
+  product: Product;
+}
+
+export interface UpdateProductPayload extends CreateProductPayload {
+  id: number;
+}
+
+const Endpoint = (id: number) => `billing/products/${id}`;
+
+export function useUpdateProduct(form: UseFormReturn<UpdateProductPayload>) {
+  const {trans} = useTrans();
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: (payload: UpdateProductPayload) => updateProduct(payload),
+    onSuccess: response => {
+      toast(trans(message('Plan updated')));
+      queryClient.invalidateQueries({
+        queryKey: [Endpoint(response.product.id)],
+      });
+      queryClient.invalidateQueries({
+        queryKey: DatatableDataQueryKey('billing/products'),
+      });
+      navigate('/admin/plans');
+    },
+    onError: err => onFormQueryError(err, form),
+  });
+}
+
+function updateProduct({
+  id,
+  ...payload
+}: UpdateProductPayload): Promise<Response> {
+  const backendPayload = {
+    ...payload,
+    feature_list: payload.feature_list.map(feature => feature.value),
+  };
+  return apiClient.put(Endpoint(id), backendPayload).then(r => r.data);
+}