@ikas/storefront 1.0.21 → 2.0.0-alpha.1

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

@@ -0,0 +1,358 @@
+@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

@@ -0,0 +1,59 @@
+@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

@@ -0,0 +1,40 @@
+$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

@@ -0,0 +1,79 @@
+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

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

package/src/components/page/ThemeComponent.tsx

@@ -0,0 +1,89 @@
+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>
+    );
+  }
+}