@riosst100/pwa-marketplace 1.3.9 → 1.4.1

package/src/overwrites/venia-ui/lib/components/RadioGroup/radio.module.css

@@ -0,0 +1,70 @@
+.root {
+    composes: gap-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: leading-normal from global;
+    composes: m-0 from global;
+    composes: text-colorDefault from global;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+}
+
+.input {
+    composes: appearance-none from global;
+    composes: bg-clip-content from global;
+    composes: bg-transparent from global;
+    composes: border-8 from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    composes: h-[1.5rem] from global;
+    composes: m-0 from global;
+    composes: rounded-full from global;
+    composes: w-[1.5rem] from global;
+    composes: z-foreground from global;
+    grid-area: input;
+
+    composes: active_outline-none from global;
+    /* composes: active_shadow-radioActive from global; */
+
+    composes: checked_bg-brand-dark from global;
+
+    composes: focus_outline-none from global;
+    /* composes: focus_shadow-radioFocus from global; */
+}
+
+.icon {
+    composes: h-[14px] from global;
+    composes: w-[14px] from global;
+    composes: z-surface from global;
+    grid-area: input;
+}
+
+/* TODO @TW: cannot compose */
+.icon svg {
+    /* composes: stroke-gray-600 from global; */
+    stroke: rgb(var(--venia-global-color-gray-600));
+    width: 14px;
+    height: 14px;
+}
+
+.label {
+    composes: justify-self-start from global;
+    composes: text-base from global;
+    grid-area: label;
+}
+
+/* TODO @TW: cannot compose */
+.input:checked + .icon svg {
+    /* composes: stroke-brand-base from global; */
+    stroke: rgb(var(--venia-brand-color-1-700));
+}
+
+.input_shimmer {
+    composes: h-[14px] from global;
+    composes: m-0 from global;
+    composes: rounded-full from global;
+    composes: w-[14px] from global;
+    composes: z-foreground from global;
+}

package/src/overwrites/venia-ui/lib/components/RichText/index.js

@@ -0,0 +1 @@
+export { default } from './richText';

package/src/overwrites/venia-ui/lib/components/RichText/richText.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './richText.module.css';
+import cn from 'classnames';
+
+const toHTML = str => ({ __html: str });
+
+const RichText = (props) => {
+    const { content, rootClassName } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div
+            className={cn(classes.root, rootClassName)}
+            dangerouslySetInnerHTML={toHTML(content)}
+        />
+    );
+};
+
+export default RichText;

package/src/overwrites/venia-ui/lib/components/RichText/richText.module.css

@@ -0,0 +1,19 @@
+.root {
+    composes: leading-tight from global;
+    composes: px-2xs from global;
+    composes: py-0 from global;
+    composes: text-sm from global;
+}
+
+/* TODO @TW: cannot compose */
+.root p {
+    margin: 0 0 1rem;
+}
+
+/* TODO @TW: cannot compose */
+.root ul {
+    /* composes: list-disc from global; */
+    list-style-type: disc;
+    margin: 0 0 1rem;
+    padding-left: 2.5rem;
+}

package/src/talons/AttributesBlock/attributesBlock.gql.js

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export default {
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/AttributesBlock/useAttributesBlock.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './attributesBlock.gql';
+
+const getPath = (path, suffix) => {
+    if (path) {
+        return `/${path}${suffix || ''}`;
+    }
+
+    // If there is no path this is just a dead link.
+    return '#';
+};
+
+export const useAttributesBlock = props => {
+    const { attributesBlock } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigQuery } = operations;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    return {
+        categoryUrlSuffix,
+        getPath
+    };
+};

package/src/talons/CollectibleGameSets/collectibleGameSets.gql.js

@@ -0,0 +1,27 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+        }
+    }
+`;
+
+export const GET_COLLECTIBLE_GAME_QUERY = gql`
+    query getCollectibleGameSets($categoryUrlKey: String!) {
+        collectibleGameSets(categoryUrlKey: $categoryUrlKey) {
+            card_set
+            card_game
+            card_set_abbreviation
+            card_release_year
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getCollectibleGameQuery: GET_COLLECTIBLE_GAME_QUERY
+};

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -0,0 +1,65 @@
+import { useQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './collectibleGameSets.gql';
+
+export const useCollectibleGameSets = props => {
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getCollectibleGameQuery } = operations;
+    const { pathname } = useLocation();
+    const [
+        ,
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const slug = pathname.split('/').pop();
+    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
+    const categoryUrlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+
+    const { error, loading, data } = useQuery(getCollectibleGameQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !storeConfigData,
+        variables: {
+            categoryUrlKey
+        }
+    });
+
+    const isBackgroundLoading = !!data && loading;
+
+    const collectibleGameSets = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+        
+        const collectibleGameSets = data.collectibleGameSets;
+
+        if (!collectibleGameSets) {
+            return null;
+        }
+
+        return collectibleGameSets;
+    }, [data, categoryUrlKey]);
+
+    // Update the page indicator if the GraphQL query is in flight.
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    return {
+        error,
+        loading,
+        collectibleGameSets
+    };
+};

package/src/theme/vars.js

@@ -6,6 +6,7 @@ export const orange = '#F7C317';
 export const gray100 = '#B9AEC5';
 export const gray600 = '#1BA387';
 export const gray700 = '#999999';
+export const primary900 = "#292D32";
 
 export default {
     textPrimary,
@@ -16,4 +17,5 @@ export default {
     gray100,
     gray600,
     gray700,
+    primary900,
 }