Skip to content
This repository has been archived by the owner on Feb 1, 2024. It is now read-only.

Render Appropriately in Embedded Mode #1260

Merged
merged 3 commits into from
Mar 3, 2021
Merged

Render Appropriately in Embedded Mode #1260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0ccb1d2
Hide Unnecessary Components in Embedded Map
TaiWilkin Feb 23, 2021
ef50d9b
Fix proptypes error
TaiWilkin Feb 23, 2021
e62483e
Update Changelog
TaiWilkin Mar 2, 2021
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Add Closure to CSV Download [#1249](https://github.com/open-apparel-registry/open-apparel-registry/pull/1249)
- Manage Embed Parameter [#1257](https://github.com/open-apparel-registry/open-apparel-registry/pull/1257)
- Send Notification of Facility Report Response [#1250](https://github.com/open-apparel-registry/open-apparel-registry/pull/1250)
- Render Appropriately in Embed Mode [#1260](https://github.com/open-apparel-registry/open-apparel-registry/pull/1260)

### Changed

Expand Down
14 changes: 10 additions & 4 deletions src/app/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,17 @@ class App extends Component {
}

render() {
const { fetchingFeatureFlags } = this.props;
const { fetchingFeatureFlags, embed } = this.props;

const mainPanelStyle = embed ? { ...appStyles.mainPanelStyle, bottom: 0, top: 0 }
: appStyles.mainPanelStyle;
return (
<ErrorBoundary>
<Router history={history}>
<div className="App">
<Translate />
<Navbar />
<main style={appStyles.mainPanelStyle} className="mainPanel">
<Navbar embed={embed} />
<main style={mainPanelStyle} className="mainPanel">
<Switch>
<Route
exact
Expand Down Expand Up @@ -208,7 +210,7 @@ class App extends Component {
<Route render={() => <RouteNotFound />} />
</Switch>
</main>
<Footer />
{embed ? null : <Footer />}
<ToastContainer
position="bottom-center"
transition={Slide}
Expand All @@ -231,9 +233,13 @@ function mapStateToProps({
featureFlags: {
fetching: fetchingFeatureFlags,
},
embeddedMap: {
embed,
},
}) {
return {
fetchingFeatureFlags,
embed: !!embed,
TaiWilkin marked this conversation as resolved.
Show resolved Hide resolved
};
}

Expand Down
7 changes: 5 additions & 2 deletions src/app/src/components/FacilitiesMap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,10 @@ import {
GOOGLE_CLIENT_SIDE_API_KEY,
} from '../util/constants.facilitiesMap';

import { makeFacilityDetailLink } from '../util/util';
import {
makeFacilityDetailLink,
getLocationWithoutEmbedParam,
} from '../util/util';

const selectedMarkerURL = '/images/selectedmarker.png';
const unselectedMarkerURL = '/images/marker.png';
Expand Down Expand Up @@ -261,7 +264,7 @@ function FacilitiesMap({
/>
<Control position="topright">
<CopyToClipboard
text={window.location.href}
text={getLocationWithoutEmbedParam()}
onCopy={() => toast('Copied search to clipboard')}
>
<Button
Expand Down
174 changes: 101 additions & 73 deletions src/app/src/components/FacilityDetailSidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {
makeApprovedClaimDetailsLink,
makeProfileRouteLink,
removeDuplicatesFromOtherLocationsData,
getLocationWithoutEmbedParam,
} from '../util/util';

import {
Expand Down Expand Up @@ -126,6 +127,7 @@ class FacilityDetailSidebar extends Component {
history: { push },
facilityIsClaimedByCurrentUser,
userHasPendingFacilityClaim,
embed,
} = this.props;

if (fetching) {
Expand Down Expand Up @@ -221,21 +223,81 @@ class FacilityDetailSidebar extends Component {
if (!report) return null;
if (report.status === 'PENDING') {
return (
<div style={detailsSidebarStyles.pendingRibbon}>
Reported as {report.closure_state.toLowerCase()} (status pending).
</div>
<FeatureFlag flag={REPORT_A_FACILITY}>
<div style={detailsSidebarStyles.pendingRibbon}>
Reported as {report.closure_state.toLowerCase()} (status pending).
</div>
</FeatureFlag>
);
}
if (data.properties.is_closed) {
return (
<div style={detailsSidebarStyles.closureRibbon}>
This facility is closed.
</div>
<FeatureFlag flag={REPORT_A_FACILITY}>
<div style={detailsSidebarStyles.closureRibbon}>
This facility is closed.
</div>
</FeatureFlag>
);
}
return null;
};

const claimedFacilitySection = (
<ShowOnly when={!facilityIsClaimedByCurrentUser}>
<>
<FeatureFlag flag={CLAIM_A_FACILITY}>
{data.properties.claim_info ? (
<a
className="link-underline small"
href={makeDisputeClaimEmailLink(
data.properties.oar_id,
)}
style={
detailsSidebarStyles.linkStyle
}
>
Dispute claim
</a>
) : (
<>
<ShowOnly when={!userHasPendingFacilityClaim}>
<Link
className="link-underline small"
to={makeClaimFacilityLink(
data.properties.oar_id,
)}
href={makeClaimFacilityLink(
data.properties.oar_id,
)}
style={
detailsSidebarStyles.linkStyle
}
>
Claim this facility
</Link>
</ShowOnly>
<ShowOnly when={userHasPendingFacilityClaim}>
<p>
You have a pending claim on this
facility
</p>
</ShowOnly>
</>
)}
</FeatureFlag>
<a
className="link-underline small"
href={makeReportADataIssueEmailLink(
data.properties.oar_id,
)}
style={detailsSidebarStyles.linkStyle}
>
Suggest a data edit
</a>
</>
</ShowOnly>
);

return (
<div className="control-panel facility-detail">
<div className="panel-header display-flex">
Expand Down Expand Up @@ -299,9 +361,7 @@ class FacilityDetailSidebar extends Component {
</FeatureFlag>
</div>
<div className="facility-detail_data">
<FeatureFlag flag={REPORT_A_FACILITY}>
{renderStatusRibbon()}
</FeatureFlag>
{renderStatusRibbon()}
<FacilityDetailsStaticMap data={data} />
<div className="control-panel__content">
<div className="control-panel__group">
Expand All @@ -321,15 +381,18 @@ class FacilityDetailSidebar extends Component {
<FacilityDetailSidebarInfo
data={data.properties.other_names}
label="Also known as:"
embed={embed}
/>
<FacilityDetailSidebarInfo
data={data.properties.other_addresses}
label="Other addresses:"
embed={embed}
/>
<FacilityDetailSidebarInfo
data={data.properties.contributors}
label="Contributors:"
isContributorsList
embed={embed}
/>
<FeatureFlag flag={PPE}>
<FacilityDetailSidebarPPE properties={data.properties} />
Expand All @@ -348,74 +411,35 @@ class FacilityDetailSidebar extends Component {
</FeatureFlag>
<div className="control-panel__group">
<div style={detailsSidebarStyles.linkSectionStyle}>
<ShowOnly when={!facilityIsClaimedByCurrentUser}>
<>
<ShowOnly when={!embed}>
{claimedFacilitySection}
<ShowOnly when={facilityIsClaimedByCurrentUser}>
<FeatureFlag flag={CLAIM_A_FACILITY}>
{data.properties.claim_info ? (
<a
className="link-underline small"
href={makeDisputeClaimEmailLink(
data.properties.oar_id,
)}
style={
detailsSidebarStyles.linkStyle
}
>
Dispute claim
</a>
) : (
<>
<ShowOnly when={!userHasPendingFacilityClaim}>
<Link
className="link-underline small"
to={makeClaimFacilityLink(
data.properties.oar_id,
)}
href={makeClaimFacilityLink(
data.properties.oar_id,
)}
style={
detailsSidebarStyles.linkStyle
}
>
Claim this facility
</Link>
</ShowOnly>
<ShowOnly when={userHasPendingFacilityClaim}>
<p>
You have a pending claim on this
facility
</p>
</ShowOnly>
</>
)}
<Link
className="link-underline small"
to={makeApprovedClaimDetailsLink(facilityClaimID)}
href={makeApprovedClaimDetailsLink(facilityClaimID)}
style={detailsSidebarStyles.linkStyle}
>
Update facility details
</Link>
</FeatureFlag>
<a
className="link-underline small"
href={makeReportADataIssueEmailLink(
data.properties.oar_id,
)}
style={detailsSidebarStyles.linkStyle}
>
Suggest a data edit
</a>
</>
</ShowOnly>
<ShowOnly when={facilityIsClaimedByCurrentUser}>
<FeatureFlag flag={CLAIM_A_FACILITY}>
<Link
className="link-underline small"
to={makeApprovedClaimDetailsLink(facilityClaimID)}
href={makeApprovedClaimDetailsLink(facilityClaimID)}
style={detailsSidebarStyles.linkStyle}
>
Update facility details
</Link>
</ShowOnly>
<FeatureFlag flag={REPORT_A_FACILITY}>
<ReportFacilityStatus data={data} />
</FeatureFlag>
</ShowOnly>
<FeatureFlag flag={REPORT_A_FACILITY}>
<ReportFacilityStatus data={data} />
</FeatureFlag>
<ShowOnly when={embed}>
<a
className="link-underline small"
href={getLocationWithoutEmbedParam()}
style={detailsSidebarStyles.linkStyle}
target="_blank"
rel="noopener noreferrer"
>
View Facility on the Open Apparel Registry
</a>
</ShowOnly>
</div>
</div>
</div>
Expand Down Expand Up @@ -456,6 +480,9 @@ function mapStateToProps({
auth: {
user,
},
embeddedMap: {
embed,
},
}, {
match: {
params: {
Expand Down Expand Up @@ -487,6 +514,7 @@ function mapStateToProps({
facilityIsClaimedByCurrentUser,
userHasPendingFacilityClaim,
user,
embed: !!embed,
};
}

Expand Down
3 changes: 2 additions & 1 deletion src/app/src/components/FacilityDetailSidebarInfo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const FacilityDetailSidebarInfo = memo(({
data,
label,
isContributorsList,
embed,
}) => {
const makeContributorListItem =
({ id, name, is_verified: isVerified }) => (
Expand All @@ -39,7 +40,7 @@ const FacilityDetailSidebarInfo = memo(({
</span>
</ShowOnly>
{
id ? (
id && !embed ? (
<Link
to={makeProfileRouteLink(id)}
href={makeProfileRouteLink(id)}
Expand Down
2 changes: 2 additions & 0 deletions src/app/src/components/FacilitySidebarSearchTabFacilitiesCount.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ const FacilitySidebarSearchTabFacilitiesCount = ({
<div style={{
margin: 0,
verticalAlign: 'center',
marginRight: '5px',
flex: 1,
}}
>
<p style={{
Expand Down
Loading