26 | {thumbnailFile ? (
27 |
43 |
28 |
29 |
31 |
32 | ) : null}
33 |
34 |
37 | {activeOffer !== undefined && (
38 | {product.name}
35 | {currencyFormatter.format(price, { code: 'JPY', precision: 0 })} 36 |
39 | タイムセール中
40 |
41 | )}
42 | -
17 | {products.map((product) => {
18 | return (
19 |
-
20 |
21 |
22 | );
23 | })}
24 |
24 |
56 | );
57 | };
58 |
--------------------------------------------------------------------------------
/src/client/components/feature/ProductListSlider/hooks/useSlider.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 | import { throttle } from 'throttle-debounce';
3 |
4 | const ITEM_MIN_WIDTH = 250 as const;
5 |
6 | export const useSlider = ({ items }: { items: unknown[] }) => {
7 | const containerElementRef = useRef
25 | setSlideIndex(slideIndex - visibleItemCount)}
29 | />
30 |
31 |
32 |
48 | -
33 | {products.map((product, index) => {
34 | const hidden = index < slideIndex || slideIndex + visibleItemCount <= index;
35 | return (
36 |
-
42 |
43 |
44 | );
45 | })}
46 |
49 | = products.length}
52 | onClick={() => setSlideIndex(slideIndex + visibleItemCount)}
53 | />
54 |
55 |
38 | {children}
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/client/components/foundation/AspectRatio/index.ts:
--------------------------------------------------------------------------------
1 | export * from './AspectRatio';
2 |
--------------------------------------------------------------------------------
/src/client/components/foundation/GetDeviceType/GetDeviceType.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react';
2 | import { Component } from 'react';
3 |
4 | export const DeviceType = {
5 | DESKTOP: 'DESKTOP',
6 | MOBILE: 'MOBILE',
7 | } as const;
8 | export type DeviceType = typeof DeviceType[keyof typeof DeviceType];
9 |
10 | type Props = {
11 | children: ({ deviceType }: { deviceType: DeviceType }) => ReactNode;
12 | };
13 |
14 | export class GetDeviceType extends Component
17 | {children}
18 |
19 |
38 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/client/components/foundation/WidthRestriction/index.ts:
--------------------------------------------------------------------------------
1 | export * from './WidthRestriction';
2 |
--------------------------------------------------------------------------------
/src/client/components/modal/SignInModal/SignInModal.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/css';
2 |
3 | export const inner = () => css`
4 | display: flex;
5 | flex-direction: column;
6 | gap: 24px;
7 | justify-content: conter;
8 | padding: 24px;
9 | `;
10 |
11 | export const header = () => css`
12 | display: flex;
13 | justify-content: space-between;
14 | `;
15 |
16 | export const heading = () => css`
17 | font-size: 24px;
18 | `;
19 |
20 | export const switchToSignUpButton = () => css`
21 | color: #3ba175;
22 | `;
23 |
24 | export const form = () => css`
25 | display: grid;
26 | gap: 24px;
27 | `;
28 |
29 | export const inputList = () => css`
30 | display: grid;
31 | gap: 16px;
32 | `;
33 |
34 | export const submitButton = () => css`
35 | justify-self: center;
36 | `;
37 |
38 | export const error = () => css`
39 | color: #b00020;
40 | font-size: 0.875rem;
41 | line-height: 1;
42 | min-height: 1em;
43 | `;
44 |
--------------------------------------------------------------------------------
/src/client/components/modal/SignInModal/SignInModal.tsx:
--------------------------------------------------------------------------------
1 | import type { FormikErrors } from 'formik';
2 | import { useFormik } from 'formik';
3 | import type { FC } from 'react';
4 | import { useState } from 'react';
5 | import * as z from 'zod';
6 |
7 | import { useSignIn } from '../../../hooks/useSignIn';
8 | import { useCloseModal, useIsOpenModal, useOpenModal } from '../../../store/modal';
9 | import { Modal } from '../../foundation/Modal';
10 | import { PrimaryButton } from '../../foundation/PrimaryButton';
11 | import { TextInput } from '../../foundation/TextInput';
12 |
13 | import * as styles from './SignInModal.styles';
14 |
15 | const NOT_INCLUDED_AT_CHAR_REGEX = /^(?:[^@]*){6,}$/;
16 | const NOT_INCLUDED_SYMBOL_CHARS_REGEX = /^(?:(?:[a-zA-Z0-9]*){2,})+$/;
17 |
18 | // NOTE: 文字列に @ が含まれているか確認する
19 | const emailSchema = z.string().refine((v) => !NOT_INCLUDED_AT_CHAR_REGEX.test(v));
20 | // NOTE: 文字列に英数字以外の文字が含まれているか確認する
21 | const passwordSchema = z.string().refine((v) => !NOT_INCLUDED_SYMBOL_CHARS_REGEX.test(v));
22 |
23 | export type SignInForm = {
24 | email: string;
25 | password: string;
26 | };
27 |
28 | export const SignInModal: FC = () => {
29 | const isOpened = useIsOpenModal('SIGN_IN');
30 | const { signIn } = useSignIn();
31 |
32 | const handleOpenModal = useOpenModal();
33 | const handleCloseModal = useCloseModal();
34 |
35 | const [submitError, setSubmitError] = useState{isReady ? children : null}
39 |
72 |
73 |
82 |
113 |
114 | ログイン
74 | 81 |
75 |
76 |
85 |
127 |
128 | 会員登録
77 | 84 |
19 |
21 |
25 |
27 |
43 |
94 | );
95 | }}
96 |
44 |
45 |
71 |
72 |
46 | {thumbnailFile ? (
47 |
70 |
53 |
54 |
56 | {activeOffer !== undefined && (
57 |
62 | ) : null}
63 |
58 | タイムセール中
59 |
60 | )}
61 |
64 |
69 | {item.product.name}
65 |66 | {currencyFormatter.format(price, { code: 'JPY', precision: 0 })} 67 |
68 |
78 |
89 | onRemove(item.product.id)} size="base">
90 | 削除
91 |
92 |
93 |
47 |
88 |
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/src/client/components/order/OrderForm/index.ts:
--------------------------------------------------------------------------------
1 | export * from './OrderForm';
2 |
--------------------------------------------------------------------------------
/src/client/components/order/OrderPreview/OrderPreview.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/css';
2 |
3 | export const container = () => css`
4 | display: flex;
5 | flex-direction: column;
6 | gap: 12px;
7 | `;
8 |
9 | export const itemList = () => css`
10 | display: grid;
11 | gap: 16px;
12 | width: 100%;
13 | `;
14 |
15 | export const totalPrice = () => css`
16 | border-top: 1px solid rgba(0, 0, 0, 0.25);
17 | font-size: 1.5rem;
18 | font-weight: 700;
19 | padding: 8px 0;
20 | text-align: right;
21 | width: 100%;
22 | `;
23 |
--------------------------------------------------------------------------------
/src/client/components/order/OrderPreview/OrderPreview.tsx:
--------------------------------------------------------------------------------
1 | import * as currencyFormatter from 'currency-formatter';
2 | import _ from 'lodash';
3 | import type { FC } from 'react';
4 | import { memo } from 'react';
5 |
6 | import type { OrderFragmentResponse } from '../../../graphql/fragments';
7 | import { useTotalPrice } from '../../../hooks/useTotalPrice';
8 | import { CartItem } from '../CartItem';
9 |
10 | import * as styles from './OrderPreview.styles';
11 |
12 | type Props = {
13 | order: OrderFragmentResponse;
14 | onUpdateCartItem: (productId: number, amount: number) => void;
15 | onRemoveCartItem: (productId: number) => void;
16 | };
17 |
18 | export const OrderPreview: FC
23 |
34 | );
35 | }, _.isEqual);
36 |
37 | OrderPreview.displayName = 'OrderPreview';
38 |
--------------------------------------------------------------------------------
/src/client/components/order/OrderPreview/index.ts:
--------------------------------------------------------------------------------
1 | export * from './OrderPreview';
2 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductHeroImage/ProductHeroImage.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/css';
2 |
3 | export const container = () => css`
4 | opacity: 1;
5 | position: relative;
6 | transition-duration: 300ms;
7 | transition-property: opacity;
8 | transition-timing-function: linear;
9 |
10 | &:hover {
11 | opacity: 0.8;
12 | }
13 | `;
14 |
15 | export const image = () => css`
16 | height: 100%;
17 | object-fit: cover;
18 | width: 100%;
19 | `;
20 |
21 | export const overlay = () => css`
22 | align-items: flex-start;
23 | background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0, transparent);
24 | bottom: 0;
25 | display: flex;
26 | flex-direction: column;
27 | height: 30%;
28 | justify-content: flex-end;
29 | left: 0;
30 | padding: 16px 24px;
31 | position: absolute;
32 | right: 0;
33 | `;
34 |
35 | export const title = () => css`
36 | color: #ffffff;
37 | font-weight: 700;
38 | letter-spacing: 1px;
39 | `;
40 |
41 | export const title__desktop = () => css`
42 | font-size: 1.5rem;
43 | `;
44 |
45 | export const title__mobile = () => css`
46 | font-size: 1.125rem;
47 | `;
48 |
49 | export const description = () => css`
50 | color: #ffffff;
51 | margin-top: 8px;
52 | `;
53 |
54 | export const description__desktop = () => css`
55 | font-size: 1rem;
56 | `;
57 |
58 | export const description__mobile = () => css`
59 | font-size: 0.875rem;
60 | `;
61 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductHeroImage/ProductHeroImage.tsx:
--------------------------------------------------------------------------------
1 | import CanvasKitInit from 'canvaskit-wasm';
2 | import CanvasKitWasmUrl from 'canvaskit-wasm/bin/canvaskit.wasm?url';
3 | import classNames from 'classnames';
4 | import _ from 'lodash';
5 | import { memo, useEffect, useState } from 'react';
6 | import type { FC } from 'react';
7 |
8 | import type { ProductFragmentResponse } from '../../../graphql/fragments';
9 | import { Anchor } from '../../foundation/Anchor';
10 | import { AspectRatio } from '../../foundation/AspectRatio';
11 | import { DeviceType, GetDeviceType } from '../../foundation/GetDeviceType';
12 | import { WidthRestriction } from '../../foundation/WidthRestriction';
13 |
14 | import * as styles from './ProductHeroImage.styles';
15 |
16 | async function loadImageAsDataURL(url: string): Promise-
24 | {order.items.map((item) => {
25 | return (
26 |
-
27 |
28 |
29 | );
30 | })}
31 |
{currencyFormatter.format(totalPrice, { code: 'JPY', precision: 0 })}
33 |
66 |
67 | 
68 |
69 |
70 |
89 |
71 |
88 | 77 | {title} 78 |
79 |85 | {product.name} 86 |
87 |
33 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductMediaListPreviewer/MediaItem/index.ts:
--------------------------------------------------------------------------------
1 | export * from './MediaItem';
2 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductMediaListPreviewer/MediaItem/loadThumbnail.ts:
--------------------------------------------------------------------------------
1 | export const loadThumbnail = async (url: string) => {
2 | const video = document.createElement('video');
3 |
4 | await new Promise((resolve) => {
5 | video.src = url;
6 | video.addEventListener('canplaythrough', resolve, { once: true });
7 | });
8 |
9 | const canvas = document.createElement('canvas');
10 | const context = canvas.getContext('2d');
11 |
12 | canvas.width = video.videoWidth;
13 | canvas.height = video.videoHeight;
14 | if (context === null) {
15 | return;
16 | }
17 |
18 | video.currentTime = 0;
19 | context.drawImage(video, 0, 0, canvas.width, canvas.height);
20 |
21 | const thumbnailData = canvas.toDataURL('image/png');
22 | return thumbnailData;
23 | };
24 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductMediaListPreviewer/MediaItemPreviewer/MediaItemPreiewer.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/css';
2 |
3 | export const container = () => css`
4 | display: flex;
5 | `;
6 |
7 | export const video = () => css`
8 | height: auto;
9 | object-fit: cover;
10 | width: 100%;
11 | `;
12 |
13 | export const video__mobile = () => css`
14 | max-width: 100vw;
15 | `;
16 |
17 | export const video__desktop = () => css`
18 | max-width: 1024px;
19 | `;
20 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductMediaListPreviewer/MediaItemPreviewer/MediaItemPreviewer.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import type { FC } from 'react';
3 |
4 | import type { MediaFileFragmentResponse } from '../../../../graphql/fragments';
5 | import { getMediaType } from '../../../../utils/get_media_type';
6 | import { DeviceType, GetDeviceType } from '../../../foundation/GetDeviceType';
7 | import { Image } from '../../../foundation/Image';
8 |
9 | import * as styles from './MediaItemPreiewer.styles';
10 |
11 | type Props = {
12 | file: MediaFileFragmentResponse;
13 | };
14 |
15 | export const MediaItemPreviewer: FC
36 |
38 | )}
39 |
20 | {type === 'image' &&
23 | {({ deviceType }) => (
24 |
35 | )}
36 |
37 | )}
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductMediaListPreviewer/MediaItemPreviewer/index.ts:
--------------------------------------------------------------------------------
1 | export * from './MediaItemPreviewer';
2 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductMediaListPreviewer/ProductMediaListPreviewer.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/css';
2 |
3 | export const container = () => css`
4 | display: grid;
5 | gap: 8px;
6 | overflow-x: hidden;
7 | `;
8 |
9 | export const itemListWrapper = () => css`
10 | display: grid;
11 | overflow-x: scroll;
12 | place-items: center;
13 | `;
14 |
15 | export const itemList = () => css`
16 | display: flex;
17 | gap: 8px;
18 | justify-content: center;
19 | padding: 0 24px 8px;
20 | width: fit-content;
21 | `;
22 |
23 | export const item = () => css`
24 | height: 40px;
25 | width: 40px;
26 | `;
27 |
28 | export const itemSelectButton = () => css`
29 | display: inline-flex;
30 | height: 100%;
31 | opacity: 1;
32 | pointer-events: auto;
33 | width: 100%;
34 | `;
35 |
36 | export const itemSelectButton__disabled = () => css`
37 | opacity: 0.5;
38 | pointer-events: none;
39 | `;
40 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductMediaListPreviewer/ProductMediaListPreviewer.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import type { FC } from 'react';
3 | import { useState } from 'react';
4 |
5 | import type { ProductFragmentResponse } from '../../../graphql/fragments';
6 | import { AspectRatio } from '../../foundation/AspectRatio';
7 |
8 | import { MediaItem } from './MediaItem';
9 | import { MediaItemPreviewer } from './MediaItemPreviewer';
10 | import * as styles from './ProductMediaListPreviewer.styles';
11 |
12 | type Props = {
13 | product: ProductFragmentResponse | undefined;
14 | };
15 |
16 | export const ProductMediaListPreviewer: FC
25 |
26 |
28 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductMediaListPreviewer/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ProductMediaListPreviewer';
2 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductOfferLabel/ProductOfferLabel.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/css';
2 |
3 | export const container = () => css`
4 | background-color: #ff6347;
5 | border-radius: 8px;
6 | color: #ffffff;
7 | font-weight: 700;
8 | `;
9 |
10 | export const container__base = () => css`
11 | font-size: 0.75rem;
12 | padding: 4px 8px;
13 | `;
14 |
15 | export const container__lg = () => css`
16 | font-size: 0.875rem;
17 | padding: 8px 24px;
18 | `;
19 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductOfferLabel/ProductOfferLabel.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import type { FC, ReactNode } from 'react';
3 |
4 | import * as styles from './ProductOfferLabel.styles';
5 |
6 | type Size = 'base' | 'lg';
7 | type Props = {
8 | children: ReactNode;
9 | size: Size;
10 | };
11 |
12 | export const ProductOfferLabel: FC
29 |
51 | -
30 | {product.media.map((media, index) => {
31 | const disabled = index === activeIndex;
32 |
33 | return (
34 |
-
35 |
36 | 45 | 46 |
47 | );
48 | })}
49 |
37 |
38 | までタイムセール
39 |
40 |
41 | );
42 | };
43 |
44 | return (
45 |
46 | {renderActiveOffer()}
47 |
61 | );
62 | }, _.isEqual);
63 |
64 | ProductOverview.displayName = 'ProductOverview';
65 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductOverview/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ProductOverview';
2 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductPurchaseSeciton/ProductPurchaseSection.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/css';
2 |
3 | export const container = () => css`
4 | display: flex;
5 | flex-direction: column;
6 | `;
7 |
8 | export const amount = () => css`
9 | align-items: center;
10 | display: flex;
11 | font-size: 0.875rem;
12 | gap: 4px;
13 | justify-content: flex-end;
14 | line-height: 24px;
15 | `;
16 |
17 | export const checkIcon = () => css`
18 | display: inline-flex;
19 | `;
20 |
21 | export const actionButtonList = () => css`
22 | display: flex;
23 | gap: 8px;
24 | margin-top: 8px;
25 | `;
26 |
27 | export const signInWrapper = () => css`
28 | align-items: flex-end;
29 | display: flex;
30 | flex-direction: column;
31 | gap: 4px;
32 | `;
33 |
34 | export const signIn = () => css`
35 | font-size: 0.875rem;
36 | `;
37 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductPurchaseSeciton/ProductPurchaseSection.tsx:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import type { FC } from 'react';
3 | import { memo } from 'react';
4 |
5 | import type { ProductFragmentResponse } from '../../../graphql/fragments';
6 | import { Icon } from '../../foundation/Icon';
7 | import { OutlineButton } from '../../foundation/OutlineButton';
8 | import { PrimaryAnchor } from '../../foundation/PrimaryAnchor';
9 | import { PrimaryButton } from '../../foundation/PrimaryButton';
10 |
11 | import * as styles from './ProductPurchaseSection.styles';
12 |
13 | type Props = {
14 | product: ProductFragmentResponse | undefined;
15 | amountInCart: number;
16 | isAuthUser: boolean;
17 | onUpdateCartItem: (productId: number, count: number) => void;
18 | onOpenSignInModal: () => void;
19 | };
20 |
21 | export const ProductPurchaseSection: FC{product.name}
48 |{product.description}
49 | 50 |
51 | {activeOffer !== undefined ? (
52 |
53 | {currencyFormatter.format(product.price, { code: 'JPY', precision: 0 })}
54 |
55 | ) : null}
56 |
57 | {currencyFormatter.format(activeOffer?.price ?? product.price, { code: 'JPY', precision: 0 })}
58 |
59 |
60 |
30 |
37 | );
38 | }
39 |
40 | if (amountInCart === 0) {
41 | return (
42 |
31 | 購入にはログインが必要です
32 | onOpenSignInModal()} size="sm">
33 | ログイン
34 |
35 |
36 |
43 | onUpdateCartItem(product.id, 1)} size="sm">
44 | カートに追加
45 |
46 |
47 | );
48 | }
49 |
50 | return (
51 |
52 |
67 | );
68 | },
69 | _.isEqual,
70 | );
71 |
72 | ProductPurchaseSection.displayName = 'ProductPurchaseSection';
73 |
--------------------------------------------------------------------------------
/src/client/components/product/ProductPurchaseSeciton/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ProductPurchaseSection';
2 |
--------------------------------------------------------------------------------
/src/client/components/review/ReviewList/ReviewList.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/css';
2 |
3 | export const itemList = () => css`
4 | display: grid;
5 | gap: 16px;
6 | `;
7 |
8 | export const item = () => css`
9 | align-items: center;
10 | display: flex;
11 | gap: 8px;
12 | padding: 4px 0;
13 | `;
14 |
15 | export const avaterImage = () => css`
16 | border-radius: 50%;
17 | overflow: hidden;
18 | `;
19 |
20 | export const content = () => css`
21 | display: grid;
22 | flex: 1;
23 | `;
24 |
25 | export const time = () => css`
26 | color: #999999;
27 | font-size: 0.75rem;
28 | `;
29 |
30 | export const comment = () => css`
31 | color: #222222;
32 | font-size: 0.875rem;
33 | line-height: 20px;
34 | min-height: 20px;
35 | `;
36 |
--------------------------------------------------------------------------------
/src/client/components/review/ReviewList/ReviewList.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from 'react';
2 |
3 | import type { ReviewFragmentResponse } from '../../../graphql/fragments';
4 | import { AspectRatio } from '../../foundation/AspectRatio';
5 | import { Image } from '../../foundation/Image';
6 |
7 | import * as styles from './ReviewList.styles';
8 |
9 | type Props = {
10 | reviews: ReviewFragmentResponse[];
11 | };
12 |
13 | export const ReviewList: FC
53 |
54 |
59 |
60 | 購入手続きへ
61 |
62 | onUpdateCartItem(product.id, amountInCart + 1)} size="lg">
63 | カートに追加
64 |
65 |
66 | -
20 | {reviews.map((review) => {
21 | const endTime = window.Temporal.Instant.from(review.postedAt).toLocaleString('ja-jp', {
22 | day: '2-digit',
23 | hour: '2-digit',
24 | minute: '2-digit',
25 | month: '2-digit',
26 | second: '2-digit',
27 | year: 'numeric',
28 | });
29 |
30 | return (
31 |
-
32 | 33 |37 |
34 | 36 |35 | 38 | 39 |41 |{review.comment}
40 |
42 | );
43 | })}
44 |
50 | {reviews != null ?
73 | );
74 | }, _.isEqual);
75 |
76 | ReviewSection.displayName = 'ReviewSection';
77 |
--------------------------------------------------------------------------------
/src/client/components/review/ReviewSection/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ReviewSection';
2 |
--------------------------------------------------------------------------------
/src/client/global.styles.ts:
--------------------------------------------------------------------------------
1 | import { injectGlobal as css } from '@emotion/css';
2 | import resetCssText from 'modern-css-reset/src/reset.css?raw';
3 |
4 | export const injectGlobalStyle = () => css`
5 | ${resetCssText}
6 |
7 | ul, ol {
8 | list-style: none;
9 | margin: 0;
10 | padding: 0;
11 | }
12 |
13 | body {
14 | font-family: sans-serif;
15 | }
16 |
17 | button {
18 | appearance: none;
19 | background-color: transparent;
20 | border: none;
21 | cursor: pointer;
22 | margin: 0;
23 | padding: 0;
24 | }
25 | `;
26 |
--------------------------------------------------------------------------------
/src/client/graphql/mutations.ts:
--------------------------------------------------------------------------------
1 | import { gql } from '@apollo/client';
2 |
3 | export const SignInMutation = gql`
4 | mutation SignIn($email: String!, $password: String!) {
5 | signin(email: $email, password: $password)
6 | }
7 | `;
8 | export type SignInMutationResponse = boolean;
9 |
10 | export const SignUpMutation = gql`
11 | mutation SignUp($email: String!, $name: String!, $password: String!) {
12 | signup(email: $email, name: $name, password: $password)
13 | }
14 | `;
15 | export type SignUpMutationResponse = boolean;
16 |
17 | export const SendReviewMutation = gql`
18 | mutation SendReview($productId: Int!, $comment: String!) {
19 | sendReview(productId: $productId, comment: $comment)
20 | }
21 | `;
22 | export type SendReviewMutationResponse = boolean;
23 |
24 | export const UpdateItemInShoppingCartMutation = gql`
25 | mutation UpdateItemInShoppingCart($productId: Int!, $amount: Int!) {
26 | updateItemInShoppingCart(productId: $productId, amount: $amount)
27 | }
28 | `;
29 | export type UpdateItemInShoppingCartMutationResponse = boolean;
30 |
31 | export const OrderItemsInShoppingCartMutation = gql`
32 | mutation OrderItemsInShoppingCart($zipCode: String!, $address: String!) {
33 | orderItemsInShoppingCart(zipCode: $zipCode, address: $address)
34 | }
35 | `;
36 | export type OrderItemsInShoppingCartMutationResponse = boolean;
37 |
--------------------------------------------------------------------------------
/src/client/graphql/queries.ts:
--------------------------------------------------------------------------------
1 | import { gql } from '@apollo/client';
2 |
3 | import type {
4 | AuthUserFragmentResponse,
5 | FeatureSectionFragmentResponse,
6 | ProductReviewFragmentResponse,
7 | ProductWithReviewFragmentResponse,
8 | RecommendationFragmentResponse,
9 | } from './fragments';
10 | import {
11 | AuthUserFragment,
12 | FeatureSectionFragment,
13 | ProductReviewFragment,
14 | ProductWithReviewFragment,
15 | RecommendationFragment,
16 | } from './fragments';
17 |
18 | export const GetAuthUserQuery = gql`
19 | ${AuthUserFragment}
20 |
21 | query GetAuthUser {
22 | me {
23 | ...AuthUserFragment
24 | }
25 | }
26 | `;
27 | export type GetUserAuthQueryResponse = {
28 | me: AuthUserFragmentResponse | null;
29 | };
30 |
31 | export const GetProductReviewsQuery = gql`
32 | ${ProductReviewFragment}
33 |
34 | query GetProductReviews($productId: Int!) {
35 | product(id: $productId) {
36 | ...ProductReviewFragment
37 | }
38 | }
39 | `;
40 | export type GetProductReviewsQueryResponse = {
41 | product: ProductReviewFragmentResponse;
42 | };
43 |
44 | export const GetProductDetailsQuery = gql`
45 | ${ProductWithReviewFragment}
46 |
47 | query GetProductDetails($productId: Int!) {
48 | product(id: $productId) {
49 | ...ProductWithReviewFragment
50 | }
51 | }
52 | `;
53 | export type GetProductDetailsQueryResponse = {
54 | product: ProductWithReviewFragmentResponse;
55 | };
56 |
57 | export const GetRecommendationsQuery = gql`
58 | ${RecommendationFragment}
59 |
60 | query GetRecommendations {
61 | recommendations {
62 | ...RecommendationFragment
63 | }
64 | }
65 | `;
66 | export type GetRecommendationsQueryResponse = {
67 | recommendations: RecommendationFragmentResponse[];
68 | };
69 |
70 | export const GetFeatureSectionsQuery = gql`
71 | ${FeatureSectionFragment}
72 |
73 | query GetFeatureSections {
74 | features {
75 | ...FeatureSectionFragment
76 | }
77 | }
78 | `;
79 | export type GetFeatureSectionsQueryResponse = {
80 | features: FeatureSectionFragmentResponse[];
81 | };
82 |
--------------------------------------------------------------------------------
/src/client/hooks/useActiveOffer.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 |
3 | import type { LimitedTimeOfferFragmentResponse, ProductFragmentResponse } from '../graphql/fragments';
4 | import { getActiveOffer } from '../utils/get_active_offer';
5 |
6 | export function useActiveOffer(product: ProductFragmentResponse | undefined) {
7 | const [activeOffer, setActiveOffer] = useState
15 |
20 |
16 |
19 | エラーが発生しました
17 |Some error has occurred
18 |
33 |
38 |
34 |
37 | ページが存在しません
35 |Not Found
36 |
36 |
38 | );
39 | }
40 |
41 | return (
42 | 商品がカートに入っていません
37 |
43 |
82 | );
83 | };
84 |
85 | return (
86 | <>
87 |
44 | {
47 | updateCartItem({
48 | variables: {
49 | amount: 0,
50 | productId,
51 | },
52 | });
53 | }}
54 | onUpdateCartItem={(productId, amount) => {
55 | updateCartItem({
56 | variables: {
57 | amount,
58 | productId,
59 | },
60 | });
61 | }}
62 | order={order}
63 | />
64 |
65 |
66 | カート
45 |
67 | {
70 | submitOrder({
71 | variables: {
72 | address: `${values.prefecture}${values.city}${values.streetAddress}`,
73 | zipCode: values.zipCode,
74 | },
75 | }).then(() => {
76 | navigate('/order/complete');
77 | });
78 | }}
79 | />
80 |
81 | お届け先
68 |
49 |
76 |
50 |
52 |
63 |
64 |
65 | 購入が完了しました
51 |
53 |
62 | 59 | このサイトは架空のサイトであり、商品が発送されることはありません 60 |
61 |
66 |
69 |
70 | こちらの商品もオススメです
67 |
71 |
72 | トップへ戻る
73 |
74 |
75 |
60 |
61 |
75 |
76 |
77 |
80 |
81 |
63 |
65 |
66 | handleOpenModal('SIGN_IN')}
70 | onUpdateCartItem={handleUpdateItem}
71 | product={product}
72 | />
73 |
74 | レビュー
78 |
27 |
40 |
30 | {features.map((featureSection) => {
31 | return (
32 |
39 |
33 |
36 | );
37 | })}
38 |