Merge pull request #6736 from layer5io/copilot/fix-0b9af2c9-5b96-4c93-a55c-20b11a83096f

Fix: Position add-on features last in PlanCard with horizontal separator line

Author: leecalcote

src/components/PlanCard/index.js

@@ -94,15 +94,28 @@ const PlanCard = ({ planData , isYearly }) => {
 
                 <div className="pricing-features">
                   {x.summary &&
-                    x.summary.map((t) => (
-                      <div className="feature" key={t.id}>
-                        <FeatureDetails
-                          category={t.category}
-                          description={t.description}
-                          tier={t.tier}
-                        />
-                      </div>
-                    ))}
+                    x.summary.map((t, index) => {
+                      // Check if this is the first add-on feature
+                      const isFirstAddOn = t.categoryOrder === "add-on" &&
+                        (index === 0 || x.summary[index - 1].categoryOrder !== "add-on");
+
+                      return (
+                        <div key={t.id}>
+                          {isFirstAddOn && (
+                            <div className="add-on-separator">
+                              <hr className="add-on-line" />
+                            </div>
+                          )}
+                          <div className="feature">
+                            <FeatureDetails
+                              category={t.category}
+                              description={t.description}
+                              tier={t.tier}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
                 </div>
 
               </div>

src/components/PlanCard/planCard.style.js

@@ -138,6 +138,15 @@ const PlanCardWrapper = styled.section`
   .pricing-features {
     margin-top: 2rem;
     line-height: 1rem;
+    .add-on-separator {
+      margin: 1.5rem 0 1rem 0;
+      .add-on-line {
+        border: none;
+        border-top: 1px solid ${(props) => props.theme.greyDCDCDCToGrey3B3B3B};
+        opacity: 0.5;
+        margin: 0;
+      }
+    }
     .feature {
       margin: 0rem 0rem;
       line-height: 1rem;

src/sections/Pricing/comparison.js

@@ -202,7 +202,7 @@ const Comparison = () => {
             <tbody>
               <tr>
                 <th className="price-blank"></th>
-                  <th className="price-blank"></th>
+                <th className="price-blank"></th>
                 <th className="price-table-popular">Most popular</th>
                 <th className="price-blank"></th>
                 <th className="price-blank"></th>

src/sections/Pricing/generatePlans.js

@@ -72,7 +72,17 @@ function generatePlans(data) {
 
         return mappedItem;
       })
-      .sort((a, b) => a.categoryOrder - b.categoryOrder || a.functionOrder - b.functionOrder);
+      .sort((a, b) => {
+        // Handle "add-on" category order - should come last
+        if (a.categoryOrder === "add-on" && b.categoryOrder !== "add-on") return 1;
+        if (a.categoryOrder !== "add-on" && b.categoryOrder === "add-on") return -1;
+        if (a.categoryOrder === "add-on" && b.categoryOrder === "add-on") {
+          return a.functionOrder - b.functionOrder;
+        }
+
+        // Normal numeric sorting for non add-on categories
+        return a.categoryOrder - b.categoryOrder || a.functionOrder - b.functionOrder;
+      });
     return {
       ...tierInfo,
       summary: summary.length > 0 ? summary : [],