Merge branch 'master' into fix/newcomers-table-horizontal-scroll

Author: vr-varad

package-lock.json

@@ -42,7 +42,7 @@
     "@mui/icons-material": "^6.4.6",
     "@mui/material": "^5.15.11",
     "@react-icons/all-files": "^4.1.0",
-    "@sistent/sistent": "^0.15.5",
+    "@sistent/sistent": "^0.15.7",
     "@svgr/webpack": "^8.0.1",
     "@types/mui-datatables": "^4.3.12",
     "ajv": "^8.17.1",

package.json

@@ -7,27 +7,44 @@ const FeatureDetailsWrapper = styled.div`
   display: inline;
   cursor: pointer;
 
-  .open {
-    margin: 0rem;
-    list-style: none;
-    height: auto !important;
-    opacity: 1 !important;
+  .details > * {
+    max-height: 0;
+    opacity: 0;
+    margin: 0;
+    visibility: hidden;
+    overflow: hidden;
+    transition: opacity 0.2s ease-in-out, 
+                max-height 0.3s ease-in-out 0.1s,
+                margin 0.3s ease-in-out 0.1s,
+                visibility 0s linear 0.4s;
+  }
+
+  .details > .open {
+    max-height: 200px;
+    opacity: 1;
     margin-bottom: 1rem;
-    transition: all 0.4s !important;
+    visibility: visible;
+    transition: visibility 0s linear,
+                opacity 0.2s ease-in-out 0.1s, 
+                max-height 0.3s ease-in-out 0.2s,
+                margin 0.3s ease-in-out 0.2s;
   }
 
   .toggle-icon {
     width: 1.2rem;
     height: 1.2rem;
     fill: ${(props) => props.theme.primaryColor};
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .toggle-icon.expanded {
+    transform: rotate(90deg);
   }
 
   p {
     font-size: 0.9rem;
     margin: 0.5rem;
     color: ${(props) => props.theme.greyC1C1C1ToGreyB3B3B3};
-    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
   .toggle-btn {
@@ -36,17 +53,6 @@ const FeatureDetailsWrapper = styled.div`
     vertical-align: middle;
   }
 
-  .closed {
-    opacity: 1;
-    height: 0;
-    transition: none;
-    visibility: hidden;
-  }
-
-  .open {
-    visibility: visible;
-  }
-
   h5 {
     display: inline-block;
     vertical-align: middle;
@@ -65,26 +71,25 @@ const FeatureDetailsWrapper = styled.div`
   }
 `;
 
-const FeatureDetails = ({ category, description, tier }) => {
+const FeatureDetails = ({ category, description, tier, children, onToggle }) => {
   const [expand, setExpand] = React.useState(false);
 
+  // Call onToggle when expand changes
+  React.useEffect(() => {
+    onToggle?.(expand);
+  }, [expand, onToggle]);
+
   const BetaTag = () => <span className="beta-tag">Coming Soon</span>;
 
   return (
     <FeatureDetailsWrapper>
       <div onClick={() => setExpand(!expand)}>
-        {description && (
+        {(description || children) && (
           <div className="toggle-btn">
             {expand ? (
-              <MdExpandMore
-                className="toggle-icon"
-                onClick={() => setExpand(!expand)}
-              />
+              <MdExpandMore className="toggle-icon" />
             ) : (
-              <RiArrowRightSLine
-                className="toggle-icon"
-                onClick={() => setExpand(!expand)}
-              />
+              <RiArrowRightSLine className="toggle-icon" />
             )}
           </div>
         )}
@@ -93,13 +98,18 @@ const FeatureDetails = ({ category, description, tier }) => {
           {tier === "Team-Beta" && <BetaTag />}
         </h5>
         <div className="details">
-          <p className={`closed ${expand ? "open" : ""}`}
-            dangerouslySetInnerHTML={{ __html: description }}>
-          </p>
+          {description && (
+            <p className={expand ? "open" : ""} dangerouslySetInnerHTML={{ __html: description }} />
+          )}
+          {children && (
+            <div className={expand ? "open" : ""}>
+              {children}
+            </div>
+          )}
         </div>
       </div>
     </FeatureDetailsWrapper>
   );
 };
 
-export default FeatureDetails;
+export default FeatureDetails;

src/assets/images/academy/academy.svg

@@ -1,6 +1,6 @@
 import React from "react";
-import Button from "../../reusecore/Button";
-import { Col, Row, Container } from "../../reusecore/Layout";
+import Button from "../../../reusecore/Button";
+import { Col, Row, Container } from "../../../reusecore/Layout";
 import PlanCardWrapper from "./planCard.style";
 import FeatureDetails from "./collapsible-details";
 
@@ -94,15 +94,30 @@ 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">
+                              <span className="add-on-label">Add-on Features</span>
+                              <hr className="add-on-line" />
+
+                            </div>
+                          )}
+                          <div className="feature">
+                            <FeatureDetails
+                              category={t.category}
+                              description={t.description}
+                              tier={t.tier}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
                 </div>
 
               </div>

src/assets/images/sistent/placeholder/user.webp

@@ -138,6 +138,22 @@ const PlanCardWrapper = styled.section`
   .pricing-features {
     margin-top: 2rem;
     line-height: 1rem;
+    .add-on-separator {
+      margin: 1.5rem 0 1rem 0;
+      .add-on-label {
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: ${(props) => props.theme.secondaryColor};
+        margin-bottom: 0.5rem;
+        display: block;
+      }
+      .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;
@@ -210,7 +226,36 @@ const PlanCardWrapper = styled.section`
   font-weight: 500;
   transition: 0.3s;
   background: ${(props) => props.theme.secondaryColor};
+
+}
+.addon-chip {
+  background-color: rgba(0, 179, 159, 0.15);
+  color: ${(props) => props.theme.text.light};
+  border: 1px solid;
+  border-color: ${(props) => props.theme.secondaryColor};
+  min-width: 40%;
+  justify-content: flex-start;
+  display: flex;
 }
+.addon-chip .MuiChip-icon {
+    color: ${(props) => props.theme.secondaryColor};
+    line-height: 1rem;
+}
+
+.MuiTypography-root {
+  font-family: "Qanelas Soft", "Open Sans", sans-serif;
+}
+  .MuiSlider-root {
+  "& .MuiSlider-mark": {
+    fontSize: "12px",
+    color: ${(props) => props.theme.text.light};
+  },
+  "& .MuiSlider-markLabel": {
+    fontSize: "12px",
+    color: ${(props) => props.theme.secondaryColor};
+  },
+  }
+});
 `;
 
 export default PlanCardWrapper;

…mponents/PlanCard/collapsible-details.js …/Pricing/PlanCard/collapsible-details.jssrc/components/PlanCard/collapsible-details.js renamed to src/components/Pricing/PlanCard/collapsible-details.js src/components/PlanCard/collapsible-details.js renamed to src/components/Pricing/PlanCard/collapsible-details.js

@@ -0,0 +1,30 @@
+import React from "react";
+const AcademyIcon = ({ width = "32px", height = "32px", primaryFill, secondaryFill }) => {
+  return (
+    <svg
+      fill={primaryFill}
+      width={width}
+      height={height}
+      viewBox="0 0 22 22"
+      xmlns="http://www.w3.org/2000/svg"
+      data-name="Layer 1"
+    >
+      {/*middle-part*/}
+      <path
+        fill={secondaryFill}
+        d="M3.8,7.5v9h-1.7c-.3,0-.6.3-.6.6v.9h19.5v-.9c0-.3-.3-.6-.6-.6h-1.7V7.5h-3v9h-3V7.5h-3v9h-3V7.5h-3Z"
+      />
+      {/*bottom-part*/}
+      <path
+        fill={primaryFill}
+        d="M21.4,18.8H1.1c-.6,0-1.1.5-1.1,1.1v.8c0,.2.2.4.4.4h21.8c.2,0,.4-.2.4-.4v-.8c0-.6-.5-1.1-1.1-1.1Z"
+      />
+      {/*head-part*/}
+      <path
+        fill={primaryFill}
+        d="M22.5,4.5v.8c0,.2-.2.4-.4.4h-1.1v.6c0,.3-.3.6-.6.6H2.1c-.3,0-.6-.3-.6-.6v-.6H.4c-.2,0-.4-.2-.4-.4v-.8c0-.2,0-.3.2-.3L11.1,0c0,0,.2,0,.3,0l10.9,4.1c.1,0,.2.2.2.3Z"
+      />
+    </svg>
+  );
+};
+export default AcademyIcon;