Merge pull request #106 from kjannette/card

Card

src/Components/SignupPage/SignupPage.js

@@ -13,6 +13,7 @@ import { v4 as uuidv4 } from "uuid";
 import { collection, setDoc, doc } from "firebase/firestore";
 import LoadingSpinner from "../../pageElements/LoadingSpinner";
 import { splitEvery } from "../../Utils/Array";
+import { ArrowLeftSquare, ArrowRightSquare } from "react-bootstrap-icons";
 import {
   getFormDataDefaults,
   getValidatedFormData,
@@ -62,6 +63,8 @@ const SignupPage = () => {
   const [showPromoModal, setShowPromoModal] = useState(false);
   const [issueText, setIssueText] = useState("");
   const [isAnnual, setIsAnnual] = useState(1);
+  const [valX, setValX] = useState(1);
+  const [valY, setValY] = useState(4);
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupFields);
@@ -105,6 +108,28 @@ const SignupPage = () => {
     setActiveRadioOption(tempPlan[0].value);
   };
 
+  const handleLeftArrowClick = () => {
+    if (valX == 0) {
+      return;
+    } else {
+      const tempx = valX - 1;
+      const tempy = valY - 1;
+      setValX(tempx);
+      setValY(tempy);
+    }
+  };
+
+  const handleRightArrowClick = () => {
+    if (valX == 1) {
+      return;
+    } else {
+      const tempx = valX + 1;
+      const tempy = valY + 1;
+      setValX(tempx);
+      setValY(tempy);
+    }
+  };
+
   const vals = [
     [1, 2, 3, 4, 5, 6, 7, 8],
     [1, 2],
@@ -287,7 +312,7 @@ const SignupPage = () => {
   };
 
   const handleToggle = (val) => setIsAnnual(val);
-  console.log("isAnnual", isAnnual);
+
   const handleAddAccounts = () => {
     setShowAddAccount(!showAddAccount);
   };
@@ -439,7 +464,7 @@ const SignupPage = () => {
         const today = new Date();
         const subscriptionCreated = today;
         const subscriptionPeriodStart = today;
-        const subscriptionPeriodEnd = "it edns whatever"; //today.setDate(today.getDate() + 30);
+        const subscriptionPeriodEnd = "it ends whatever"; //today.setDate(today.getDate() + 30);
         const subscriptionId = uuidv4();
 
         const userCredential = await createUserWithEmailAndPassword(
@@ -609,8 +634,19 @@ const SignupPage = () => {
               </div>
             </div>
           </div>
+
+          <div className="radio-group-super">
+            <div className="toggle-arrow-box">
+              <ArrowLeftSquare
+                className="arrow-left-toggle"
+                color="#f7c697"
+                size="30px"
+                onClick={handleLeftArrowClick}
+                style={{ marginTop: "-25px" }}
+              />
+            </div>
             <div className="radio-group-box">
-            {signupRadioFields?.map((option, index) => (
+              {signupRadioFields?.slice(valX, valY).map((option, index) => (
                 <div className="signup-radio-container">
                   <Radio
                     onClick={handleChangeRadioInput}
@@ -629,6 +665,16 @@ const SignupPage = () => {
                 </div>
               ))}
             </div>
+            <div className="toggle-arrow-box">
+              <ArrowRightSquare
+                className="arrow-left-toggle"
+                color="#f7c697"
+                size="30px"
+                onClick={handleRightArrowClick}
+                style={{ marginTop: "-25px" }}
+              />
+            </div>
+          </div>
           {showAddAccount && !isBusy ? (
             <div className="show-addaccount-wrapper">
               <div className="show-addaccount-container">
@@ -758,24 +804,3 @@ const SignupPage = () => {
 };
 
 export default SignupPage;
-
-/*
-
-    
-    const userDataValues = {
-      barNumber: "232323",
-      city: "broolyn",
-      email: "j@s.com",
-      firm: "asdf",
-      firstName: "ghghg",
-      lastName: "hhhhh",
-      password: "123344556",
-      practiceArea: "dfdfdf",
-      state: "New York",
-      streetAddress: "123 Main",
-      telephone: "(313) 555-5555",
-      zipCode: "12345",
-    };
-    
-
-*/

src/Constants/Fields/RadioFields.js

@@ -1,4 +1,21 @@
 export const signupRadioFields = [
+  {
+    name: "Of Counsel",
+    label: "Of Counsel",
+    value: "ofCounsel",
+    description: [
+      "One document/one-time fee",
+      "Documents conform with state rules",
+      "Intellidraft AI - downloadable document in minutes",
+      "24/7 support",
+    ],
+    details: "",
+    docsAllowedPerMonth: 1,
+    pricing: [
+      { type: "monthly", amount: 59 },
+      { type: "annDiscount", amount: 59 },
+    ],
+  },
   {
     name: "Associate",
     label: "Associate",
@@ -6,9 +23,10 @@ export const signupRadioFields = [
     description: [
       "1 document per month",
       "Carryover 1 unused document each subscription period",
-      "Documents conforming with state rules",
+      "Documents conform with state rules",
+      "Intellidraft AI - downloadable document in minutes",
       "24/7 support",
-      "First month free!",
+      "First month is free!",
     ],
     details: "",
     docsAllowedPerMonth: 1,
@@ -25,7 +43,8 @@ export const signupRadioFields = [
     description: [
       "3 documents per month",
       "Carryover 1 unused document per month",
-      "Documents conforming with state rules",
+      "Documents conform with state rules",
+      "Intellidraft AI - downloadable document in minutes",
       "Up to 2 additional accounts: $49/each",
       "24/7 support",
     ],
@@ -43,7 +62,8 @@ export const signupRadioFields = [
     value: "seniorPartner",
     description: [
       "Unlimited documents.",
-      "Documents conforming with state rules",
+      "Documents conform with state rules",
+      "Intellidraft AI - downloadable document in minutes",
       "24/7 Triage-level support response",
       "Up to 8 additional accounts at $39/each",
     ],

src/pageElements/Radio.js

@@ -34,16 +34,16 @@ const Radio = (props) => {
             >
               {value == activeRadioOption && !isUpgrade ? (
                 <div className="radio-circle-box">
-                  <CircleFill color="#1a76c7" size="20px" />
+                  <CircleFill color="#1a76c7" size="14px" />
                 </div>
               ) : (
                 <div className="radio-circle-box">
-                  <Circle color="#1a76c7" size="20px" />
+                  <Circle color="#1a76c7" size="14px" />
                 </div>
               )}
               <div className="radio-name-box"> {`${name}`} </div>
               <div className="radio-price-box">
-                {parentIndex > 2 ? (
+                {value === "ofCounsel" ? (
                   <div className="radio-price">
                     {`$${price[index]["amount"]}/doc`}
                   </div>
@@ -58,7 +58,7 @@ const Radio = (props) => {
               <div className="radio-description-box">
                 {description.map((item, i) => {
                   const el =
-                    item == "First month free!" && !isUpgrade ? (
+                    item == "First month is free!" && !isUpgrade ? (
                       <div className="offer-div">
                         <p className="signup-feat-item-bold">{item}</p>
                       </div>

src/styles/radio.scss

@@ -1,31 +1,37 @@
 .radio-circle-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  margin-right: auto;
+  margin-left: auto;
   &.upgrade {
     background-color: rgb(149, 149, 149);
   }
   &.not-upgrade {
     background-color: #fff;
   }
-  height: 290px;
+  height: 345px;
-  margin: 10px 8px 0px 8px;
   border-radius: 5px;
   border: 1px solid #d4d4d4;
 }
 
 .radio-circle-top {
+  width: 248px;
   height: 40px;
   display: flex;
   flex-direction: row;
-  margin-top: 12px;
+  margin-top: 18px;
   margin-left: 2px;
+  border: 1px solid var(--accent-orange-light);
+  border-radius: 10px;
 }
 
 .radio-circle-lower {
   display: flex;
   flex-direction: column;
-  margin-left: 12px;
+  justify-content: center;
-  padding-left: 12px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .radio-circle-box {

src/styles/signup.scss

@@ -58,22 +58,23 @@
 }
 
 .signup-button-box {
-  width: 100%;
+  width: 830px;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  padding-right: 14px;
+  padding-right: 24px;
-  margin-top: 28px;
+  margin-top: 16px;
 }
 
 .signup-freebie-box {
-  width: 100%;
+  width: 830px;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  padding-right: 22px;
+  padding-right: 20px;
   margin-top: 12px;
   margin-bottom: 24px;
+  margin-right: 16px;
   font-size: 1.15rem;
   color: #2759ff;
 }
@@ -86,7 +87,8 @@
   display: flex;
   flex-direction: row;
   height: 55px;
-  width: 900px;
+  width: 830px;
+  margin-bottom: 10px;
 }
 
 .plan-header-right {
@@ -115,9 +117,13 @@
 .select-plan-container {
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-right: auto;
+  margin-left: auto;
   margin-top: 24px;
   width: 920px;
-  min-height: 510px;
+  min-height: 540px;
   border-radius: 10px;
   background-color: rgb(240, 247, 250);
   border: 1px solid #e9e9e9;
@@ -164,13 +170,28 @@
   flex-direction: column;
 }
 
+.radio-group-super {
+  width: 912px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
 .radio-group-box {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  justify-content: center;
-  justify-content: flex-end;
+  padding: 2px;
-  padding: 6px;
+  width: 815px;
-  width: 100%;
+}
+
+.toggle-arrow-box {
+  width: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
 }
 
 .select-plan-summary-box {
@@ -197,8 +218,8 @@
 }
 
 .signup-radio-container {
-  width: 300px;
+  width: 270px;
-  height: 100%;
+  margin: 0px 3px;
 }
 
 .signup-feat-item {
@@ -217,11 +238,13 @@
 .offer-div {
   display: flex;
   justify-content: center;
-  align-items: center;
   height: 30px;
   border: 1px solid #fdbe72;
   border-radius: 10px;
   margin-top: 25px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 220px;
 }
 
 .show-addaccount-wrapper {