Merge pull request #6737 from layer5io/leecalcote/final-pricing-addon

leecalcote/final pricing addon

Author: leecalcote

src/components/PlanCard/collapsible-details.js

@@ -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/components/PlanCard/planCard.style.js

@@ -219,6 +219,17 @@ 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};
+
+}
+.addon-chip .MuiChip-icon {
+    color: ${(props) => props.theme.secondaryColor};
 }
 `;
 

src/components/PricingAddons/AcademyIcon.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;