mirror of
https://github.com/vercel/commerce.git
synced 2025-06-30 10:21:22 +00:00
chore: update README
fix: change password regexp fix: pages in footer are a map same for navbar
This commit is contained in:
parent
33971576b7
commit
a0475cb183
@ -43,11 +43,11 @@ const LoginView: FC<Props> = () => {
|
|||||||
|
|
||||||
const handleValidation = useCallback(() => {
|
const handleValidation = useCallback(() => {
|
||||||
// Test for Alphanumeric password
|
// Test for Alphanumeric password
|
||||||
const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
|
const validPassword = /^(.*[a-zA-Z0-9]){6,}/.test(password)
|
||||||
|
|
||||||
// Unable to send form unless fields are valid.
|
// Unable to send form unless fields are valid.
|
||||||
if (dirty) {
|
if (dirty) {
|
||||||
setDisabled(!validate(email) || password.length < 7 || !validPassword)
|
setDisabled(!validate(email) || password.length < 6 || !validPassword)
|
||||||
}
|
}
|
||||||
}, [email, password, dirty])
|
}, [email, password, dirty])
|
||||||
|
|
||||||
|
@ -48,9 +48,7 @@ const SignUpView: FC<Props> = () => {
|
|||||||
|
|
||||||
const handleValidation = useCallback(() => {
|
const handleValidation = useCallback(() => {
|
||||||
// Test for Alphanumeric password
|
// Test for Alphanumeric password
|
||||||
const validPassword = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d:])([^\s]){6,}$/.test(
|
const validPassword = /^(.*[a-zA-Z0-9]){6,}/.test(password)
|
||||||
password
|
|
||||||
)
|
|
||||||
|
|
||||||
// Unable to send form unless fields are valid.
|
// Unable to send form unless fields are valid.
|
||||||
if (dirty) {
|
if (dirty) {
|
||||||
@ -84,7 +82,7 @@ const SignUpView: FC<Props> = () => {
|
|||||||
</span>{' '}
|
</span>{' '}
|
||||||
<span className="leading-6 text-sm">
|
<span className="leading-6 text-sm">
|
||||||
<strong>Info</strong>: Passwords must be longer than 6 chars and
|
<strong>Info</strong>: Passwords must be longer than 6 chars and
|
||||||
include numbers, upper and lower case.{' '}
|
include numbers.{' '}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<div className="pt-2 w-full flex flex-col">
|
<div className="pt-2 w-full flex flex-col">
|
||||||
|
@ -120,7 +120,7 @@ const CartSidebarView: FC = () => {
|
|||||||
</li>
|
</li>
|
||||||
<li className="flex justify-between py-1">
|
<li className="flex justify-between py-1">
|
||||||
<span>Estimated Shipping</span>
|
<span>Estimated Shipping</span>
|
||||||
<span>Calculated at checkout</span>
|
<span className="font-bold tracking-wide">FREE</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-10">
|
<div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-10">
|
||||||
|
@ -15,10 +15,25 @@ interface Props {
|
|||||||
pages?: Page[]
|
pages?: Page[]
|
||||||
}
|
}
|
||||||
|
|
||||||
const LEGAL_PAGES = ['legal-notice', 'terms']
|
const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
|
||||||
|
|
||||||
|
const defaultPages = [
|
||||||
|
{
|
||||||
|
url: '/',
|
||||||
|
name: 'Home',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: '/',
|
||||||
|
name: 'Careers',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: '/blog',
|
||||||
|
name: 'Blog',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
const Footer: FC<Props> = ({ className, pages }) => {
|
const Footer: FC<Props> = ({ className, pages }) => {
|
||||||
const { sitePages, legalPages } = usePages(pages)
|
const { sitePages = defaultPages, legalPages } = usePages(pages)
|
||||||
const rootClassName = cn(className)
|
const rootClassName = cn(className)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -37,27 +52,6 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="col-span-1 lg:col-span-2">
|
<div className="col-span-1 lg:col-span-2">
|
||||||
<ul className="flex flex-initial flex-col md:flex-1">
|
<ul className="flex flex-initial flex-col md:flex-1">
|
||||||
{/* <li className="py-3 md:py-0 md:pb-4">
|
|
||||||
<Link href="/">
|
|
||||||
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="py-3 md:py-0 md:pb-4">
|
|
||||||
<Link href="/">
|
|
||||||
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
|
|
||||||
Careers
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="py-3 md:py-0 md:pb-4">
|
|
||||||
<Link href="/blog">
|
|
||||||
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
|
|
||||||
Blog
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</li> */}
|
|
||||||
{sitePages.map((page) => (
|
{sitePages.map((page) => (
|
||||||
<li key={page.url} className="py-3 md:py-0 md:pb-4">
|
<li key={page.url} className="py-3 md:py-0 md:pb-4">
|
||||||
<Link href={page.url!}>
|
<Link href={page.url!}>
|
||||||
|
@ -5,6 +5,12 @@ import { Searchbar, UserNav } from '@components/common'
|
|||||||
import NavbarRoot from './NavbarRoot'
|
import NavbarRoot from './NavbarRoot'
|
||||||
import s from './Navbar.module.css'
|
import s from './Navbar.module.css'
|
||||||
|
|
||||||
|
const searchPath = [
|
||||||
|
{ link: '/search?q=clothes', name: 'Clothes' },
|
||||||
|
{ link: '/search?q=accessories', name: 'Accessories' },
|
||||||
|
{ link: '/search?q=shoes', name: 'Shoes' },
|
||||||
|
]
|
||||||
|
|
||||||
const Navbar: FC = () => (
|
const Navbar: FC = () => (
|
||||||
<NavbarRoot>
|
<NavbarRoot>
|
||||||
<Container>
|
<Container>
|
||||||
@ -19,15 +25,11 @@ const Navbar: FC = () => (
|
|||||||
<Link href="/search">
|
<Link href="/search">
|
||||||
<a className={s.link}>All</a>
|
<a className={s.link}>All</a>
|
||||||
</Link>
|
</Link>
|
||||||
{/* <Link href="/search?q=clothes">
|
{searchPath.map((e) => (
|
||||||
<a className={s.link}>Clothes</a>
|
<Link href={e.link}>
|
||||||
</Link>
|
<a className={s.link}>{e.name}</a>
|
||||||
<Link href="/search?q=accessories">
|
</Link>
|
||||||
<a className={s.link}>Accessories</a>
|
))}
|
||||||
</Link>
|
|
||||||
<Link href="/search?q=shoes">
|
|
||||||
<a className={s.link}>Shoes</a>
|
|
||||||
</Link> */}
|
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
# Table of Contents
|
# Table of Contents
|
||||||
|
|
||||||
- [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)
|
- [Table of Contents](#table-of-contents)
|
||||||
|
- [Aquilacms Storefront Data Hooks](#aquilacms-storefront-data-hooks)
|
||||||
- [Installation](#installation)
|
- [Installation](#installation)
|
||||||
- [General Usage](#general-usage)
|
- [General Usage](#general-usage)
|
||||||
- [CommerceProvider](#commerceprovider)
|
- [CommerceProvider](#commerceprovider)
|
||||||
@ -21,11 +22,11 @@
|
|||||||
- [getProduct](#getproduct)
|
- [getProduct](#getproduct)
|
||||||
- [More](#more)
|
- [More](#more)
|
||||||
|
|
||||||
# BigCommerce Storefront Data Hooks
|
# Aquilacms Storefront Data Hooks
|
||||||
|
|
||||||
> This project is under active development, new features and updates will be continuously added over time
|
> This project is under active development, new features and updates will be continuously added over time
|
||||||
|
|
||||||
UI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:
|
UI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use Aquilacms as a headless e-commerce platform. The package provides:
|
||||||
|
|
||||||
- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions
|
- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions
|
||||||
- Code splitted data fetching methods for initial data population and static generation of content
|
- Code splitted data fetching methods for initial data population and static generation of content
|
||||||
@ -42,12 +43,8 @@ yarn add storefront-data-hooks
|
|||||||
After install, the first thing you do is: <b>set your environment variables</b> in `.env.local`
|
After install, the first thing you do is: <b>set your environment variables</b> in `.env.local`
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
BIGCOMMERCE_STOREFRONT_API_URL=<>
|
AQUILACMS_URL=<>
|
||||||
BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
|
AQUILACMS_API_URL=<>
|
||||||
BIGCOMMERCE_STORE_API_URL=<>
|
|
||||||
BIGCOMMERCE_STORE_API_TOKEN=<>
|
|
||||||
BIGCOMMERCE_STORE_API_CLIENT_ID=<>
|
|
||||||
BIGCOMMERCE_CHANNEL_ID=<>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## General Usage
|
## General Usage
|
||||||
@ -58,7 +55,7 @@ This component is a provider pattern component that creates commerce context for
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
...
|
...
|
||||||
import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
|
import { CommerceProvider } from '@aquilacms/storefront-data-hooks'
|
||||||
|
|
||||||
const App = ({ locale = 'en-US', children }) => {
|
const App = ({ locale = 'en-US', children }) => {
|
||||||
return (
|
return (
|
||||||
@ -72,11 +69,11 @@ const App = ({ locale = 'en-US', children }) => {
|
|||||||
|
|
||||||
### useLogin hook
|
### useLogin hook
|
||||||
|
|
||||||
Hook for bigcommerce user login functionality, returns `login` function to handle user login.
|
Hook for aquilacms user login functionality, returns `login` function to handle user login.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
...
|
...
|
||||||
import useLogin from '@bigcommerce/storefront-data-hooks/use-login'
|
import useLogin from '@aquilacms/storefront-data-hooks/use-login'
|
||||||
|
|
||||||
const LoginView = () => {
|
const LoginView = () => {
|
||||||
const login = useLogin()
|
const login = useLogin()
|
||||||
@ -103,7 +100,7 @@ Hook to logout user.
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
...
|
...
|
||||||
import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
|
import useLogout from '@aquilacms/storefront-data-hooks/use-logout'
|
||||||
|
|
||||||
const LogoutLink = () => {
|
const LogoutLink = () => {
|
||||||
const logout = useLogout()
|
const logout = useLogout()
|
||||||
@ -121,7 +118,7 @@ Hook for getting logged in customer data, and fetching customer info.
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
...
|
...
|
||||||
import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
|
import useCustomer from '@aquilacms/storefront-data-hooks/use-customer'
|
||||||
...
|
...
|
||||||
|
|
||||||
const Profile = () => {
|
const Profile = () => {
|
||||||
@ -139,11 +136,11 @@ const Profile = () => {
|
|||||||
|
|
||||||
### useSignup
|
### useSignup
|
||||||
|
|
||||||
Hook for bigcommerce user signup, returns `signup` function to handle user signups.
|
Hook for aquilacms user signup, returns `signup` function to handle user signups.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
...
|
...
|
||||||
import useSignup from '@bigcommerce/storefront-data-hooks/use-login'
|
import useSignup from '@aquilacms/storefront-data-hooks/use-login'
|
||||||
|
|
||||||
const SignupView = () => {
|
const SignupView = () => {
|
||||||
const signup = useSignup()
|
const signup = useSignup()
|
||||||
@ -171,7 +168,7 @@ const SignupView = () => {
|
|||||||
Helper hook to format price according to commerce locale, and return discount if available.
|
Helper hook to format price according to commerce locale, and return discount if available.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
|
import usePrice from '@aquilacms/storefront-data-hooks/use-price'
|
||||||
...
|
...
|
||||||
const { price, discount, basePrice } = usePrice(
|
const { price, discount, basePrice } = usePrice(
|
||||||
data && {
|
data && {
|
||||||
@ -190,7 +187,7 @@ Returns the current cart data for use
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
...
|
...
|
||||||
import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
|
import useCart from '@aquilacms/storefront-data-hooks/cart/use-cart'
|
||||||
|
|
||||||
const countItem = (count: number, item: LineItem) => count + item.quantity
|
const countItem = (count: number, item: LineItem) => count + item.quantity
|
||||||
|
|
||||||
@ -206,7 +203,7 @@ const CartNumber = () => {
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
...
|
...
|
||||||
import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
|
import useAddItem from '@aquilacms/storefront-data-hooks/cart/use-add-item'
|
||||||
|
|
||||||
const AddToCartButton = ({ productId, variantId }) => {
|
const AddToCartButton = ({ productId, variantId }) => {
|
||||||
const addItem = useAddItem()
|
const addItem = useAddItem()
|
||||||
@ -227,7 +224,7 @@ const AddToCartButton = ({ productId, variantId }) => {
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
...
|
...
|
||||||
import useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'
|
import useUpdateItem from '@aquilacms/storefront-data-hooks/cart/use-update-item'
|
||||||
|
|
||||||
const CartItem = ({ item }) => {
|
const CartItem = ({ item }) => {
|
||||||
const [quantity, setQuantity] = useState(item.quantity)
|
const [quantity, setQuantity] = useState(item.quantity)
|
||||||
@ -257,7 +254,7 @@ Provided with a cartItemId, will remove an item from the cart:
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
...
|
...
|
||||||
import useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'
|
import useRemoveItem from '@aquilacms/storefront-data-hooks/cart/use-remove-item'
|
||||||
|
|
||||||
const RemoveButton = ({ item }) => {
|
const RemoveButton = ({ item }) => {
|
||||||
const removeItem = useRemoveItem()
|
const removeItem = useRemoveItem()
|
||||||
@ -276,9 +273,9 @@ const RemoveButton = ({ item }) => {
|
|||||||
Wishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.
|
Wishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'
|
import useAddItem from '@aquilacms/storefront-data-hooks/wishlist/use-add-item'
|
||||||
import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
|
import useRemoveItem from '@aquilacms/storefront-data-hooks/wishlist/use-remove-item'
|
||||||
import useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'
|
import useWishlist from '@aquilacms/storefront-data-hooks/wishlist/use-wishlist'
|
||||||
|
|
||||||
const WishlistButton = ({ productId, variant }) => {
|
const WishlistButton = ({ productId, variant }) => {
|
||||||
const addItem = useAddItem()
|
const addItem = useAddItem()
|
||||||
@ -320,11 +317,11 @@ const WishlistButton = ({ productId, variant }) => {
|
|||||||
|
|
||||||
### useSearch
|
### useSearch
|
||||||
|
|
||||||
`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string.
|
`useSearch` handles searching the aquilacms storefront product catalog by catalog, brand, and query string.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
...
|
...
|
||||||
import useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'
|
import useSearch from '@aquilacms/storefront-data-hooks/products/use-search'
|
||||||
|
|
||||||
const SearchPage = ({ searchString, category, brand, sortStr }) => {
|
const SearchPage = ({ searchString, category, brand, sortStr }) => {
|
||||||
const { data } = useSearch({
|
const { data } = useSearch({
|
||||||
@ -349,8 +346,8 @@ const SearchPage = ({ searchString, category, brand, sortStr }) => {
|
|||||||
API function to retrieve a product list.
|
API function to retrieve a product list.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
|
import { getConfig } from '@aquilacms/storefront-data-hooks/api'
|
||||||
import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
|
import getAllProducts from '@aquilacms/storefront-data-hooks/api/operations/get-all-products'
|
||||||
|
|
||||||
const { products } = await getAllProducts({
|
const { products } = await getAllProducts({
|
||||||
variables: { field: 'featuredProducts', first: 6 },
|
variables: { field: 'featuredProducts', first: 6 },
|
||||||
@ -365,8 +362,8 @@ API product to retrieve a single product when provided with the product
|
|||||||
slug string.
|
slug string.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
|
import { getConfig } from '@aquilacms/storefront-data-hooks/api'
|
||||||
import getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
|
import getProduct from '@aquilacms/storefront-data-hooks/api/operations/get-product'
|
||||||
|
|
||||||
const { product } = await getProduct({
|
const { product } = await getProduct({
|
||||||
variables: { slug },
|
variables: { slug },
|
||||||
|
@ -12,9 +12,7 @@ const signup: SignupHandlers['signup'] = async ({
|
|||||||
firstName: Joi.string().min(1),
|
firstName: Joi.string().min(1),
|
||||||
lastName: Joi.string().min(1),
|
lastName: Joi.string().min(1),
|
||||||
email: Joi.string().email({ tlds: false }),
|
email: Joi.string().email({ tlds: false }),
|
||||||
password: Joi.string().pattern(
|
password: Joi.string().pattern(new RegExp(/^(.*[a-zA-Z0-9]){6,}/)),
|
||||||
new RegExp(/^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\d\s:])([^\s]){6,}$/)
|
|
||||||
),
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const validation = schema.validate({ email, password })
|
const validation = schema.validate({ email, password })
|
||||||
|
@ -144,7 +144,7 @@ export default function Cart() {
|
|||||||
</li>
|
</li>
|
||||||
<li className="flex justify-between py-1">
|
<li className="flex justify-between py-1">
|
||||||
<span>Estimated Shipping</span>
|
<span>Estimated Shipping</span>
|
||||||
<span>Calculated at checkout</span>
|
<span className="font-bold tracking-wide">FREE</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div className="flex justify-between border-t border-accents-2 py-3 font-bold mb-10">
|
<div className="flex justify-between border-t border-accents-2 py-3 font-bold mb-10">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user