cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Added i18n for custom pages

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-25 13:31:12 -05:00
parent e9092a4031
commit 7bc2c408ee
6 changed files with 64 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/core/Footer/Footer.tsx
View File

@ -1,11 +1,13 @@
import { FC } from 'react' import { FC } from 'react'
import cn from 'classnames' import cn from 'classnames'
import Link from 'next/link' import Link from 'next/link'
import { useRouter } from 'next/router'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import getSlug from '@utils/get-slug' import getSlug from '@utils/get-slug'
import { Github } from '@components/icon' import { Github } from '@components/icon'
import { Logo, Container } from '@components/ui' import { Logo, Container } from '@components/ui'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import { I18nWidget } from '@components/core' import { I18nWidget } from '@components/core'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
@ -15,8 +17,8 @@ interface Props {
const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy'] const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
const Footer: FC<Props> = ({ className, pages }) => { const Footer: FC<Props> = ({ className, pages }) => {
const { sitePages, legalPages } = usePages(pages)
const rootClassName = cn(className) const rootClassName = cn(className)
const { sitePages, legalPages } = getPages(pages)
return ( return (
<footer className={rootClassName}> <footer className={rootClassName}>
@ -106,18 +108,22 @@ const Footer: FC<Props> = ({ className, pages }) => {
) )
} }
function getPages(pages?: Page[]) { function usePages(pages?: Page[]) {
const { locale } = useRouter()
const sitePages: Page[] = [] const sitePages: Page[] = []
const legalPages: Page[] = [] const legalPages: Page[] = []
if (pages) { if (pages) {
pages.forEach((page) => { pages.forEach((page) => {
if (page.url) { const slug = page.url && getSlug(page.url)
if (LEGAL_PAGES.includes(getSlug(page.url))) {
legalPages.push(page) if (!slug) return
} else { if (locale && !slug.startsWith(`${locale}/`)) return
sitePages.push(page)
} if (isLegalPage(slug, locale)) {
legalPages.push(page)
} else {
sitePages.push(page)
} }
}) })
} }
@ -128,6 +134,11 @@ function getPages(pages?: Page[]) {
} }
} }
const isLegalPage = (slug: string, locale?: string) =>
locale
? LEGAL_PAGES.some((p) => `${locale}/${p}` === slug)
: LEGAL_PAGES.includes(slug)
// Sort pages by the sort order assigned in the BC dashboard // Sort pages by the sort order assigned in the BC dashboard
function bySortOrder(a: Page, b: Page) { function bySortOrder(a: Page, b: Page) {
return (a.sort_order ?? 0) - (b.sort_order ?? 0) return (a.sort_order ?? 0) - (b.sort_order ?? 0)

4
lib/bigcommerce/api/catalog/products.ts
View File

@ -22,7 +22,7 @@ export type ProductsHandlers = {
const METHODS = ['GET'] const METHODS = ['GET']
// TODO: a complete implementation should have schema validation for `req.body` // TODO: a complete implementation should have schema validation for `req.body`
const productApi: BigcommerceApiHandler< const productsApi: BigcommerceApiHandler<
SearchProductsData, SearchProductsData,
ProductsHandlers ProductsHandlers
> = async (req, res, config, handlers) => { > = async (req, res, config, handlers) => {
@ -45,4 +45,4 @@ const productApi: BigcommerceApiHandler<
export const handlers = { getProducts } export const handlers = { getProducts }
export default createApiHandler(productApi, handlers, {}) export default createApiHandler(productsApi, handlers, {})

1
lib/commerce/api/index.ts
View File

@ -1,4 +1,5 @@
export interface CommerceAPIConfig { export interface CommerceAPIConfig {
locale?: string
commerceUrl: string commerceUrl: string
apiToken: string apiToken: string
cartCookie: string cartCookie: string

2
package.json
View File

@ -32,7 +32,7 @@
"keen-slider": "^5.2.4", "keen-slider": "^5.2.4",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0", "lodash.random": "^3.2.0",
"next": "^9.5.6-canary.13", "next": "^9.5.6-canary.14",
"next-seo": "^4.11.0", "next-seo": "^4.11.0",
"next-themes": "^0.0.4", "next-themes": "^0.0.4",
"nextjs-progressbar": "^0.0.6", "nextjs-progressbar": "^0.0.6",

7
pages/[...pages].tsx
View File

@ -7,19 +7,24 @@ import { Layout, HTMLContent } from '@components/core'
export async function getStaticProps({ export async function getStaticProps({
preview, preview,
params, params,
locale,
}: GetStaticPropsContext<{ pages: string[] }>) { }: GetStaticPropsContext<{ pages: string[] }>) {
const { pages } = await getAllPages() const { pages } = await getAllPages()
const slug = params?.pages.join('/') const path = params?.pages.join('/')
const slug = locale ? `${locale}/${path}` : path
const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false)) const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false))
const data = pageItem && (await getPage({ variables: { id: pageItem.id! } })) const data = pageItem && (await getPage({ variables: { id: pageItem.id! } }))
const page = data?.page const page = data?.page
if (!page) { if (!page) {
// We throw to make sure this fails at build time as this is never expected to happen
throw new Error(`Page with slug '${slug}' not found`) throw new Error(`Page with slug '${slug}' not found`)
} }
return { return {
props: { pages, page }, props: { pages, page },
revalidate: 60 * 60, // Every hour
} }
} }

68
yarn.lock
View File

@ -1534,20 +1534,20 @@
meow "^7.0.0" meow "^7.0.0"
prettier "^2.0.5" prettier "^2.0.5"
"@next/env@9.5.6-canary.13": "@next/env@9.5.6-canary.14":
version "9.5.6-canary.13" version "9.5.6-canary.14"
resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.13.tgz#20c0a3d7874a346f2b0fc92ab93f8d1f8fc345ec" resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.14.tgz#6dd9ae250531b9649e6f55d340277f7f429b05bd"
integrity sha512-+WpW8mMUS6IvWeqa1EaFtbTrQWCqNMumJJt8wjBwbjUZ0hCfdwgWsB0f1kz7jKkGBUMms9h2NlsKzayIMlPwxw== integrity sha512-evDDFWN93/vTNlxJhFHvc5Nwp7uf3UtQZGa+D+31LFlGIVZtTP8G6l5U8HDUVkFeL/CD5cDefm6OotQp1W1PvA==
"@next/polyfill-module@9.5.6-canary.13": "@next/polyfill-module@9.5.6-canary.14":
version "9.5.6-canary.13" version "9.5.6-canary.14"
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.13.tgz#f380e2319442308e30b05ac200f8cdf6703ce5bf" resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.14.tgz#de851cd2780095156309db45d9e27a85db377621"
integrity sha512-GwV5F0+QU/EY+GjgfAK/lRWBtUnZ9AJpLChpv9ZX0V//SJ7xnSpEeW0JJcG1PQhrV2BSmRTdxRUoISAf94f3mg== integrity sha512-OVOPKfxsi56RPHyXKv/Wrqq2uYbYbwh9kMBskqfNCI05lAoiBaXetABa8JcO2xUO+WM6MPUSmxlyWuN5LLJqXA==
"@next/react-dev-overlay@9.5.6-canary.13": "@next/react-dev-overlay@9.5.6-canary.14":
version "9.5.6-canary.13" version "9.5.6-canary.14"
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.13.tgz#378fd911deaf476cb1417c20be13a66aaa9aed50" resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.14.tgz#993fb9ad23b186aa098348a8c156b4f7ba1dda24"
integrity sha512-gFMZEYNY1FukamOE9hV13iz3ohfbKPpmpDP0+M70qXzAI4VWIyyKBE9fszctRJsoFR0jn4fQ4gj/lxlOMYSjZw== integrity sha512-hPpNDFWBTDQwa1nRMltxpSD0uewkP0jP6CCfGqyVSZugl7N+6VYgdTvM4s/ZZTaL+OKbd2rUdI/U6V7IQVn+4Q==
dependencies: dependencies:
"@babel/code-frame" "7.10.4" "@babel/code-frame" "7.10.4"
ally.js "1.4.1" ally.js "1.4.1"
@ -1560,10 +1560,10 @@
stacktrace-parser "0.1.10" stacktrace-parser "0.1.10"
strip-ansi "6.0.0" strip-ansi "6.0.0"
"@next/react-refresh-utils@9.5.6-canary.13": "@next/react-refresh-utils@9.5.6-canary.14":
version "9.5.6-canary.13" version "9.5.6-canary.14"
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.13.tgz#6fd123d844abe2d3124803a5475d65dca45b914f" resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.14.tgz#738a20723b6895299132694cfa7bf629fdaeb1fe"
integrity sha512-0BMrGaiAqFC5ncyPnleOthVQiR/WPhPF8lVzngpvoObpSHVljQiA2cJdC9VzBCm8MtUwgVb1pswPodV9elUHww== integrity sha512-uZawKMFl0hxzFF2lPGqo80zVj2XQRrlGN+o37XFQt+W0pR8GgLHNk8xikrPNz7dOwW1s7DNSAwujKmDiutc0og==
"@nodelib/fs.scandir@2.1.3": "@nodelib/fs.scandir@2.1.3":
version "2.1.3" version "2.1.3"
@ -5697,10 +5697,10 @@ next-tick@~1.0.0:
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
integrity sha1-yobR/ogoFpsBICCOPchCS524NCw= integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
next@^9.5.6-canary.13: next@^9.5.6-canary.14:
version "9.5.6-canary.13" version "9.5.6-canary.14"
resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.13.tgz#6bae2095483d42d979936ff0f0d816f73a3c3488" resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.14.tgz#13f0496199589ed40880f6c4ef97f14bfdbd8996"
integrity sha512-AwwAIAn9mUPfj99c6CtN4OBABXjekwK9lS5J9iuqk3oP3O7Tt676N1Wkln71IBb3iLrcHLZxQjpr2RUR2T2S1g== integrity sha512-uUcWxznWWMjNBA9fqJ82avTuVe7Rud0/129oRZRsQX+VH5qqhxeBbupEfzP65AihyLD+X5olGZQ2SsmqWqubJQ==
dependencies: dependencies:
"@ampproject/toolbox-optimizer" "2.7.0-alpha.1" "@ampproject/toolbox-optimizer" "2.7.0-alpha.1"
"@babel/code-frame" "7.10.4" "@babel/code-frame" "7.10.4"
@ -5721,10 +5721,10 @@ next@^9.5.6-canary.13:
"@babel/runtime" "7.11.2" "@babel/runtime" "7.11.2"
"@babel/types" "7.11.5" "@babel/types" "7.11.5"
"@hapi/accept" "5.0.1" "@hapi/accept" "5.0.1"
"@next/env" "9.5.6-canary.13" "@next/env" "9.5.6-canary.14"
"@next/polyfill-module" "9.5.6-canary.13" "@next/polyfill-module" "9.5.6-canary.14"
"@next/react-dev-overlay" "9.5.6-canary.13" "@next/react-dev-overlay" "9.5.6-canary.14"
"@next/react-refresh-utils" "9.5.6-canary.13" "@next/react-refresh-utils" "9.5.6-canary.14"
ast-types "0.13.2" ast-types "0.13.2"
babel-plugin-transform-define "2.0.0" babel-plugin-transform-define "2.0.0"
babel-plugin-transform-react-remove-prop-types "0.4.24" babel-plugin-transform-react-remove-prop-types "0.4.24"
@ -5755,8 +5755,8 @@ next@^9.5.6-canary.13:
schema-utils "2.7.1" schema-utils "2.7.1"
stream-browserify "3.0.0" stream-browserify "3.0.0"
style-loader "1.2.1" style-loader "1.2.1"
styled-jsx "3.3.0" styled-jsx "3.3.1"
use-subscription "1.4.1" use-subscription "1.5.0"
vm-browserify "1.1.2" vm-browserify "1.1.2"
watchpack "2.0.0-beta.13" watchpack "2.0.0-beta.13"
web-vitals "0.2.4" web-vitals "0.2.4"
@ -7644,10 +7644,10 @@ style-loader@1.2.1:
loader-utils "^2.0.0" loader-utils "^2.0.0"
schema-utils "^2.6.6" schema-utils "^2.6.6"
styled-jsx@3.3.0: styled-jsx@3.3.1:
version "3.3.0" version "3.3.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.0.tgz#32335c1a3ecfc923ba4f9c056eeb3d4699006b09" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.1.tgz#d79f306c42c99cefbe8e76f35dad8100dc5c9ecc"
integrity sha512-sh8BI5eGKyJlwL4kNXHjb27/a/GJV8wP4ElRIkRXrGW3sHKOsY9Pa1VZRNxyvf3+lisdPwizD9JDkzVO9uGwZw== integrity sha512-RhW71t3k95E3g7Zq3lEBk+kmf+p4ZME7c5tfsYf9M5mq6CgIvFXkbvhawL2gWriXLRlMyKAYACE89Qa2JnTqUw==
dependencies: dependencies:
"@babel/types" "7.8.3" "@babel/types" "7.8.3"
babel-plugin-syntax-jsx "6.18.0" babel-plugin-syntax-jsx "6.18.0"
@ -8041,10 +8041,10 @@ url-parse-lax@^3.0.0:
dependencies: dependencies:
prepend-http "^2.0.0" prepend-http "^2.0.0"
use-subscription@1.4.1: use-subscription@1.5.0:
version "1.4.1" version "1.5.0"
resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.4.1.tgz#edcbcc220f1adb2dd4fa0b2f61b6cc308e620069" resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.0.tgz#0df66fdf97b9a340147ad72f76fac1db6f56d240"
integrity sha512-7+IIwDG/4JICrWHL/Q/ZPK5yozEnvRm6vHImu0LKwQlmWGKeiF7mbAenLlK/cTNXrTtXHU/SFASQHzB6+oSJMQ== integrity sha512-/FVRiB2I7NDjzWoNBYPt6YkkvleMm/lFtxj1hH6nX2TVrJ/5UTbovw9OE1efv2Zl0HoAYuTjM7zHd9OsABn5sg==
dependencies: dependencies:
object-assign "^4.1.1" object-assign "^4.1.1"