Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4007274
Add support for key value pair in AT
shraddha-kesari Nov 22, 2023
7e14598
fix lint
shraddha-kesari Nov 22, 2023
0ab370b
Add var to group name
shraddha-kesari Nov 22, 2023
f6efb17
Remove classname
shraddha-kesari Nov 22, 2023
74a738e
Add var names
shraddha-kesari Dec 14, 2023
0aa41e1
Add more var names
shraddha-kesari Dec 14, 2023
856d126
PR changes
shraddha-kesari Dec 14, 2023
24ef0c9
Revert back to staging cred
shraddha-kesari Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions ...rphic/components/pages/subscription-page/Modals/GroupsAndPlansModal/group-and-plans.m.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand All @@ -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;
}

Expand All @@ -60,4 +57,22 @@
.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);
}
72 changes: 51 additions & 21 deletions app/isomorphic/components/pages/subscription-page/Modals/GroupsAndPlansModal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
});
Expand All @@ -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>
Expand All @@ -35,29 +40,54 @@ export const GroupsAndPlansModal = ({ member, setActiveTab, setSelectedPlan, get
</p>
<div styleName="groups">
{subscriptionsData.map((group, id) => {
const renderRichText = (richText) => {
return <div dangerouslySetInnerHTML={{ __html: richText }} />;
};
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
<div>
<div
styleName="selected-option"
onClick={() => handleOptionClick(group.name, selectedSubscriptions[group.name])}
>
{selectedSubscriptions[group.name]?.duration_length}&nbsp;
{selectedSubscriptions[group.name]?.duration_length === 1
? selectedSubscriptions[group.name]?.duration_unit.substring(
0,
selectedSubscriptions[group.name]?.duration_unit.length - 1
)
: selectedSubscriptions[group.name]?.duration_unit}
&nbsp;
{selectedSubscriptions[group.name]?.price_cents / 100}&nbsp;
{selectedSubscriptions[group.name]?.price_currency}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the same set of statements are repeated to access properties, fundamentals like variables are to be used!

Please consider programming practices over copy paste..

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

</div>
<div className="options">
{group.subscription_plans.map((plan, index) => (
<>
<div
key={index}
styleName={`option ${selectedOption === plan ? "option-select" : ""}`}
onClick={() => handleOptionClick(group.name, plan)}
>
{1 + index})&nbsp;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

huh?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its a design change for showing like this 1)

{plan.duration_length}&nbsp;
{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>
: plan.duration_unit}
&nbsp;
{plan.price_cents / 100}&nbsp;
{plan.price_currency} &nbsp;
{plan.custom_attributes &&
plan.custom_attributes.map((attribute, index) => (
<div key={index}>{attribute.value && renderRichText(attribute.value)}</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

index shouldnt be a key

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed

))}
</div>
</>
))}
</div>
</div>
</div>
<div styleName="plan-description">{group.description}</div>
<button styleName="subscribe-btn" onClick={() => handlePlanSelection(group.name)}>
Expand Down
6 changes: 3 additions & 3 deletions config/publisher.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
asset_host: http://localhost:8080
sketches_host: https://malibu-advanced-web.qtstage.io
sketches_host: https://malibu-advanced-web.quintype.io
host_to_api_host:
help.lvh.me: https://user-documentation.quintype.io
host_to_automatic_api_host:
Expand All @@ -22,8 +22,8 @@ publisher:
redirect_Url: "<Domain>/api/auth/v1/oauth/token"
callback_Url: "Callback Url"
accesstypeConfig:
key: "Aw4ujaqhpn8aVMT7yzQawSyZ"
accessTypeBkIntegrationId: 455
key: "yTKoDn8R1d4AY651ZPvGDUq4"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

switch back to stg creds, do not commit prod keys or domains

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for QA testing. On staging, subscription page doesn't work. It only works on prod.
After testing, will change it back.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use BK!, do not commit

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay

accessTypeBkIntegrationId: 2270
timezone: "Asia/Baku"
auto_sso:
is_enable: false
Expand Down