@ikas/storefront 0.0.163-alpha.13 → 0.0.163-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/components/checkout/components/fullscreen-loading/index.d.ts +2 -0
  2. package/build/index.es.js +55 -12
  3. package/build/index.js +55 -12
  4. package/build/pages/checkout/[id].d.ts +1 -1
  5. package/package.json +1 -1
package/build/components/checkout/components/fullscreen-loading/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import * as React from "react";
2
+ export declare const FullscreenLoading: React.FC;
package/build/index.es.js CHANGED
@@ -62433,22 +62433,70 @@ var _slug_ = /*#__PURE__*/Object.freeze({
62433
62433
  getStaticProps: getStaticProps$2
62434
62434
  });
62435
62435
 
62436
+ var css_248z$o = ".style-module_Container__1f6or {\n width: 100vw;\n height: 100vh;\n background-color: var(--checkout-primary-bg-color);\n display: flex;\n justify-content: center;\n align-items: center; }\n .style-module_Container__1f6or .style-module_loader__VCfEE,\n .style-module_Container__1f6or .style-module_loader__VCfEE:after {\n border-radius: 50%;\n width: 5em;\n height: 5em; }\n .style-module_Container__1f6or .style-module_loader__VCfEE {\n font-size: 6px;\n position: relative;\n text-indent: -9999em;\n border-top: 0.5em solid rgba(255, 255, 255, 0.2);\n border-right: 0.5em solid rgba(255, 255, 255, 0.2);\n border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);\n border-left: 0.5em solid var(--checkout-button-bg-color);\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n -webkit-animation: style-module_load8__3N32j 1.1s infinite linear;\n animation: style-module_load8__3N32j 1.1s infinite linear; }\n\n@-webkit-keyframes style-module_load8__3N32j {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n@keyframes style-module_load8__3N32j {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n";
62437
+ var styles$n = {"Container":"style-module_Container__1f6or","loader":"style-module_loader__VCfEE","load8":"style-module_load8__3N32j"};
62438
+ styleInject(css_248z$o);
62439
+
62440
+ var FullscreenLoading = function () {
62441
+ return (createElement("div", { className: styles$n.Container },
62442
+ createElement("div", { className: styles$n.loader })));
62443
+ };
62444
+
62436
62445
  var CheckoutPage = function (_a) {
62437
- var checkoutStr = _a.checkoutStr, checkoutSettingsStr = _a.checkoutSettingsStr, customizationProps = _a.customizationProps, configJson = _a.configJson, others = __rest(_a, ["checkoutStr", "checkoutSettingsStr", "customizationProps", "configJson"]);
62446
+ var checkoutId = _a.checkoutId, checkoutSettingsStr = _a.checkoutSettingsStr, customizationProps = _a.customizationProps, configJson = _a.configJson, others = __rest(_a, ["checkoutId", "checkoutSettingsStr", "customizationProps", "configJson"]);
62447
+ var router = useRouter();
62448
+ var _b = useState(), checkout = _b[0], setCheckout = _b[1];
62438
62449
  IkasStorefrontConfig.initWithJson(configJson);
62439
62450
  var store = IkasStorefrontConfig.store;
62440
- var checkout = new IkasCheckout(JSON.parse(checkoutStr));
62441
62451
  var checkoutSettings = checkoutSettingsStr
62442
62452
  ? new IkasCheckoutSettings(JSON.parse(checkoutSettingsStr))
62443
62453
  : new IkasCheckoutSettings();
62444
62454
  useEffect(function () {
62445
62455
  store.checkLocalization();
62456
+ getCheckout();
62446
62457
  }, []);
62447
- return (createElement(IkasCheckoutPage$1, __assign({ checkout: checkout, checkoutSettings: checkoutSettings, customizationProps: customizationProps }, others)));
62458
+ useEffect(function () {
62459
+ document.documentElement.style.setProperty("--checkout-button-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonBgColor) || "#272727");
62460
+ document.documentElement.style.setProperty("--checkout-button-text-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonTextColor) || "#FFFFFF");
62461
+ document.documentElement.style.setProperty("--checkout-button-disabled-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonDisabledBgColor) || "#F7F7F9");
62462
+ document.documentElement.style.setProperty("--checkout-button-disabled-text-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonDisabledTextColor) || "#8A8B94");
62463
+ document.documentElement.style.setProperty("--checkout-primary-text-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.primaryTextColor) || "#272727");
62464
+ document.documentElement.style.setProperty("--checkout-secondary-text-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.secondaryTextColor) || "#8A8B94");
62465
+ document.documentElement.style.setProperty("--checkout-primary-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.primaryBgColor) || "#FFFFFF");
62466
+ document.documentElement.style.setProperty("--checkout-secondary-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.secondaryBgColor) || "#F7F7F9");
62467
+ document.documentElement.style.setProperty("--checkout-border-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.borderColor) || "#E5E4E9");
62468
+ document.documentElement.style.setProperty("--checkout-card-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.cardBgColor) || "#F7F7F9");
62469
+ document.documentElement.style.setProperty("--checkout-error-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.errorColor) || "#FB4E4E");
62470
+ document.documentElement.style.setProperty("--checkout-error-light-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.errorLightColor) || "#FCF3F4");
62471
+ document.documentElement.style.setProperty("--checkout-warning-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.warningColor) || "#FFBC1F");
62472
+ document.documentElement.style.setProperty("--checkout-warning-light-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.warningLightColor) || "#FFFAEE");
62473
+ document.documentElement.style.setProperty("--checkout-success-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.successColor) || "#2DCA73");
62474
+ document.documentElement.style.setProperty("--checkout-success-light-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.successLightColor) || "#F6FFED");
62475
+ }, [customizationProps]);
62476
+ var getCheckout = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
62477
+ var checkout;
62478
+ return __generator(this, function (_a) {
62479
+ switch (_a.label) {
62480
+ case 0: return [4 /*yield*/, IkasCheckoutAPI.getCheckoutById(checkoutId)];
62481
+ case 1:
62482
+ checkout = _a.sent();
62483
+ if (checkout) {
62484
+ setCheckout(checkout);
62485
+ }
62486
+ else {
62487
+ router.replace("/");
62488
+ }
62489
+ return [2 /*return*/];
62490
+ }
62491
+ });
62492
+ }); }, [checkoutId]);
62493
+ if (!checkout)
62494
+ return createElement(FullscreenLoading, null);
62495
+ return (createElement(IkasCheckoutPage$1, __assign({ checkout: checkout, checkoutSettings: checkoutSettings }, others)));
62448
62496
  };
62449
62497
  var _id_ = observer(CheckoutPage);
62450
62498
  var getServerSideProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
62451
- var id, locale, settings, storefront, themeLocalization, salesChannel, routing, redirect, checkout, checkoutSettings, componentDirs, isLocal, serverRuntimeConfig, currentLocale, nextI18nConf, i18nReader, translations, checkoutPage, checkoutComponent, customizationProps;
62499
+ var id, locale, settings, storefront, themeLocalization, salesChannel, routing, redirect, checkoutSettings, componentDirs, isLocal, serverRuntimeConfig, currentLocale, nextI18nConf, i18nReader, translations, checkoutPage, checkoutComponent, customizationProps;
62452
62500
  var _a;
62453
62501
  return __generator(this, function (_b) {
62454
62502
  switch (_b.label) {
@@ -62486,12 +62534,8 @@ var getServerSideProps = function (context) { return __awaiter(void 0, void 0, v
62486
62534
  if (!id || typeof id !== "string") {
62487
62535
  return [2 /*return*/, redirect()];
62488
62536
  }
62489
- return [4 /*yield*/, IkasCheckoutAPI.getCheckoutById(id)];
62490
- case 2:
62491
- checkout = _b.sent();
62492
- if (!checkout) return [3 /*break*/, 5];
62493
62537
  return [4 /*yield*/, IkasCheckoutAPI.listCheckoutSettings()];
62494
- case 3:
62538
+ case 2:
62495
62539
  checkoutSettings = _b.sent();
62496
62540
  componentDirs = ["common", CHECKOUT_TRANSLATION_NAMESPACE];
62497
62541
  isLocal = process.env.NEXT_PUBLIC_ENV === "local";
@@ -62500,7 +62544,7 @@ var getServerSideProps = function (context) { return __awaiter(void 0, void 0, v
62500
62544
  nextI18nConf = serverRuntimeConfig.nextI18nConf;
62501
62545
  i18nReader = new I18NFileReader(currentLocale, componentDirs, isLocal ? undefined : nextI18nConf.localePath);
62502
62546
  return [4 /*yield*/, i18nReader.read()];
62503
- case 4:
62547
+ case 3:
62504
62548
  translations = _b.sent();
62505
62549
  IkasStorefrontConfig.translations = translations;
62506
62550
  checkoutPage = themeLocalization.themeJson.pages.find(function (p) { return p.type === IkasThemePageType.CHECKOUT; });
@@ -62527,7 +62571,7 @@ var getServerSideProps = function (context) { return __awaiter(void 0, void 0, v
62527
62571
  };
62528
62572
  return [2 /*return*/, {
62529
62573
  props: {
62530
- checkoutStr: JSON.stringify(checkout),
62574
+ checkoutId: id,
62531
62575
  checkoutSettingsStr: (checkoutSettings === null || checkoutSettings === void 0 ? void 0 : checkoutSettings.length) ? JSON.stringify(checkoutSettings[0])
62532
62576
  : null,
62533
62577
  customizationProps: customizationProps,
@@ -62538,7 +62582,6 @@ var getServerSideProps = function (context) { return __awaiter(void 0, void 0, v
62538
62582
  queryParams: context.query,
62539
62583
  },
62540
62584
  }];
62541
- case 5: return [2 /*return*/, redirect()];
62542
62585
  }
62543
62586
  });
62544
62587
  }); };
package/build/index.js CHANGED
@@ -62412,22 +62412,70 @@ var _slug_ = /*#__PURE__*/Object.freeze({
62412
62412
  getStaticProps: getStaticProps$2
62413
62413
  });
62414
62414
 
62415
+ var css_248z$o = ".style-module_Container__1f6or {\n width: 100vw;\n height: 100vh;\n background-color: var(--checkout-primary-bg-color);\n display: flex;\n justify-content: center;\n align-items: center; }\n .style-module_Container__1f6or .style-module_loader__VCfEE,\n .style-module_Container__1f6or .style-module_loader__VCfEE:after {\n border-radius: 50%;\n width: 5em;\n height: 5em; }\n .style-module_Container__1f6or .style-module_loader__VCfEE {\n font-size: 6px;\n position: relative;\n text-indent: -9999em;\n border-top: 0.5em solid rgba(255, 255, 255, 0.2);\n border-right: 0.5em solid rgba(255, 255, 255, 0.2);\n border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);\n border-left: 0.5em solid var(--checkout-button-bg-color);\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n -webkit-animation: style-module_load8__3N32j 1.1s infinite linear;\n animation: style-module_load8__3N32j 1.1s infinite linear; }\n\n@-webkit-keyframes style-module_load8__3N32j {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n@keyframes style-module_load8__3N32j {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n";
62416
+ var styles$n = {"Container":"style-module_Container__1f6or","loader":"style-module_loader__VCfEE","load8":"style-module_load8__3N32j"};
62417
+ styleInject(css_248z$o);
62418
+
62419
+ var FullscreenLoading = function () {
62420
+ return (React.createElement("div", { className: styles$n.Container },
62421
+ React.createElement("div", { className: styles$n.loader })));
62422
+ };
62423
+
62415
62424
  var CheckoutPage = function (_a) {
62416
- var checkoutStr = _a.checkoutStr, checkoutSettingsStr = _a.checkoutSettingsStr, customizationProps = _a.customizationProps, configJson = _a.configJson, others = __rest(_a, ["checkoutStr", "checkoutSettingsStr", "customizationProps", "configJson"]);
62425
+ var checkoutId = _a.checkoutId, checkoutSettingsStr = _a.checkoutSettingsStr, customizationProps = _a.customizationProps, configJson = _a.configJson, others = __rest(_a, ["checkoutId", "checkoutSettingsStr", "customizationProps", "configJson"]);
62426
+ var router$1 = router.useRouter();
62427
+ var _b = React.useState(), checkout = _b[0], setCheckout = _b[1];
62417
62428
  IkasStorefrontConfig.initWithJson(configJson);
62418
62429
  var store = IkasStorefrontConfig.store;
62419
- var checkout = new IkasCheckout(JSON.parse(checkoutStr));
62420
62430
  var checkoutSettings = checkoutSettingsStr
62421
62431
  ? new IkasCheckoutSettings(JSON.parse(checkoutSettingsStr))
62422
62432
  : new IkasCheckoutSettings();
62423
62433
  React.useEffect(function () {
62424
62434
  store.checkLocalization();
62435
+ getCheckout();
62425
62436
  }, []);
62426
- return (React.createElement(IkasCheckoutPage$1, __assign({ checkout: checkout, checkoutSettings: checkoutSettings, customizationProps: customizationProps }, others)));
62437
+ React.useEffect(function () {
62438
+ document.documentElement.style.setProperty("--checkout-button-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonBgColor) || "#272727");
62439
+ document.documentElement.style.setProperty("--checkout-button-text-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonTextColor) || "#FFFFFF");
62440
+ document.documentElement.style.setProperty("--checkout-button-disabled-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonDisabledBgColor) || "#F7F7F9");
62441
+ document.documentElement.style.setProperty("--checkout-button-disabled-text-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonDisabledTextColor) || "#8A8B94");
62442
+ document.documentElement.style.setProperty("--checkout-primary-text-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.primaryTextColor) || "#272727");
62443
+ document.documentElement.style.setProperty("--checkout-secondary-text-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.secondaryTextColor) || "#8A8B94");
62444
+ document.documentElement.style.setProperty("--checkout-primary-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.primaryBgColor) || "#FFFFFF");
62445
+ document.documentElement.style.setProperty("--checkout-secondary-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.secondaryBgColor) || "#F7F7F9");
62446
+ document.documentElement.style.setProperty("--checkout-border-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.borderColor) || "#E5E4E9");
62447
+ document.documentElement.style.setProperty("--checkout-card-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.cardBgColor) || "#F7F7F9");
62448
+ document.documentElement.style.setProperty("--checkout-error-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.errorColor) || "#FB4E4E");
62449
+ document.documentElement.style.setProperty("--checkout-error-light-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.errorLightColor) || "#FCF3F4");
62450
+ document.documentElement.style.setProperty("--checkout-warning-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.warningColor) || "#FFBC1F");
62451
+ document.documentElement.style.setProperty("--checkout-warning-light-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.warningLightColor) || "#FFFAEE");
62452
+ document.documentElement.style.setProperty("--checkout-success-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.successColor) || "#2DCA73");
62453
+ document.documentElement.style.setProperty("--checkout-success-light-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.successLightColor) || "#F6FFED");
62454
+ }, [customizationProps]);
62455
+ var getCheckout = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
62456
+ var checkout;
62457
+ return __generator(this, function (_a) {
62458
+ switch (_a.label) {
62459
+ case 0: return [4 /*yield*/, IkasCheckoutAPI.getCheckoutById(checkoutId)];
62460
+ case 1:
62461
+ checkout = _a.sent();
62462
+ if (checkout) {
62463
+ setCheckout(checkout);
62464
+ }
62465
+ else {
62466
+ router$1.replace("/");
62467
+ }
62468
+ return [2 /*return*/];
62469
+ }
62470
+ });
62471
+ }); }, [checkoutId]);
62472
+ if (!checkout)
62473
+ return React.createElement(FullscreenLoading, null);
62474
+ return (React.createElement(IkasCheckoutPage$1, __assign({ checkout: checkout, checkoutSettings: checkoutSettings }, others)));
62427
62475
  };
62428
62476
  var _id_ = mobxReactLite.observer(CheckoutPage);
62429
62477
  var getServerSideProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
62430
- var id, locale, settings, storefront, themeLocalization, salesChannel, routing, redirect, checkout, checkoutSettings, componentDirs, isLocal, serverRuntimeConfig, currentLocale, nextI18nConf, i18nReader, translations, checkoutPage, checkoutComponent, customizationProps;
62478
+ var id, locale, settings, storefront, themeLocalization, salesChannel, routing, redirect, checkoutSettings, componentDirs, isLocal, serverRuntimeConfig, currentLocale, nextI18nConf, i18nReader, translations, checkoutPage, checkoutComponent, customizationProps;
62431
62479
  var _a;
62432
62480
  return __generator(this, function (_b) {
62433
62481
  switch (_b.label) {
@@ -62465,12 +62513,8 @@ var getServerSideProps = function (context) { return __awaiter(void 0, void 0, v
62465
62513
  if (!id || typeof id !== "string") {
62466
62514
  return [2 /*return*/, redirect()];
62467
62515
  }
62468
- return [4 /*yield*/, IkasCheckoutAPI.getCheckoutById(id)];
62469
- case 2:
62470
- checkout = _b.sent();
62471
- if (!checkout) return [3 /*break*/, 5];
62472
62516
  return [4 /*yield*/, IkasCheckoutAPI.listCheckoutSettings()];
62473
- case 3:
62517
+ case 2:
62474
62518
  checkoutSettings = _b.sent();
62475
62519
  componentDirs = ["common", CHECKOUT_TRANSLATION_NAMESPACE];
62476
62520
  isLocal = process.env.NEXT_PUBLIC_ENV === "local";
@@ -62479,7 +62523,7 @@ var getServerSideProps = function (context) { return __awaiter(void 0, void 0, v
62479
62523
  nextI18nConf = serverRuntimeConfig.nextI18nConf;
62480
62524
  i18nReader = new I18NFileReader(currentLocale, componentDirs, isLocal ? undefined : nextI18nConf.localePath);
62481
62525
  return [4 /*yield*/, i18nReader.read()];
62482
- case 4:
62526
+ case 3:
62483
62527
  translations = _b.sent();
62484
62528
  IkasStorefrontConfig.translations = translations;
62485
62529
  checkoutPage = themeLocalization.themeJson.pages.find(function (p) { return p.type === exports.IkasThemePageType.CHECKOUT; });
@@ -62506,7 +62550,7 @@ var getServerSideProps = function (context) { return __awaiter(void 0, void 0, v
62506
62550
  };
62507
62551
  return [2 /*return*/, {
62508
62552
  props: {
62509
- checkoutStr: JSON.stringify(checkout),
62553
+ checkoutId: id,
62510
62554
  checkoutSettingsStr: (checkoutSettings === null || checkoutSettings === void 0 ? void 0 : checkoutSettings.length) ? JSON.stringify(checkoutSettings[0])
62511
62555
  : null,
62512
62556
  customizationProps: customizationProps,
@@ -62517,7 +62561,6 @@ var getServerSideProps = function (context) { return __awaiter(void 0, void 0, v
62517
62561
  queryParams: context.query,
62518
62562
  },
62519
62563
  }];
62520
- case 5: return [2 /*return*/, redirect()];
62521
62564
  }
62522
62565
  });
62523
62566
  }); };
package/build/pages/checkout/[id].d.ts CHANGED
@@ -4,7 +4,7 @@ import { GetServerSideProps } from "next";
4
4
  import { ParsedUrlQuery } from "querystring";
5
5
  import { IkasCheckoutCustomizationProps } from "../../components/checkout/index";
6
6
  declare type Props = {
7
- checkoutStr: string;
7
+ checkoutId: string;
8
8
  checkoutSettingsStr: string | null;
9
9
  customizationProps: IkasCheckoutCustomizationProps;
10
10
  returnPolicy: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ikas/storefront",
3
- "version": "0.0.163-alpha.13",
3
+ "version": "0.0.163-alpha.14",
4
4
  "main": "./build/index.js",
5
5
  "module": "./build/index.es.js",
6
6
  "author": "Umut Ozan Yıldırım",