<form class="order-history">
    <h1 class="order-history__title">Your Orders</h1>
    <table class="order-history__table">
        <thead class="order-history__table-header">
            <tr class="order-history__table-header-row">
                <td class="order-history__table-header-cell">Order Date</td>
                <td class="order-history__table-header-cell">Order Status</td>
                <td class="order-history__table-header-cell">Order Number</td>
                <td class="order-history__table-header-cell">Sold To</td>
                <td class="order-history__table-header-cell order-history__table-header-cell--blank"></td>
            </tr>
        </thead>
        <tbody class="order-history__orders">
            <tr class="order-history__order">
                <td class="order-history__order-info">
                    <span class="order-history__order-info-label">Order Date: </span>
                    <span class="order-history__order-info-value">17/1/2017</span>
                </td>
                <td class="order-history__order-info">
                    <span class="order-history__order-info-label">Order Status: </span>
                    <span class="order-history__order-info-value">Not yet processed</span>
                </td>
                <td class="order-history__order-info">
                    <span class="order-history__order-info-label">Order Number: </span>
                    <span class="order-history__order-info-value">W1487330079922</span>
                </td>
                <td class="order-history__order-info">
                    <span class="order-history__order-info-label">Sold To: </span>
                    <span class="order-history__order-info-value">John Doe</span>
                </td>
                <td class="order-history__order-info order-history__order-info--call-to-action">
                    <form>
                        <button class="button button--primary order-history__order-call-to-action">View Order Details</button>

                    </form>
                </td>
            </tr>
            <tr class="order-history__order">
                <td class="order-history__order-info">
                    <span class="order-history__order-info-label">Order Date: </span>
                    <span class="order-history__order-info-value">11/0/2019</span>
                </td>
                <td class="order-history__order-info">
                    <span class="order-history__order-info-label">Order Status: </span>
                    <span class="order-history__order-info-value">Not yet processed</span>
                </td>
                <td class="order-history__order-info">
                    <span class="order-history__order-info-label">Order Number: </span>
                    <span class="order-history__order-info-value">W1547241305551</span>
                </td>
                <td class="order-history__order-info">
                    <span class="order-history__order-info-label">Sold To: </span>
                    <span class="order-history__order-info-value">John Doe</span>
                </td>
                <td class="order-history__order-info order-history__order-info--call-to-action">
                    <form>
                        <button class="button button--primary order-history__order-call-to-action">View Order Details</button>

                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</form>
<form class="order-history">
  <h1 class="order-history__title">{{title}}</h1>
  {{#if orders}}
  <table class="order-history__table">
    <thead class="order-history__table-header">
      <tr class="order-history__table-header-row">
        <td class="order-history__table-header-cell">Order Date</td>
        <td class="order-history__table-header-cell">Order Status</td>
        <td class="order-history__table-header-cell">Order Number</td>
        <td class="order-history__table-header-cell">Sold To</td>
        <td class="order-history__table-header-cell order-history__table-header-cell--blank"></td>
      </tr>
    </thead>
    <tbody class="order-history__orders">
      {{#each orders}}
      <tr class="order-history__order">
        <td class="order-history__order-info">
          <span class="order-history__order-info-label">Order Date: </span>
          <span class="order-history__order-info-value">{{order.date}}</span>
        </td>
        <td class="order-history__order-info">
          <span class="order-history__order-info-label">Order Status: </span>
          <span class="order-history__order-info-value">{{status}}</span>
        </td>
        <td class="order-history__order-info">
          <span class="order-history__order-info-label">Order Number: </span>
          <span class="order-history__order-info-value">{{order.number}}</span>
        </td>
        <td class="order-history__order-info">
          <span class="order-history__order-info-label">Sold To: </span>
          <span class="order-history__order-info-value">{{soldTo}}</span>
        </td>
        <td class="order-history__order-info order-history__order-info--call-to-action">
          <form>
            {{render '@buttons--primary' button}}
          </form>
        </td>
      </tr>
      {{/each}}
    </tbody>
  </table>
  {{else}}
  <div class="order-history__actions--empty">
    <div class="order-history__empty-brand-wrapper">
      <img class="order-history__empty-brand" alt="{{brandImage.alt}}" src="{{brandImage.large.src}}" sizes="(min-width: {{brandImage.breakpoint}}px) {{brandImage.large.width}}px, {{brandImage.small.width}}px" srcset="{{brandImage.small.src}} {{brandImage.small.width}}w, {{brandImage.large.src}} {{brandImage.large.width}}w">
    </div>
    <div class="order-history__empty-message">{{message}}</div>
    <button class="order-history__start-shopping button button--primary">Start Shopping</button>
  </div>
  {{/if}}
</form>
{
  "pageCss": [
    "account"
  ],
  "title": "Your Orders",
  "orders": [
    {
      "order": {
        "date": "17/1/2017",
        "number": "W1487330079922",
        "delivery": true,
        "products": [
          {
            "name": "PEAHI",
            "summary": "Polarized men's classic sunglasses",
            "description": "Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.",
            "category": "Wrap",
            "rating": [
              "star-full",
              "star-full",
              "star-full",
              "star-empty",
              "star-empty"
            ],
            "vip": null,
            "tax": "Inkl. MWST",
            "variants": [
              {
                "id": "202-02",
                "name": "Gloss Black",
                "color": "#000",
                "orderMonth": "12",
                "orderYear": "2017",
                "locationCategory": "Online Retailer",
                "purchaseLocation": "Dicks.com",
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": true,
                "price": "$149.00",
                "salePrice": "$229.00",
                "url": "#202-02",
                "status": null,
                "stock": "In Stock",
                "lens": "Neutral Grey",
                "lensId": "neutralgrey",
                "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "202-02",
                  "inactive": null,
                  "material": "superthin"
                }
              },
              {
                "id": "B202-2M",
                "name": "Matte Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$189.00",
                "salePrice": "$219.00",
                "url": "#B202-2M",
                "status": "New",
                "stock": "In Stock",
                "lens": "Blue Hawaii",
                "lensId": "bluehawaii",
                "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "B202-2M",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-10",
                "name": "Dark Tortoise",
                "color": "#303032",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-10",
                "status": "New",
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-10",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-2M",
                "name": "Matte Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-2M",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-2M",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-70",
                "name": "Redfish",
                "color": "#7d4a07",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-70",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-70",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "HT202-71",
                "name": "MahiMahi",
                "color": "#218b16",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#HT202-71",
                "status": null,
                "stock": "In Stock",
                "lens": "Maui HT™",
                "lensId": "mauiht",
                "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "HT202-71",
                  "inactive": true,
                  "material": "mauipure"
                }
              },
              {
                "id": "H202-2M-2",
                "name": "Matte Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-2M-2",
                "status": null,
                "stock": "Out of Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-2M-2",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-70-2",
                "name": "Redfish",
                "color": "#7d4a07",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-70-2",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-70-2",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "HT202-71-2",
                "name": "MahiMahi",
                "color": "#218b16",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#HT202-71-2",
                "status": "New",
                "stock": "In Stock",
                "lens": "Maui HT™",
                "lensId": "mauiht",
                "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "HT202-71-2",
                  "inactive": true,
                  "material": "mauipure"
                }
              }
            ],
            "callToAction": null,
            "mauijim": null,
            "zeal": null,
            "excludeVariants": null,
            "mymaui": "true",
            "prescription": null,
            "qty": 3,
            "total": "$447.00"
          }
        ]
      },
      "status": "Not yet processed",
      "soldTo": "John Doe",
      "button": {
        "modifier": "primary",
        "buttonValue": "View Order Details",
        "classes": [
          "order-history__order-call-to-action"
        ]
      }
    },
    {
      "order": {
        "date": "11/0/2019",
        "number": "W1547241305551",
        "delivery": true,
        "products": [
          {
            "name": "PEAHI",
            "summary": "Polarized men's classic sunglasses",
            "description": "Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.",
            "category": "Wrap",
            "rating": [
              "star-full",
              "star-full",
              "star-half",
              "star-empty",
              "star-empty"
            ],
            "vip": null,
            "tax": "Inkl. MWST",
            "variants": [
              {
                "id": "202-02",
                "name": "Gloss Black",
                "color": "#000",
                "orderMonth": "12",
                "orderYear": "2017",
                "locationCategory": "Online Retailer",
                "purchaseLocation": "Dicks.com",
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": true,
                "price": "$149.00",
                "salePrice": "$229.00",
                "url": "#202-02",
                "status": "New",
                "stock": "In Stock",
                "lens": "Neutral Grey",
                "lensId": "neutralgrey",
                "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "202-02",
                  "inactive": null,
                  "material": "superthin"
                }
              },
              {
                "id": "B202-2M",
                "name": "Matte Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$189.00",
                "salePrice": "$219.00",
                "url": "#B202-2M",
                "status": "New",
                "stock": "In Stock",
                "lens": "Blue Hawaii",
                "lensId": "bluehawaii",
                "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "B202-2M",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-10",
                "name": "Dark Tortoise",
                "color": "#303032",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-10",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-10",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-2M",
                "name": "Matte Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-2M",
                "status": "New",
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-2M",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-70",
                "name": "Redfish",
                "color": "#7d4a07",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-70",
                "status": "New",
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-70",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "HT202-71",
                "name": "MahiMahi",
                "color": "#218b16",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#HT202-71",
                "status": null,
                "stock": "In Stock",
                "lens": "Maui HT™",
                "lensId": "mauiht",
                "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "HT202-71",
                  "inactive": true,
                  "material": "mauipure"
                }
              },
              {
                "id": "H202-2M-2",
                "name": "Matte Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-2M-2",
                "status": null,
                "stock": "Out of Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-2M-2",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-70-2",
                "name": "Redfish",
                "color": "#7d4a07",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-70-2",
                "status": "New",
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-70-2",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "HT202-71-2",
                "name": "MahiMahi",
                "color": "#218b16",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#HT202-71-2",
                "status": null,
                "stock": "In Stock",
                "lens": "Maui HT™",
                "lensId": "mauiht",
                "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "HT202-71-2",
                  "inactive": true,
                  "material": "mauipure"
                }
              }
            ],
            "callToAction": null,
            "mauijim": null,
            "zeal": null,
            "excludeVariants": null,
            "mymaui": "true",
            "prescription": null,
            "qty": 2,
            "total": "$298.00"
          },
          {
            "name": "WATERWAYS",
            "summary": null,
            "description": null,
            "category": "Classic",
            "rating": [
              "star-full",
              "star-full",
              "star-full",
              "star-full",
              "star-empty"
            ],
            "vip": {
              "cardValue": "30%",
              "originalPrice": "$319.00"
            },
            "tax": "Inkl. MWST",
            "variants": [
              {
                "id": "HTS267-15C",
                "name": "Olive Stripe",
                "color": "#808000",
                "orderMonth": "12",
                "orderYear": "2017",
                "locationCategory": "Online Retailer",
                "purchaseLocation": "Dicks.com",
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": true,
                "price": "$219.00",
                "salePrice": null,
                "url": "#HTS267-15C",
                "status": null,
                "stock": "In Stock",
                "lens": "Maui HT™",
                "lensId": "mauiht",
                "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "HTS267-15C",
                  "inactive": null,
                  "material": "superthin"
                }
              },
              {
                "id": "HS267-10M",
                "name": "Matte Tortoise",
                "color": "#303032",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#HS267-10M",
                "status": "New",
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "HS267-10M",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "GS267-02MR",
                "name": "Matte Black Rubber",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$239.00",
                "salePrice": null,
                "url": "#GS267-02MR",
                "status": "New",
                "stock": "In Stock",
                "lens": "Neutral Grey",
                "lensId": "neutralgrey",
                "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "GS267-02MR",
                  "inactive": true,
                  "material": "superthin"
                }
              }
            ],
            "callToAction": null,
            "mauijim": null,
            "zeal": null,
            "excludeVariants": null,
            "mymaui": "true",
            "prescription": null,
            "qty": 1,
            "total": "$219.00"
          },
          {
            "name": "KAWIKA",
            "summary": null,
            "description": null,
            "category": "Classic",
            "rating": [
              "star-full",
              "star-full",
              "star-full",
              "star-full",
              "star-empty"
            ],
            "vip": {
              "cardValue": "30%",
              "originalPrice": "$319.00"
            },
            "tax": null,
            "variants": [
              {
                "id": "H257-16C",
                "name": "Tortoise with Antique Gold",
                "color": "#e0d468",
                "orderMonth": "12",
                "orderYear": "2017",
                "locationCategory": "Online Retailer",
                "purchaseLocation": "Dicks.com",
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": true,
                "price": "$299.00",
                "salePrice": null,
                "url": "#H257-16C",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "H257-16C",
                  "inactive": null,
                  "material": "mauipure"
                }
              },
              {
                "id": "B257-05CR",
                "name": "Crystal",
                "color": "#fff; border: 1px solid #dedede",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$299.00",
                "salePrice": null,
                "url": "#B257-05CR",
                "status": null,
                "stock": "In Stock",
                "lens": "Blue Hawaii",
                "lensId": "bluehawaii",
                "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "B257-05CR",
                  "inactive": true,
                  "material": "mauipure"
                }
              },
              {
                "id": "257-17C",
                "name": "Black Gloss with Antique Pewter",
                "color": "#808080",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$299.00",
                "salePrice": null,
                "url": "#257-17C",
                "status": null,
                "stock": "In Stock",
                "lens": "Neutral Grey",
                "lensId": "neutralgrey",
                "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "257-17C",
                  "inactive": true,
                  "material": "mauipure"
                }
              }
            ],
            "callToAction": null,
            "mauijim": null,
            "zeal": null,
            "excludeVariants": null,
            "mymaui": "true",
            "prescription": null,
            "qty": 2,
            "total": "$598.00"
          },
          {
            "name": "VOYAGER",
            "summary": null,
            "description": null,
            "category": "Classic",
            "rating": [
              "star-full",
              "star-full",
              "star-full",
              "star-empty",
              "star-empty"
            ],
            "vip": null,
            "tax": null,
            "variants": [
              {
                "id": "H178-10",
                "name": "Tortoise",
                "color": "#303032",
                "orderMonth": "12",
                "orderYear": "2017",
                "locationCategory": "Online Retailer",
                "purchaseLocation": "Dicks.com",
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/H178-10_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": true,
                "price": "$219.00",
                "salePrice": null,
                "url": "#H178-10",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H178-10",
                  "inactive": null,
                  "material": "superthin"
                }
              },
              {
                "id": "178-02",
                "name": "Gloss Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$219.00",
                "salePrice": null,
                "url": "#178-02",
                "status": null,
                "stock": "In Stock",
                "lens": "Neutral Grey",
                "lensId": "neutralgrey",
                "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "178-02",
                  "inactive": true,
                  "material": "superthin"
                }
              }
            ],
            "callToAction": null,
            "mauijim": null,
            "zeal": null,
            "excludeVariants": null,
            "mymaui": "true",
            "prescription": null,
            "qty": 3,
            "total": "$657.00"
          }
        ]
      },
      "status": "Not yet processed",
      "soldTo": "John Doe",
      "button": {
        "modifier": "primary",
        "buttonValue": "View Order Details",
        "classes": [
          "order-history__order-call-to-action"
        ]
      }
    }
  ]
}
  • Content:
    .order-history__title {
      margin: 5px 0;
      border-bottom: 1px solid $color-light;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-shadow: none;
      text-transform: none;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .order-history__table {
      position: relative;
      width: 100%;
      border-collapse: collapse;
    
      @include breakpoint($breakpoint-md) {
        letter-spacing: normal;
      }
    }
    
    .order-history__table-header {
      background-color: $color-lighter;
      color: $color-darkest;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    .order-history__table-header-cell {
      padding: 15px 0 15px 10px;
      box-sizing: border-box;
    }
    
    .order-history__table-header-cell--blank {
      @include breakpoint($breakpoint-md ($breakpoint-xl - 1)) {
        display: none;
      }
    }
    
    .order-history__order {
      border-bottom: 1px solid $color-light;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
        padding: 15px 10px;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
      }
    }
    
    .order-history__order-info {
      padding: 0;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
      }
    
      @include breakpoint($breakpoint-md) {
        padding: 15px 0 60px 10px;
        color: $color-dark;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 20px 0 20px 10px;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .order-history__order-info--call-to-action {
      @include breakpoint($breakpoint-md ($breakpoint-xl - 1)) {
        display: block;
        position: absolute;
        right: 0;
        padding-top: 40px;
      }
    }
    
    .order-history__order-info-label {
      font-weight: $font-weight-bold;
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .order-history__order-call-to-action {
      width: 100%;
      margin-top: 8px;
      padding: 0 20px;
      line-height: 3.0rem;
    
      @include breakpoint($breakpoint-md) {
        width: auto;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 0;
        float: right;
      }
    }
    
    .order-history__actions--empty {
      margin: 0 auto;
      padding: 0 20px;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        margin: 0;
        float: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-left: 20%;
      }
    }
    
    .order-history__empty-brand-wrapper {
      height: 130px;
    
      @include breakpoint($breakpoint-md) {
        height: 110px;
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 215px;
      }
    }
    
    .order-history__empty-brand {
      max-width: 123px;
      margin: 0 auto;
    
      @include breakpoint($breakpoint-md) {
        max-width: 166px;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: none;
      }
    }
    
    .order-history__empty-message {
      margin: 35px 0;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
  • URL: /components/raw/order-history/order-history.scss
  • Filesystem Path: src/components/02-components/orders/order-history/order-history.scss
  • Size: 3.1 KB

There are no notes for this item.