Skip to content

Commit

Permalink
Add ability to copy the code with a button (#284)
Browse files Browse the repository at this point in the history 
* add ability to copy the code with a button

* revert lock.file change

* remove overflow: hidden from div containing code badge and copy button to not clip the box-shadow effect on button
  • Loading branch information
@steoneill @pieh
steoneill authored and pieh committed Oct 22, 2019
1 parent ec6e63c commit b2f186f
Showing 1 changed file with 113 additions and 76 deletions.
189 changes: 113 additions & 76 deletions src/components/ContributorArea/ContentForContributor.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import styled from '@emotion/styled';

import { MdLock } from 'react-icons/md';

import UserContext from '../../context/UserContext';
import { Heading, Text } from './AreaTypography';

import { Button } from '../shared/Buttons';

import {
colors,
badgeThemes,
Expand All @@ -29,7 +31,6 @@ const CodeBadge = styled(`div`)`
display: flex;
flex-direction: column;
font-family: ${fonts.heading};
overflow: hidden;
`;

const Name = styled(`span`)`
Expand Down Expand Up @@ -73,6 +74,10 @@ const Tip = styled(`p`)`
padding-top: ${spacing.xs}px;
`;

const CopyButton = styled(Button)`
margin-top: 0.85rem;
`;

const ProgressBarContainer = `
border: 0;
width: 100%;
Expand Down Expand Up @@ -127,82 +132,114 @@ const LockIcon = styled(MdLock)`
padding-top: 0.4rem;
`;

const ContentForContributor = () => (
<UserContext.Consumer>
{({ contributor }) => {
const {
shopify: { codes },
github: { contributionCount }
} = contributor;

const showLevelTwoIncentive =
contributionCount >= 1 && contributionCount < 5;
let contributionsToGo, percentToGo;
if (showLevelTwoIncentive) {
contributionsToGo = 5 - contributionCount;
percentToGo = ((5 - contributionsToGo) / 5) * 100;
}

const numberOfCodes = codes.filter(code => code.used === false).length;
let text;
if (numberOfCodes > 1) {
text = `Use these discount codes during checkout to claim some free swag!`;
} else if (numberOfCodes == 1) {
text = `Enter this discount code during checkout to claim your free swag!`;
} else {
text = `Looks like you've claimed your swag! Thanks again, and keep being awesome.`;
}

return (
<ContentForContributorRoot>
<Heading>Here you go!</Heading>
<Text>
Thanks for going the extra mile to help build Gatsby! 💪 You have
made <strong>{contributionCount}</strong>{' '}
{`contribution${contributionCount > 1 ? `s` : ``}`}!
</Text>
<Text>{text}</Text>
{codes.map(code => (
<CodeBadgeBox key={code.code}>
<CodeBadge>
<Name code={code.code}>
{`Level ${badgeThemes[code.code].level} Swag Code`}
</Name>
{!code.used ? (
<Code>{code.code}</Code>
) : (
<Used>Claimed! 🎉</Used>
)}
</CodeBadge>
{/* {!code.used && (
<Tip>
Click the badge to shop only items you can claim for free
using this code.
</Tip>
)} */}
</CodeBadgeBox>
))}
{/* Show progress bar when Level 1 is earned, but Level 2 is not */}
{showLevelTwoIncentive && (
<>
<CodeBadgeBox key={`HOLYBUCKETS`}>
const Copy = ({ code }) => {
const [copied, setCopied] = useState(false);

let copyClick = () => {
setCopied(true);

setTimeout(() => {
setCopied(false);
}, 2000);
};

let input = document.createElement('input');
input.setAttribute('type', 'text');
input.value = code;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
return (
<CopyButton inverse={!copied} onClick={() => copyClick()}>
{copied ? 'Copied! 🎉' : 'Copy'}
</CopyButton>
);
};

const ContentForContributor = () => {
return (
<UserContext.Consumer>
{({ contributor }) => {
const {
shopify: { codes },
github: { contributionCount }
} = contributor;

const showLevelTwoIncentive =
contributionCount >= 1 && contributionCount < 5;
let contributionsToGo, percentToGo;
if (showLevelTwoIncentive) {
contributionsToGo = 5 - contributionCount;
percentToGo = ((5 - contributionsToGo) / 5) * 100;
}

const numberOfCodes = codes.filter(code => code.used === false).length;
let text;
if (numberOfCodes > 1) {
text = `Use these discount codes during checkout to claim some free swag!`;
} else if (numberOfCodes == 1) {
text = `Enter this discount code during checkout to claim your free swag!`;
} else {
text = `Looks like you've claimed your swag! Thanks again, and keep being awesome.`;
}

return (
<ContentForContributorRoot>
<Heading>Here you go!</Heading>
<Text>
Thanks for going the extra mile to help build Gatsby! 💪 You have
made <strong>{contributionCount}</strong>{' '}
{`contribution${contributionCount > 1 ? `s` : ``}`}!
</Text>
<Text>{text}</Text>
{codes.map(code => (
<CodeBadgeBox key={code.code}>
<CodeBadge>
<Name code={`HOLYBUCKETS`}>{`Level 2 Swag Code`}</Name>
<Code>
<LockIcon />
</Code>
<Name code={code.code}>
{`Level ${badgeThemes[code.code].level} Swag Code`}
</Name>
{!code.used ? (
<>
<Code id={`level-${badgeThemes[code.code].level}`}>
{code.code}
</Code>
<Copy code={code.code} />
</>
) : (
<Used>Claimed! 🎉</Used>
)}
</CodeBadge>
{/* {!code.used && (
<Tip>
Click the badge to shop only items you can claim for free
using this code.
</Tip>
)} */}
</CodeBadgeBox>
<ProgressBar value={percentToGo} max="100" />
<Text>{`Make ${contributionsToGo} more contribution${
contributionsToGo > 1 ? `s` : ``
} to earn level 2 swag!`}</Text>
</>
)}
</ContentForContributorRoot>
);
}}
</UserContext.Consumer>
);
))}
{/* Show progress bar when Level 1 is earned, but Level 2 is not */}
{showLevelTwoIncentive && (
<>
<CodeBadgeBox key={`HOLYBUCKETS`}>
<CodeBadge>
<Name code={`HOLYBUCKETS`}>{`Level 2 Swag Code`}</Name>
<Code>
<LockIcon />
</Code>
</CodeBadge>
</CodeBadgeBox>
<ProgressBar value={percentToGo} max="100" />
<Text>{`Make ${contributionsToGo} more contribution${
contributionsToGo > 1 ? `s` : ``
} to earn level 2 swag!`}</Text>
</>
)}
</ContentForContributorRoot>
);
}}
</UserContext.Consumer>
);
};

export default ContentForContributor;

0 comments on commit b2f186f

Please sign in to comment.