@hhgtech/hhg-components 1.19.0-beta-4 → 1.19.0-beta-6

package/raw/src/together/components/molecules/shareBox/index.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+import styled from 'styled-components'
+
+import { ShareBox, Props } from './index'
+
+import 'react-quill/dist/quill.snow.css'
+
+export default {
+  component: ShareBox,
+  title: 'Projects/Together/Molecules/ShareBox',
+}
+
+const StoryWrapper = styled.div`
+  width: 368px;
+  padding: 16px;
+`
+
+const Template: Story<Props> = (args: Props) => {
+  return (
+    <StoryWrapper>
+      <ShareBox {...args} />
+    </StoryWrapper>
+  )
+}
+
+const baseProps = {
+  shareUrl: '/test',
+  title: 'title',
+}
+
+export const HelloSites = Template.bind({})
+HelloSites.args = {
+  ...baseProps,
+}

package/raw/src/together/components/molecules/shareBox/index.styled.tsx

@@ -0,0 +1,141 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export const StyledShare = styled.div`
+  padding: 1rem;
+  .share__social {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+
+    & > a {
+      margin: 0 7px;
+
+      & > img {
+        width: 32px;
+        height: 32px;
+      }
+      .__label {
+        display: none;
+      }
+    }
+  }
+
+  .share__copy-link {
+    position: relative;
+    padding: 1rem 0.5rem 0;
+
+    margin-top: 16px;
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: calc(100% + 2rem);
+      border-top: 1px solid
+        ${(props: ThemeProps) => props.theme.colors.neutral100};
+      margin-left: -1rem;
+      content: '';
+    }
+    .__label {
+      margin-bottom: 8px;
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 17px;
+      text-align: left;
+    }
+
+    .__input-group {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      height: 40px;
+      border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
+      background: #fff;
+      border-radius: 6px;
+
+      & > input {
+        width: 100%;
+        height: 100%;
+        padding: 0 16px;
+        border: none;
+        background: transparent;
+        color: ${(props: ThemeProps) => props.theme.colors.gray800};
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      .__copy {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 71px;
+        height: 100%;
+        padding-left: 12px;
+        background: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0.1) 0%,
+          #fff 17%,
+          #fff 100%
+        );
+        color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+  }
+
+  &[data-is-marrybaby='true'] {
+    ${MediaQueries.mbDown} {
+      padding: 0.5rem;
+    }
+    .share__social {
+      justify-content: space-between;
+      & > a {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        ${MediaQueries.mbDown} {
+          margin: 0;
+        }
+        & > img {
+          margin-bottom: 0.8rem;
+        }
+        .__label {
+          display: initial;
+        }
+      }
+    }
+    .share__copy-link {
+      padding: 0;
+      &::before {
+        display: none;
+      }
+      .__label {
+        display: none;
+      }
+      .__input-group {
+        height: unset;
+        background-color: rgb(243, 243, 243);
+        border-radius: 16px;
+        & > input {
+          padding: 1rem;
+        }
+        .__copy {
+          background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0.1) 0%,
+            #f3f3f3 17%,
+            #f3f3f3 100%
+          );
+        }
+      }
+    }
+  }
+`

package/raw/src/together/components/molecules/shareBox/index.tsx

@@ -0,0 +1,188 @@
+import React, {
+  CSSProperties,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+import { Text } from 'components/atoms/text'
+import { useTranslations } from 'hooks/useTranslations'
+import { theme } from 'misc/theme'
+import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
+
+import IconWhatsapp from '../../../assets/images/icon-whatsapp.png'
+import IconZalo from '../../../assets/images/icon-zalo.png'
+import MBIconCopy from '../../../assets/marrybaby/svg/copy.svg'
+import MBIconFacebook from '../../../assets/marrybaby/svg/facebook.svg'
+import MBIconLinkedIn from '../../../assets/marrybaby/svg/linkedin.svg'
+import MBIconMessenger from '../../../assets/marrybaby/svg/messenger.svg'
+import MBIconTwitter from '../../../assets/marrybaby/svg/twitter.svg'
+import MBIconZalo from '../../../assets/marrybaby/svg/zalo.png'
+import IconFacebook from '../../../assets/svg/icon-facebook.svg'
+import IconLinkedIn from '../../../assets/svg/icon-linkedin.svg'
+import IconTwitter from '../../../assets/svg/icon-twitter.svg'
+import { StyledShare } from './index.styled'
+
+export type Props = {
+  className?: string
+  shareUrl?: string
+  title?: string
+  style?: CSSProperties
+}
+
+const getSocialList = (
+  shareUrl: string,
+  isMarryBaby?: boolean,
+): { icon: string; name: string; href: string }[] =>
+  isMarryBaby
+    ? [
+        {
+          icon: MBIconFacebook,
+          name: 'Facebook',
+          href: `https://www.facebook.com/sharer.php?u=${shareUrl}`,
+        },
+        {
+          icon: MBIconZalo,
+          name: 'Zalo',
+          href: `https://sp.zalo.me/share?href=${shareUrl}`,
+        },
+        {
+          icon: MBIconTwitter,
+          name: 'Twitter',
+          href: `https://twitter.com/intent/tweet?url=${shareUrl}`,
+        },
+        {
+          icon: MBIconLinkedIn,
+          name: 'LinkedIn',
+          href: `https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`,
+        },
+        {
+          icon: MBIconMessenger,
+          name: 'Messenger',
+          href: `https://www.facebook.com/sharer.php?u=${shareUrl}`,
+        },
+      ]
+    : [
+        {
+          icon: IconFacebook,
+          name: 'Facebook',
+          href: `https://www.facebook.com/sharer.php?u=${shareUrl}`,
+        },
+        {
+          icon: IconZalo,
+          name: 'Zalo',
+          href: `https://sp.zalo.me/share?href=${shareUrl}`,
+        },
+        {
+          icon: IconTwitter,
+          name: 'Twitter',
+          href: `https://twitter.com/intent/tweet?url=${shareUrl}`,
+        },
+        {
+          icon: IconWhatsapp,
+          name: 'WhatsApp',
+          href: `https://wa.me/?text=${shareUrl}`,
+        },
+        {
+          icon: IconLinkedIn,
+          name: 'LinkedIn',
+          href: `https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`,
+        },
+      ]
+
+export const ShareBox = ({ className, style, shareUrl, title }: Props) => {
+  const {
+    action: { pushNotifications },
+    data: {
+      env: { isMarryBaby },
+    },
+  } = useContext(TogetherComponentGlobalContext)
+  const { t } = useTranslations()
+  const input = useRef<HTMLInputElement>(null)
+  const [copied, setCopied] = useState(false)
+
+  const copyToClipboard = () => {
+    if (!input?.current) return
+    const el = document.createElement('textarea')
+    el.value = input.current.value
+    document.body.appendChild(el)
+    el.select()
+    document.execCommand('copy')
+    document.body.removeChild(el)
+    input.current.focus()
+    setCopied(true)
+    pushNotifications({
+      title: '',
+      message: t('share.linkCopied'),
+      type: 'success',
+    })
+  }
+
+  useEffect(() => {
+    copyToClipboard()
+    if (navigator.share) {
+      navigator
+        .share({
+          title: title || 'Read This Post',
+          url: shareUrl,
+        })
+        .then((res) => {
+          // setCopied(true)
+          pushNotifications({
+            title: '',
+            message: t('share.linkShared'),
+            type: 'success',
+          })
+        })
+        .catch(console.error)
+    }
+  }, [])
+
+  const socialList = getSocialList(shareUrl || '', isMarryBaby)
+
+  return (
+    <StyledShare
+      data-is-marrybaby={isMarryBaby}
+      className={className}
+      style={style}
+    >
+      <div className="share__social">
+        {socialList.map((social, index) => (
+          <a key={index} href={social.href} target="_blank" rel="noreferrer">
+            <img src={social.icon} />
+            <Text className="__label" size="label2" type="regular">
+              {social.name}
+            </Text>
+          </a>
+        ))}
+      </div>
+      <div className="share__copy-link">
+        <Text
+          className="__label"
+          color={theme.colors.gray500}
+          size="p4"
+          type="regular"
+        >
+          {t('orCopyLink')}
+        </Text>
+        <div className="__input-group">
+          <input
+            ref={input}
+            type="text"
+            value={shareUrl}
+            readOnly
+            onFocus={(e) => e.target.select()}
+          />
+          <button className="__copy" onClick={() => copyToClipboard()}>
+            {isMarryBaby ? (
+              <img src={MBIconCopy} />
+            ) : (
+              t(copied ? 'copied' : 'copy')
+            )}
+          </button>
+        </div>
+      </div>
+    </StyledShare>
+  )
+}

package/raw/src/together/components/molecules/socialLinkPreview/index.styled.tsx

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+export const StyledSocialLinkPreview = styled.div`
+  .link-info-container {
+    padding: 0.5rem 1rem;
+    background: #f4faff;
+  }
+  .link-image-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 56.25%;
+    &.fetching {
+      background: lightgray;
+    }
+    .loading-spinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .link-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+  &[data-is-marrybaby='true'] {
+    overflow: hidden;
+    border-radius: 1rem;
+  }
+`

package/raw/src/together/components/molecules/socialLinkPreview/index.tsx

@@ -0,0 +1,206 @@
+import React, {
+  CSSProperties,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
+
+import { PATHS } from '../../../api/paths'
+import { callApi, getApiPath } from '../../../api/utils'
+import { DEFAULT_IMG } from '../../../interfaces/constants'
+import { facebookVidIdGetter, youtubeVidIdGetter } from '../../../utils/post'
+import { Loading } from '../../atoms/loading'
+import { StyledSocialLinkPreview } from './index.styled'
+
+export type Props = {
+  url: string
+  image?: string
+  className?: string
+  style?: CSSProperties
+}
+
+const SocialLinkPreview = ({ url, image, className, style }: Props) => {
+  const {
+    data: { locale },
+  } = useContext(TogetherComponentGlobalContext)
+
+  const [previewData, setPreviewData] = useState<{
+    url?: string
+    image?: string
+    isFetching?: boolean
+  } | null>(null)
+  useEffect(() => {
+    ;(async () => {
+      if (image) return
+      if (!url) return setPreviewData(null)
+      setPreviewData((_data) => ({
+        ..._data,
+        isFetching: true,
+      }))
+
+      // fetch('./api/fetch-meta?url=' + encodeURIComponent(url))
+      //   .then((res) => res.json())
+      //   .then((res) =>
+      //     setPreviewData({
+      //       url,
+      //       image: res?.image || res?.logo,
+      //     }),
+      //   )
+      callApi(
+        getApiPath(PATHS.FETCH_PREVIEW, {
+          _locale: locale,
+        }),
+        'POST',
+        {
+          data: {
+            link: url,
+          },
+        },
+      )
+        .then((res) => {
+          setPreviewData({
+            url,
+            image: res?.data?.image || res?.data?.logo,
+          })
+        })
+        .catch(() => {
+          setPreviewData(null)
+        })
+    })()
+  }, [url, image])
+
+  const displayImage = previewData?.image || image
+  const displayUrl = previewData?.url || url
+
+  const youtubeVidId = useMemo(() => {
+    return youtubeVidIdGetter(displayUrl)
+  }, [displayUrl])
+  const facebookVidId = useMemo(() => {
+    return facebookVidIdGetter(displayUrl)
+  }, [displayUrl])
+  const responsiveWidth = useRef(0)
+  const responsiveHeight = useRef(0)
+  const [forceRerenderFB, setForceRerenderFB] = useState(false)
+
+  // FACEBOOK Video is not responsive for desktop browser
+  // => hack: set size to same as container, if size change too large, re-render facebook iframe with new config
+  useEffect(() => {
+    const handleResize = () => {
+      const containerRect = containerRef.current?.getBoundingClientRect()
+      let toChangeSize = false
+      if (
+        containerRect &&
+        (!responsiveWidth.current ||
+          Math.abs(
+            (responsiveWidth.current - containerRect.width) /
+              containerRect?.width,
+          ) > 0.2)
+      ) {
+        responsiveWidth.current = Math.floor(containerRect.width)
+        toChangeSize = true
+      }
+      if (
+        containerRect &&
+        (!responsiveHeight.current ||
+          Math.abs(
+            (responsiveHeight.current - containerRect.height) /
+              containerRect?.height,
+          ) > 0.2)
+      ) {
+        responsiveHeight.current = Math.floor(containerRect.height)
+        toChangeSize = true
+      }
+      if (toChangeSize) {
+        setForceRerenderFB((v) => !v)
+      }
+    }
+    handleResize()
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+  const containerRef = useRef<HTMLDivElement>(null)
+  const showDefaultRef = useRef(false)
+  return (
+    <StyledSocialLinkPreview
+      className={`${className} no-replace-click`}
+      style={style}
+      ref={containerRef}
+    >
+      {!image && (youtubeVidId || facebookVidId) ? (
+        <div className="link-image-wrapper">
+          {youtubeVidId ? (
+            <iframe
+              width="100%"
+              height="100%"
+              src={`https://www.youtube.com/embed/${youtubeVidId}?&autoplay=1&mute=1`}
+              frameBorder="0"
+              allowFullScreen
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                border: 'none',
+                overflow: 'hidden',
+              }}
+            ></iframe>
+          ) : facebookVidId ? (
+            <iframe
+              key={String(forceRerenderFB)}
+              src={`https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(
+                displayUrl,
+              )}&autoplay=1&show_text=false&t=0&width=${
+                responsiveWidth.current
+              }&height=${responsiveHeight.current}`}
+              style={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                border: 'none',
+                overflow: 'hidden',
+                height: responsiveHeight.current,
+                width: responsiveWidth.current,
+                transform: 'translate(-50%, -50%)',
+              }}
+              scrolling="no"
+              frameBorder="0"
+              allowFullScreen
+              allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
+            ></iframe>
+          ) : null}
+        </div>
+      ) : (
+        <a href={displayUrl} target="_blank" rel="noreferrer">
+          <div
+            className={`link-image-wrapper ${
+              previewData?.isFetching ? 'fetching' : ''
+            }`}
+          >
+            {previewData?.isFetching ? (
+              <Loading className="loading-spinner" />
+            ) : (
+              <img
+                className="link-image"
+                src={displayImage || DEFAULT_IMG}
+                onError={(e) => {
+                  if (!showDefaultRef.current) {
+                    showDefaultRef.current = true
+                    e.currentTarget.src = DEFAULT_IMG
+                  }
+                }}
+              />
+            )}
+          </div>
+        </a>
+      )}
+    </StyledSocialLinkPreview>
+  )
+}
+
+export { SocialLinkPreview }

package/raw/src/together/components/molecules/submitReportForm/index.styled.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components'
+
+export const StyledSubmitReportForm = styled.div`
+  padding: 0 8px;
+  margin-top: 18px;
+
+  .report-list {
+    margin-bottom: 18px;
+
+    .report-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      font-weight: 600;
+
+      & > img {
+        width: 12px;
+        height: 12px;
+        margin-right: 8px;
+      }
+
+      .__label {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .report-submit {
+    width: 100%;
+  }
+  &[data-is-marrybaby='true'] {
+    padding: 0 1rem 1rem;
+  }
+`