[128] New thumbnail structure

saleor · Dec 27, 2018 · bef52bf · bef52bf
1 parent 13fe7c2
commit bef52bf
Show file tree

Hide file tree

Showing 41 changed files with 417 additions and 260 deletions.
diff --git a/src/components/CartOverlay/index.tsx b/src/components/CartOverlay/index.tsx
@@ -1,10 +1,12 @@
+import "./scss/index.scss";
+
 import * as React from "react";
 import { ApolloConsumer } from "react-apollo";
 import { Link } from "react-router-dom";
 import ReactSVG from "react-svg";
 
 import { Button } from "..";
-import { priceToString } from "../../core/utils";
+import { maybe, priceToString } from "../../core/utils";
 import { checkoutLoginUrl } from "../App/routes";
 import { CartContext } from "../CartProvider/context";
 import { Error } from "../Error";
@@ -21,7 +23,10 @@ import Offline from "../Offline";
 import OfflinePlaceholder from "../OfflinePlaceholder";
 import Online from "../Online";
 
-import "./scss/index.scss";
+const cartSvg = require("../../images/cart.svg");
+const closeSvg = require("../../images/x.svg");
+const noPhotoPng = require("../../images/nophoto.png");
+const removeSvg = require("../../images/garbage.svg");
 
 export const CartOverlay: React.SFC = () => (
   <OverlayContext.Consumer>
@@ -50,7 +55,7 @@ export const CartOverlay: React.SFC = () => (
                       <div className="cart">
                         <div className="overlay__header">
                           <ReactSVG
-                            path={require("../../images/cart.svg")}
+                            path={cartSvg}
                             className="overlay__header__cart-icon"
                           />
                           <div className="overlay__header-text">
@@ -60,7 +65,7 @@ export const CartOverlay: React.SFC = () => (
                             </span>
                           </div>
                           <ReactSVG
-                            path={require("../../images/x.svg")}
+                            path={closeSvg}
                             onClick={() => overlay.hide()}
                             className="overlay__header__close-icon"
                           />
@@ -74,24 +79,23 @@ export const CartOverlay: React.SFC = () => (
                                   className="cart__list__item"
                                 >
                                   <CachedImage
-                                    url={
-                                      line.variant.product.thumbnailUrl ||
-                                      require("../../images/nophoto.png")
-                                    }
-                                    url2x={line.variant.product.thumbnailUrl2x}
+                                    url={maybe(
+                                      () => line.variant.product.thumbnail.url,
+                                      noPhotoPng
+                                    )}
+                                    url2x={maybe(
+                                      () => line.variant.product.thumbnail2x.url
+                                    )}
                                   />
                                   <div className="cart__list__item__details">
                                     <p>{line.variant.price.localized}</p>
                                     <p>{line.variant.product.name}</p>
                                     <span className="cart__list__item__details__variant">
                                       <span>{line.variant.name}</span>
-                                      <span>
-                                        Qty:
-                                        {line.quantity}
-                                      </span>
+                                      <span>{"Qty: " + line.quantity}</span>
                                     </span>
                                     <ReactSVG
-                                      path={require("../../images/garbage.svg")}
+                                      path={removeSvg}
                                       className="cart__list__item__details__delete-icon"
                                       onClick={() =>
                                         cart.remove(line.variant.id)

diff --git a/src/components/CartPage/index.tsx b/src/components/CartPage/index.tsx
@@ -1,3 +1,5 @@
+import "./scss/index.scss";
+
 import * as React from "react";
 import { ApolloConsumer, Query } from "react-apollo";
 import Media from "react-media";
@@ -6,18 +8,20 @@ import { Link } from "react-router-dom";
 import ReactSVG from "react-svg";
 
 import { Button, Loader } from "..";
-import { getCheckout } from "../../core/types/saleor";
+import { maybe } from "../../core/utils";
 import { checkoutLoginUrl } from "../App/routes";
+import { smallScreen } from "../App/scss/variables.scss";
+import CachedImage from "../CachedImage";
 import { CartContext } from "../CartProvider/context";
 import { GET_CHECKOUT } from "../CheckoutApp/queries";
+import { getCheckout } from "../CheckoutApp/types/getCheckout";
 import { Error } from "../Error";
 import { GoToCheckout } from "../GoToCheckout";
 import { UserContext } from "../User/context";
 import { EmptyCart } from "./EmptyCart";
 
-import { smallScreen } from "../App/scss/variables.scss";
-import CachedImage from "../CachedImage";
-import "./scss/index.scss";
+const noPhotoPng = require("../../images/nophoto.png");
+const removeSvg = require("../../images/garbage.svg");
 
 const canDisplay = (data: getCheckout) =>
   data && data.checkout && data.checkout.lines && data.checkout.subtotalPrice;
@@ -67,11 +71,13 @@ const CartPage: React.SFC<RouteComponentProps<{ token }>> = ({
                               query={{ minWidth: smallScreen }}
                               render={() => (
                                 <CachedImage
-                                  url={
-                                    line.variant.product.thumbnailUrl ||
-                                    require("../../images/nophoto.png")
-                                  }
-                                  url2x={line.variant.product.thumbnailUrl2x}
+                                  url={maybe(
+                                    () => line.variant.product.thumbnail.url,
+                                    noPhotoPng
+                                  )}
+                                  url2x={maybe(
+                                    () => line.variant.product.thumbnail2x.url
+                                  )}
                                 />
                               )}
                             />
@@ -93,7 +99,7 @@ const CartPage: React.SFC<RouteComponentProps<{ token }>> = ({
                             <CartContext.Consumer>
                               {({ remove }) => (
                                 <ReactSVG
-                                  path={require("../../images/garbage.svg")}
+                                  path={removeSvg}
                                   className="cart__list__item__details__delete-icon"
                                   onClick={() => remove(line.variant.id)}
                                 />
@@ -122,7 +128,8 @@ const CartPage: React.SFC<RouteComponentProps<{ token }>> = ({
                           <ApolloConsumer>
                             {client => (
                               <GoToCheckout apolloClient={client}>
-                                Checkout
+                                {" "}
+                                Checkout{" "}
                               </GoToCheckout>
                             )}
                           </ApolloConsumer>

diff --git a/src/components/CartProvider/index.tsx b/src/components/CartProvider/index.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { ApolloClient } from "apollo-client";
 import { GET_CHECKOUT, UPDATE_CHECKOUT_LINE } from "../CheckoutApp/queries";
-import { GET_PRODUCTS_VARIANTS } from "../ProductPage/queries";
+import { productVariatnsQuery } from "../ProductPage/queries";
 import { CartContext, CartInterface, CartLineInterface } from "./context";
 
 export default class CartProvider extends React.Component<
@@ -93,7 +93,7 @@ export default class CartProvider extends React.Component<
       let data: { [key: string]: any };
       let lines;
       const response = await apolloClient.query({
-        query: GET_PRODUCTS_VARIANTS,
+        query: productVariatnsQuery,
         variables: { ids: cart.map(line => line.variantId) }
       });
       const quantityMapping = cart.reduce((obj, line) => {

diff --git a/src/components/CartSummary/index.tsx b/src/components/CartSummary/index.tsx
@@ -1,10 +1,13 @@
+import "./scss/index.scss";
+
 import * as React from "react";
 
+import { maybe } from "../../core/utils";
 import { CheckoutContext } from "../CheckoutApp/context";
 
-import "./scss/index.scss";
+const noPhotoPng = require("../../images/nophoto.png");
 
-const CartSummary: React.SFC<{}> = () => (
+const CartSummary: React.SFC = () => (
   <CheckoutContext.Consumer>
     {({ checkout }) =>
       checkout ? (
@@ -13,10 +16,10 @@ const CartSummary: React.SFC<{}> = () => (
           {checkout.lines.map(product => (
             <div key={product.id} className="cart-summary__product-item">
               <img
-                src={
-                  product.variant.product.thumbnailUrl ||
-                  require("../../images/nophoto.png")
-                }
+                src={maybe(
+                  () => product.variant.product.thumbnail.url,
+                  noPhotoPng
+                )}
               />
               <div>
                 <p>{product.variant.price.localized}</p>

diff --git a/src/components/CheckoutApp/context.ts b/src/components/CheckoutApp/context.ts
@@ -1,14 +1,14 @@
 import { createContext } from "react";
 
-import { CheckoutInterface } from "../../core/types";
+import { Checkout } from "./types/Checkout";
 
 export interface CheckoutContextInterface {
   cardData?: {
     lastDigits: string;
     ccType: string;
     token: string;
   };
-  checkout?: CheckoutInterface;
+  checkout?: Checkout;
   loading?: boolean;
   shippingAsBilling?: boolean;
   updateCheckout?(chekcoutData: CheckoutContextInterface): void;

diff --git a/src/components/CheckoutApp/queries.ts b/src/components/CheckoutApp/queries.ts
@@ -107,8 +107,13 @@ export const CHECKOUT_FRAGMENT = gql`
         product {
           id
           name
-          thumbnailUrl
-          thumbnailUrl2x: thumbnailUrl(size: 510)
+          thumbnail {
+            url
+            alt
+          }
+          thumbnail2x: thumbnail(size: 510){
+            url
+          }
         }
       }
       quantity

diff --git a/src/components/CheckoutApp/types/Checkout.ts b/src/components/CheckoutApp/types/Checkout.ts
@@ -152,12 +152,23 @@ export interface Checkout_lines_variant_price {
   localized: string;
 }
 
+export interface Checkout_lines_variant_product_thumbnail {
+  __typename: "Image";
+  url: string;
+  alt: string | null;
+}
+
+export interface Checkout_lines_variant_product_thumbnail2x {
+  __typename: "Image";
+  url: string;
+}
+
 export interface Checkout_lines_variant_product {
   __typename: "Product";
   id: string;
   name: string;
-  thumbnailUrl: string | null;
-  thumbnailUrl2x: string | null;
+  thumbnail: Checkout_lines_variant_product_thumbnail | null;
+  thumbnail2x: Checkout_lines_variant_product_thumbnail2x | null;
 }
 
 export interface Checkout_lines_variant {

diff --git a/src/components/CheckoutApp/types/getCheckout.ts b/src/components/CheckoutApp/types/getCheckout.ts
@@ -152,12 +152,23 @@ export interface getCheckout_checkout_lines_variant_price {
   localized: string;
 }
 
+export interface getCheckout_checkout_lines_variant_product_thumbnail {
+  __typename: "Image";
+  url: string;
+  alt: string | null;
+}
+
+export interface getCheckout_checkout_lines_variant_product_thumbnail2x {
+  __typename: "Image";
+  url: string;
+}
+
 export interface getCheckout_checkout_lines_variant_product {
   __typename: "Product";
   id: string;
   name: string;
-  thumbnailUrl: string | null;
-  thumbnailUrl2x: string | null;
+  thumbnail: getCheckout_checkout_lines_variant_product_thumbnail | null;
+  thumbnail2x: getCheckout_checkout_lines_variant_product_thumbnail2x | null;
 }
 
 export interface getCheckout_checkout_lines_variant {

diff --git a/src/components/CheckoutApp/types/updateCheckoutLine.ts b/src/components/CheckoutApp/types/updateCheckoutLine.ts
@@ -154,12 +154,23 @@ export interface updateCheckoutLine_checkoutLinesUpdate_checkout_lines_variant_p
   localized: string;
 }
 
+export interface updateCheckoutLine_checkoutLinesUpdate_checkout_lines_variant_product_thumbnail {
+  __typename: "Image";
+  url: string;
+  alt: string | null;
+}
+
+export interface updateCheckoutLine_checkoutLinesUpdate_checkout_lines_variant_product_thumbnail2x {
+  __typename: "Image";
+  url: string;
+}
+
 export interface updateCheckoutLine_checkoutLinesUpdate_checkout_lines_variant_product {
   __typename: "Product";
   id: string;
   name: string;
-  thumbnailUrl: string | null;
-  thumbnailUrl2x: string | null;
+  thumbnail: updateCheckoutLine_checkoutLinesUpdate_checkout_lines_variant_product_thumbnail | null;
+  thumbnail2x: updateCheckoutLine_checkoutLinesUpdate_checkout_lines_variant_product_thumbnail2x | null;
 }
 
 export interface updateCheckoutLine_checkoutLinesUpdate_checkout_lines_variant {
@@ -202,7 +213,7 @@ export interface updateCheckoutLine_checkoutLinesUpdate_errors {
 export interface updateCheckoutLine_checkoutLinesUpdate {
   __typename: "CheckoutLinesUpdate";
   checkout: updateCheckoutLine_checkoutLinesUpdate_checkout | null;
-  errors: (updateCheckoutLine_checkoutLinesUpdate_errors | null)[] | null;
+  errors: updateCheckoutLine_checkoutLinesUpdate_errors[] | null;
 }
 
 export interface updateCheckoutLine {

diff --git a/src/components/CheckoutBilling/types/updateCheckoutBillingAddress.ts b/src/components/CheckoutBilling/types/updateCheckoutBillingAddress.ts
@@ -160,12 +160,23 @@ export interface updateCheckoutBillingAddress_checkoutBillingAddressUpdate_check
   localized: string;
 }
 
+export interface updateCheckoutBillingAddress_checkoutBillingAddressUpdate_checkout_lines_variant_product_thumbnail {
+  __typename: "Image";
+  url: string;
+  alt: string | null;
+}
+
+export interface updateCheckoutBillingAddress_checkoutBillingAddressUpdate_checkout_lines_variant_product_thumbnail2x {
+  __typename: "Image";
+  url: string;
+}
+
 export interface updateCheckoutBillingAddress_checkoutBillingAddressUpdate_checkout_lines_variant_product {
   __typename: "Product";
   id: string;
   name: string;
-  thumbnailUrl: string | null;
-  thumbnailUrl2x: string | null;
+  thumbnail: updateCheckoutBillingAddress_checkoutBillingAddressUpdate_checkout_lines_variant_product_thumbnail | null;
+  thumbnail2x: updateCheckoutBillingAddress_checkoutBillingAddressUpdate_checkout_lines_variant_product_thumbnail2x | null;
 }
 
 export interface updateCheckoutBillingAddress_checkoutBillingAddressUpdate_checkout_lines_variant {
@@ -201,7 +212,7 @@ export interface updateCheckoutBillingAddress_checkoutBillingAddressUpdate_check
 
 export interface updateCheckoutBillingAddress_checkoutBillingAddressUpdate {
   __typename: "CheckoutBillingAddressUpdate";
-  errors: (updateCheckoutBillingAddress_checkoutBillingAddressUpdate_errors | null)[] | null;
+  errors: updateCheckoutBillingAddress_checkoutBillingAddressUpdate_errors[] | null;
   checkout: updateCheckoutBillingAddress_checkoutBillingAddressUpdate_checkout | null;
 }
 

diff --git a/src/components/CheckoutPayment/types/createPayment.ts b/src/components/CheckoutPayment/types/createPayment.ts
@@ -15,7 +15,7 @@ export interface createPayment_checkoutPaymentCreate_errors {
 
 export interface createPayment_checkoutPaymentCreate {
   __typename: "CheckoutPaymentCreate";
-  errors: (createPayment_checkoutPaymentCreate_errors | null)[] | null;
+  errors: createPayment_checkoutPaymentCreate_errors[] | null;
 }
 
 export interface createPayment {