Skip to content

Commit

Permalink
[SALAD-22312] WebApp - Add og meta tags for store and rewards (#1212)
Browse files Browse the repository at this point in the history
  • Loading branch information
Maks19 authored Oct 17, 2024
1 parent b1a4fee commit 9086993
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 49 deletions.
1 change: 1 addition & 0 deletions packages/web-app/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#53a626" />
<meta name="msapplication-TileColor" content="#53a626" />
<meta name="theme-color" content="#ffffff" />
<meta site_name="og:site_name" content="Salad" />
<title>Salad</title>
</head>
<body>
Expand Down
Binary file added packages/web-app/public/og-official-store.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions packages/web-app/src/hooks/useAddOgMetaTags.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { useEffect } from 'react'

const defaultOgMetaTags: Record<string, string> = {
url: window.location.href,
type: 'website',
image: `${window.location.origin}/og-official-store.png`,
'image:alt': 'Salad',
}

export const useAddOgMetaTags = (ogMetaTags: Record<string, string>) => {
useEffect(() => {
const combinedOgMetaTags = { ...defaultOgMetaTags, ...ogMetaTags }
Object.keys(combinedOgMetaTags).forEach((ogMetaTagPropertyName) => {
const ogMetaTag = document.querySelector(`meta[property='og:${ogMetaTagPropertyName}']`)
const ogMetaTagContent = combinedOgMetaTags[ogMetaTagPropertyName] as string

if (ogMetaTag) {
ogMetaTag.setAttribute('content', ogMetaTagContent)
} else {
const newOgMetaTag = document.createElement('meta')
newOgMetaTag.setAttribute('property', `og:${ogMetaTagPropertyName}`)
newOgMetaTag.setAttribute('content', ogMetaTagContent)
document.head.appendChild(newOgMetaTag)
}
})
}, [ogMetaTags])
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import type { ReactNode } from 'react'
import { Component } from 'react'
import type { FC } from 'react'
import { useEffect } from 'react'
import { Helmet } from 'react-helmet'
import type { WithStyles } from 'react-jss'
import withStyles from 'react-jss'
import { Head, Scrollbar } from '../../../../components'
import { useAddOgMetaTags } from '../../../../hooks/useAddOgMetaTags'
import type { SaladTheme } from '../../../../SaladTheme'
import type { Reward } from '../../../reward/models'
import {
Expand Down Expand Up @@ -49,57 +51,73 @@ interface Props extends WithStyles<typeof styles> {
onTargetThisRewardClick: (reward: Reward) => void
}

class _RewardDetailsPage extends Component<Props> {
public override componentDidMount = () => {
const { rewardId, loadReward } = this.props
const _RewardDetailsPage: FC<Props> = ({
classes,
rewardId,
reward,
requiresMinecraftUsername,
requiresSaladCard,
requiresPayPalAccount,
isTargetReward,
isReviewing,
loadReward,
onRedeem,
onBack,
onRemoveTargetRewardClick,
trackDisabledBuyNowClick,
onTargetThisRewardClick,
...rest
}) => {
useEffect(() => {
loadReward?.(rewardId)
}, [loadReward, rewardId])

const { name, heroImage, coverImage } = reward || {}

const ogMetaTags = {
title: `Get ${name} with the power of your PC with Salad`,
description: `Salad helps you earn your way to rewards like ${name}, Steam Games, Discord Nitro, and more from the Salad Storefront. You can even send Salad Balance to PayPal and redeem digital Visa and Mastercard that can be used worldwide!`,
image: heroImage ?? coverImage ?? `${window.location.origin}/og-official-store.png`,
'image:alt': name ?? 'Reward Image',
}
useAddOgMetaTags(ogMetaTags)

public override render(): ReactNode {
const {
reward,
onRedeem,
onBack,
requiresMinecraftUsername,
requiresPayPalAccount,
requiresSaladCard,
isTargetReward,
trackDisabledBuyNowClick,
onTargetThisRewardClick,
onRemoveTargetRewardClick,
classes,
...rest
} = this.props
return (
<div className={classes.container}>
{this.props.isReviewing && <ReviewAfterRedemptionContainer />}
<Head title={reward?.name} />
<RewardHeaderBar
reward={reward}
onBack={onBack}
onRedeem={onRedeem}
requiresMinecraftUsername={requiresMinecraftUsername}
requiresPayPalAccount={requiresPayPalAccount}
requiresSaladCard={requiresSaladCard}
isTargetReward={isTargetReward}
onTargetThisRewardClick={onTargetThisRewardClick}
onRemoveTargetRewardClick={onRemoveTargetRewardClick}
trackDisabledBuyNowClick={trackDisabledBuyNowClick}
{...rest}
return (
<div className={classes.container}>
{isReviewing && <ReviewAfterRedemptionContainer />}
<Helmet>
<title>My Title</title>
<meta
property="og:url"
content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html"
/>
<Scrollbar>
<div className={classes.scrollContent}>
<RewardImageCarousel reward={reward} />
<RewardInfoPanel reward={reward} />
<RewardHowToPanel reward={reward} {...rest} />
<RewardDescriptionPanel reward={reward} />
<RewardRequirementsPanel reward={reward} />
<RewardDisclaimers />
</div>
</Scrollbar>
</div>
)
}
</Helmet>
<Head title={reward?.name} />
<RewardHeaderBar
reward={reward}
onBack={onBack}
onRedeem={onRedeem}
requiresMinecraftUsername={requiresMinecraftUsername}
requiresPayPalAccount={requiresPayPalAccount}
requiresSaladCard={requiresSaladCard}
isTargetReward={isTargetReward}
onTargetThisRewardClick={onTargetThisRewardClick}
onRemoveTargetRewardClick={onRemoveTargetRewardClick}
trackDisabledBuyNowClick={trackDisabledBuyNowClick}
{...rest}
/>
<Scrollbar>
<div className={classes.scrollContent}>
<RewardImageCarousel reward={reward} />
<RewardInfoPanel reward={reward} />
<RewardHowToPanel reward={reward} {...rest} />
<RewardDescriptionPanel reward={reward} />
<RewardRequirementsPanel reward={reward} />
<RewardDisclaimers />
</div>
</Scrollbar>
</div>
)
}

export const RewardDetailsPage = withStyles(styles)(_RewardDetailsPage)
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { WithStyles } from 'react-jss'
import withStyles from 'react-jss'
import { Head, Scrollbar } from '../../../components'
import { useAddOgMetaTags } from '../../../hooks/useAddOgMetaTags'
import { NotificationBannerContainer } from '../../home-views/NotificationBannerContainer'
import type {
StorefrontCommunityChallengeProps,
Expand Down Expand Up @@ -31,6 +32,14 @@ interface Props extends WithStyles<typeof styles> {
}

const _StorefrontPage = ({ data, classes }: Props) => {
const ogMetaTags = {
title: 'Salad - Official Store',
description:
'Salad helps you earn your way to new Steam Games, Discord Nitro, gift cards, and more from the Salad Storefront. You can even send Salad Balance to PayPal and redeem digital Visa and Mastercard that can be used worldwide!',
'image:alt': 'Salad - Official Store',
}
useAddOgMetaTags(ogMetaTags)

return (
<Scrollbar>
<Head title="Official Store" />
Expand Down

0 comments on commit 9086993

Please sign in to comment.