crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

allow customer to check on self installed field

Browse Source
This commit is contained in:
Chloe
2024-06-27 15:05:59 +07:00
parent 7f4fa09027
commit 6c01d8825d
16 changed files with 288 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/form/file-input/actions.ts
View File

@@ -1,7 +1,7 @@
'use server';
import { createFile, stageUploadFile, uploadFile } from 'lib/shopify';
import { StagedUploadsCreatePayload, UploadInput } from 'lib/shopify/types';
import { createFile, getFile, stageUploadFile, uploadFile } from 'lib/shopify';
import { File as ShopifyFile, StagedUploadsCreatePayload, UploadInput } from 'lib/shopify/types';
const prepareFilePayload = ({
stagedFileUpload,
@@ -84,3 +84,13 @@ export const handleUploadFile = async ({ file }: { file: File }) => {
console.log('handleUploadFile action', error);
}
};
export const getFileDetails = async (fileId?: string | null): Promise<ShopifyFile | undefined> => {
if (!fileId) return undefined;
try {
const file = await getFile(fileId);
return file;
} catch (error) {
console.log('getFileDetails action', error);
}
};

26
components/form/file-input/index.tsx
View File

@@ -1,14 +1,23 @@
'use client';
import { PhotoIcon } from '@heroicons/react/24/outline';
import { ChangeEvent, useId, useState } from 'react';
import LoadingDots from 'components/loading-dots';
import { File as ShopifyFile } from 'lib/shopify/types';
import { ChangeEvent, useEffect, useId, useState, useTransition } from 'react';
import { getFileDetails } from './actions';
type FileInputProps = {
name: string;
label: string;
fileId?: string | null;
};
const FileInput = ({ name, label }: FileInputProps) => {
const FileInput = ({ name, label, fileId }: FileInputProps) => {
const id = useId();
const [file, setFile] = useState<File | undefined>();
const [defaultFileDetails, setDefaultFileDetails] = useState<ShopifyFile | undefined>();
const [loading, startTransition] = useTransition();
const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files.length > 0) {
@@ -16,6 +25,15 @@ const FileInput = ({ name, label }: FileInputProps) => {
}
};
useEffect(() => {
if (!fileId) return;
startTransition(async () => {
const fileResponse = await getFileDetails(fileId);
setDefaultFileDetails(fileResponse);
});
}, [fileId]);
return (
<div>
<label className="block text-sm font-medium leading-6 text-gray-900">{label}</label>
@@ -34,7 +52,9 @@ const FileInput = ({ name, label }: FileInputProps) => {
</div>
</div>
</div>
{file && <p className="mt-2 text-sm text-gray-500">{file.name}</p>}
<p className="mt-2 text-sm text-gray-500">
{loading ? <LoadingDots className="bg-dark" /> : file?.name || defaultFileDetails?.alt}
</p>
</div>
);
};