77 lines
1.8 KiB
TypeScript
77 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { createMessage, EDIT_APP, FORK_APP, SIGN_IN } from "constants/messages";
|
|
import { ANONYMOUS_USERNAME } from "constants/userConstants";
|
|
import { getTypographyByKey } from "constants/DefaultTheme";
|
|
import Button from "components/ads/Button";
|
|
import ForkApplicationModal from "pages/Applications/ForkApplicationModal";
|
|
|
|
const Cta = styled(Button)`
|
|
${(props) => getTypographyByKey(props, "btnLarge")}
|
|
height: 100%;
|
|
`;
|
|
|
|
const ForkButton = styled(Cta)`
|
|
svg {
|
|
transform: rotate(-90deg);
|
|
}
|
|
height: ${(props) => `calc(${props.theme.smallHeaderHeight})`};
|
|
`;
|
|
|
|
const getAppViewerHeaderCTA = ({
|
|
url,
|
|
canEdit,
|
|
currentApplicationDetails,
|
|
currentUser,
|
|
forkUrl,
|
|
loginUrl,
|
|
}: any) => {
|
|
let CTA = null;
|
|
|
|
if (url && canEdit) {
|
|
CTA = (
|
|
<Cta
|
|
className="t--back-to-editor"
|
|
href={url}
|
|
icon="arrow-left"
|
|
text={createMessage(EDIT_APP)}
|
|
/>
|
|
);
|
|
} else if (
|
|
currentApplicationDetails?.forkingEnabled &&
|
|
currentApplicationDetails?.isPublic
|
|
) {
|
|
if (currentUser?.username === ANONYMOUS_USERNAME) {
|
|
CTA = (
|
|
<ForkButton
|
|
className="t--fork-app"
|
|
href={forkUrl}
|
|
text={createMessage(FORK_APP)}
|
|
icon="fork"
|
|
/>
|
|
);
|
|
} else {
|
|
CTA = (
|
|
<div className="header__application-fork-btn-wrapper t--fork-btn-wrapper">
|
|
<ForkApplicationModal applicationId={currentApplicationDetails.id} />
|
|
</div>
|
|
);
|
|
}
|
|
} else if (
|
|
currentApplicationDetails?.isPublic &&
|
|
currentUser?.username === ANONYMOUS_USERNAME
|
|
) {
|
|
CTA = (
|
|
<Cta
|
|
className="t--sign-in"
|
|
href={loginUrl}
|
|
text={createMessage(SIGN_IN)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return CTA;
|
|
};
|
|
|
|
export default getAppViewerHeaderCTA;
|