@ikas/storefront 2.0.0-alpha.1 → 2.0.0-alpha.10

package/src/components/checkout/style.module.scss

@@ -1,358 +0,0 @@
-@import "./styles/variables.scss";
-
-.CheckoutPage {
-  all: unset;
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-size: 16px !important;
-  width: 100%;
-  height: 100vh;
-  overflow: auto;
-  overflow-x: hidden;
-  display: flex;
-  color: $primaryTextColor;
-  background-color: $primaryBgColor;
-
-  input, textarea {
-    &::placeholder {
-      all: unset;
-    }
-  }
-
-  a, a:hover, a:focus, a:active {
-    color: inherit;
-  }
-
-  * {
-    box-sizing: border-box !important;
-    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    font-size: 16px;
-    letter-spacing: normal;
-    font-weight: normal;
-    line-height: unset;
-  }
-
-  .Left {
-    width: 50%;
-    flex: 0 0 auto;
-    display: flex;
-    justify-content: flex-end;
-    padding-left: 20px;
-    padding-right: 64px;
-    background-color: $primaryBgColor;
-    z-index: 1;
-
-    .LeftContent {
-      width: 100%;
-      min-width: 400px;
-      max-width: 600px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      min-height: 100vh;
-
-      .Space {
-        width: 100%;
-        height: 100px;
-
-        @media only screen and (max-width: $breakpoint) {
-          height: 48px;
-        }
-      }
-
-      .Footer {
-        flex: 0 0 auto;
-        height: 50px;
-        background-color: transparent;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .FooterItem {
-          font-size: 14px;
-          color: $secondaryTextColor;
-          cursor: pointer;
-          user-select: none;
-
-          &:hover {
-            color: $primaryTextColor;
-          }
-        }
-
-        .FooterBullet {
-          margin: 0 12px;
-          color: $secondaryTextColor;
-        }
-
-        @media only screen and (max-width: $breakpoint) {
-          width: 100%;
-
-          .FooterItem {
-            text-align: center;
-          }
-        }
-      }
-
-      .AdressStepInfo {
-        display: flex;
-        justify-content: space-between;
-        padding-left: 78px;
-        padding-top: 5px;
-        width: 100%;
-
-        .Address {
-          font-size: 16px;
-
-          .Text {
-            font-size: 14px;
-
-            &.WithMBottom {
-              margin-bottom: 12px;
-            }
-
-            &.Gray {
-              color: $secondaryTextColor;
-            }
-          } 
-        }
-
-        .EditBtn {
-          cursor: pointer;
-          user-select: none;
-          align-self: flex-start;
-          
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-
-        @media only screen and (max-width: $breakpoint) {
-          padding-top: 0;
-          justify-content: flex-end;
-
-          .Address {
-            display: none;
-          }
-        }
-      }
-
-      .AddressStepInfoMobile {
-        display: none;
-
-        @media only screen and (max-width: $breakpoint) {
-          display: block;
-          padding-top: 16px;
-        }
-
-        .Address {
-          font-size: 16px;
-
-          .Text {
-            font-size: 14px;
-
-            &.WithMBottom {
-              margin-bottom: 12px;
-            }
-
-            &.Gray {
-              color: $secondaryTextColor;
-            }
-          }
-        }
-      }
-
-      .ErrorContainer {
-        @media only screen and (max-width: $breakpoint) {
-          padding: 0 $mobileHorizontalPadding;
-        }
-
-        @media only screen and (max-width: 480px) {
-          padding: 0 10px;
-        }
-      }
-    }
-
-    .Header {
-      width: 100%;
-      height: 96px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-weight: 500;
-      font-size: 20px;
-      margin-bottom: 44px;
-
-      a {
-        flex: 1 1 auto;
-      }
-
-      .Logo {
-        width: calc(100% - 24px);
-        max-width: 200px;
-        height: 64px;
-        position: relative;
-        user-select: none;
-        cursor: pointer;
-
-        img {
-          object-fit: contain;
-          object-position: left;
-          pointer-events: none;
-        }
-
-        @media only screen and (max-width: 1280px) {
-          max-width: 150px;
-        }
-      }
-
-      .LoginText {
-        font-size: 14px;
-        text-align: right;
-        flex: 0 0 auto;
-
-        span {
-          color: $secondaryTextColor;
-        }
-      }
-
-      .LoginBtn {
-        margin-left: 4px;
-        font-weight: bold;
-        user-select: none;
-        cursor: pointer;
-        font-weight: 500;
-      }
-
-      .CustomerInfo {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-            
-        .Name {
-          font-size: 20px;
-          font-weight: 600;
-        }
-      
-        .Email {
-          font-weight: 500;
-          font-size: 14px;
-          user-select: none;
-          color: $secondaryTextColor;  
-        }
-      }
-
-      @media only screen and (max-width: $breakpoint) {
-        height: 72px;
-        margin-bottom: 0;
-        padding: 0 $mobileHorizontalPadding;
-
-        .CustomerInfo {
-          .Name {
-            font-size: 15px;
-          }
-
-          .Email {
-            font-size: 13px;
-          }
-        }
-
-        .LoginText {
-          display: flex;
-          flex-direction: column;
-          padding-bottom: 0;
-
-          .LoginCta {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .MobileCartSummary {
-      position: sticky;
-      top: 0;
-      z-index: 10;
-
-      @media only screen and (min-width: $breakpoint) {
-        display: none;
-      }
-    }
-
-    .RowPB {
-      padding-bottom: $rowSpacing;
-    }
-
-    @media only screen and (max-width: $breakpoint) {
-      width: 100%;
-      justify-content: center;
-      padding-right: 0px;
-      padding-left: 0px;
-
-      .LeftContent {
-        width: 100%;
-        min-width: auto;
-        max-width: 100%;
-      }
-    }
-
-  }
-
-  .Right {
-    width: 50%;
-    min-height: 100%;
-    flex: 0 0 auto;
-    background-color: $secondaryBgColor;
-    // border-left: 1px solid $borderColor;
-    display: flex;
-    padding-left: 64px;
-    padding-right: 20px;
-    position: sticky;
-    top: 0;
-    overflow-y: auto;
-    z-index: 1;
-
-    .RightContent {
-      width: 100%;
-      max-width: 600px;
-      padding-top: 168px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-
-      .PoweredBy {
-        width: 100%;
-        padding: 16px 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: $primaryTextColor;
-        user-select: none;
-
-        span {
-          font-size: 14px;
-          line-height: 20px;
-          color: $secondaryTextColor;
-          margin-right: 8px;
-        }
-
-        a {
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-
-    @media only screen and (max-width: $breakpoint) {
-      display: none;
-    }
-  }
-}
-
-.LightText {
-  color: $secondaryTextColor;
-}
-
-.ReactTooltipWrap {
-  max-width: 300px;
-}

package/src/components/checkout/styles/common.module.scss

@@ -1,59 +0,0 @@
-@import "./variables.scss";
-
-.FormSectionTitle {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  // margin-top: 1.5em;
-
-  .Title {
-    flex: 1 1 auto;
-    padding-bottom: 16px;
-    color: $primaryTextColor;
-    font-size: 20px;
-    line-height: 32px;
-
-    &.WithSubTitle {
-      line-height: auto;
-      padding-bottom: 0;
-    }
-  }
-}
-
-.SubTitle {
-  color: $secondaryTextColor;
-  font-size: 14px;
-  padding-bottom: $rowSpacing;
-  padding-top: 2px;
-}
-
-.Grid {
-  display: grid;
-  grid-gap: $rowSpacing;
-  grid-template-columns: 1fr;
-
-  &.Grid2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  &.Grid3 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  @media only screen and (max-width: 768px) {
-    grid-template-columns: 1fr !important;
-  }
-}
-
-@keyframes fadeInFromRight {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

package/src/components/checkout/styles/variables.scss

@@ -1,40 +0,0 @@
-$buttonBgColor: var(--checkout-button-bg-color); // #272727;
-$buttonTextColor: var(--checkout-button-text-color); // #FFFFFF;
-$buttonDisabledBgColor: var(--checkout-button-disabled-bg-color); // #F7F7F9;
-$buttonDisabledTextColor: var(--checkout-button-disabled-text-color); // #8A8B94;
-
-$primaryTextColor: var(--checkout-primary-text-color); // #272727;
-$secondaryTextColor: var(--checkout-secondary-text-color); // #8A8B94;
-
-$primaryBgColor: var(--checkout-primary-bg-color); // #FFFFFF;
-$secondaryBgColor: var(--checkout-secondary-bg-color); //#F7F7F9;
-$borderColor: var(--checkout-border-color); // #E5E4E9;
-$cardBgColor: var(--checkout-card-bg-color); // #F7F7F9;
-
-$errorColor: var(--checkout-error-color); // #FB4E4E;
-$errorLightColor: var(--checkout-error-light-color); // #FCF3F4;
-$warningColor: var(--checkout-warning-color); // #FFBC1F;
-$warningLightColor: var(--checkout-warning-light-color); // #FFFAEE;
-$successColor: var(--checkout-success-color); // #2DCA73;
-$successLightColor: var(--checkout-success-light-color); // #F6FFED;
-
-
-
-// $color-primary: #272727;
-// $color-dark: #272727;
-// $color-light: #8A8B94;
-// $color-border: #E5E4E9;
-
-// $color-primary-background: #FFFFFF;
-// $color-disabled: #F7F7F9;
-
-// $color-red: #FB4E4E;
-// $color-red-light: #FCF3F4;
-// $color-yellow: #FFBC1F;
-// $color-yellow-light: #FFFAEE;
-// $color-green: #2DCA73;
-// $color-green-light: #F6FFED;
-
-$rowSpacing: 16px;
-$breakpoint: 1000px;
-$mobileHorizontalPadding: 24px;

package/src/components/image/index.tsx

@@ -1,79 +0,0 @@
-import * as React from "react";
-import NextImage, { ImageLoader } from "next/image";
-import { IkasImage } from "../../models";
-
-const IMAGE_SIZES = [
-  180,
-  360,
-  540,
-  720,
-  900,
-  1080,
-  1296,
-  1512,
-  1728,
-  1950,
-  2560,
-  3840,
-];
-
-export const Image: React.FC<ImageProps> = ({ image, useBlur, ...others }) => {
-  const loader = ({ width }: any) => {
-    const closest = IMAGE_SIZES.reduce(function (prev, curr) {
-      return Math.abs(curr - width) < Math.abs(prev - width) ? curr : prev;
-    });
-
-    return image.getSrc(closest);
-  };
-
-  return (
-    <NextImage
-      {...(others as any)}
-      loader={loader}
-      quality={100}
-      src={image.src}
-      alt={others.alt || "Image"}
-      placeholder={useBlur ? "blur" : "empty"}
-      blurDataURL={useBlur ? image.getSrc(10) : undefined}
-    />
-  );
-};
-
-declare const VALID_LAYOUT_VALUES: readonly [
-  "fill",
-  "fixed",
-  "intrinsic",
-  "responsive",
-  undefined
-];
-type LayoutValue = typeof VALID_LAYOUT_VALUES[number];
-type ImgElementStyle = NonNullable<JSX.IntrinsicElements["img"]["style"]>;
-type ImageProps = Omit<
-  JSX.IntrinsicElements["img"],
-  "src" | "srcSet" | "ref" | "width" | "height" | "loading" | "style"
-> & {
-  loader?: ImageLoader;
-  priority?: boolean;
-  loading?: "lazy" | "eager" | undefined;
-  objectFit?: ImgElementStyle["objectFit"];
-  objectPosition?: ImgElementStyle["objectPosition"];
-  image: IkasImage;
-  sizes: string;
-  useBlur?: boolean;
-} & (
-    | {
-        width?: never;
-        height?: never;
-        unsized: true;
-      }
-    | {
-        width?: never;
-        height?: never;
-        layout: "fill";
-      }
-    | {
-        width: number | string;
-        height: number | string;
-        layout?: Exclude<LayoutValue, "fill">;
-      }
-  );

package/src/components/index.ts

@@ -1,4 +0,0 @@
-export { IkasPage } from "./page";
-export { IkasPageHead } from "./page/head";
-export { IkasPageEditor } from "./page-editor";
-export { Image } from "./image";

package/src/components/page/ThemeComponent.tsx

@@ -1,89 +0,0 @@
-import * as React from "react";
-import { computed, makeObservable } from "mobx";
-import { IkasThemeSettings } from "../../models";
-import { IkasStorefrontConfig } from "../../storefront";
-import { IkasPageComponentPropValue } from "../../providers/page-data-get";
-import { IkasPageDataInit } from "../../providers/page-data-init";
-import { Observer } from "mobx-react-lite";
-
-type Props = {
-  pageComponentPropValue: IkasPageComponentPropValue;
-  index: number;
-  settings: IkasThemeSettings;
-};
-
-export class ThemeComponent extends React.Component<Props> {
-  state = { hasError: false };
-
-  constructor(props: Props) {
-    super(props);
-
-    makeObservable(this, {
-      hasNullValue: computed,
-      Component: computed,
-    });
-  }
-
-  static getDerivedStateFromError(error: any) {
-    console.error(error);
-    return { hasError: true };
-  }
-
-  get hasNullValue() {
-    const { pageComponentPropValue } = this.props;
-    const propValues = pageComponentPropValue.propValues;
-
-    return pageComponentPropValue.component.props.some((prop) => {
-      if (prop.isRequired) {
-        const propValue = (propValues || {})[prop.name];
-        return propValue === null || propValue == undefined;
-      }
-    });
-  }
-
-  get Component() {
-    const { pageComponentPropValue } = this.props;
-    const { currentPageComponents } = IkasStorefrontConfig;
-    const pageComponent = pageComponentPropValue.pageComponent;
-
-    if (!currentPageComponents) return null;
-
-    return currentPageComponents[pageComponent.componentId];
-  }
-
-  render() {
-    return (
-      <Observer>
-        {() => {
-          const { index, pageComponentPropValue, settings } = this.props;
-          const { store } = IkasStorefrontConfig;
-          const Component = this.Component;
-          const pageComponent = pageComponentPropValue.pageComponent;
-          const propValues = pageComponentPropValue.propValues;
-
-          if (!Component) {
-            console.error("COMPONENT NOT FOUND!");
-            return null;
-          }
-          if (this.state.hasError) {
-            return null;
-          }
-
-          return (
-            <div id={index + ""}>
-              {this.hasNullValue ? null : (
-                <Component
-                  key={pageComponent.id}
-                  {...propValues}
-                  settings={settings}
-                  store={store}
-                  pageSpecificData={IkasPageDataInit.pageSpecificData}
-                />
-              )}
-            </div>
-          );
-        }}
-      </Observer>
-    );
-  }
-}