LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1852 from SkynetLabs/improve-subscription-only-portal-communication 

improve user communication on subscription required portal
This commit is contained in:
Karol Wypchło 2022-03-21 16:51:51 +01:00 committed by GitHub
parent e4b9f41589 c4f2bbd6ba
commit b397727006
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docker/nginx/libs/skynet/account.lua
View File

@ -78,7 +78,9 @@ function _M.has_subscription()
end
function _M.is_auth_required()
return os.getenv("ACCOUNTS_LIMIT_ACCESS") == "authenticated"
-- authentication is required if mode is set to "authenticated"
-- or "subscription" (require active subscription to a premium plan)
return os.getenv("ACCOUNTS_LIMIT_ACCESS") == "authenticated" or _M.is_subscription_required()
end
function _M.is_subscription_required()

48
packages/website/src/components/Uploader/Uploader.js
View File

@ -47,15 +47,37 @@ const LogInLink = () => {
);
};
const SubscribeLink = () => {
const createAccountsUrl = useAccountsUrl();
return (
<Link
href={createAccountsUrl("payments")}
className="uppercase underline-primary hover:text-primary transition-colors duration-200"
>
available plans
</Link>
);
};
const Uploader = () => {
const [mode, setMode] = React.useState("file");
const [uploads, setUploads] = React.useState([]);
const { data: accounts } = useAccounts();
const showAccountFeatures =
accounts && accounts.enabled !== false && !accounts?.auth_required && !accounts?.authenticated;
const disabledComponent =
accounts && accounts.enabled !== false && accounts?.auth_required && !accounts?.authenticated;
// variables extracted from useAccounts response
const isAccountsEnabled = accounts?.enabled;
const isSubscriptionRequired = accounts?.subscription_required;
const isAuthRequired = isSubscriptionRequired || accounts?.auth_required;
const isAuthenticated = accounts?.authenticated;
const hasSubscription = accounts?.subscription;
// derive current app state and extract it into variables
const showAccountFeatures = isAccountsEnabled && !isAuthRequired && !isAuthenticated;
const showAuthenticationRequired = isAccountsEnabled && isAuthRequired && !isAuthenticated;
const showSubscriptionRequired = isAccountsEnabled && isAuthenticated && isSubscriptionRequired && !hasSubscription;
const isComponentDisabled = showAuthenticationRequired || showSubscriptionRequired;
const onUploadStateChange = React.useCallback((id, state) => {
setUploads((uploads) => {
@ -104,7 +126,7 @@ const Uploader = () => {
}, [inputElement, mode]);
return (
<div className={classnames("relative", { "p-8": disabledComponent })}>
<div className={classnames("relative", { "p-8": isComponentDisabled })}>
<div className="max-w-content mx-auto rounded-lg shadow bg-white z-0 relative">
<div className="flex">
<button
@ -156,7 +178,7 @@ const Uploader = () => {
{mode === "directory" && <span>Drop any folder with an index.html file to deploy to Skynet</span>}
</h4>
</div>
{!disabledComponent && (
{!isComponentDisabled && (
<div className="absolute left-1/2 -bottom-4 desktop:-bottom-8">
<div className="relative -left-1/2 transform transition-transform hover:rotate-180" role="button">
<Add />
@ -204,7 +226,7 @@ const Uploader = () => {
</div>
)}
{disabledComponent && (
{showAuthenticationRequired && (
<div className="absolute inset-0 bg-palette-500 bg-opacity-90 rounded-lg">
<div className="flex h-full">
<div className="m-auto">
@ -215,6 +237,18 @@ const Uploader = () => {
</div>
</div>
)}
{showSubscriptionRequired && (
<div className="absolute inset-0 bg-palette-500 bg-opacity-90 rounded-lg">
<div className="flex h-full">
<div className="m-auto">
<h4 className="font-light text-palette-100 text-lg mt-2 text-center">
Active subscription required - <SubscribeLink />
</h4>
</div>
</div>
</div>
)}
</div>
);
};