Skip to content

Commit

Permalink
feat(sentry): add wrapper to pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@iacopolea
iacopolea committed Dec 4, 2023
1 parent b2c8a7f commit 7963a5b
Show file tree
Hide file tree
Showing 16 changed files with 585 additions and 502 deletions.
25 changes: 25 additions & 0 deletions src/features/PageTemplate.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from "react";
import SentryWrapper from "./SentryWrapper";
import { useGetUsersMeQuery } from "src/services/tryberApi";
import TagManager from "react-gtm-module";

export const PageTemplate = ({ children }: { children: React.ReactNode }) => {
const { error, isLoading } = useGetUsersMeQuery({});
if (isLoading) {
return <div>Loading...</div>;
}
TagManager.dataLayer({
dataLayer: {
event: "ApiLoaded",
},
});
if (error) {
if ("status" in error && error.status === 403) {
return <div>You are not logged in. Please log in to continue.</div>;
} else {
if ("message" in error) alert(error.message);
}
return null;
}
return <SentryWrapper>{children}</SentryWrapper>;
};
16 changes: 16 additions & 0 deletions src/features/SentryWrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { useGetUsersMeQuery } from "src/services/tryberApi";
import * as Sentry from "@sentry/react";

const SentryWrapper = ({ children }: { children: React.ReactNode }) => {
const { data: user } = useGetUsersMeQuery({});

Sentry.setUser({
role: user?.role ?? "unknown",
wp_user_id: user?.wp_user_id ?? 0,
tester_id: user?.id ?? 0,
});

return <>{children}</>;
};

export default SentryWrapper;
73 changes: 38 additions & 35 deletions src/pages/BugsList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Filters from "./Filters";
import TagsFilter from "./Filters/TagsFilter";
import Stats from "./Stats";
import Table from "./Table";
import { PageTemplate } from "src/features/PageTemplate";

const FluidContainer = styled.div`
max-width: 90%;
Expand All @@ -28,41 +29,43 @@ const BugsList = () => {
const [isStatsModalOpen, setIsStatsModalOpen] = useState(false);

return (
<FluidContainer>
<Title size="m">Bug List - CP-{id}</Title>
<Stats
id={id}
isOpen={isStatsModalOpen}
setIsOpen={setIsStatsModalOpen}
/>
<HeaderButton
as="a"
href={`/wp-admin/admin.php?page=mvc_campaigns`}
type="secondary"
className="aq-mr-2"
>
{"<"} To Campaign List
</HeaderButton>
<HeaderButton as="a" href={`/campaigns/${id}`} className="aq-mr-2">
{"<"} To Dashboard
</HeaderButton>
<HeaderButton onClick={() => setIsStatsModalOpen(true)}>
Stats
</HeaderButton>
<FilterContext>
<div className="aq-my-3">
<Filters id={id} />
</div>
<div className="aq-mb-4">
<TagsFilter id={id} />
</div>
<BSGrid>
<BSCol size="col-lg-12">
<Table id={id} />
</BSCol>
</BSGrid>
</FilterContext>
</FluidContainer>
<PageTemplate>
<FluidContainer>
<Title size="m">Bug List - CP-{id}</Title>
<Stats
id={id}
isOpen={isStatsModalOpen}
setIsOpen={setIsStatsModalOpen}
/>
<HeaderButton
as="a"
href={`/wp-admin/admin.php?page=mvc_campaigns`}
type="secondary"
className="aq-mr-2"
>
{"<"} To Campaign List
</HeaderButton>
<HeaderButton as="a" href={`/campaigns/${id}`} className="aq-mr-2">
{"<"} To Dashboard
</HeaderButton>
<HeaderButton onClick={() => setIsStatsModalOpen(true)}>
Stats
</HeaderButton>
<FilterContext>
<div className="aq-my-3">
<Filters id={id} />
</div>
<div className="aq-mb-4">
<TagsFilter id={id} />
</div>
<BSGrid>
<BSCol size="col-lg-12">
<Table id={id} />
</BSCol>
</BSGrid>
</FilterContext>
</FluidContainer>
</PageTemplate>
);
};

Expand Down
49 changes: 26 additions & 23 deletions src/pages/Jotform/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { CufListCard } from "./CufListCard";
import { useAppSelector } from "src/store";
import { JotformSuccessCard } from "src/pages/Jotform/JotformSuccessCard";
import { OpsUserContainer } from "src/features/AuthorizedOnlyContainer";
import { PageTemplate } from "src/features/PageTemplate";

const StickyContainer = styled.div`
@media (min-width: ${(p) => p.theme.grid.breakpoints.lg}) {
Expand All @@ -16,28 +17,30 @@ const StickyContainer = styled.div`
export default function Jotform() {
const { url } = useAppSelector((state) => state.jotform);
return (
<OpsUserContainer>
<BSGrid className="aq-mt-4">
{url ? (
<>
<BSCol size="col-lg-2" />
<BSCol size="col-lg-8">
<JotformSuccessCard url={url} />
</BSCol>
</>
) : (
<>
<BSCol size="col-lg-4">
<StickyContainer>
<CufListCard />
</StickyContainer>
</BSCol>
<BSCol size="col-lg-8">
<CufConfigurator />
</BSCol>
</>
)}
</BSGrid>
</OpsUserContainer>
<PageTemplate>
<OpsUserContainer>
<BSGrid className="aq-mt-4">
{url ? (
<>
<BSCol size="col-lg-2" />
<BSCol size="col-lg-8">
<JotformSuccessCard url={url} />
</BSCol>
</>
) : (
<>
<BSCol size="col-lg-4">
<StickyContainer>
<CufListCard />
</StickyContainer>
</BSCol>
<BSCol size="col-lg-8">
<CufConfigurator />
</BSCol>
</>
)}
</BSGrid>
</OpsUserContainer>
</PageTemplate>
);
}
79 changes: 41 additions & 38 deletions src/pages/Payments/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { MakePaymentModal } from "src/pages/Payments/MakePaymentModal";
import { PendingReqFilters } from "src/pages/Payments/pending/PendingReqFilters";
import { RetryPaymentModal } from "./RetryPaymentModal";
import { DeletePaymentModal } from "./DeletePaymentModal";
import { PageTemplate } from "src/features/PageTemplate";

const StyledTabs = styled.div`
.cell {
Expand All @@ -31,44 +32,46 @@ export default function AdminPayments() {
);

return (
<Container>
<MakePaymentModal />
<RetryPaymentModal />
<DeletePaymentModal />
<BSGrid>
<BSCol size="col-lg-9 ">
<Card className="aq-mb-3" bodyClass="">
<StyledTabs>
<Tabs
active={activeTab}
setActive={setActiveTab}
className="aq-text-primaryVariant"
>
<Tab
id="pending"
title={<span className="aq-mx-3-lg">Pending</span>}
<PageTemplate>
<Container>
<MakePaymentModal />
<RetryPaymentModal />
<DeletePaymentModal />
<BSGrid>
<BSCol size="col-lg-9 ">
<Card className="aq-mb-3" bodyClass="">
<StyledTabs>
<Tabs
active={activeTab}
setActive={setActiveTab}
className="aq-text-primaryVariant"
>
<TabPendingPayments />
</Tab>
<Tab
id="failed"
title={
<span className="aq-mx-3-lg">
Failed
{total > 0 ? ` (${total})` : null}
</span>
}
>
<TabFailedPayments />
</Tab>
</Tabs>
</StyledTabs>
</Card>
</BSCol>
<BSCol size="col-lg-3">
{activeTab === "pending" && <PendingReqFilters />}
</BSCol>
</BSGrid>
</Container>
<Tab
id="pending"
title={<span className="aq-mx-3-lg">Pending</span>}
>
<TabPendingPayments />
</Tab>
<Tab
id="failed"
title={
<span className="aq-mx-3-lg">
Failed
{total > 0 ? ` (${total})` : null}
</span>
}
>
<TabFailedPayments />
</Tab>
</Tabs>
</StyledTabs>
</Card>
</BSCol>
<BSCol size="col-lg-3">
{activeTab === "pending" && <PendingReqFilters />}
</BSCol>
</BSGrid>
</Container>
</PageTemplate>
);
}
93 changes: 48 additions & 45 deletions src/pages/Popups/Create/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,58 +8,61 @@ import {
import { useHistory } from "react-router-dom";
import createPopup from "src/api/createPopup";
import Editor from "src/features/Editor";
import { PageTemplate } from "src/features/PageTemplate";

const usePopupsCreate = () => {
let history = useHistory();
return (
<div className="popupContainer">
<Editor
onSave={(data) => {
if (!data.title) {
alert("Please specify a title for the popup");
return;
}
createPopup(data)
.then((data) => {
alert("Saved!");
history.push(`/backoffice/${data.id}`);
})
.catch((e) => {
alert("Error!");
console.error(e.message);
});
}}
>
<Element
canvas
is={Container}
className="aq-p-3"
data-cy="root-container"
<PageTemplate>
<div className="popupContainer">
<Editor
onSave={(data) => {
if (!data.title) {
alert("Please specify a title for the popup");
return;
}
createPopup(data)
.then((data) => {
alert("Saved!");
history.push(`/backoffice/${data.id}`);
})
.catch((e) => {
alert("Error!");
console.error(e.message);
});
}}
>
<Wysiwyg
text={JSON.parse(
'{"blocks":[{"key":"3eeir","text":"Ciao tryber","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"bdtka","text":"A partire dal 17 Maggio 2021 sarà necessario avere un profilo fiscale verificato per poter richiedere un pagamento sul proprio account AppQuality! 🤑","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":54,"length":26,"key":0}],"data":{}},{"key":"ekac1","text":"Per non subire interruzioni nelle tue attività ti invitiamo ad aggiornare le tue informazioni fiscali cliccando il bottone seguente ⬇️","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"aelur","text":"Grazie e Keep Testing!","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"51t06","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{"0":{"type":"LINK","mutability":"MUTABLE","data":{"href":"https://crowd.app-quality.com/it/guida-al-nuovo-profilo-fiscale/","rel":"noopener","target":"_blank","url":"https://crowd.app-quality.com/it/guida-al-nuovo-profilo-fiscale/"}}}}'
)}
/>
<Element canvas is={ButtonContainer} data-cy="button-container">
<Button
color="success"
text="Vai al profilo fiscale"
link="https://google.com"
size="medium"
data-cy="frame-button"
/>
<Button
color="success"
text="Vai al profilo fiscale"
link="https://google.com"
size="medium"
data-cy="frame-button"
<Element
canvas
is={Container}
className="aq-p-3"
data-cy="root-container"
>
<Wysiwyg
text={JSON.parse(
'{"blocks":[{"key":"3eeir","text":"Ciao tryber","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"bdtka","text":"A partire dal 17 Maggio 2021 sarà necessario avere un profilo fiscale verificato per poter richiedere un pagamento sul proprio account AppQuality! 🤑","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":54,"length":26,"key":0}],"data":{}},{"key":"ekac1","text":"Per non subire interruzioni nelle tue attività ti invitiamo ad aggiornare le tue informazioni fiscali cliccando il bottone seguente ⬇️","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"aelur","text":"Grazie e Keep Testing!","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"51t06","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{"0":{"type":"LINK","mutability":"MUTABLE","data":{"href":"https://crowd.app-quality.com/it/guida-al-nuovo-profilo-fiscale/","rel":"noopener","target":"_blank","url":"https://crowd.app-quality.com/it/guida-al-nuovo-profilo-fiscale/"}}}}'
)}
/>
<Element canvas is={ButtonContainer} data-cy="button-container">
<Button
color="success"
text="Vai al profilo fiscale"
link="https://google.com"
size="medium"
data-cy="frame-button"
/>
<Button
color="success"
text="Vai al profilo fiscale"
link="https://google.com"
size="medium"
data-cy="frame-button"
/>
</Element>
</Element>
</Element>
</Editor>
</div>
</Editor>
</div>
</PageTemplate>
);
};

Expand Down
Loading

0 comments on commit 7963a5b

Please sign in to comment.