-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add error handling to callout (#288)
* Update sample data * Fix: first child error * Feat: Exract header into its own component * Feat: Add a callout error component * Only render if callout and callout is active * Consider active if no active until * refactor: move styles inside component * fix: move types to prevent dependency cycle * Feat: add links to targeting tool if error * refactor: make time human readable
- Loading branch information
Showing
6 changed files
with
220 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { css } from "@emotion/react"; | ||
| import { space, text } from "@guardian/src-foundations"; | ||
| import { SvgAlertTriangle } from "@guardian/src-icons"; | ||
| import { Error } from "../../editorial-source-components/Error"; | ||
| import { CalloutTableHeader } from "./CalloutTable"; | ||
| import type { Campaign } from "./CalloutTypes"; | ||
|
|
||
| const marginBottom = css` | ||
| margin-bottom: ${space[2]}px !important; | ||
| `; | ||
|
|
||
| const error = css` | ||
| display: flex; | ||
| align-items: center; | ||
| svg { | ||
| height: 20px; | ||
| fill: ${text.error}; | ||
| margin-right: ${space[1]}px; | ||
| } | ||
| a { | ||
| margin-left: auto; | ||
| } | ||
| `; | ||
|
|
||
| export const CalloutError = ({ | ||
| callout, | ||
| targetingUrl, | ||
| calloutId, | ||
| isExpired, | ||
| }: { | ||
| callout: Campaign | undefined; | ||
| targetingUrl: string; | ||
| calloutId: string; | ||
| isExpired: boolean; | ||
| }) => { | ||
| const edToolsEmail = "[email protected]"; | ||
| const centralProdEmail = "[email protected]"; | ||
|
|
||
| return callout && isExpired ? ( | ||
| <> | ||
| <Error css={[error, marginBottom]}> | ||
| <SvgAlertTriangle /> | ||
| <p>This callout has expired and will not appear in the article.</p> | ||
| </Error> | ||
| <CalloutTableHeader | ||
| title={callout.fields.callout} | ||
| tagName={callout.fields.tagName} | ||
| targetingUrl={targetingUrl} | ||
| calloutId={calloutId} | ||
| formUrl={callout.fields.formUrl ?? ""} | ||
| /> | ||
| </> | ||
| ) : ( | ||
| <div> | ||
| <Error css={[error, marginBottom]}> | ||
| <SvgAlertTriangle /> | ||
| Composer was unable to find this callout. | ||
| <a href={`${targetingUrl}`}>Open in targeting tool</a> | ||
| </Error> | ||
| <p css={marginBottom}> | ||
| It is likely that the callout has been deleted. Please check in | ||
| the | ||
| <a href={`${targetingUrl}`}>targeting tool</a> to check if this callout | ||
| is available. | ||
| </p> | ||
| <p> | ||
| If the problem persists, you may wish to contact Central Production ( | ||
| <a href={`mailto:${centralProdEmail}`}>{centralProdEmail}</a>) and the | ||
| Editorial Tools team ( | ||
| <a href={`mailto:${edToolsEmail}`}>{edToolsEmail}</a>) for assistance. | ||
| </p> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| export type Fields = { | ||
| callout: string; | ||
| formId: number; | ||
| tagName: string; | ||
| description?: string; | ||
| formUrl?: string; | ||
| _type: string; | ||
| }; | ||
|
|
||
| export type Rules = { | ||
| requiredTags: string[]; | ||
| lackingTags: string[]; | ||
| matchAllTags: boolean; | ||
| }; | ||
|
|
||
| export type Campaign = { | ||
| id: string; | ||
| name: string; | ||
| fields: Fields; | ||
| rules: Rules[]; | ||
| priority: number; | ||
| displayOnSensitive: boolean; | ||
| activeFrom?: number; | ||
| activeUntil?: number; | ||
| }; |
Oops, something went wrong.