Merge pull request #106 from kjannette/card

Card
2024-02-23 06:38:04 -06:00
parent 098e703113 114f4c6a63
commit d30e2dddae
5 changed files with 143 additions and 69 deletions
--- a/src/Components/SignupPage/SignupPage.js
+++ b/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,25 +634,46 @@ const SignupPage = () => {
              </div>
            </div>
          </div>
-          <div className="radio-group-box">
-            {signupRadioFields?.map((option, index) => (
-              <div className="signup-radio-container">
-                <Radio
-                  onClick={handleChangeRadioInput}
-                  value={option.value}
-                  name={option.name}
-                  description={option.description}
-                  details={option.details}
-                  activeRadioOption={activeRadioOption}
-                  price={option.pricing}
-                  isAnnual={isAnnual}
-                  isUpgrade={index < disableIndex ? true : false}
-                  disabled={index < disableIndex ? true : false}
-                  currentPlan={currentPlan}
-                  parentIndex={index}
-                />
-              </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?.slice(valX, valY).map((option, index) => (
+                <div className="signup-radio-container">
+                  <Radio
+                    onClick={handleChangeRadioInput}
+                    value={option.value}
+                    name={option.name}
+                    description={option.description}
+                    details={option.details}
+                    activeRadioOption={activeRadioOption}
+                    price={option.pricing}
+                    isAnnual={isAnnual}
+                    isUpgrade={index < disableIndex ? true : false}
+                    disabled={index < disableIndex ? true : false}
+                    currentPlan={currentPlan}
+                    parentIndex={index}
+                  />
+                </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">
@@ -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",
-    };
-    
-
-*/
--- a/src/Constants/Fields/RadioFields.js
+++ b/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",
    ],
--- a/src/pageElements/Radio.js
+++ b/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>
--- a/src/styles/radio.scss
+++ b/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;
-  margin: 10px 8px 0px 8px;
+  height: 345px;
  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;
-  padding-left: 12px;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
 }

 .radio-circle-box {
--- a/src/styles/signup.scss
+++ b/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;
-  margin-top: 28px;
+  padding-right: 24px;
+  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: flex-end;
-  padding: 6px;
-  width: 100%;
+  justify-content: center;
+  padding: 2px;
+  width: 815px;
+}
+
+.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;
-  height: 100%;
+  width: 270px;
+  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 {