Skip to content

Commit

Permalink
show partner logos in addition to authority logos (#143)
Browse files Browse the repository at this point in the history
⚠️ DO NOT MERGE: blocked by API changes. Also note that cypress test
failures are expected until API code is merged

## Description

use new `data_partners` field to pull those logos and display them

## Test Plan

test locally with the API PR:
rewiringamerica/api.rewiringamerica.org#341
you should see the new logo
  • Loading branch information
rpartridge authored Mar 8, 2024
1 parent 9264504 commit 40acc69
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 9 deletions.
10 changes: 10 additions & 0 deletions src/api/calculator-types-v1.ts
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,16 @@ export interface APIResponse {
state: string | null;
utility: string | null;
};
data_partners: {
[id: string]: {
name: string;
logo?: {
src: string;
width: number;
height: number;
};
};
};
location: APILocation;
incentives: Incentive[];
}
18 changes: 11 additions & 7 deletions src/authority-logos.tsx → src/partner-logos.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,26 @@ type Props = { response: APIResponse };
* Displays the white area at the bottom of the calculator results with logos
* of the authorities whose incentives are displayed.
*/
export const AuthorityLogos = ({ response }: Props) => {
export const PartnerLogos = ({ response }: Props) => {
const { msg } = useTranslated();
const authoritiesWithLogo = Object.entries(response.authorities).filter(
([, auth]) => !!auth.logo,
);
if (authoritiesWithLogo.length === 0) {
const partnersWithLogo = Object.entries(response.data_partners).filter(
([, partner]) => !!partner.logo,
);
const allLogos = [...authoritiesWithLogo, ...partnersWithLogo];
if (allLogos.length === 0) {
return <></>;
}

const logos = authoritiesWithLogo.map(([id, auth]) => (
const logos = allLogos.map(([id, partner]) => (
<img
key={id}
alt={auth.name}
src={auth.logo!.src}
width={auth.logo!.width}
height={auth.logo!.height}
alt={partner.name}
src={partner.logo!.src}
width={partner.logo!.width}
height={partner.logo!.height}
/>
));

Expand Down
4 changes: 2 additions & 2 deletions src/state-incentive-details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
Incentive,
ItemType,
} from './api/calculator-types-v1';
import { AuthorityLogos } from './authority-logos';
import { PrimaryButton, TextButton } from './buttons';
import { Card } from './card';
import { TextInput } from './components/text-input';
Expand All @@ -16,6 +15,7 @@ import { str } from './i18n/str';
import { MsgFn, useTranslated } from './i18n/use-translated';
import { IconTabBar } from './icon-tab-bar';
import { ExclamationPoint, UpRightArrow } from './icons';
import { PartnerLogos } from './partner-logos';
import { PROJECTS, Project, shortLabel } from './projects';
import { Separator } from './separator';

Expand Down Expand Up @@ -446,7 +446,7 @@ export const StateIncentives: FC<Props> = ({
// We won't show the empty state in this seciton, so no email submission
emailSubmitter={null}
/>
<AuthorityLogos response={response} />
<PartnerLogos response={response} />
</>
);
};

0 comments on commit 40acc69

Please sign in to comment.