commit
3acb512f1a
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "bada-frame",
|
"name": "bada-frame",
|
||||||
"version": "0.4.2",
|
"version": "0.4.3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
|
@ -39,7 +39,6 @@
|
||||||
"libsodium-wrappers": "^0.7.8",
|
"libsodium-wrappers": "^0.7.8",
|
||||||
"localforage": "^1.9.0",
|
"localforage": "^1.9.0",
|
||||||
"next": "^11.1.3",
|
"next": "^11.1.3",
|
||||||
"node-forge": "^0.10.0",
|
|
||||||
"photoswipe": "file:./thirdparty/photoswipe",
|
"photoswipe": "file:./thirdparty/photoswipe",
|
||||||
"piexifjs": "^1.0.6",
|
"piexifjs": "^1.0.6",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Form, Modal, Button } from 'react-bootstrap';
|
import { Form, Modal, Button } from 'react-bootstrap';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import styled from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import { Plan, Subscription } from 'types/billing';
|
import { Plan, Subscription } from 'types/billing';
|
||||||
import {
|
import {
|
||||||
convertBytesToGBs,
|
convertBytesToGBs,
|
||||||
|
@ -25,7 +25,7 @@ import { DeadCenter } from 'pages/gallery';
|
||||||
import billingService from 'services/billingService';
|
import billingService from 'services/billingService';
|
||||||
import { SetLoading } from 'types/gallery';
|
import { SetLoading } from 'types/gallery';
|
||||||
|
|
||||||
export const PlanIcon = styled.div<{ selected: boolean }>`
|
export const PlanIcon = styled.div<{ currentlySubscribed: boolean }>`
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
border: 2px solid #333;
|
border: 2px solid #333;
|
||||||
|
@ -38,8 +38,9 @@ export const PlanIcon = styled.div<{ selected: boolean }>`
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
cursor: ${(props) => (props.selected ? 'not-allowed' : 'pointer')};
|
cursor: ${(props) =>
|
||||||
border-color: ${(props) => props.selected && '#56e066'};
|
props.currentlySubscribed ? 'not-allowed' : 'pointer'};
|
||||||
|
border-color: ${(props) => props.currentlySubscribed && '#56e066'};
|
||||||
transition: all 0.3s ease-out;
|
transition: all 0.3s ease-out;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -56,12 +57,17 @@ export const PlanIcon = styled.div<{ selected: boolean }>`
|
||||||
transition: all 0.5s ease-out;
|
transition: all 0.5s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover
|
||||||
|
${(props) =>
|
||||||
|
!props.currentlySubscribed &&
|
||||||
|
css`
|
||||||
|
{
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
background-color: #ffffff11;
|
background-color: #ffffff11;
|
||||||
}
|
}
|
||||||
|
`}
|
||||||
&:hover > div:first-child::before {
|
&:hover
|
||||||
|
> div:first-child::before {
|
||||||
transform: rotate(45deg) translateX(300px);
|
transform: rotate(45deg) translateX(300px);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -163,8 +169,12 @@ function PlanSelector(props: Props) {
|
||||||
<PlanIcon
|
<PlanIcon
|
||||||
key={plan.stripeID}
|
key={plan.stripeID}
|
||||||
className="subscription-plan-selector"
|
className="subscription-plan-selector"
|
||||||
selected={isUserSubscribedPlan(plan, subscription)}
|
currentlySubscribed={isUserSubscribedPlan(plan, subscription)}
|
||||||
onClick={async () => await onPlanSelect(plan)}>
|
onClick={
|
||||||
|
isUserSubscribedPlan(plan, subscription)
|
||||||
|
? () => {}
|
||||||
|
: async () => await onPlanSelect(plan)
|
||||||
|
}>
|
||||||
<div>
|
<div>
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
|
|
|
@ -16,10 +16,22 @@ enum PaymentActionType {
|
||||||
|
|
||||||
class billingService {
|
class billingService {
|
||||||
public async getPlans(): Promise<Plan[]> {
|
public async getPlans(): Promise<Plan[]> {
|
||||||
|
const token = getToken();
|
||||||
try {
|
try {
|
||||||
const response = await HTTPService.get(
|
let response;
|
||||||
|
if (!token) {
|
||||||
|
response = await HTTPService.get(
|
||||||
`${ENDPOINT}/billing/plans/v2`
|
`${ENDPOINT}/billing/plans/v2`
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
response = await HTTPService.get(
|
||||||
|
`${ENDPOINT}/billing/user-plans`,
|
||||||
|
null,
|
||||||
|
{
|
||||||
|
'X-Auth-Token': getToken(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
const { plans } = response.data;
|
const { plans } = response.data;
|
||||||
return plans;
|
return plans;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|
|
@ -22,8 +22,4 @@ export const getActualKey = async () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getStripePublishableKey = () =>
|
|
||||||
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY ??
|
|
||||||
'pk_live_51HAhqDK59oeucIMOiTI6MDDM2UWUbCAJXJCGsvjJhiO8nYJz38rQq5T4iyQLDMKxqEDUfU5Hopuj4U5U4dff23oT00fHvZeodC';
|
|
||||||
|
|
||||||
export const getToken = () => getData(LS_KEYS.USER)?.token;
|
export const getToken = () => getData(LS_KEYS.USER)?.token;
|
||||||
|
|
11
yarn.lock
11
yarn.lock
|
@ -3434,9 +3434,9 @@ fn-name@~3.0.0:
|
||||||
integrity sha512-eNMNr5exLoavuAMhIUVsOKF79SWd/zG104ef6sxBTSw+cZc6BXdQXDvYcGvp0VbxVVSp1XDUNoz7mg1xMtSznA==
|
integrity sha512-eNMNr5exLoavuAMhIUVsOKF79SWd/zG104ef6sxBTSw+cZc6BXdQXDvYcGvp0VbxVVSp1XDUNoz7mg1xMtSznA==
|
||||||
|
|
||||||
follow-redirects@^1.0.0, follow-redirects@^1.14.0:
|
follow-redirects@^1.0.0, follow-redirects@^1.14.0:
|
||||||
version "1.14.3"
|
version "1.14.7"
|
||||||
resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.3.tgz"
|
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
|
||||||
integrity sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw==
|
integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
|
||||||
|
|
||||||
foreach@^2.0.5:
|
foreach@^2.0.5:
|
||||||
version "2.0.5"
|
version "2.0.5"
|
||||||
|
@ -4684,11 +4684,6 @@ node-fetch@^2.6.0, node-fetch@^2.6.1:
|
||||||
resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.2.tgz"
|
resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.2.tgz"
|
||||||
integrity sha512-aLoxToI6RfZ+0NOjmWAgn9+LEd30YCkJKFSyWacNZdEKTit/ZMcKjGkTRo8uWEsnIb/hfKecNPEbln02PdWbcA==
|
integrity sha512-aLoxToI6RfZ+0NOjmWAgn9+LEd30YCkJKFSyWacNZdEKTit/ZMcKjGkTRo8uWEsnIb/hfKecNPEbln02PdWbcA==
|
||||||
|
|
||||||
node-forge@^0.10.0:
|
|
||||||
version "0.10.0"
|
|
||||||
resolved "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz"
|
|
||||||
integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
|
|
||||||
|
|
||||||
node-html-parser@1.4.9:
|
node-html-parser@1.4.9:
|
||||||
version "1.4.9"
|
version "1.4.9"
|
||||||
resolved "https://registry.npmjs.org/node-html-parser/-/node-html-parser-1.4.9.tgz"
|
resolved "https://registry.npmjs.org/node-html-parser/-/node-html-parser-1.4.9.tgz"
|
||||||
|
|
Loading…
Reference in a new issue