Merge branch 'main' into remove-sendNewsletter

Author: vincanger

opensaas-sh/app_diff/src/admin/dashboards/users/UsersTable.tsx.diff

@@ -1,14 +1,6 @@
 --- template/app/src/admin/dashboards/users/UsersTable.tsx
 +++ opensaas-sh/app/src/admin/dashboards/users/UsersTable.tsx
-@@ -9,6 +9,7 @@
-   const [skip, setskip] = useState(0);
-   const [page, setPage] = useState(1);
-   const [email, setEmail] = useState<string | undefined>(undefined);
-+  
-   const [isAdminFilter, setIsAdminFilter] = useState<boolean | undefined>(undefined);
-   const [statusOptions, setStatusOptions] = useState<SubscriptionStatus[]>([]);
-   const { data, isLoading, error } = useQuery(getPaginatedUsers, {
-@@ -211,7 +212,7 @@
+@@ -207,7 +207,7 @@
                  <p className='text-sm text-black dark:text-white'>{user.subscriptionStatus}</p>
                </div>
                <div className='col-span-2 flex items-center'>

opensaas-sh/app_diff/src/analytics/stats.ts.diff

@@ -1,18 +1,19 @@
 --- template/app/src/analytics/stats.ts
 +++ opensaas-sh/app/src/analytics/stats.ts
-@@ -2,10 +2,8 @@
+@@ -2,11 +2,9 @@
  import { type DailyStatsJob } from 'wasp/server/jobs';
  import Stripe from 'stripe';
- import { stripe } from '../payment/stripe/stripeClient'
+ import { stripe } from '../payment/stripe/stripeClient';
 -import { listOrders } from '@lemonsqueezy/lemonsqueezy.js';
  import { getDailyPageViews, getSources } from './providers/plausibleAnalyticsUtils';
 -// import { getDailyPageViews, getSources } from './providers/googleAnalyticsUtils';
 -import { paymentProcessor } from '../payment/paymentProcessor';
-+// import { getDailyPageViews, getSources } from './providers/googleAnalyticsUtils;
+ import { SubscriptionStatus } from '../payment/plans';
++// import { getDailyPageViews, getSources } from './providers/googleAnalyticsUtils';
 
  export type DailyStatsProps = { dailyStats?: DailyStats; weeklyStats?: DailyStats[]; isLoading?: boolean };
 
-@@ -41,17 +39,7 @@
+@@ -42,17 +40,7 @@
        paidUserDelta -= yesterdaysStats.paidUserCount;
      }
 
@@ -27,11 +28,11 @@
 -      default:
 -        throw new Error(`Unsupported payment processor: ${paymentProcessor.id}`);
 -    }
-+    let totalRevenue = await fetchTotalStripeRevenue()
++    let totalRevenue = await fetchTotalStripeRevenue();
 
      const { totalViews, prevDayViewsChangePercent } = await getDailyPageViews();
 
-@@ -162,38 +150,3 @@
+@@ -163,38 +151,3 @@
    // Revenue is in cents so we convert to dollars (or your main currency unit)
    return totalRevenue / 100;
  }
@@ -70,4 +71,3 @@
 -    throw error;
 -  }
 -}
-\ No newline at end of file

opensaas-sh/app_diff/src/user/operations.ts.diff

@@ -1,39 +1,31 @@
 --- template/app/src/user/operations.ts
 +++ opensaas-sh/app/src/user/operations.ts
-@@ -41,7 +41,10 @@
+@@ -34,10 +34,7 @@
  };
 
  type GetPaginatedUsersOutput = {
--  users: Pick<User, 'id' | 'email' | 'username' | 'subscriptionStatus' | 'paymentProcessorUserId'>[];
-+  users: Pick<
-+    User,
-+    'id' | 'email' | 'username' | 'subscriptionStatus' | 'stripeId'
-+  >[];
+-  users: Pick<
+-    User,
+-    'id' | 'email' | 'username' | 'subscriptionStatus' | 'paymentProcessorUserId' | 'isAdmin'
+-  >[];
++  users: Pick<User, 'id' | 'email' | 'username' | 'subscriptionStatus' | 'stripeId' | 'isAdmin'>[];
    totalPages: number;
  };
 
-@@ -85,6 +88,7 @@
+@@ -85,6 +82,7 @@
              mode: 'insensitive',
            },
            isAdmin,
 +          isMockUser: true,
          },
          {
            OR: [
-@@ -108,7 +112,7 @@
+@@ -106,7 +104,7 @@
        username: true,
        isAdmin: true,
        subscriptionStatus: true,
 -      paymentProcessorUserId: true,
 +      stripeId: true,
      },
      orderBy: {
-       id: 'desc',
-@@ -124,6 +128,7 @@
-             mode: 'insensitive',
-           },
-           isAdmin,
-+          isMockUser: true,
-         },
-         {
-           OR: [
+       username: 'asc',

template/app/schema.prisma

@@ -109,4 +109,4 @@ model ContactFormMessage {
   content                   String
   isRead                    Boolean         @default(false)
   repliedAt                 DateTime?
-}
+}

template/app/src/admin/dashboards/users/SwitcherOne.tsx

@@ -1,30 +1,43 @@
-import { type SubscriptionStatus } from '../../../payment/plans';
-import { updateIsUserAdminById, useQuery, getPaginatedUsers } from 'wasp/client/operations';
+import { SubscriptionStatus } from '../../../payment/plans';
+import { useQuery, getPaginatedUsers } from 'wasp/client/operations';
 import { useState, useEffect } from 'react';
-import SwitcherOne from './SwitcherOne';
+import SwitcherOne from '../../elements/forms/SwitcherOne';
 import LoadingSpinner from '../../layout/LoadingSpinner';
 import DropdownEditDelete from './DropdownEditDelete';
+import { updateIsUserAdminById } from 'wasp/client/operations';
+import { type User } from 'wasp/entities';
+
+function AdminSwitch({ id, isAdmin }: Pick<User, 'id' | 'isAdmin'>) {
+  return (
+    <SwitcherOne isOn={isAdmin} onChange={(value) => updateIsUserAdminById({ id: id, isAdmin: value })} />
+  );
+}
 
 const UsersTable = () => {
-  const [skip, setskip] = useState(0);
-  const [page, setPage] = useState(1);
-  const [email, setEmail] = useState<string | undefined>(undefined);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [emailFilter, setEmailFilter] = useState<string | undefined>(undefined);
   const [isAdminFilter, setIsAdminFilter] = useState<boolean | undefined>(undefined);
-  const [statusOptions, setStatusOptions] = useState<SubscriptionStatus[]>([]);
-  const { data, isLoading, error } = useQuery(getPaginatedUsers, {
-    skip,
-    emailContains: email,
-    isAdmin: isAdminFilter,
-    subscriptionStatus: statusOptions?.length > 0 ? statusOptions : undefined,
-  });
+  const [subscriptionStatusFilter, setSubcriptionStatusFilter] = useState<Array<SubscriptionStatus | null>>(
+    []
+  );
 
-  useEffect(() => {
-    setPage(1);
-  }, [email, statusOptions]);
+  const skipPages = currentPage - 1;
 
-  useEffect(() => {
-    setskip((page - 1) * 10);
-  }, [page]);
+  const { data, isLoading } = useQuery(getPaginatedUsers, {
+    skipPages,
+    filter: {
+      ...(emailFilter && { emailContains: emailFilter }),
+      ...(isAdminFilter !== undefined && { isAdmin: isAdminFilter }),
+      ...(subscriptionStatusFilter.length > 0 && { subscriptionStatusIn: subscriptionStatusFilter }),
+    },
+  });
+
+  useEffect(
+    function backToPageOne() {
+      setCurrentPage(1);
+    },
+    [emailFilter, subscriptionStatusFilter, isAdminFilter]
+  );
 
   return (
     <div className='flex flex-col gap-4'>
@@ -41,7 +54,8 @@ const UsersTable = () => {
                 id='email-filter'
                 placeholder='[email protected]'
                 onChange={(e) => {
-                  setEmail(e.currentTarget.value);
+                  const value = e.currentTarget.value;
+                  setEmailFilter(value === '' ? undefined : value);
                 }}
                 className='rounded border border-stroke py-2 px-5 bg-white outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary'
               />
@@ -50,8 +64,8 @@ const UsersTable = () => {
               </label>
               <div className='flex-grow relative z-20 rounded border border-stroke pr-8 outline-none bg-white transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input'>
                 <div className='flex items-center'>
-                  {!!statusOptions && statusOptions.length > 0 ? (
-                    statusOptions.map((opt, idx) => (
+                  {subscriptionStatusFilter.length > 0 ? (
+                    subscriptionStatusFilter.map((opt) => (
                       <span
                         key={opt}
                         className='z-30 flex items-center my-1 mx-2 py-1 px-2 outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary'
@@ -60,26 +74,13 @@ const UsersTable = () => {
                         <span
                           onClick={(e) => {
                             e.stopPropagation();
-                            setStatusOptions((prevValue) => {
+                            setSubcriptionStatusFilter((prevValue) => {
                               return prevValue?.filter((val) => val !== opt);
                             });
                           }}
                           className='z-30 cursor-pointer pl-2 hover:text-danger'
                         >
-                          <svg
-                            width='14'
-                            height='14'
-                            viewBox='0 0 12 12'
-                            fill='none'
-                            xmlns='http://www.w3.org/2000/svg'
-                          >
-                            <path
-                              fillRule='evenodd'
-                              clipRule='evenodd'
-                              d='M9.35355 3.35355C9.54882 3.15829 9.54882 2.84171 9.35355 2.64645C9.15829 2.45118 8.84171 2.45118 8.64645 2.64645L6 5.29289L3.35355 2.64645C3.15829 2.45118 2.84171 2.45118 2.64645 2.64645C2.45118 2.84171 2.45118 3.15829 2.64645 3.35355L5.29289 6L2.64645 8.64645C2.45118 8.84171 2.45118 9.15829 2.64645 9.35355C2.84171 9.54882 3.15829 9.54882 3.35355 9.35355L6 6.70711L8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L6.70711 6L9.35355 3.35355Z'
-                              fill='currentColor'
-                            ></path>
-                          </svg>
+                          <XIcon />
                         </span>
                       </span>
                     ))
@@ -91,45 +92,37 @@ const UsersTable = () => {
                 </div>
                 <select
                   onChange={(e) => {
-                    const targetValue = e.target.value === '' ? null : e.target.value;
-                    setStatusOptions((prevValue) => {
-                      if (prevValue?.includes(targetValue as SubscriptionStatus)) {
-                        return prevValue?.filter((val) => val !== targetValue);
-                      } else if (!!prevValue) {
-                        return [...prevValue, targetValue as SubscriptionStatus];
-                      } else {
-                        return prevValue;
-                      }
-                    });
+                    const selectedValue = e.target.value == 'has_not_subscribed' ? null : e.target.value;
+
+                    console.log(selectedValue);
+                    if (selectedValue === 'clear-all') {
+                      setSubcriptionStatusFilter([]);
+                    } else {
+                      setSubcriptionStatusFilter((prevValue) => {
+                        if (prevValue.includes(selectedValue as SubscriptionStatus)) {
+                          return prevValue.filter((val) => val !== selectedValue);
+                        } else {
+                          return [...prevValue, selectedValue as SubscriptionStatus];
+                        }
+                      });
+                    }
                   }}
                   name='status-filter'
                   id='status-filter'
                   className='absolute top-0 left-0 z-20 h-full w-full bg-white opacity-0'
                 >
-                  <option value=''>Select filters</option>
-                  {['past_due', 'canceled', 'active', 'deleted', null].map((status) => {
-                    if (!statusOptions.includes(status as SubscriptionStatus)) {
-                      return <option value={status || ''}>{status ? status : 'has not subscribed'}</option>;
-                    }
-                  })}
+                  <option value='select-filters'>Select filters</option>
+                  {[...Object.values(SubscriptionStatus), null]
+                    .filter((status) => !subscriptionStatusFilter.includes(status))
+                    .map((status) => {
+                      const extendedStatus = status ?? 'has_not_subscribed'
+                      return <option key={extendedStatus} value={extendedStatus}>
+                        {extendedStatus}
+                      </option>
+                    })}
                 </select>
                 <span className='absolute top-1/2 right-4 z-10 -translate-y-1/2'>
-                  <svg
-                    width='24'
-                    height='24'
-                    viewBox='0 0 24 24'
-                    fill='none'
-                    xmlns='http://www.w3.org/2000/svg'
-                  >
-                    <g opacity='0.8'>
-                      <path
-                        fillRule='evenodd'
-                        clipRule='evenodd'
-                        d='M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z'
-                        fill='#637381'
-                      ></path>
-                    </g>
-                  </svg>
+                  <ChevronDownIcon />
                 </span>
               </div>
               <div className='flex items-center gap-2'>
@@ -158,11 +151,14 @@ const UsersTable = () => {
                 <span className='text-md mr-2 text-black dark:text-white'>page</span>
                 <input
                   type='number'
-                  value={page}
                   min={1}
+                  defaultValue={currentPage}
                   max={data?.totalPages}
                   onChange={(e) => {
-                    setPage(parseInt(e.currentTarget.value));
+                    const value = parseInt(e.currentTarget.value);
+                    if (data?.totalPages && value <= data?.totalPages && value > 0) {
+                      setCurrentPage(value);
+                    }
                   }}
                   className='rounded-md border-1 border-stroke bg-transparent  px-4 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary'
                 />
@@ -215,7 +211,7 @@ const UsersTable = () => {
               </div>
               <div className='col-span-1 flex items-center'>
                 <div className='text-sm text-black dark:text-white'>
-                  <SwitcherOne user={user} updateIsUserAdminById={updateIsUserAdminById} />
+                  <AdminSwitch {...user} />
                 </div>
               </div>
               <div className='col-span-1 flex items-center'>
@@ -228,4 +224,32 @@ const UsersTable = () => {
   );
 };
 
+function ChevronDownIcon() {
+  return (
+    <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g opacity='0.8'>
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z'
+          fill='#637381'
+        ></path>
+      </g>
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg width='14' height='14' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M9.35355 3.35355C9.54882 3.15829 9.54882 2.84171 9.35355 2.64645C9.15829 2.45118 8.84171 2.45118 8.64645 2.64645L6 5.29289L3.35355 2.64645C3.15829 2.45118 2.84171 2.45118 2.64645 2.64645C2.45118 2.84171 2.45118 3.15829 2.64645 3.35355L5.29289 6L2.64645 8.64645C2.45118 8.84171 2.45118 9.15829 2.64645 9.35355C2.84171 9.54882 3.15829 9.54882 3.35355 9.35355L6 6.70711L8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L6.70711 6L9.35355 3.35355Z'
+        fill='currentColor'
+      ></path>
+    </svg>
+  );
+}
+
 export default UsersTable;