mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-28 17:20:13 +02:00
Code Issues Releases Wiki Activity

add subs details in profile modal

Browse Source
This commit is contained in:
Kushagra Gour
2024-03-19 15:53:02 +05:30
parent 22a4361baa
commit 14bc964aa4
8 changed files with 284 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Footer.jsx
View File

@@ -132,20 +132,35 @@ export default class Footer extends Component {
<use xlinkHref="#twitter-icon" />
</svg>
</a>
<Button
onClick={this.props.proBtnClickHandler}
data-event-category="ui"
data-event-action="proFooterBtnClick"
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link"
aria-label={i18n._(
t`Be a PRO and get some advanced superpowers!`
)}
>
<HStack gap={1}>
<Trans>Get</Trans>
<ProBadge />
</HStack>
</Button>
{user?.isPro ? (
<Button
onClick={this.props.proBtnClickHandler}
data-event-category="ui"
data-event-action="manageProFooterBtnClick"
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link"
aria-label={i18n._(t`Manage your PRO subscription`)}
>
<HStack gap={1}>
<Trans>Manage</Trans>
<ProBadge />
</HStack>
</Button>
) : (
<Button
onClick={this.props.proBtnClickHandler}
data-event-category="ui"
data-event-action="proFooterBtnClick"
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link"
aria-label={i18n._(
t`Be a PRO and get some advanced superpowers!`
)}
>
<HStack gap={1}>
<Trans>Get</Trans>
<ProBadge />
</HStack>
</Button>
)}
</div>
{this.props.prefs.isJs13kModeOn ? (

31
src/components/Panel.jsx Normal file
View File

@@ -0,0 +1,31 @@
import { forwardRef } from 'preact/compat';
export const Panel = forwardRef(function Panel(
{
classes = '',
padding = '2rem',
fullWidth = true,
fullHeight = false,
glowing = false,
topFocus = false,
onlyBorder = false,
children
},
ref
) {
return (
<div
ref={ref}
style={{
padding: padding,
width: fullWidth ? '100%' : 'auto',
height: fullHeight ? '100%' : 'auto'
}}
className={`panel ${classes} ${glowing && 'panelGlowing'} ${
topFocus && 'panelTopFocus'
} ${onlyBorder && 'panelOnlyBorder'}`}
>
{children}
</div>
);
});

128
src/components/Profile.jsx
View File

@@ -1,43 +1,113 @@
import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import { ProBadge } from './ProBadge';
import { HStack, Stack, VStack } from './Stack';
import { Panel } from './Panel';
import { Text } from './Text';
import { getHumanReadableDate } from '../utils';
const DEFAULT_PROFILE_IMG =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E";
export function Profile({ user, logoutBtnHandler }) {
const Header = ({ user, logoutBtnHandler }) => {
return (
<div class="tac">
<img
height="80"
class="profile-modal__avatar-img"
src={user ? user.photoURL || DEFAULT_PROFILE_IMG : ''}
id="profileAvatarImg"
alt="Profile image"
/>
<Stack gap={5}>
<Stack gap={2} align="center">
<img
height="80"
class={`profile-modal__avatar-img ${user?.isPro ? 'is-pro' : ''}`}
src={user ? user.photoURL || DEFAULT_PROFILE_IMG : ''}
id="profileAvatarImg"
alt="Profile image"
/>
<VStack gap={4}>
<VStack gap={1}>
<h3 id="profileUserName">
<VStack gap={1} align="flex-start">
<h3
class={`profile-modal__name ${user?.isPro ? 's-pro' : ''}`}
id="profileUserName"
>
{user && user.displayName ? user.displayName : 'Anonymous Creator'}
</h3>
{user.isPro && (
<Stack justify="center">
<ProBadge />
</Stack>
)}
{user.isPro && <ProBadge />}
</VStack>
</Stack>
<HStack>
<button
class="btn btn--primary"
aria-label="Logout from your account"
onClick={logoutBtnHandler}
>
Logout
</button>
</HStack>
</VStack>
</div>
<button
class="btn btn--primary"
aria-label="Logout from your account"
onClick={logoutBtnHandler}
>
Logout
</button>
</Stack>
);
};
export function Profile({ user, logoutBtnHandler }) {
const [currentSubscription, setCurrentSubscription] = useState(null);
useEffect(() => {
if (user?.isPro) {
window.db.getUserSubscriptionEvents(user.uid).then(events => {
console.log(events);
const creationEvent = events
.filter(event => event.type === 'subscription_created')
.sort((a, b) => b.timestamp.seconds - a.timestamp.seconds)[0];
if (creationEvent) {
console.log(creationEvent);
creationEvent.attributes = creationEvent.data.data.attributes;
setCurrentSubscription(creationEvent);
}
});
}
}, [user]);
return (
<VStack gap={2}>
<Header user={user} logoutBtnHandler={logoutBtnHandler} />
{currentSubscription ? (
<Panel>
<VStack align="stretch" gap={1}>
<Text>
Plan:
<Text weight="700">
{' '}
{currentSubscription.attributes.product_name}
</Text>
</Text>
<Text>
Subscription Status:{' '}
<Text weight="700">{currentSubscription.attributes.status}</Text>
</Text>
<Text>
Renews on:{' '}
<Text weight="700">
{getHumanReadableDate(currentSubscription.attributes.renews_at)}
</Text>
</Text>
<a
target="_blank"
href={currentSubscription.attributes.urls.customer_portal}
>
Cancel subscription
</a>
{/* <a
target="_blank"
href={
currentSubscription.attributes.urls
.customer_portal_update_subscription
}
>
Link 2
</a>
<a
target="_blank"
href={currentSubscription.attributes.urls.update_payment_method}
>
Link 3
</a> */}
</VStack>
</Panel>
) : null}
</VStack>
);
}

2
src/components/Text.jsx
View File

@@ -32,7 +32,7 @@ const sizes = {
export const Text = forwardRef(
(
{
size = 0,
size = 1,
weight = 'normal',
tag,
style = 'normal',

9
src/components/app.jsx
View File

@@ -1134,8 +1134,13 @@ export default class App extends Component {
return false;
}
proBtnClickHandler() {
this.setState({ isProModalOpen: true });
trackEvent('ui', 'proBtnClick');
if (user?.isPro) {
this.setState({ isProfileModalOpen: true });
trackEvent('ui', 'manageProBtnClick');
} else {
this.setState({ isProModalOpen: true });
trackEvent('ui', 'proBtnClick');
}
}
codepenBtnClickHandler(e) {
if (this.state.currentItem.cssMode === CssModes.ACSS) {