diff --git a/src/features/donations/components/ShareDonationLinks/ShareButton.js b/src/features/common/components/ShareLinks/ShareButton.js similarity index 95% rename from src/features/donations/components/ShareDonationLinks/ShareButton.js rename to src/features/common/components/ShareLinks/ShareButton.js index 27846d6..716e6fc 100644 --- a/src/features/donations/components/ShareDonationLinks/ShareButton.js +++ b/src/features/common/components/ShareLinks/ShareButton.js @@ -1,21 +1,21 @@ -import PropTypes from 'prop-types'; - -import styles from './ShareButton.module.scss'; - -const ShareButton = ({ children, type }) => ( -
- {children} -
-); - -ShareButton.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]).isRequired, - type: PropTypes.string.isRequired, -}; - -export default ShareButton; +import PropTypes from 'prop-types'; + +import styles from './ShareButton.module.scss'; + +const ShareButton = ({ children, type }) => ( +
+ {children} +
+); + +ShareButton.propTypes = { + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]).isRequired, + type: PropTypes.string.isRequired, +}; + +export default ShareButton; diff --git a/src/features/donations/components/ShareDonationLinks/ShareButton.module.scss b/src/features/common/components/ShareLinks/ShareButton.module.scss similarity index 87% rename from src/features/donations/components/ShareDonationLinks/ShareButton.module.scss rename to src/features/common/components/ShareLinks/ShareButton.module.scss index f9c2fb1..a059882 100644 --- a/src/features/donations/components/ShareDonationLinks/ShareButton.module.scss +++ b/src/features/common/components/ShareLinks/ShareButton.module.scss @@ -1,106 +1,117 @@ -@import '../../../../sass/variables'; - -.share-button { - border: 1px solid #fff; - border-radius: 5px; -} - -.share-button button { - width: 3.5rem; - height: 2.9rem; - display: flex; - justify-content: center; - align-items: center; -} - -.share-button__whatsapp { - &:hover { - svg path { - fill: $whatsapp; - } - } - - &:active { - border: 1px solid $whatsapp; - } -} - -.share-button__facebook { - &:hover { - svg path { - fill: $facebook; - } - } - - &:active { - border: 1px solid $facebook--active; - - svg path { - fill: $facebook--active; - } - } -} - -.share-button__telegram { - &:hover { - svg path { - fill: $telegram; - } - } - - &:active { - border: 1px solid $telegram--active; - - svg path { - fill: $telegram--active; - } - } -} - -.share-button__twitter { - &:hover { - svg path { - fill: $twitter; - } - } - - &:active { - border: 1px solid $twitter--active; - - svg path { - fill: $twitter--active; - } - } -} - -.share-button__email { - &:hover { - svg path { - fill: $email; - } - } - - &:active { - border: 1px solid $email--active; - - svg path { - fill: $email--active; - } - } -} - -.share-button__reddit { - &:hover { - svg path { - fill: $reddit; - } - } - - &:active { - border: 1px solid $reddit--active; - - svg path { - fill: $reddit--active; - } - } -} +@import 'sass/variables'; + +.share-button { + border: 1px solid #fff; + border-radius: 5px; +} + +.share-button button { + width: 3.5rem; + height: 2.9rem; + display: flex; + justify-content: center; + align-items: center; +} + +.share-button__whatsapp { + &:hover { + svg path { + fill: $whatsapp; + } + } + + &:active { + border: 1px solid $whatsapp; + } +} + +.share-button__facebook { + &:hover { + svg path { + fill: $facebook; + } + } + + &:active { + border: 1px solid $facebook--active; + + svg path { + fill: $facebook--active; + } + } +} + +.share-button__telegram { + &:hover { + svg path { + fill: $telegram; + } + } + + &:active { + border: 1px solid $telegram--active; + + svg path { + fill: $telegram--active; + } + } +} + +.share-button__twitter { + &:hover { + svg path { + fill: $twitter; + } + } + + &:active { + border: 1px solid $twitter--active; + + svg path { + fill: $twitter--active; + } + } +} + +.share-button__email { + &:hover { + svg path { + fill: $email; + } + } + + &:active { + border: 1px solid $email--active; + + svg path { + fill: $email--active; + } + } +} + +.share-button__reddit { + &:hover { + svg path { + fill: $reddit; + } + } + + &:active { + border: 1px solid $reddit--active; + + svg path { + fill: $reddit--active; + } + } +} + +@media (max-width: $breakpoint-tablet) { + .share-button { + margin-top: 10px; + } + + .share-button button { + width: 2.5rem; + height: 1.5rem; + } +} diff --git a/src/features/donations/components/ShareDonationLinks/ShareDonationLinks.js b/src/features/common/components/ShareLinks/ShareLinks.js similarity index 73% rename from src/features/donations/components/ShareDonationLinks/ShareDonationLinks.js rename to src/features/common/components/ShareLinks/ShareLinks.js index 9e0d1d2..e5f8fb4 100644 --- a/src/features/donations/components/ShareDonationLinks/ShareDonationLinks.js +++ b/src/features/common/components/ShareLinks/ShareLinks.js @@ -1,72 +1,87 @@ -import { - FacebookShareButton, - WhatsappShareButton, - TelegramShareButton, - TwitterShareButton, - RedditShareButton, - EmailShareButton, -} from 'react-share'; - -import { ReactComponent as WhatsappIcon } from 'assets/whatsapp_icon.svg'; -import { ReactComponent as FacebookIcon } from 'assets/facebook_icon.svg'; -import { ReactComponent as TelegramIcon } from 'assets/telegram_icon.svg'; -import { ReactComponent as TwitterIcon } from 'assets/twitter_icon.svg'; -import { ReactComponent as RedditIcon } from 'assets/reddit_icon.svg'; -import { ReactComponent as EmailIcon } from 'assets/email_icon.svg'; -import ShareButton from './ShareButton'; - -const ShareDonationLinks = () => { - const currentURL = window.location.href; - const description = - "Hola! hecha un vistazo a esta donación en 'Che, ¿hoy donamos?'"; - - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- ); -}; - -export default ShareDonationLinks; +import PropTypes from 'prop-types'; +import { useParams } from 'react-router-dom'; +import { + FacebookShareButton, + WhatsappShareButton, + TelegramShareButton, + TwitterShareButton, + RedditShareButton, + EmailShareButton, +} from 'react-share'; + +import { ReactComponent as WhatsappIcon } from 'assets/whatsapp_icon.svg'; +import { ReactComponent as FacebookIcon } from 'assets/facebook_icon.svg'; +import { ReactComponent as TelegramIcon } from 'assets/telegram_icon.svg'; +import { ReactComponent as TwitterIcon } from 'assets/twitter_icon.svg'; +import { ReactComponent as RedditIcon } from 'assets/reddit_icon.svg'; +import { ReactComponent as EmailIcon } from 'assets/email_icon.svg'; +import ShareButton from './ShareButton'; + +const ShareLinks = ({ user, object }) => { + const currentURL = window.location.href; + const { id } = useParams(); + + const descriptionPetition = `${user} está necesitando '${object}' y quizás tu puedas ayudar! Ingresa a hoydonamos.uy o al siguiente link para obtener más información.`; + const descriptionDonation = `Están donando '${object}' y quizás tú lo estés necesitando. Ingresa a hoydonamos.uy o al siguiente link para obtener más información.`; + + const description = id ? descriptionDonation : descriptionPetition; + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +ShareLinks.propTypes = { + user: PropTypes.string, + object: PropTypes.string.isRequired, +}; + +ShareLinks.defaultProps = { + user: 'Un usuario', +}; + +export { ShareLinks }; diff --git a/src/features/common/components/ShareLinks/index.js b/src/features/common/components/ShareLinks/index.js new file mode 100644 index 0000000..7f033ac --- /dev/null +++ b/src/features/common/components/ShareLinks/index.js @@ -0,0 +1 @@ +export { ShareLinks } from './ShareLinks'; diff --git a/src/features/common/components/index.js b/src/features/common/components/index.js index 442c128..5f3b4b8 100644 --- a/src/features/common/components/index.js +++ b/src/features/common/components/index.js @@ -16,3 +16,4 @@ export * from './PageLoading'; export * from './Subtitle'; export * from './Swiper'; export * from './CallToActionLink'; +export * from './ShareLinks'; diff --git a/src/features/donations/components/Donation/Donation.js b/src/features/donations/components/Donation/Donation.js index 121cf48..d666319 100644 --- a/src/features/donations/components/Donation/Donation.js +++ b/src/features/donations/components/Donation/Donation.js @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; -import { Form, UnderlinedTitle } from 'features/common'; -import ShareDonationLinks from '../ShareDonationLinks'; +import { Form, UnderlinedTitle, ShareLinks } from 'features/common'; import styles from './Donation.module.scss'; @@ -15,7 +14,7 @@ const Donation = ({ data, onOpenModal }) => (
Donación - +

{data.name}

diff --git a/src/features/donations/components/ShareDonationLinks/index.js b/src/features/donations/components/ShareDonationLinks/index.js deleted file mode 100644 index 69a128b..0000000 --- a/src/features/donations/components/ShareDonationLinks/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ShareDonationLinks'; diff --git a/src/features/petitions/components/PetitionModal/PetitionModal.js b/src/features/petitions/components/PetitionModal/PetitionModal.js index cd6742e..4f197a6 100644 --- a/src/features/petitions/components/PetitionModal/PetitionModal.js +++ b/src/features/petitions/components/PetitionModal/PetitionModal.js @@ -2,7 +2,7 @@ import { useRef, useCallback } from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; -import { Modal, Loading, useClickAway } from 'features/common'; +import { Modal, Loading, useClickAway, ShareLinks } from 'features/common'; import { usePetition } from 'features/petitions/hooks'; import { ReactComponent as PhoneIcon } from 'assets/phone.svg'; import { ReactComponent as MailIcon } from 'assets/email.svg'; @@ -53,6 +53,7 @@ const PetitionModal = ({ petitionId, onClose }) => { {data.data.user.email}
+