Merge release/1.0.0-beta.4 into master

packages/api-client/README.md

@@ -0,0 +1,58 @@
+<img src="https://blog.vuestorefront.io/wp-content/uploads/2020/01/1QU9F6hQlFyHsJIbsdmt6FA.png" height="100px" />
+
+## Vue Storefront 2 integration with Magento (WIP)
+
+### @vue-storefront/magento-api
+
+This is only the **api-client** package, you need to install the other dependencies also.
+
+------
+This project is a Magento 2 integration for Vue Storefront 2.
+This integration is being developed by superheroes from [Cyberfuze](https://cyberfuze.com/), [Ecritel](https://www.ecritel.com/) and [Leonex](https://www.leonex.de/) ❤️
+
+## How to start if you want to try out the integration
+
+```
+yarn global add @vue-storefront/cli
+```
+```
+vsf init <project_name> && cd <project_name> && yarn && yarn dev
+```
+
+## How to start if you want to contribute?
+
+Want to contribute? Ping us on `magento2-vsf2` channel on [our Discord](https://discord.vuestorefront.io)!
+### Requirements:
+  - NodeJS v12 or later
+  - Magento v2.4 instance for GraphQL endpoint
+### Steps
+1. Fork the repo
+2. Clone your fork of the repo
+    ```
+    example:
+    git clone https://github.com/vuestorefront/magento2.git
+    cd magento2
+    ```
+3. Checkout develop branch `git checkout develop`
+4. Run `yarn` to install dependencies
+5. Copy .env.example and update GraphQL Endpoint
+    ```
+    cp packages/theme/.env.example .env
+    ```
+6. Update `MAGENTO_GRAPHQL=` with url to Magento 2.4 GrapgQL endpoint
+    ```
+    MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql
+    ```
+7. Build dependencies `yarn build:api-client && yarn build:composables`
+8. Run `yarn dev:theme` to run theme. You can find other commands in `package.json`
+- If you need HMR on Api Client/Composables run `yarn dev:api-client` or `yarn dev:composables` on a separate terminal window.
+
+## Resources
+
+- [Vue Storefront Documentation](https://docs.vuestorefront.io/v2/)
+- [Magento 2 integration Documentation (WIP)](https://docs.vuestorefront.io/magento)
+- [Community Chat](https://discord.vuestorefront.io)
+
+## Support
+
+If you have any questions about this integration we will be happy to answer them on  `magento2-vsf2` channel on [our Discord](discord.vuestorefront.io).

packages/api-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/magento-api",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "sideEffects": false,
   "license": "MIT",
   "server": "server/index.js",

packages/api-client/partial-types.js

@@ -24,11 +24,10 @@ fetch(process.env.MAGENTO_GRAPHQL, {
 })
   .then((result) => result.json())
   .then((result) => {
-    // here we're filtering out any type information unrelated to unions or interfaces
-    const filteredData = result.data.__schema.types.filter(
+  // here we're filtering out any type information unrelated to unions or interfaces
+    result.data.__schema.types = result.data.__schema.types.filter(
       (type) => type.possibleTypes !== null,
     );
-    result.data.__schema.types = filteredData;
     fs.writeFile('./src/types/fragmentTypes.json', JSON.stringify(result.data), (err) => {
       if (err) {
         console.error('Error writing fragmentTypes file', err);

packages/api-client/src/api/categoryList/index.ts

@@ -10,4 +10,5 @@ export default async (
   .query<CategoryListQuery, CategoryListQueryVariables>({
   query,
   variables: { ...params },
+  fetchPolicy: 'cache-first',
 });

packages/api-client/src/api/categorySearch/index.ts

@@ -0,0 +1,14 @@
+import { ApolloQueryResult } from 'apollo-client';
+import { CategorySearchQuery, CategorySearchQueryVariables } from '../../types/GraphQL';
+import query from './query.graphql';
+import { Context } from '../../types/context';
+
+export default async (
+  { client }: Context,
+  params: CategorySearchQueryVariables,
+): Promise<ApolloQueryResult<CategorySearchQuery>> => client
+  .query<CategorySearchQuery, CategorySearchQueryVariables>({
+  query,
+  variables: { ...params },
+  fetchPolicy: 'cache-first',
+});

packages/api-client/src/api/categorySearch/query.graphql

@@ -0,0 +1,9 @@
+#import "../../fragments/categoryDataFragment.graphql"
+#import "../../fragments/categoryUrlData.graphql"
+
+query categorySearch($filters: CategoryFilterInput) {
+  categoryList(filters: $filters) {
+    ...CategoryData
+    ...CategoryUrlData
+  }
+}

packages/api-client/src/api/createCustomer/mutation.graphql

@@ -1,7 +1,7 @@
 #import "../../fragments/customerFragment.graphql"
 
-mutation createCustomer($input: CustomerInput!) {
-  createCustomer(input: $input) {
+mutation createCustomer($input: CustomerCreateInput!) {
+  createCustomerV2(input: $input) {
     customer {
       ...CustomerData
     }

packages/api-client/src/api/index.ts

@@ -3,6 +3,7 @@ export { default as addSimpleProductsToCart } from './addSimpleProductsToCart';
 export { default as applyCouponToCart } from './applyCouponToCart';
 export { default as cart } from './cart';
 export { default as categoryList } from './categoryList';
+export { default as categorySearch } from './categorySearch';
 export { default as changeCustomerPassword } from './changeCustomerPassword';
 export { default as cmsPage } from './cmsPage';
 export { default as configurableProductDetail } from './configurableProductDetail';

packages/api-client/src/index.ts

@@ -517,4 +517,6 @@ export {
   RelatedProductQueryVariables,
   UpsellProductsQuery,
   UpsellProductsQueryVariables,
+  CategorySearchQuery,
+  CategorySearchQueryVariables,
 } from './types/GraphQL';

packages/api-client/src/types/API.ts

@@ -16,7 +16,7 @@ import {
   CartItemInterface,
   CartQuery,
   CategoryFilterInput,
-  CategoryListQuery, CategoryListQueryVariables,
+  CategoryListQuery, CategoryListQueryVariables, CategorySearchQuery, CategorySearchQueryVariables,
   CategoryTree,
   CmsPage,
   CmsPageQuery,
@@ -110,6 +110,11 @@ export type GetProductSearchParams = {
   sort?: ProductAttributeSortInput;
 };
 
+export enum MagentoCustomerGender {
+  Male = 1,
+  Female = 2,
+}
+
 export interface MagentoApiMethods {
   addConfigurableProductsToCart(input: AddConfigurableProductsToCartInput): Promise<FetchResult<AddConfigurableProductsToCartMutation>>;
 
@@ -121,6 +126,8 @@ export interface MagentoApiMethods {
 
   categoryList(categoryFilter?: CategoryListQueryVariables): Promise<ApolloQueryResult<CategoryListQuery>>;
 
+  categorySearch(categoryFilter?: CategorySearchQueryVariables): Promise<ApolloQueryResult<CategorySearchQuery>>;
+
   changeCustomerPassword(currentPassword: string, newPassword: string): Promise<CustomerFragment>;
 
   cmsPage(indentifier: string): Promise<ApolloQueryResult<CmsPageQuery>>;

packages/api-client/src/types/GraphQL.ts

@@ -6828,6 +6828,16 @@ export type CategoryListQuery = { categories?: Maybe<{ items?: Maybe<Array<Maybe
       )>>> }
     )>>> }> };
 
+export type CategorySearchQueryVariables = Exact<{
+  filters?: Maybe<CategoryFilterInput>;
+}>;
+
+
+export type CategorySearchQuery = { categoryList?: Maybe<Array<Maybe<(
+    CategoryDataFragment
+    & CategoryUrlDataFragment
+  )>>> };
+
 export type ChangeCustomerPasswordMutationVariables = Exact<{
   currentPassword: Scalars['String'];
   newPassword: Scalars['String'];

packages/composables/README.md

@@ -0,0 +1,53 @@
+<img src="https://blog.vuestorefront.io/wp-content/uploads/2020/01/1QU9F6hQlFyHsJIbsdmt6FA.png" height="100px" />
+
+## Vue Storefront 2 integration with Magento (WIP)
+
+This project is a Magento 2 integration for Vue Storefront 2.
+This integration is being developed by superheroes from [Cyberfuze](https://cyberfuze.com/), [Ecritel](https://www.ecritel.com/) and [Leonex](https://www.leonex.de/) ❤️
+
+## How to start if you want to try out the integration
+
+```
+yarn global add @vue-storefront/cli
+```
+```
+vsf init <project_name> && cd <project_name> && yarn && yarn dev
+```
+
+## How to start if you want to contribute?
+
+Want to contribute? Ping us on `magento2-vsf2` channel on [our Discord](https://discord.vuestorefront.io)!
+### Requirements:
+  - NodeJS v12 or later
+  - Magento v2.4 instance for GraphQL endpoint
+### Steps
+1. Fork the repo
+2. Clone your fork of the repo
+    ```
+    example:
+    git clone https://github.com/vuestorefront/magento2.git
+    cd magento2
+    ```
+3. Checkout develop branch `git checkout develop`
+4. Run `yarn` to install dependencies
+5. Copy .env.example and update GraphQL Endpoint
+    ```
+    cp packages/theme/.env.example .env
+    ```
+6. Update `MAGENTO_GRAPHQL=` with url to Magento 2.4 GrapgQL endpoint
+    ```
+    MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql
+    ```
+7. Build dependencies `yarn build:api-client && yarn build:composables`
+8. Run `yarn dev:theme` to run theme. You can find other commands in `package.json`
+- If you need HMR on Api Client/Composables run `yarn dev:api-client` or `yarn dev:composables` on a separate terminal window.
+
+## Resources
+
+- [Vue Storefront Documentation](https://docs.vuestorefront.io/v2/)
+- [Magento 2 integration Documentation (WIP)](https://docs.vuestorefront.io/magento)
+- [Community Chat](https://discord.vuestorefront.io)
+
+## Support
+
+If you have any questions about this integration we will be happy to answer them on  `magento2-vsf2` channel on [our Discord](discord.vuestorefront.io).

packages/composables/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/magento",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "license": "MIT",
   "sideEffects": false,
   "main": "lib/index.cjs.js",
@@ -24,7 +24,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@vue-storefront/magento-api": "^1.0.0-beta.2",
+    "@vue-storefront/magento-api": "^1.0.0-beta.4",
     "@vue-storefront/core": "^2.3.1",
     "vue": "^2.6.x"
   },

packages/composables/src/composables/useCategorySearch/index.ts

@@ -0,0 +1,16 @@
+import {
+  Context,
+} from '@vue-storefront/core';
+import { Category } from '@vue-storefront/magento-api';
+import { UseCategorySearchFactory, useCategorySearchFactory } from '../../factories/useCategorySearchFactory';
+
+const factoryParams: UseCategorySearchFactory<Category> = {
+  search: async (context: Context, params): Promise<Category[]> => {
+    // @ts-ignore
+    const { data } = await context.$magento.api.categorySearch({ filters: { name: { match: `${params.term}` } } });
+
+    return data.categoryList;
+  },
+};
+
+export default useCategorySearchFactory<Category>(factoryParams);

packages/composables/src/composables/useFacet/index.ts

@@ -64,12 +64,10 @@ const factoryParams = {
   search: async (context: Context, params: FacetSearchResult<any>) => {
     const itemsPerPage = (params.input.itemsPerPage) ? params.input.itemsPerPage : 20;
     const inputFilters = (params.input.filters) ? params.input.filters : {};
-
+    const categoryId = (params.input.categoryId) ? { category_uid: { eq: params.input.categoryId } } : {};
     const productParams: ProductsSearchParams = {
       filter: {
-        category_uid: {
-          eq: params.input.categoryId,
-        },
+        ...categoryId,
         ...constructFilterObject({
           ...inputFilters,
         }),

packages/composables/src/composables/useProduct/index.ts

@@ -18,9 +18,15 @@ const factoryParams: UseProductFactoryParams<ProductsListQuery['products'], Prod
     const { queryType, ...searchParams } = params;
     switch (queryType) {
       case ProductsQueryType.Detail:
-        const productDetailsResults = await context.$magento.api.productDetail(searchParams as GetProductSearchParams);
-        const upsellProduct = await context.$magento.api.upsellProduct(searchParams as GetProductSearchParams);
-        const relatedProduct = await context.$magento.api.relatedProduct(searchParams as GetProductSearchParams);
+        const [
+          productDetailsResults,
+          upsellProduct,
+          relatedProduct,
+        ] = await Promise.all([
+          context.$magento.api.productDetail(searchParams as GetProductSearchParams),
+          context.$magento.api.upsellProduct(searchParams as GetProductSearchParams),
+          context.$magento.api.relatedProduct(searchParams as GetProductSearchParams),
+        ]);
 
         productDetailsResults.data.products.items[0] = {
           ...productDetailsResults.data.products.items[0],

packages/composables/src/composables/useUser/index.ts

@@ -3,6 +3,35 @@ import { useUserFactory, UseUserFactoryParams, Context } from '@vue-storefront/c
 import { CustomerUpdateParameters } from '@vue-storefront/magento-api';
 import { RegisterUserParams, UpdateUserParams, User } from '../../types';
 
+const generateUserData = (userData): CustomerUpdateParameters => {
+  const baseData = {
+    email: userData.email,
+    firstname: userData.firstName,
+    lastname: userData.lastName,
+  } as CustomerUpdateParameters;
+
+  if (userData.dateOfBirth) {
+    baseData.date_of_birth = userData.dateOfBirth;
+  }
+  if (userData.gender) {
+    baseData.gender = userData.gender;
+  }
+  if (userData.taxvat) {
+    baseData.taxvat = userData.taxvat;
+  }
+  if (userData.prefix) {
+    baseData.prefix = userData.prefix;
+  }
+  if (userData.suffix) {
+    baseData.suffix = userData.suffix;
+  }
+  if (userData.password) {
+    baseData.password = userData.password;
+  }
+
+  return baseData;
+};
+
 const factoryParams: UseUserFactoryParams<User, any, any> = {
   load: async (context: Context, parameters) => {
     const apiState = context.$magento.config.state;
@@ -30,20 +59,12 @@ const factoryParams: UseUserFactoryParams<User, any, any> = {
     apiState.setCustomerToken(null);
     apiState.setCartId(null);
   },
-  updateUser: async (context: Context, { updatedUserData }) => await context.$magento.api.updateCustomer({
-    email: updatedUserData.email,
-    firstname: updatedUserData.firstName,
-    lastname: updatedUserData.lastName,
-  } as CustomerUpdateParameters),
-  register: async (context: Context, {
-    email, password, firstName, lastName,
-  }) => {
-    await context.$magento.api.createCustomer({
-      email,
-      firstname: firstName,
-      lastname: lastName,
-      password,
-    } as CustomerUpdateParameters);
+  updateUser: async (context: Context, { updatedUserData }) => context.$magento.api.updateCustomer(generateUserData(updatedUserData)),
+  register: async (context: Context, registerParams) => {
+    const { email, password, ...baseData } = generateUserData(registerParams);
+
+    await context.$magento.api.createCustomer({ email, password, ...baseData });
+
     return factoryParams.logIn(context, { username: email, password });
   },
   logIn: async (context: Context, { username, password }) => {
@@ -64,7 +85,7 @@ const factoryParams: UseUserFactoryParams<User, any, any> = {
     return factoryParams.load(context, { username, password });
   },
   changePassword: async function changePassword(context: Context, { currentPassword, newPassword }) {
-    return await context.$magento.api.changeCustomerPassword(currentPassword, newPassword);
+    return context.$magento.api.changeCustomerPassword(currentPassword, newPassword);
   },
 };