Skip to content
This repository was archived by the owner on Jan 2, 2025. It is now read-only.

Show warning message when subscription is past due #1173

Merged
anastasiya1155 merged 1 commit into from
Dec 13, 2023
Merged

Show warning message when subscription is past due #1173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 2 additions & 0 deletions client/src/context/personalQuotaContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ type ContextType = {
allowed: number;
};
isSubscribed: boolean;
isPastDue: boolean;
hasCheckedQuota: boolean;
resetAt: string;
};
Expand All @@ -19,6 +20,7 @@ export const PersonalQuotaContext = {
allowed: 10,
},
isSubscribed: false,
isPastDue: false,
hasCheckedQuota: false,
resetAt: new Date().toISOString(),
}),
Expand Down
5 changes: 4 additions & 1 deletion client/src/context/providers/PersonalQuotaContextProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const PersonalQuotaContextProvider = memo(
const [quota, setQuota] = useState({ used: 0, allowed: 10 });
const [requestsLeft, setRequestsLeft] = useState(10);
const [isSubscribed, setIsSubscribed] = useState(false);
const [isPastDue, setIsPastDue] = useState(false);
const [hasCheckedQuota, setHasCheckedQuota] = useState(false);
const [resetAt, setResetAt] = useState(new Date().toISOString());
const { isSelfServe, envConfig } = useContext(DeviceContext);
Expand All @@ -27,6 +28,7 @@ export const PersonalQuotaContextProvider = memo(
if (!isSelfServe && envConfig.user_login) {
const resp = await getQuota();
setIsSubscribed(resp.upgraded);
setIsPastDue(resp.isPastDue);
setQuota((prev) => {
const newState = { used: resp.used, allowed: resp.allowed };
if (JSON.stringify(prev) === JSON.stringify(newState)) {
Expand Down Expand Up @@ -56,10 +58,11 @@ export const PersonalQuotaContextProvider = memo(
requestsLeft,
quota,
isSubscribed,
isPastDue,
hasCheckedQuota,
resetAt,
}),
[requestsLeft, isSubscribed, hasCheckedQuota, quota, resetAt],
[requestsLeft, isSubscribed, isPastDue, hasCheckedQuota, quota, resetAt],
);

const handlersContextValue = useMemo(
Expand Down
3 changes: 2 additions & 1 deletion client/src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,5 +431,6 @@
"Cloning": "Cloning",
"Directories": "Directories",
"Languages": "Languages",
"Generating answer...": "Generating answer..."
"Generating answer...": "Generating answer...",
"Your subscription has expired. Please update your payment details to avoid being unsubscribed.": "Your subscription has expired. Please update your payment details to avoid being unsubscribed."
}
3 changes: 2 additions & 1 deletion client/src/locales/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -432,5 +432,6 @@
"Cloning": "Clonación",
"Directories": "Directorios",
"Languages": "Lenguas",
"Generating answer...": "Generando respuesta ..."
"Generating answer...": "Generando respuesta ...",
"Your subscription has expired. Please update your payment details to avoid being unsubscribed.": "Su suscripción ha expirado. Actualice sus detalles de pago para evitar no suscribirse."
}
3 changes: 2 additions & 1 deletion client/src/locales/it.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,5 +415,6 @@
"Cloning": "Clonazione",
"Directories": "Directory",
"Languages": "Le lingue",
"Generating answer...": "Risposta di generazione ..."
"Generating answer...": "Risposta di generazione ...",
"Your subscription has expired. Please update your payment details to avoid being unsubscribed.": "Il tuo abbonamento è scaduto. Aggiorna i dettagli del pagamento per evitare di essere annullati."
}
3 changes: 2 additions & 1 deletion client/src/locales/ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,5 +429,6 @@
"Cloning": "クローニング",
"Directories": "ディレクトリ",
"Languages": "言語",
"Generating answer...": "答えを生成します..."
"Generating answer...": "答えを生成します...",
"Your subscription has expired. Please update your payment details to avoid being unsubscribed.": "あなたのサブスクリプションが期限切れになりました。 登録解除されないように、支払いの詳細を更新してください。"
}
3 changes: 2 additions & 1 deletion client/src/locales/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,5 +438,6 @@
"Cloning": "克隆",
"Directories": "目录",
"Languages": "语言",
"Generating answer...": "生成答案..."
"Generating answer...": "生成答案...",
"Your subscription has expired. Please update your payment details to avoid being unsubscribed.": "您的订阅已过期。 请更新您的付款详细信息，以避免被取消订阅。"
}
235 changes: 124 additions & 111 deletions client/src/pages/HomeTab/Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React, {
import { Trans, useTranslation } from 'react-i18next';
import LiteLoader from '../../components/Loaders/LiteLoader';
import Button from '../../components/Button';
import { CloseSign, Info } from '../../icons';
import { CloseSign, Info, WarningSign } from '../../icons';
import { RepositoriesContext } from '../../context/repositoriesContext';
import { CodeStudioShortType, RepoType, SyncStatus } from '../../types/general';
import { DeviceContext } from '../../context/deviceContext';
Expand All @@ -20,6 +20,7 @@ import {
postCodeStudio,
} from '../../services/api';
import { UIContext } from '../../context/uiContext';
import { PersonalQuotaContext } from '../../context/personalQuotaContext';
import AddRepos from './AddRepos';
import ReposSection from './ReposSection';
import AddRepoCard from './AddRepoCard';
Expand All @@ -43,6 +44,7 @@ const filterRepositories = (repos?: RepoType[], search?: string) => {
const HomePage = ({ randomKey }: { randomKey?: any }) => {
const { t } = useTranslation();
const { fetchRepos, repositories } = useContext(RepositoriesContext);
const { isPastDue } = useContext(PersonalQuotaContext.Values);
const { isSelfServe } = useContext(DeviceContext);
const { handleAddStudioTab } = useContext(TabsContext);
const { search, filterType, setFilterType } = useContext(
Expand Down Expand Up @@ -114,123 +116,134 @@ const HomePage = ({ randomKey }: { randomKey?: any }) => {

return (
<PageTemplate renderPage="home">
<div className="w-full flex flex-col mx-auto max-w-6.5xl">
<div className="p-8 pb-0">
<h4 className="mb-3">
<Trans>Add</Trans>
</h4>
<div className="flex gap-3.5 pb-2">
<AddRepoCard type="github" onClick={setAddReposOpen} />
<AddRepoCard type="public" onClick={setAddReposOpen} />
{!isSelfServe && (
<AddRepoCard type="local" onClick={setAddReposOpen} />
<div className="flex flex-col w-full">
{isPastDue && (
<div className="bg-warning-300/12 py-2 px-8 flex items-center justify-center gap-2 text-warning-300 caption">
<WarningSign raw sizeClassName="w-4.5 h-4.5" />
<Trans>
Your subscription has expired. Please update your payment details
to avoid being unsubscribed.
</Trans>
</div>
)}
<div className="w-full flex flex-col mx-auto max-w-6.5xl">
<div className="p-8 pb-0">
<h4 className="mb-3">
<Trans>Add</Trans>
</h4>
<div className="flex gap-3.5 pb-2">
<AddRepoCard type="github" onClick={setAddReposOpen} />
<AddRepoCard type="public" onClick={setAddReposOpen} />
{!isSelfServe && (
<AddRepoCard type="local" onClick={setAddReposOpen} />
)}
<AddRepoCard type="studio" onClick={handleNewStudio} />
</div>
</div>
<div className="overflow-auto">
{(filterType === 'all' || filterType === 'repos') && (
<ReposSection
reposToShow={reposToShow}
setReposToShow={setReposToShow}
repositories={repositories}
shouldShowFull={filterType === 'repos'}
isFiltered={!!search}
showAll={() => setFilterType('repos')}
/>
)}
{(filterType === 'all' || filterType === 'studios') && (
<CodeStudiosSection
codeStudios={codeStudiosToShow}
shouldShowFull={filterType === 'studios'}
isFiltered={!!search}
showAll={() => setFilterType('studios')}
refetchStudios={refreshCodeStudios}
handleRename={handleRename}
handleNewStudio={handleNewStudio}
/>
)}
<AddRepoCard type="studio" onClick={handleNewStudio} />
{!!search &&
((filterType === 'all' &&
!reposToShow.length &&
!codeStudiosToShow.length) ||
(filterType === 'repos' && !reposToShow.length) ||
(filterType === 'studios' && !codeStudiosToShow.length)) && (
<div className="flex flex-col gap-2 mx-auto text-center select-none">
<p className="body-s text-label-title">
<Trans>No results...</Trans>
</p>
<p className="caption text-label-muted">
<Trans>
Nothing matched your search. Try a different combination!
</Trans>
</p>
</div>
)}
</div>
</div>
<div className="overflow-auto">
{(filterType === 'all' || filterType === 'repos') && (
<ReposSection
reposToShow={reposToShow}
setReposToShow={setReposToShow}
repositories={repositories}
shouldShowFull={filterType === 'repos'}
isFiltered={!!search}
showAll={() => setFilterType('repos')}
/>
)}
{(filterType === 'all' || filterType === 'studios') && (
<CodeStudiosSection
codeStudios={codeStudiosToShow}
shouldShowFull={filterType === 'studios'}
isFiltered={!!search}
showAll={() => setFilterType('studios')}
refetchStudios={refreshCodeStudios}
handleRename={handleRename}
handleNewStudio={handleNewStudio}
/>
)}
{!!search &&
((filterType === 'all' &&
!reposToShow.length &&
!codeStudiosToShow.length) ||
(filterType === 'repos' && !reposToShow.length) ||
(filterType === 'studios' && !codeStudiosToShow.length)) && (
<div className="flex flex-col gap-2 mx-auto text-center select-none">
<AddRepos
addRepos={addReposOpen}
onClose={(isSubmitted, name) => {
if (isSubmitted && name) {
if (studioToEdit) {
setStudioToEdit(null);
patchCodeStudio(studioToEdit.id, { name }).then(
refreshCodeStudios,
);
}
} else if (isSubmitted) {
fetchRepos();
setTimeout(() => fetchRepos(), 1000);
setPopupOpen('repo');
setTimeout(() => setPopupOpen(false), 3000);
}
setStudioToEdit(null);
setAddReposOpen(null);
}}
initialValue={studioToEdit?.name}
/>
{!!popupOpen && (
<div
className={`fixed w-85 p-3 flex gap-3 bg-bg-shade border border-bg-border rounded-lg shadow-high left-8 bottom-24 z-40 text-bg-main`}
>
{popupOpen === 'repo' ? (
<LiteLoader />
) : (
<Info className="text-bg-danger" />
)}
<div className="flex flex-col gap-1">
<p className="body-s text-label-title">
<Trans>No results...</Trans>
{popupOpen === 'repo' ? (
<Trans>Syncing repository</Trans>
) : (
<Trans>Can’t open studio project</Trans>
)}
</p>
<p className="caption text-label-muted">
<Trans>
Nothing matched your search. Try a different combination!
</Trans>
<p className="caption text-label-base">
{popupOpen === 'repo' ? (
<Trans>
We are syncing your repository to bloop. This might take a
couple of minutes
</Trans>
) : (
<Trans>
One or more repositories used in this studio project is
being indexed. Try again when this process in complete.
</Trans>
)}
</p>
</div>
)}
</div>
<AddRepos
addRepos={addReposOpen}
onClose={(isSubmitted, name) => {
if (isSubmitted && name) {
if (studioToEdit) {
setStudioToEdit(null);
patchCodeStudio(studioToEdit.id, { name }).then(
refreshCodeStudios,
);
}
} else if (isSubmitted) {
fetchRepos();
setTimeout(() => fetchRepos(), 1000);
setPopupOpen('repo');
setTimeout(() => setPopupOpen(false), 3000);
}
setStudioToEdit(null);
setAddReposOpen(null);
}}
initialValue={studioToEdit?.name}
/>
{!!popupOpen && (
<div
className={`fixed w-85 p-3 flex gap-3 bg-bg-shade border border-bg-border rounded-lg shadow-high left-8 bottom-24 z-40 text-bg-main`}
>
{popupOpen === 'repo' ? (
<LiteLoader />
) : (
<Info className="text-bg-danger" />
)}
<div className="flex flex-col gap-1">
<p className="body-s text-label-title">
{popupOpen === 'repo' ? (
<Trans>Syncing repository</Trans>
) : (
<Trans>Can’t open studio project</Trans>
)}
</p>
<p className="caption text-label-base">
{popupOpen === 'repo' ? (
<Trans>
We are syncing your repository to bloop. This might take a
couple of minutes
</Trans>
) : (
<Trans>
One or more repositories used in this studio project is
being indexed. Try again when this process in complete.
</Trans>
)}
</p>
<Button
variant="tertiary"
size="tiny"
onlyIcon
title={t('Close')}
onClick={() => setPopupOpen(false)}
>
<CloseSign />
</Button>
</div>
<Button
variant="tertiary"
size="tiny"
onlyIcon
title={t('Close')}
onClick={() => setPopupOpen(false)}
>
<CloseSign />
</Button>
</div>
)}
)}
</div>
</div>
</PageTemplate>
);
Expand Down
1 change: 1 addition & 0 deletions client/tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ module.exports = {
"danger-300": "#FB7185",
"warning-100": "#F0A892",
"warning-300": "#ED6E47",
"warning-300/12": "rgba(237,110,71, 0.12)",
sky: '#0EA4E9',
violet: '#8B5CF6',
pink: '#EC4899',
Expand Down