[PWA-178] Gift options support in cart page

packages/graphql-cli-validate-magento-pwa-queries/lib/__tests__/index.spec.js

@@ -2,9 +2,11 @@ const plugin = require('../index');
 
 const fs = require('fs');
 const eslint = require('eslint');
+const glob = require('glob');
 
 jest.mock('fs');
 jest.mock('eslint');
+jest.mock('glob');
 
 test('it exports the correct command name', () => {
     expect(plugin.command).toBe('validate-magento-pwa-queries');
@@ -56,7 +58,8 @@ describe('handler', () => {
                     extensions: {
                         'validate-magento-pwa-queries': {
                             clients: ['apollo', 'literal'],
-                            filesGlob: '*.graphql'
+                            filesGlob: '*.graphql',
+                            ignore: ['*.js']
                         }
                     },
                     schemaPath: 'unit test'
@@ -75,6 +78,7 @@ describe('handler', () => {
     let mockConsoleLog;
     let mockConsoleWarn;
     let mockProcessExit;
+    let globSyncSpy;
 
     beforeAll(() => {
         const noop = () => {};
@@ -91,6 +95,9 @@ describe('handler', () => {
             resolveFileGlobPatterns: jest.fn()
         }));
 
+        globSyncSpy = jest.spyOn(glob, 'sync');
+        globSyncSpy.mockImplementation(() => []);
+
         // For happy paths, mock the file existing.
         existsSyncSpy = jest.spyOn(fs, 'existsSync');
         existsSyncSpy.mockImplementation(() => true);

packages/graphql-cli-validate-magento-pwa-queries/lib/index.js

@@ -6,6 +6,7 @@ const chalk = require('chalk');
 const eslint = require('eslint');
 const fs = require('fs');
 const semver = require('semver');
+const glob = require('glob');
 
 let compatibilityDefinitions;
 try {
@@ -51,7 +52,13 @@ async function validateQueries(context, argv) {
 
         // Get the clients and filesGlob arguments from the .graphqlconfig.
         const configArgs = extensions[plugin.COMMAND];
-        const { clients, filesGlob } = configArgs;
+        const { clients, filesGlob, ignore } = configArgs;
+
+        /**
+         * List of files to run query validation on ignoring
+         * files mentioned in the .graphqlconfig file.
+         */
+        const files = glob.sync(filesGlob, { ignore });
 
         // Ensure the schema exists.
         context.spinner.start('Locating schema...');
@@ -68,7 +75,7 @@ async function validateQueries(context, argv) {
         // Validate our queries against that schema.
         context.spinner.start('Finding queries in files...');
         const validator = getValidator({ clients, project, schemaPath });
-        const queryFiles = validator.resolveFileGlobPatterns([filesGlob]);
+        const queryFiles = validator.resolveFileGlobPatterns(files);
         context.spinner.succeed();
 
         context.spinner.start(

packages/graphql-cli-validate-magento-pwa-queries/package.json

@@ -28,6 +28,7 @@
     "semver": "~5.6.0"
   },
   "devDependencies": {
+    "glob": "~7.1.6",
     "graphql-cli": "^3",
     "rimraf": "~2.6.3"
   },

packages/peregrine/lib/talons/CartPage/GiftOptions/useGiftOptions.js

@@ -0,0 +1,131 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import throttle from 'lodash.throttle';
+import { useMutation, useLazyQuery } from '@apollo/react-hooks';
+
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+
+const useGiftOptions = props => {
+    const { getGiftOptionsQuery, saveGiftOptionsQuery } = props;
+    /**
+     * Using local state instead of awaiting data from mutation to avoid
+     * weird UX issues generated due to network latency.
+     */
+    const [includeGiftReceipt, setIncludeGiftReceipt] = useState(false);
+    const [includePrintedCard, setIncludePrintedCard] = useState(false);
+    const [giftMessage, setGiftMessage] = useState('');
+
+    const [{ cartId }] = useCartContext();
+
+    const [fetchGiftOptions, { data }] = useLazyQuery(getGiftOptionsQuery, {
+        fetchPolicy: 'no-cache'
+    });
+
+    /**
+     * Fetch gift options for a given cart id.
+     */
+    useEffect(() => {
+        if (cartId) {
+            fetchGiftOptions({
+                variables: {
+                    cart_id: cartId
+                }
+            });
+        }
+    }, [cartId, fetchGiftOptions]);
+
+    const [setGiftOptions] = useMutation(saveGiftOptionsQuery);
+
+    const updateGiftOptions = useCallback(
+        optionsToUpdate => {
+            const newGiftOptions = {
+                cart_id: cartId,
+                include_gift_receipt: includeGiftReceipt,
+                include_printed_card: includePrintedCard,
+                gift_message: giftMessage,
+                ...optionsToUpdate
+            };
+            setGiftOptions({
+                variables: newGiftOptions
+            });
+        },
+        [
+            setGiftOptions,
+            cartId,
+            includeGiftReceipt,
+            includePrintedCard,
+            giftMessage
+        ]
+    );
+
+    /**
+     * Throttling message update. Only make 1 mutation
+     * every 1 second. This is to save on bandwidth.
+     *
+     * More info: https://lodash.com/docs/4.17.15#throttle
+     */
+    const throttledMessageUpdate = useMemo(() => {
+        return throttle(
+            (updateGiftOptions, newGiftMessage) => {
+                updateGiftOptions({
+                    gift_message: newGiftMessage
+                });
+            },
+            1000,
+            {
+                leading: false
+            }
+        );
+    }, []);
+
+    const updateGiftMessage = useCallback(
+        e => {
+            const newGiftMessage = e.target.value;
+            setGiftMessage(newGiftMessage);
+            throttledMessageUpdate(updateGiftOptions, newGiftMessage);
+        },
+        [setGiftMessage, throttledMessageUpdate, updateGiftOptions]
+    );
+
+    const toggleIncludeGiftReceiptFlag = useCallback(() => {
+        setIncludeGiftReceipt(!includeGiftReceipt);
+        updateGiftOptions({
+            include_gift_receipt: !includeGiftReceipt
+        });
+    }, [updateGiftOptions, includeGiftReceipt, setIncludeGiftReceipt]);
+
+    const toggleIncludePrintedCardFlag = useCallback(() => {
+        setIncludePrintedCard(!includePrintedCard);
+        updateGiftOptions({
+            include_printed_card: !includePrintedCard
+        });
+    }, [updateGiftOptions, includePrintedCard, setIncludePrintedCard]);
+
+    /**
+     * Once data is available from the query request, update
+     * the respective values.
+     */
+    useEffect(() => {
+        if (data) {
+            const {
+                include_gift_receipt,
+                include_printed_card,
+                gift_message
+            } = data.gift_options;
+
+            setIncludeGiftReceipt(include_gift_receipt);
+            setIncludePrintedCard(include_printed_card);
+            setGiftMessage(gift_message);
+        }
+    }, [setIncludeGiftReceipt, setIncludePrintedCard, data]);
+
+    return {
+        includeGiftReceipt,
+        includePrintedCard,
+        giftMessage,
+        toggleIncludeGiftReceiptFlag,
+        toggleIncludePrintedCardFlag,
+        updateGiftMessage
+    };
+};
+
+export default useGiftOptions;

packages/venia-concept/.graphqlconfig

@@ -7,8 +7,14 @@
                     "default": "${env:MAGENTO_BACKEND_URL}/graphql"
                 },
                 "validate-magento-pwa-queries": {
-                    "clients": ["apollo", "literal"],
-                    "filesGlob": "../{venia-ui,venia-concept}/{lib,src}/**/*.{js,graphql,gql}"
+                    "clients": [
+                        "apollo",
+                        "literal"
+                    ],
+                    "filesGlob": "../{venia-ui,venia-concept}/{lib,src}/**/*.{js,graphql,gql}",
+                    "ignore": [
+                        "../venia-ui/lib/**/giftOptions.js"
+                    ]
                 }
             }
         }

packages/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/__tests__/__snapshots__/giftOptions.spec.js.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders gift options in venia cart page 1`] = `
+<div>
+  <ul>
+    <label
+      htmlFor="includeGiftReceipt"
+    >
+      <span>
+        <span>
+          <svg
+            fill="none"
+            height={18}
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width={18}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <polyline
+              points="20 6 9 17 4 12"
+            />
+          </svg>
+        </span>
+      </span>
+      <input
+        checked={true}
+        id="includeGiftReceipt"
+        name="includeGiftReceipt"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        type="checkbox"
+      />
+      <span>
+        Include gift receipt
+      </span>
+    </label>
+    <p />
+  </ul>
+  <ul>
+    <label
+      htmlFor="includePrintedCard"
+    >
+      <span />
+      <input
+        checked={false}
+        id="includePrintedCard"
+        name="includePrintedCard"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        type="checkbox"
+      />
+      <span>
+        Include printed card
+      </span>
+    </label>
+    <p />
+  </ul>
+  <ul />
+</div>
+`;

packages/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/__tests__/giftOptions.spec.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import GiftOptions from '../giftOptions';
+
+jest.mock('@magento/peregrine/lib/context/cart', () => {
+    const state = { cartId: 'fakeCartId' };
+    const api = {};
+    const useCartContext = jest.fn(() => [state, api]);
+
+    return { useCartContext };
+});
+
+jest.mock('@apollo/react-hooks', () => {
+    const runQuery = jest.fn();
+    const queryResult = {
+        data: {
+            gift_options: {
+                include_gift_receipt: true,
+                include_printed_card: false,
+                gift_message: 'Sample Message'
+            }
+        },
+        error: null,
+        loading: false
+    };
+
+    const useLazyQuery = jest.fn(() => [runQuery, queryResult]);
+
+    const useMutation = jest.fn(() => [() => {}]);
+
+    return { useLazyQuery, useMutation };
+});
+
+test('it renders gift options in venia cart page', () => {
+    const instance = createTestInstance(<GiftOptions />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});

packages/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/giftOptions.css

@@ -0,0 +1,6 @@
+.root {
+}
+
+.option {
+    padding: 0.5rem 0rem;
+}