crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 23:46:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Additional Files and Edits

Browse Source
This commit is contained in:
Shlomo 2024-03-04 21:11:59 +00:00
parent 3ed3e34758
commit b972e23876
6 changed files with 39 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -77,15 +77,16 @@ You can use this comprehensive [integration guide](http://vercel.com/docs/integr
## Shopify Customer Accounts
This fork is designed to provide a basic implementation of [Shopify's new Customer Accounts API](), which will allow a customer to login into their Next.js Shopify Website to update information and view orders. It uses the concepts of Next.js middleware and server actions to implemnt the Shopify Customer Accounts API Integration. All the new code for the Customer Accounts API is included in: lib/shopify/customer folder, middleware
This fork is designed to provide a basic implementation of [Shopify's new Customer Accounts API](), which will allow a customer to login into their Next.js Shopify Website to update information and view orders. It uses the concepts of Next.js middleware and server actions to implement the Shopify Customer Accounts API Integration. All the new code for the Customer Accounts API is included in: lib/shopify/customer folder, middleware
The code for this repo is adapted for Next.js from code provided by Shopify
To Set This Up, please follow:
1. Get
2. Set up URLs
3.
1. icons/client components
2. Get
3. Set up URLs
4.
to do: env settings file

11
components/account/account-profile.tsx
View File

@ -1,10 +1,9 @@
'use client';
import clsx from 'clsx';
import { LogOutIcon, TriangleIcon } from '@heroicons/react/24/outline';
import { ArrowRightIcon as LogOutIcon } from '@heroicons/react/24/outline';
import { doLogout } from './actions';
import LoadingDots from 'components/loading-dots';
import { useFormState, useFormStatus } from 'react-dom';
import { Alert, AlertDescription, AlertTitle } from 'components/ui/alert';
function SubmitButton(props: any) {
const { pending } = useFormStatus();
@ -28,13 +27,7 @@ function SubmitButton(props: any) {
</div>
{pending ? 'Logging out...' : 'Log Out'}
</button>
{props?.message && (
<Alert className="my-5" variant="destructive">
<TriangleIcon className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>{props?.message}</AlertDescription>
</Alert>
)}
{props?.message && <div className="my-5">{props?.message}</div>}
</>
);
}

15
components/auth/login-form.tsx
View File

@ -1,11 +1,9 @@
'use client';
import { ExclamationTriangleIcon, UserIcon as LogInIcon } from '@heroicons/react/24/outline';
import { UserIcon as LogInIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { doLogin } from './actions';
import LoadingDots from 'components/loading-dots';
import { useFormState, useFormStatus } from 'react-dom';
import { Alert, AlertTitle } from 'components/ui/alert';
import { Button } from 'components/ui/button';
function SubmitButton(props: any) {
const { pending } = useFormStatus();
@ -15,13 +13,8 @@ function SubmitButton(props: any) {
return (
<>
{props?.message && (
<Alert className="my-5" variant="destructive">
<ExclamationTriangleIcon className="mr-2 h-4 w-4" />
<AlertTitle>{props?.message}</AlertTitle>
</Alert>
)}
<Button
{props?.message && <div className="my-5">{props?.message}</div>}
<button
onClick={(e: React.FormEvent<HTMLButtonElement>) => {
if (pending) e.preventDefault();
}}
@ -43,7 +36,7 @@ function SubmitButton(props: any) {
<span>Log-In</span>
</>
)}
</Button>
</button>
</>
);
}

12
components/auth/login-message.tsx
View File

@ -1,12 +1,8 @@
import { TriangleIcon } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from 'components/ui/alert';
export function LoginMessage() {
return (
<Alert variant="destructive">
<TriangleIcon className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>Your session has expired. Please log in again.</AlertDescription>
</Alert>
<div>
<h2>Error</h2>
<span>Your session has expired. Please log in again.</span>
</div>
);
}

9
components/auth/user-icon.tsx
View File

@ -1,7 +1,6 @@
'use client';
import { User2Icon } from 'lucide-react';
import { UserIcon as User2Icon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { Button } from 'components/ui/button';
function UserButton(props: any) {
const buttonClasses =
@ -10,9 +9,7 @@ function UserButton(props: any) {
return (
<>
<Button
asChild
variant="link"
<button
aria-label="My Profile"
className={clsx(buttonClasses, {
'hover:opacity-90': true
@ -23,7 +20,7 @@ function UserButton(props: any) {
<User2Icon className="mr-2 h-4 w-4" />
<span>Profile</span>
</a>
</Button>
</button>
</>
);
}

18
components/layout/navbar/index.tsx
View File

@ -7,6 +7,7 @@ import Link from 'next/link';
import { Suspense } from 'react';
import MobileMenu from './mobile-menu';
import Search from './search';
import Login from 'components/auth/login';
const { SITE_NAME } = process.env;
export default async function Navbar() {
@ -44,10 +45,27 @@ export default async function Navbar() {
<Search />
</div>
<div className="flex justify-end md:w-1/3">
<div className="relative flex items-center">
<div className="flex h-full flex-row items-center justify-items-end gap-4">
<div
className="text-primary relative ml-4 flex cursor-pointer items-center
outline-none transition duration-100 ease-in-out sm:ml-6"
>
<Suspense fallback={<OpenCart />}>
<Cart />
</Suspense>
</div>
<div
className="text-primary relative ml-4 flex cursor-pointer items-center
outline-none transition duration-100 ease-in-out sm:ml-6"
>
<Suspense fallback={<p>Login</p>}>
<Login />
</Suspense>
</div>
</div>
</div>
</div>
</div>
</nav>
);