Merge pull request #38 from vuestorefront-community/dev

chore: release version 1.4.0

Author: odranoelBR

docs/.vuepress/config.js

@@ -60,7 +60,7 @@ module.exports = {
         children: [
           ['/', 'Introduction'],
           '/essentials/configuration',
-          '/essentials/feature_list',
+          '/essentials/customQueries',
           '/essentials/payment',
           '/essentials/maintainers'
         ]
@@ -85,9 +85,18 @@ module.exports = {
         ]
       },
       {
+        title: 'Tips',
+        collapsable: true,
+        children: [
+          ['/tips/customTypes', 'Custom types'],
+          ['/tips/i18n', 'i18n'],
+        ]
+      },{
         title: 'Reference',
         children: [
-          ['/api-reference/', 'API Reference'],
+          ['/api/featureList', 'Feature List'],
+          ['/api/apiList', 'Api List'],
+          
         ]
       },
     ],

docs/api/list.md docs/api/apiList.md

@@ -23,6 +23,9 @@ export interface OdooApiMethods {
   sendResetPassword(params: GraphQlSendResetPasswordParams, customQuery?: CustomQuery): Promise<FetchResult<DefaultGraphQlMutationResponse>>;
   changePassword(params: GraphQlResetPasswordParams, customQuery?: CustomQuery): Promise<FetchResult<DefaultGraphQlMutationResponse>>;
 
+  cartAddMultipleItems(params: GraphQlAddMultipleProductsParams, customQuery?: CustomQuery): Promise<FetchResult<cartAddMultipleItemsResult>>;
+  cartRemoveMultipleItems(params: GraphQlRemoveMultipleProductsParams, customQuery?: CustomQuery): Promise<FetchResult<cartRemoveMultipleItemsResult>>;
+
   cartLoad(customQuery?: CustomQuery): Promise<FetchResult<CartLoadResult>>;
   cartAddItem(params: GraphQlCartAddItemParams, customQuery?: CustomQuery): Promise<FetchResult<CartAddItemResult>>;
   cartRemoveItem(params: GraphQlCartRemoveItemParams, customQuery?: CustomQuery): Promise<FetchResult<CartRemoveItemResult>>;
@@ -50,6 +53,8 @@ export interface OdooApiMethods {
   paymentMakeExternal(params: GraphQlMakePaymentParams, customQuery?: CustomQuery): Promise<FetchResult<PaymentMakeExternalResult>>;
   paymentConfirmation(customQuery?: CustomQuery): Promise<FetchResult>;
 
+  subscribeNewsLetter(customQuery?: CustomQuery): Promise<FetchResult>;
+
   ordersGet(params: GraphQlOrdersParams, customQuery?: CustomQuery): Promise<FetchResult<OrdersResponse>>;
 }
 

docs/essentials/feature_list.md docs/api/featureList.md

@@ -5,9 +5,17 @@ From [VSF2 docs](https://docs.vuestorefront.io/v2/advanced/extending-graphql-que
 we can use custom query on existing APIS.
 Most of the apis use 'customQuery' index.
 ### Use Cart
+``` ts
+  const { load: loadCart, cart } = useCart();
 
+  await loadCart({ customQuery: { cartLoad: 'customCartLoad' } });
+```
 ### Use Category
+``` ts
+  const { categories, search: searchCategories } = useCategory();
 
+  await loadCart({ pageSize: 100, customQuery: { getCategory: 'customGetCategory' } });
+```
 ### Use CountrySearch
 
 ### Use Facet

docs/composables/customQueries.md

@@ -24,6 +24,7 @@ type Order = {
   amountDelivery: number;
   currency: Currency;
   orderLines?: OrderLine[];
+  websiteOrderLine?: OrderLine[];
   stage: OrderStage;
   orderUrl: string;
   transactions: PaymentTransaction[];

docs/composables/useCart.md

@@ -9,10 +9,15 @@
 
 ```ts
 type FacetSearchResult = {
-  categories: Category[]
-  products: Product[]
-  attributes: Attribute[]
-  totalProducts: number
+  minPrice: number;
+  maxPrice: number;
+  products: Product[];
+  categories: Category[];
+  facets: Record<string, string>;
+  totalProducts: number;
+  perPageOptions: number;
+  itemsPerPage: number;
+  attributes: AttributeValue[];
 }
 ```
 

docs/composables/useFacet.md

@@ -21,6 +21,7 @@ type Order = {
   amountDelivery: number;
   currency: Currency;
   orderLines?: OrderLine[];
+  websiteOrderLine?: OrderLine[];
   stage: OrderStage;
   orderUrl: string;
   transactions: PaymentTransaction[];

docs/composables/useOrder.md

@@ -13,26 +13,30 @@ type Product = {
   displayName?: string;
   slug?: string;
   isInStock?: boolean;
-  qty: number;
-  sku: string;
-  image: string;
-  variantImage: string;
-  smallImage: string;
-  mediaGallery: ProductImage[];
-  price: number;
-  weight: number;
-  priceAfterDiscount: number;
-  hasDiscountedPrice: number;
-  listPrice: number;
+  qty?: number;
+  sku?: string;
+  image?: string;
+  variantImage?: string;
+  smallImage?: string;
+  mediaGallery?: ProductImage[];
+  price?: number;
+  weight?: number;
+  priceAfterDiscount?: number;
+  hasDiscountedPrice?: number;
+  listPrice?: number;
   realProduct?: ProductVariant;
-  firstVariant: number;
-  currency: Currency;
-  isInWishlist: boolean;
+  firstVariant?: number;
+  currency?: Currency;
+  isInWishlist?: boolean;
   alternativeProducts?: Product[];
+  productVariants?: Product[]
   accessoryProducts?: Product[];
-  attributeValues: Attribute[];
+  attributeValues?: AttributeValue[];
   productTemplate?: Product;
-  categories: Category[];
+  categories?: Category[];
+  seoTitle?: string;
+  seoDescription?: string;
+  imageWebp?: string;
 }
 ```
 

docs/composables/useProduct.md

@@ -2,9 +2,27 @@
 **UseShipping** composable can be used to:
 
 - Search available shipping methods
-- load the shipping method and shipping address choosed for current cart
+- Load the shipping method and shipping address choosed for **current cart**
+- Save the shippingAddress ( update if has an id in params / add if doesn't have id)
 
 ## API
+The **UseShipping** VSF Core Interface
+```ts
+  error: ComputedProperty<UseShippingErrors>;
+  loading: ComputedProperty<boolean>;
+  shipping: ComputedProperty<Address>;
+  load(params: {
+        customQuery?: CustomQuery;
+    }): Promise<void>;
+  save: (params: {
+        params: GraphQlUpdateAddressParams;
+        shippingDetails: Address;
+        customQuery?: CustomQuery;
+  }) => Promise<void>;
+
+```
+
+### Types
 An **Address** (Partner) in odoo
 ```ts
 type Address = {
@@ -24,6 +42,23 @@ type Address = {
   password?: string;
 }
 
+type GraphQlUpdateAddressParams = {
+  id: number;
+  name: string
+  street: string
+  street2?: string
+  zip: string
+  city: string
+  stateId: number
+  countryId: number
+  phone: string
+  email?: string
+};
+
+interface UseShippingErrors {
+    load: Error;
+    save: Error;
+}
 ```
 
 ## Example

docs/composables/useShipping.md

@@ -6,7 +6,7 @@ Want to try out the integration on your local machine? Check out our explanatory
 <iframe width="100%" height="669" src="https://www.youtube.com/watch?v=FQMcbncdX_g&t=179s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
 
 ## Middleware
-Odoo use graphql and jsonrpc calls 
+Odoo use graphql
 - graphqlBaseUrl for **graphql**
 
 
@@ -50,4 +50,33 @@ export BASE_URL=https://vsf.odoo.com/
 export REDIS_HOST=<redis_host>
 export REDIS_PORT=<redis_port>
 # export REDIS_PASSWORD=<redis_password>
-```
+```
+
+## Image handle
+Always use the **getImage** method!
+
+#### WHY ? 
+- He is build to fetch from correct baseURL (CDN for production / odoo others)
+- He is already injected in vue
+
+#### HOW ?
+
+```ts
+   // from template
+   $image(productGetters.getCoverImage(product))
+   $image( image url )
+
+   // from setup
+   { url: root.$image(img.small) }
+
+
+```
+
+#### Assets
+The assets folder on build stagging / prod will be sent to CDN with some hash.
+
+To nuxt compile the assets links with the rigth use require.
+
+```ts
+  :placeholder="require('~/assets/images/product/product_placeholder.png')"
+```  

docs/essentials/configuration.md

@@ -0,0 +1,52 @@
+# Custom queries
+
+## Introduction
+Following the [Extending GraphQL Queries](https://docs.vuestorefront.io/v2/composition/extending-graphql-queries.html)
+,we can override the base queries from odoo to our custom queries.
+
+
+
+
+#### <span style="color:#4f56d6">Import the customQueries file to middleware</span>
+
+```js
+// middleware.config.js
+const customQueries = require('./custom-project-api/customQueries');
+
+module.exports = {
+  integrations: {
+    odoo: {
+      location: '@vue-storefront/odoo-api/server',
+      configuration: {
+        odooBaseUrl,
+        graphqlBaseUrl
+      },
+      customQueries
+    }
+  }
+};
+
+```
+
+#### <span style="color:#4f56d6">Custom queries file must follow</span>
+
+```js
+// custom-project-api/customQueries.js
+
+module.exports = {
+  customGetProduct: ({variables}) => ({
+    varialbes,
+    query: gql`
+      query { 
+        product {
+          id
+          name
+        } 
+      }
+    `,
+    variables
+  }),
+
+```
+
+#### <span style="color:#4f56d6">Reload application and pass the custom query on the composable search method</span>

docs/essentials/customQueries.md

@@ -0,0 +1,24 @@
+# Custom types
+If the project need a custom type, try to extend the base type.
+
+### Odoo Convetion
+- <span style="color:#4f56d6"> projectName + type</span>
+
+
+```js
+import { Product, Category } from '@vue-storefront/odoo-api';
+
+// Project name = BlueBrothers
+
+export interface BlueBrothersProduct extends Product {
+    strangeLabel?: string,
+    acessories?: Accessory[]
+    ...
+}
+
+export interface BlueBrothersCategory extends Category {
+    subCategory?: BlueBrothersCategory
+    ...
+}
+
+```

docs/tips/customTypes.md

@@ -0,0 +1,15 @@
+# i18n
+Always register the string on en.json or other language files whhen you
+use $t(''). WHY ?
+
+
+- Don't pollute the console of browser
+- Speed up the building process
+- Speed up the CI building process
+
+### Tools to automate / speed up 
+
+- [i18n Manager](https://www.electronjs.org/apps/i18n-manager)
+- [VsCode Ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)
+
+

docs/tips/i18n.md

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/odoo-api",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": false,
   "sideEffects": false,
   "server": "server/index.js",
@@ -17,7 +17,7 @@
     "update:update": "ncu -u"
   },
   "dependencies": {
-    "@vue-storefront/core": "2.5.4",
+    "@vue-storefront/core": "2.5.6",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",

packages/api-client/package.json

@@ -0,0 +1,7 @@
+import gql from 'graphql-tag';
+export default gql`
+  mutation($promo: String!){
+    applyCoupon(promo: $promo){
+      applied
+    }
+  }`;

packages/api-client/src/api/applyCoupon/applyCouponMutation.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import gql from 'graphql-tag';
+import { Context, CustomQuery } from '@vue-storefront/core';
+import mutation from './applyCouponMutation';
+import ApolloClient from 'apollo-client';
+import { GraphQlApplyCouponParams, ApplyCouponResult } from '../../index';
+import { FetchResult } from 'apollo-link/lib/types';
+
+export default async function applyCoupon(
+  context: Context,
+  applyCouponParams: GraphQlApplyCouponParams,
+  customQuery?: CustomQuery
+): Promise<FetchResult<ApplyCouponResult>> {
+  const apolloClient = context.client.apollo as ApolloClient<any>;
+
+  const { applyCoupon } = context.extendQuery(
+    customQuery, { applyCoupon: { mutation, variables: applyCouponParams } }
+  );
+
+  const response = await apolloClient.mutate({
+    mutation: gql`${applyCoupon.mutation}`,
+    variables: applyCoupon.variables
+  });
+
+  return response;
+}