My Account - Create wishlist UI

packages/peregrine/lib/talons/WishlistPage/useCreateWishlist.js

@@ -0,0 +1,47 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * @function
+ *
+ * @returns {CreateWishListProps}
+ */
+export const useCreateWishlist = () => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const showModal = useCallback(() => {
+        setIsModalOpen(true);
+    }, []);
+
+    const hideModal = useCallback(() => {
+        setIsModalOpen(false);
+    }, []);
+
+    const createList = useCallback(data => {
+        // TODO create list mutation is not available yet
+        // Will be handled in PWA-989
+        console.log('Creating wish list with data: ', data);
+        setIsModalOpen(false);
+    }, []);
+
+    return {
+        createList,
+        isModalOpen,
+        hideModal,
+        showModal
+    };
+};
+
+/**
+ * JSDoc type definitions
+ */
+
+/**
+ * Props data to use when rendering the Create Wishlist component.
+ *
+ * @typedef {Object} CreateWishListProps
+ *
+ * @property {Function} createList Callback to be called while creating new list
+ * @property {Boolean} isModalOpen Boolean which represents if the create modal is open or not
+ * @property {Function} hideModal Callback to hide the create modal by modifying the value of isModalOpen
+ * @property {Function} showModal Callback to show the create modal by modifying the value of isModalOpen
+ */

packages/peregrine/lib/talons/WishlistPage/useWishlist.js

@@ -1,5 +1,10 @@
 import { useCallback, useState } from 'react';
 
+/**
+ * @function
+ *
+ * @returns {WishListProps}
+ */
 export const useWishlist = () => {
     const [isOpen, setIsOpen] = useState(true);
 
@@ -17,3 +22,17 @@ export const useWishlist = () => {
         isOpen
     };
 };
+
+/**
+ * JSDoc type definitions
+ */
+
+/**
+ * Props data to use when rendering the Wishlist component.
+ *
+ * @typedef {Object} WishListProps
+ *
+ * @property {Function} handleActionMenuClick Callback to handle action menu clicks
+ * @property {Function} handleContentToggle Callback to handle list expand toggle
+ * @property {Boolean} isOpen Boolean which represents if the content is expanded or not
+ */

packages/peregrine/lib/talons/WishlistPage/useWishlistItem.js

@@ -3,6 +3,15 @@ import { useMutation } from '@apollo/client';
 
 import { useCartContext } from '../../context/cart';
 
+/**
+ * @function
+ *
+ * @param {String} props.childSku SKU of the child item
+ * @param {WishlistItemMutations} props.mutations GraphQL mutations for the Wishlist Item component
+ * @param {String} props.sku SKU of the item
+ *
+ * @returns {WishlistItemProps}
+ */
 export const useWishlistItem = props => {
     const { childSku, mutations, sku } = props;
     const { addWishlistItemToCartMutation } = mutations;
@@ -53,3 +62,29 @@ export const useWishlistItem = props => {
         isLoading: loading
     };
 };
+
+/**
+ * JSDoc type definitions
+ */
+
+/**
+ * GraphQL mutations for the Wishlist Item component
+ *
+ * @typedef {Object} WishlistItemMutations
+ *
+ * @property {GraphQLAST} addWishlistItemToCartMutation Mutation to add item to the cart
+ *
+ * @see [`wishlistItem.gql.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/WishlistPage/wishlistItem.gql.js}
+ * for queries used in Venia
+ */
+
+/**
+ * Props data to use when rendering the Wishlist Item component
+ *
+ * @typedef {Object} WishlistItemProps
+ *
+ * @property {Function} handleAddToCart Callback to handle item addition to cart
+ * @property {Function} handleMoreActions Callback to handle more actions
+ * @property {Boolean} hasError Boolean which represents if there were errors during the mutation
+ * @property {Boolean} isLoading Boolean which represents if data is loading
+ */

packages/peregrine/lib/talons/WishlistPage/useWishlistPage.js

@@ -5,6 +5,14 @@ import { useQuery } from '@apollo/client';
 import { useUserContext } from '../../context/user';
 import { useTypePolicies } from '../../hooks/useTypePolicies';
 
+/**
+ * @function
+ *
+ * @param {WishlistQueries} props.queries Wishlist Page queries
+ * @param {WishlistTypes} props.types Wishlist Page GQL types
+ *
+ * @returns {WishlistPageProps}
+ */
 export const useWishlistPage = props => {
     const { queries, types } = props;
     const { getCustomerWishlistQuery } = queries;
@@ -39,3 +47,38 @@ export const useWishlistPage = props => {
         wishlists: derivedWishlists
     };
 };
+
+/**
+ * JSDoc type definitions
+ */
+
+/**
+ * GraphQL mutations for the Wishlist Page
+ *
+ * @typedef {Object} WishlistQueries
+ *
+ * @property {GraphQLAST} getCustomerWishlistQuery Query to get customer wish lists
+ *
+ * @see [`wishlistPage.gql.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/WishlistPage/wishlistPage.gql.js}
+ * for queries used in Venia
+ */
+
+/**
+ * GraphQL types for the Wishlist Page
+ *
+ * @typedef {Object} WishlistTypes
+ *
+ * @property {Function} Customer.fields.wishlists.read
+ *
+ * @see [`wishlistPage.gql.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/WishlistPage/wishlistPage.gql.js}
+ * for queries used in Venia
+ */
+
+/**
+ * Props data to use when rendering the Wishlist Item component
+ *
+ * @typedef {Object} WishlistPageProps
+ *
+ * @property {Map} errors A map of all the GQL query errors
+ * @property {Object} wishlists List of all customer wishlists
+ */

packages/venia-ui/lib/components/Dialog/dialog.css

@@ -141,6 +141,10 @@
     composes: root_highPriority from '../Button/button.css';
 }
 
+.cancelButton {
+    composes: root_lowPriority from '../Button/button.css';
+}
+
 /*
  * Mobile-specific styles.
  *

packages/venia-ui/lib/components/Dialog/dialog.js

@@ -57,6 +57,9 @@ const Dialog = props => {
     const confirmButtonDisabled =
         shouldDisableAllButtons || shouldDisableConfirmButton;
 
+    const cancelButtonClasses = {
+        root_lowPriority: classes.cancelButton
+    };
     const confirmButtonClasses = {
         root_highPriority: classes.confirmButton
     };
@@ -97,6 +100,7 @@ const Dialog = props => {
                             <div className={classes.contents}>{children}</div>
                             <div className={classes.buttons}>
                                 <Button
+                                    classes={cancelButtonClasses}
                                     disabled={shouldDisableAllButtons}
                                     onClick={onCancel}
                                     priority="low"