[feat]: Add support for Key value pair in AccessType

app/isomorphic/components/pages/subscription-page/Modals/GroupsAndPlansModal/group-and-plans.m.css

@@ -22,9 +22,9 @@
   display: flex;
   flex-direction: column;
   width: 280px;
-  height: 280px;
   border: 1px solid lightgray;
   padding: 16px;
+  justify-content: space-between;
 }
 
 .group-name{
@@ -35,12 +35,9 @@
 }
 
 .plan-name{
-  border: 1px solid lightgray;
-  height: 32px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: space-between;
-  align-items: center;
   padding: 0 12px;
 }
 
@@ -60,4 +57,30 @@
 .select-option{
   border: none;
 }
+.option {
+  cursor: pointer;
+  margin-bottom: 12px;
+}
 
+.selected-option {
+  height: 32px;
+  border: 1px solid rgba(var(--rgb-black));
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  font-weight: var(--bold);
+}
+
+.option-select {
+  color: var(--brand-primary-dark);
+  font-weight: var(--bold);
+}
+
+.right-spacer {
+  margin-right: 8px;
+}
+
+.left-spacer {
+  margin-left: 20px;
+}

app/isomorphic/components/pages/subscription-page/Modals/GroupsAndPlansModal/index.js

@@ -1,20 +1,20 @@
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 import { object, func } from "prop-types";
 import get from "lodash/get";
-
 import "./group-and-plans.m.css";
 
 export const GroupsAndPlansModal = ({ member, setActiveTab, setSelectedPlan, getSubscription }) => {
   const [subscriptionsData, setSubscriptionsData] = useState([]);
   const [selectedSubscriptions, setSelectedSubscriptions] = useState({});
+  const [selectedOption, setSelectedOption] = useState(null);
 
   useEffect(() => {
     getSubscription().then((res) => setSubscriptionsData(res));
   }, []);
 
   useEffect(() => {
     const defaultSelectedOptions = {};
-    subscriptionsData.forEach((group, id) => {
+    subscriptionsData.forEach((group) => {
       const firstPlan = get(group, ["subscription_plans", "0"]);
       defaultSelectedOptions[group.name] = firstPlan;
     });
@@ -26,6 +26,11 @@ export const GroupsAndPlansModal = ({ member, setActiveTab, setSelectedPlan, get
     member ? setActiveTab("checkout") : setActiveTab("login");
   };
 
+  const handleOptionClick = (groupName, plan) => {
+    setSelectedOption(plan);
+    setSelectedSubscriptions({ ...selectedSubscriptions, [groupName]: plan });
+  };
+
   return (
     <>
       <div styleName="title">Choose A Plan</div>
@@ -35,29 +40,59 @@ export const GroupsAndPlansModal = ({ member, setActiveTab, setSelectedPlan, get
       </p>
       <div styleName="groups">
         {subscriptionsData.map((group, id) => {
+          const renderRichText = (richText) => {
+            return <div dangerouslySetInnerHTML={{ __html: richText }} />;
+          };
+          const groupName = selectedSubscriptions[group.name];
+          const groupDurationLength = groupName && groupName.duration_length;
+          const groupDurationUnit = groupName && groupName.duration_unit;
           return (
             <div key={id} styleName="group-card">
               <div styleName="group-name">{group.name}</div>
               <div styleName="plan-name">
-                <select
-                  styleName="select-option"
-                  onChange={(e) =>
-                    setSelectedSubscriptions({ ...selectedSubscriptions, [group.name]: JSON.parse(e.target.value) })
-                  }
-                >
-                  {group.subscription_plans.map((plan, id) => {
-                    return (
-                      // eslint-disable-next-line react/jsx-key
-                      <option key={id} value={JSON.stringify(plan)}>
-                        {`${plan.duration_length} ${
-                          plan.duration_length === 1
-                            ? plan.duration_unit.substring(0, plan.duration_unit.length - 1)
-                            : plan.duration_unit
-                        } ${plan.price_cents / 100} ${plan.price_currency}`}
-                      </option>
-                    );
-                  })}
-                </select>
+                <div>
+                  {groupName && (
+                    <div styleName="selected-option" onClick={() => handleOptionClick(group.name, groupName)}>
+                      <span styleName="right-spacer">{groupDurationLength}</span>
+                      <span styleName="right-spacer">
+                        {groupDurationLength === 1
+                          ? groupDurationUnit.substring(0, groupDurationUnit.length - 1)
+                          : groupDurationUnit}
+                      </span>
+                      <span>{groupName.price_cents / 100}</span>
+                      {groupName.price_currency}
+                    </div>
+                  )}
+                  <div>
+                    {group.subscription_plans.map((plan, index) => {
+                      const durationUnit = plan && plan.duration_unit;
+                      const durationLength = plan && plan.duration_length;
+                      return (
+                        <>
+                          <div
+                            key={index}
+                            styleName={`option ${selectedOption === plan ? "option-select" : ""}`}
+                            onClick={() => handleOptionClick(group.name, plan)}
+                          >
+                            <span styleName="right-spacer">{1 + index}.</span>
+                            <span styleName="right-spacer">{durationLength}</span>
+                            <span styleName="right-spacer">
+                              {durationLength === 1 ? durationUnit.substring(0, durationUnit.length - 1) : durationUnit}
+                            </span>
+                            <span>{plan.price_cents / 100}</span>
+                            <span styleName="right-spacer">{plan.price_currency} </span>
+                            {plan.custom_attributes &&
+                              plan.custom_attributes.map((attribute) => (
+                                <div styleName="left-spacer" key={1}>
+                                  {attribute.value && renderRichText(attribute.value)}
+                                </div>
+                              ))}
+                          </div>
+                        </>
+                      );
+                    })}
+                  </div>
+                </div>
               </div>
               <div styleName="plan-description">{group.description}</div>
               <button styleName="subscribe-btn" onClick={() => handlePlanSelection(group.name)}>