georate and store id support

shopjs · Jun 28, 2020 · 076c854 · 076c854
1 parent c8ad185
commit 076c854
Show file tree

Hide file tree

Showing 12 changed files with 314 additions and 131 deletions.
diff --git a/dist/index.umd.js b/dist/index.umd.js
diff --git a/dist/index.umd.js.map b/dist/index.umd.js.map
diff --git a/dist/stores/ShopStore.d.ts b/dist/stores/ShopStore.d.ts
@@ -1,4 +1,4 @@
-import { Commerce, Order, IAddress, IClient, ICoupon, IOrder, IPayment } from 'commerce.js';
+import { Commerce, Order, IAddress, IClient, ICoupon, IOrder, IPayment, IGeoRate } from 'commerce.js';
 export interface IRegion {
     name: string;
     code: string;
@@ -8,6 +8,14 @@ export interface ICountry extends IRegion {
 }
 export interface LibraryResponse {
     countries: ICountry[];
+    storeId: string;
+    currency: string;
+    shippingRates: {
+        geoRates: IGeoRate[];
+    };
+    taxRates: {
+        geoRates: IGeoRate[];
+    };
 }
 export interface ILibraryClient extends IClient {
     library: {
@@ -24,7 +32,7 @@ export default class ShopStore {
     bootstrapPromise: Promise<any>;
     client: ILibraryClient;
     _payment: IPayment;
-    constructor(client: ILibraryClient, analytics: any, raw: any);
+    constructor(client: ILibraryClient, analytics: any, raw?: any);
     save(): void;
     load(): Promise<void>;
     get countryOptions(): {};

diff --git a/package.json b/package.json
@@ -103,7 +103,7 @@
     "@material-ui/icons": "4.9.1",
     "akasha": "0.1.13",
     "classnames": "^2.2.6",
-    "commerce.js": "^2.0.20",
+    "commerce.js": "^2.0.23",
     "fast-memoize": "2.5.2",
     "midstream": "2.0.2",
     "mobx": "5.15.4",

diff --git a/rollup.config.js b/rollup.config.js
@@ -80,7 +80,10 @@ export default [
   // source
   {
     input: 'src/index.ts',
-    external: [],
+    external: ['cross-fetch'],
+    globals: {
+      'cross-fetch': 'fetch',
+    },
     plugins,
     output: [
       { name: pkg.name, file: pkg.browser, format: 'umd', sourcemap: true },

diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx
@@ -168,7 +168,6 @@ export const shopify = function(client: ILibraryClient, opts: Options = {}) {
       ...opts,
       el: cartEl2,
       showDescription: false,
-      showTotals: false,
       nativeSelects: true,
     })
   }
@@ -211,10 +210,17 @@ export const shopify = function(client: ILibraryClient, opts: Options = {}) {
   // add events to cart button
   const buttonEl = (document.querySelector('button.addToCart') as HTMLElement)
   if (buttonEl) {
+    const formEl = (buttonEl.closest('form') as HTMLFormElement)
+    formEl.action = ''
+    formEl.method = ''
+    formEl.addEventListener('submit', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      return false
+    })
+
     buttonEl.addEventListener('click', (event) => {
       const formEl = (buttonEl.closest('form') as HTMLFormElement)
-      formEl.action = ''
-      formEl.method = ''
 
       let options = ([].slice.call(formEl.querySelectorAll('select.single-option-selector'))) as HTMLSelectElement[]
       let slug = ''

diff --git a/src/components/Cart.tsx b/src/components/Cart.tsx
@@ -113,6 +113,12 @@ const Cart = ({
 }): JSX.Element => {
   const classes = useStyles()
 
+  const hasCountry = !!order.shippingAddress.country
+  const hasState = !!order.shippingAddress.state
+  const hasShipping = !!order.shipping
+  const hasTax = !!order.tax
+  const canCalculate = (hasCountry && hasState) || hasTax || hasShipping
+
   return (
     <Box p={[2, 3, 4]} className='cart' onMouseDown={(event) => {
       event.stopPropagation()
@@ -263,19 +269,33 @@ const Cart = ({
 
             <Grid item xs={12} className='cart-summary'>
               <div>
-                <Grid container className={classnames(classes.lineSpacing, 'cart-summary-subtotal')}>
-                  <Grid item xs className={classes.right}>
-                    <Typography variant='body1'>
-                      Subtotal
-                    </Typography>
-                  </Grid>
-                  <Grid item className={classnames(classes.right, classes.summaryNumber)}>
-                    <Typography variant='body1'>
-                      { renderUICurrencyFromJSON(order.currency, order.subtotal) }
-                    </Typography>
-                  </Grid>
-                </Grid>
-
+                {
+                  !canCalculate && (
+                    <Grid container className={classnames(classes.lineSpacing, 'cart-summary-calculation-message')}>
+                      <Grid item xs={12} className={classes.right}>
+                        <Typography variant='body2'>
+                          Shipping and tax will be calculated during checkout.
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  )
+                }
+                {
+                  (canCalculate || order.discount > 0) && (
+                    <Grid container className={classnames(classes.lineSpacing, 'cart-summary-subtotal')}>
+                      <Grid item xs className={classes.right}>
+                        <Typography variant='body1'>
+                          Subtotal
+                        </Typography>
+                      </Grid>
+                      <Grid item className={classnames(classes.right, classes.summaryNumber)}>
+                        <Typography variant='body1'>
+                          { renderUICurrencyFromJSON(order.currency, order.subtotal) }
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  )
+                }
                 {
                   order.discount > 0 && (
                     <Grid container className={classnames(classes.lineSpacing, 'cart-summary-discount')}>
@@ -292,45 +312,50 @@ const Cart = ({
                     </Grid>
                   )
                 }
-
                 {
                   showTotals !== false && (
                     <>
-                      <Grid container className={classnames(classes.lineSpacing, 'cart-summary-shipping')}>
-                        <Grid item xs className={classes.right}>
-                          <Typography variant='body1'>
-                            Shipping
-                          </Typography>
-                        </Grid>
-                        <Grid item className={classnames(classes.right, classes.summaryNumber)}>
-                          <Typography variant='body1'>
-                            { order.shipping ? renderUICurrencyFromJSON(order.currency, order.shipping) : 'Free' }
-                          </Typography>
-                        </Grid>
-                      </Grid>
+                      {
+                        canCalculate && (
+                          <>
+                            <Grid container className={classnames(classes.lineSpacing, 'cart-summary-shipping')}>
+                              <Grid item xs className={classes.right}>
+                                <Typography variant='body1'>
+                                  Shipping
+                                </Typography>
+                              </Grid>
+                              <Grid item className={classnames(classes.right, classes.summaryNumber)}>
+                                <Typography variant='body1'>
+                                  { order.shipping ? renderUICurrencyFromJSON(order.currency, order.shipping) : 'Free' }
+                                </Typography>
+                              </Grid>
+                            </Grid>
 
-                      <Grid container className='cart-summary-tax'>
-                        <Grid item xs className={classes.right}>
-                          <Typography variant='body1'>
-                            Tax
-                          </Typography>
-                        </Grid>
-                        <Grid item className={classnames(classes.right, classes.summaryNumber)}>
-                          <Typography variant='body1'>
-                            { renderUICurrencyFromJSON(order.currency, order.tax) }
-                          </Typography>
-                        </Grid>
-                      </Grid>
+                            <Grid container className='cart-summary-tax'>
+                              <Grid item xs className={classes.right}>
+                                <Typography variant='body1'>
+                                  Tax
+                                </Typography>
+                              </Grid>
+                              <Grid item className={classnames(classes.right, classes.summaryNumber)}>
+                                <Typography variant='body1'>
+                                  { renderUICurrencyFromJSON(order.currency, order.tax) }
+                                </Typography>
+                              </Grid>
+                            </Grid>
+                          </>
+                        )
+                      }
 
-                      <Grid container className={classnames(classes.total, 'cart-summary-total')}>
+                      <Grid container className={classnames(classes.total, 'cart-summary-total')} alignItems='center'>
                         <Grid item xs className={classes.right}>
                           <Typography variant='body1'>
                             Total
                           </Typography>
                         </Grid>
                         <Grid item className={classnames(classes.right, classes.summaryNumber)}>
-                          <Typography variant='body1'>
-                            { renderUICurrencyFromJSON(order.currency, order.total) }
+                          <Typography variant='h6'>
+                            <strong>{ renderUICurrencyFromJSON(order.currency, order.total) }</strong>
                           </Typography>
                         </Grid>
                       </Grid>

diff --git a/src/components/Checkout.tsx b/src/components/Checkout.tsx
@@ -74,6 +74,22 @@ const useStyles = makeStyles((theme) => ({
       flexDirection: 'column-reverse',
     },
   },
+  compactCart: {
+    [theme.breakpoints.down('sm')]: {
+      '& .cart-your-items-title': {
+        display: 'none',
+      },
+      '& .cart-icon': {
+        display: 'none',
+      },
+      '& .cart': {
+        padding: 0,
+      },
+      '& .cart-items': {
+        paddingTop: 0,
+      },
+    },
+  },
 }))
 
 import { AutoSizer } from 'react-virtualized'
@@ -475,12 +491,12 @@ const Checkout = ({
                               </Grid>
                               <Grid item>
                                 <Typography variant='h6' className='cart-show-more-summary-price'>
-                                  { renderUICurrencyFromJSON(order.currency, order.total) }
+                                  <strong>{ renderUICurrencyFromJSON(order.currency, order.total) }</strong>
                                 </Typography>
                               </Grid>
                             </Grid>
                           </ExpansionPanelSummary>
-                          <ExpansionPanelDetails>
+                          <ExpansionPanelDetails className={classes.compactCart}>
                             <Cart
                               cartIcon={cartIcon}
                               cartTitle={cartTitle}

diff --git a/src/index.ts b/src/index.ts
@@ -24,6 +24,7 @@ if (typeof window !== 'undefined') {
     cart,
     count,
     shopify,
+    getStore,
     set: (...args) => {
       const s = getStore()
       if (!s) {

diff --git a/src/stores/ShopStore.ts b/src/stores/ShopStore.ts
@@ -13,6 +13,7 @@ import {
   ICoupon,
   IOrder,
   IPayment,
+  IGeoRate,
 } from 'commerce.js'
 
 import {
@@ -33,6 +34,14 @@ export interface ICountry extends IRegion{
 
 export interface LibraryResponse {
   countries: ICountry[]
+  storeId: string
+  currency: string
+  shippingRates: {
+    geoRates: IGeoRate[]
+  },
+  taxRates: {
+    geoRates: IGeoRate[]
+  },
 }
 
 export interface ILibraryClient extends IClient {
@@ -80,13 +89,16 @@ export default class ShopStore {
   constructor(
     client: ILibraryClient,
     analytics: any,
-    raw: any,
+    raw: any = {},
   ) {
     Object.assign(this, raw)
 
     this.client = client
 
     this.commerce = new Commerce(client, undefined, [], [], analytics)
+    if (raw.storeId || this.order.storeId) {
+      // this.commerce.setStoreId(raw.storeId ?? this.order.storeId)
+    }
 
     if (!this.order.currency) {
       this.order.currency = 'usd'
@@ -113,12 +125,17 @@ export default class ShopStore {
 
     try {
       let res = await this.client.library.shopjs({
-        hasCountries:       !!this.countries && this.countries.length != 0,
-        lastChecked:        renderDate(this.lastChecked || '2000-01-01', rfc3339),
+        hasCountries:   !!this.countries && this.countries.length != 0,
+        storeId:        this.commerce.storeId,
+        lastChecked:    renderDate(this.lastChecked || '2000-01-01', rfc3339),
       })
 
       runInAction(() => {
         this.countries = res.countries || this.countries
+        this.order.currency = res.currency
+        this.order.shippingRates = res.shippingRates.geoRates
+        this.order.taxRates = res.taxRates.geoRates
+        // this.commerce.setStoreId(res.storeId)
 
         this.save()
         this.isLoading = false

diff --git a/stats.html b/stats.html
diff --git a/yarn.lock b/yarn.lock
@@ -1722,10 +1722,10 @@ commander@^5.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
-commerce.js@^2.0.20:
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/commerce.js/-/commerce.js-2.0.20.tgz#004134ff6586c25ae36ce037a5acd8ad18cd9c31"
-  integrity sha512-yCZ1HMdcRPgHaYorKum/knCdEbxDGVQJjuDnfIyqpQh/at66HRpy+DZAskFbCrkvmwYC98FfbiGEKIGzq5T3EA==
+commerce.js@^2.0.23:
+  version "2.0.23"
+  resolved "https://registry.yarnpkg.com/commerce.js/-/commerce.js-2.0.23.tgz#8919ae2950077e61716dad664d4bdeca3f693d21"
+  integrity sha512-1636PPB+j0gK4RuJgISSS1z5GI9gVxOwBhmG0DnwuSskqtJPtirCfkGtuOXrBLuVNdWE34CrM9RtTUpfiTXYjQ==
   dependencies:
     akasha "0.1.13"
     mobx "5.15.4"