Merge pull request #112 from Vero-Ventures/feature/disable-display-ch…

…eckbox-for-pending-postings

Feature/disable display checkbox for pending postings

README.md

@@ -86,6 +86,7 @@ To install the project, clone the repository and run `npm install` to install al
 - `babel`: JavaScript compiler.
 - `babel-plugin-istanbul`: Babel plugin for code coverage.
 - `class-variance-authority`: Utility library for class variance.
+- `classnames`: Utility for conditionally combining class names
 - `clsx`: Library for conditionally joining classNames.
 - `dotenv`: Library for loading environment variables.
 - `lucide-react`: Library for Lucide icons.

package.json

@@ -35,6 +35,7 @@
     "babel": "^6.23.0",
     "babel-plugin-istanbul": "^6.1.1",
     "class-variance-authority": "^0.7.0",
+    "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",
     "lucide-react": "^0.378.0",
@@ -46,6 +47,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-quill": "^2.0.0",
+    "react-tooltip": "^5.26.4",
     "stripe": "^15.6.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",

src/app/admin-panel/home/page.js

@@ -191,9 +191,6 @@ export default function Home() {
                 email={user.email}
                 onClose={() => setShowForm(false)}
               />
-              {/* <button
-              className="close-icon absolute top-0 right-0 p-2 text-gray-500 hover:text-gray-700"
-              onClick={() => setShowForm(false)}></button> */}
             </div>
           </div>
         )}

src/app/admin-panel/postingDetails/page.js

@@ -337,6 +337,7 @@ export default function DetailsPage() {
             site5: jobPosting.site5,
           }}
           handleChange={handleChange}
+          disabled={jobPosting.paid}
         />
         <div className="mt-10 flex space-x-4">
           <button

src/app/admin-panel/style.css

@@ -10,3 +10,17 @@
   background-position: center;
   background-size: contain;
 }
+
+.tooltip {
+  position: absolute;
+  top: -20px; /* Adjust as needed */
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: black;
+  color: white;
+  padding: 5px;
+  border-radius: 3px;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 10;
+}

src/components/ui/addJobPostingForm.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import DynamicTextarea from '@/components/ui/dynamicTextArea';
-import CheckboxGroup from '@/components/ui/checkboxGroup';
 
 const AddJobPostingForm = ({ onSubmit, email, onClose }) => {
   const [formData, setFormData] = useState({
@@ -28,8 +27,6 @@ const AddJobPostingForm = ({ onSubmit, email, onClose }) => {
     sent: true,
   });
 
-  const sites = ['Indigenous', 'New Comers', 'Site 3', 'Site 4', 'Site 5'];
-
   const handleChange = e => {
     const { name, value, type, checked } = e.target;
     const newValue = type === 'checkbox' ? checked : value;
@@ -284,13 +281,6 @@ const AddJobPostingForm = ({ onSubmit, email, onClose }) => {
               />
             </div>
           </div>
-          <div>
-            <CheckboxGroup
-              formData={formData}
-              handleChange={handleChange}
-              siteNames={sites}
-            />
-          </div>
         </div>
         <div className="mt-10">
           <button

src/components/ui/card.jsx

@@ -126,6 +126,7 @@ const Card = React.forwardRef(
             <CheckboxGroup
               formData={checkboxState}
               handleChange={handleChange}
+              postingPaid={posting.paid}
             />
           </div>
         </CardContent>

src/components/ui/checkboxGroup.jsx

@@ -1,19 +1,46 @@
-import React from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
 
-function Checkbox({ name, checked, onChange }) {
+function Tooltip({ message }) {
   return (
-    <input
-      type="checkbox"
-      id={name}
-      name={name}
-      checked={checked}
-      onChange={onChange}
-      className="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-    />
+    <div className="absolute bg-black text-white text-xs rounded py-1 px-2 z-10">
+      {message}
+    </div>
+  );
+}
+
+function Checkbox({ name, checked, onChange, disabled }) {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <div
+      className="relative"
+      onMouseEnter={() => disabled && setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}>
+      <input
+        type="checkbox"
+        id={name}
+        name={name}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        className={classNames(
+          'rounded shadow-sm focus:ring focus:ring-opacity-50',
+          {
+            'border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200':
+              !disabled,
+            'border-gray-400 text-gray-400 cursor-not-allowed': disabled,
+          }
+        )}
+      />
+      {disabled && showTooltip && (
+        <Tooltip message="This option is not available for unpaid postings" />
+      )}
+    </div>
   );
 }
 
-function CheckboxGroup({ formData, handleChange }) {
+function CheckboxGroup({ formData, handleChange, postingPaid }) {
   const siteNames = [
     'Indigenous People',
     'Newcomers',
@@ -26,13 +53,19 @@ function CheckboxGroup({ formData, handleChange }) {
   return (
     <div className="mt-4">
       {siteKeys.map((key, index) => (
-        <div key={key} className="flex items-center">
+        <div key={key} className="flex items-center mb-2 relative">
           <Checkbox
             name={key}
             checked={formData[key]}
             onChange={handleChange}
+            disabled={!postingPaid}
           />
-          <label className="ml-2 text-sm" htmlFor={key}>
+          <label
+            className={classNames('ml-2 text-sm', {
+              'text-gray-900': postingPaid,
+              'text-gray-400 cursor-not-allowed': !postingPaid,
+            })}
+            htmlFor={key}>
             {`Display on ${siteNames[index]}`}
           </label>
         </div>