From 44f3d8783d5d6ebc193b55e4fdd14e3b26883afa Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Sat, 13 Dec 2025 09:54:02 +0530
Subject: [PATCH] Adding additional fields in landing subscription cards.

---
 src/pages/Home/SubscriptionPlans.jsx | 93 +++++++++++++++++++++-------
 1 file changed, 72 insertions(+), 21 deletions(-)

diff --git a/src/pages/Home/SubscriptionPlans.jsx b/src/pages/Home/SubscriptionPlans.jsx
index 59ef4a7e..6c47826b 100644
--- a/src/pages/Home/SubscriptionPlans.jsx
+++ b/src/pages/Home/SubscriptionPlans.jsx
@@ -9,7 +9,7 @@ const SubscriptionPlans = () => {
   const [frequency, setFrequency] = useState(1);
   const { data, isLoading, isError, error } = useSubscription(frequency);
   const [loading, setLoading] = useState(false);
-
+  console.log(data);
   const frequencyLabel = (freq) => {
     switch (freq) {
       case 0:
@@ -35,9 +35,8 @@ const SubscriptionPlans = () => {
               <button
                 key={idx}
                 type="button"
-                className={`btn btn-${
-                  frequency === idx ? "primary" : "outline-secondary"
-                }`}
+                className={`btn btn-${frequency === idx ? "primary" : "outline-secondary"
+                  }`}
                 onClick={() => setFrequency(idx)}
               >
                 {label}
@@ -102,24 +101,76 @@ const SubscriptionPlans = () => {
                 <h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
                   Features
                 </h6>
-                <ul className="list-unstyled text-start mb-4 ms-7 fs-6">
+
+                <div className="accordion" id={`planFeatures-${plan.id}`}>
                   {plan.features?.modules &&
-                    Object.values(plan.features.modules).map((mod) =>
-                      mod && mod.name ? (
-                        <li
-                          key={mod.id}
-                          className="d-flex align-items-center mb-2"
-                        >
-                          {mod.enabled ? (
-                            <i className="fa-regular fa-circle-check text-success me-2"></i>
-                          ) : (
-                            <i className="fa-regular fa-circle-xmark text-danger me-2"></i>
-                          )}
-                          {mod.name}
-                        </li>
-                      ) : null
-                    )}
-                </ul>
+                    Object.entries(plan.features.modules).map(([key, mod]) => {
+                      if (!mod || !mod.name) return null;
+
+                      return (
+                        <div className="accordion-item mb-2" key={mod.id}>
+                          <h2 className="accordion-header" id={`heading-${mod.id}`}>
+                            <button
+                              className="accordion-button collapsed py-2 d-flex justify-content-between align-items-center"
+                              type="button"
+                              data-bs-toggle="collapse"
+                              data-bs-target={`#collapse-${mod.id}-${plan.id}`}
+                              aria-expanded="false"
+                              aria-controls={`collapse-${mod.id}-${plan.id}`}
+                            >
+                              <span className="fw-semibold d-flex align-items-center">
+                                {mod.enabled ? (
+                                  <i className="fa-regular fa-circle-check text-success me-2"></i>
+                                ) : (
+                                  <i className="fa-regular fa-circle-xmark text-danger me-2"></i>
+                                )}
+                                {mod.name}
+                              </span>
+
+                              {/* Down arrow */}
+                              <i
+                                className="bx bx-chevron-down ms-2 transition-arrow"
+                                style={{ fontSize: "16px", transition: "transform 0.3s" }}
+                              ></i>
+                            </button>
+                          </h2>
+
+                          <div
+                            id={`collapse-${mod.id}-${plan.id}`}
+                            className="accordion-collapse collapse"
+                            data-bs-parent={`#planFeatures-${plan.id}`}
+                          >
+                            <div className="accordion-body py-2">
+                              {mod.features && mod.features.length > 0 ? (
+                                <ul className="list-unstyled ms-2">
+                                  {mod.features.map((feat) => (
+                                    <li
+                                      key={feat.id}
+                                      className="d-flex align-items-start mb-1"
+                                    >
+                                      <i
+                                        className={`fa-regular ${mod.enabled ? "bx bxs-circle text-success" : "bx bxs-circle text-danger"
+                                          } me-2 mt-1`}
+                                        style={{ fontSize: "8px" }}
+                                      ></i>
+
+                                      <span>{feat.name}</span>
+                                    </li>
+                                  ))}
+                                </ul>
+                              ) : (
+                                <p className="text-muted small mb-0">
+                                  No additional features
+                                </p>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                </div>
+
+
 
                 {/* Button */}
                 <div className="mt-auto">