@ikas/loyalty-widget-renderer 1.0.0-alpha.4 → 1.0.0-alpha.41

package/build/renderer/screens/credit-earning-methods-screen/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import o from'./../../../ext/styled-components/dist/styled-components.browser.esm.js';import{textMDMedium as e}from"../../components/style/typography.js";var t,i,r,d,l,p=o.div(t||(t=n(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"],["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"]))),s=o.div(i||(i=n(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #EEF2F6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #EEF2F6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"]))),c=o.div(r||(r=n(["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"],["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"])),e),f=o.button(d||(d=n(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"],["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"]))),a=o.div(l||(l=n(["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"],["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"])));export{p as Container,a as Content,s as Header,f as IconButton,c as Title};
+import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import o from"styled-components";import{textMDMedium as e}from"../../components/style/typography.js";var t,i,r,d,p,l=o.div(t||(t=n(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"],["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"]))),c=o.div(i||(i=n(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #EEF2F6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #EEF2F6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"]))),s=o.div(r||(r=n(["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"],["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"])),e),f=o.button(d||(d=n(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"],["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"]))),a=o.div(p||(p=n(["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"],["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"])));export{l as Container,a as Content,c as Header,f as IconButton,s as Title};

package/build/renderer/screens/credit-history-screen/index.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react";import{useTranslation as n}from"react-i18next";import{XClose as r}from"../../../assets/icons/x-close.js";import{ChevronLeft as l}from"../../../assets/icons/chevron-left.js";import{Container as a,Header as m,IconButton as o,Title as c,Content as i,PointsSection as s,PointsTitle as u,PointsValue as E,HistoryList as f,HistoryItem as p,HistoryItemLeft as d,HistoryItemTitle as y,HistoryItemDate as h,HistoryItemAmount as v,Divider as x}from"./style.js";import{LoyaltyProgramPointHistoryTypeEnum as j}from"../../../models/types/index.js";var k=t(function(t){var k=t.viewModel,g=t.onBack,w=t.onClose,C=n().t,T=k.user,A=k.pointHistory,D=k.locale;return e.createElement(a,null,e.createElement(m,null,e.createElement(o,{onClick:g},e.createElement(l,null)),e.createElement(c,null,C("screens.creditHistory")),e.createElement(o,{onClick:w},e.createElement(r,null))),e.createElement(i,null,T&&e.createElement(s,null,e.createElement(u,null,C("header.earnedPoints")),e.createElement(E,null,T.totalPoint)),e.createElement(f,null,A.map(function(t,n){var r=t.type===j.EARN;return e.createElement(e.Fragment,{key:t.id},e.createElement(p,null,e.createElement(d,null,e.createElement(y,null,C(r?"history.earnedTitle":"history.spentTitle")),e.createElement(h,null,function(e){if(!e)return"";try{return new Intl.DateTimeFormat(D,{day:"numeric",month:"long",year:"numeric"}).format(new Date(e))}catch(t){return e}}(t.createdAt))),e.createElement(v,{$isEarn:r},r?"":"-",t.amount)),n<A.length-1&&e.createElement(x,null))}))))});export{k as default};
+import{observer as e}from"mobx-react";import t from"react";import'./../../../ext/react-i18next/dist/es/context.js';import{useTranslation as n}from'./../../../ext/react-i18next/dist/es/useTranslation.js';import{XClose as r}from"../../../assets/icons/x-close.js";import{ChevronLeft as l}from"../../../assets/icons/chevron-left.js";import{LoyaltyProgramPointHistoryTypeEnum as o}from"../../../models/types/index.js";import a from"../../components/count-up/index.js";import{Container as m,Header as c,IconButton as i,Title as s,Content as u,PointsSection as d,PointsTitle as E,PointsValue as p,HistoryList as f,HistoryItem as y,HistoryItemLeft as x,HistoryItemTitle as h,HistoryItemDate as j,HistoryItemAmount as g,Divider as v}from"./style.js";var k=e(function(e){var k=e.viewModel,T=e.onBack,w=e.onClose,C=n().t,R=k.user,b=k.pointHistory,A=k.locale;return t.createElement(m,null,t.createElement(c,null,t.createElement(i,{onClick:T},t.createElement(l,null)),t.createElement(s,null,C("screens.creditHistory")),t.createElement(i,{onClick:w},t.createElement(r,null))),t.createElement(u,null,R&&t.createElement(d,{$borderRadius:k.loyaltyWidget.settings.cartBorderRadius},t.createElement(E,null,C("header.earnedPoints")),t.createElement(p,null,t.createElement(a,{end:R.totalPoint}))),t.createElement(f,null,b.map(function(e,n){var r=e.type===o.EARN;return t.createElement(t.Fragment,{key:e.id},t.createElement(y,null,t.createElement(x,null,t.createElement(h,null,C(r?"history.earnedTitle":"history.spentTitle")),t.createElement(j,null,function(e){if(!e)return"";try{return new Intl.DateTimeFormat(A,{day:"numeric",month:"long",year:"numeric"}).format(new Date(e))}catch(t){return e}}(e.createdAt))),t.createElement(g,{$isEarn:r},r?"":"-",e.amount)),n<b.length-1&&t.createElement(v,null))}))))});export{k as default};

package/build/renderer/screens/credit-history-screen/style.d.ts

@@ -3,7 +3,9 @@ export declare const Header: import("styled-components").StyledComponent<"div",
 export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {
+    $borderRadius: number;
+}, never>;
 export declare const PointsTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PointsValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HistoryList: import("styled-components").StyledComponent<"div", any, {}, never>;

package/build/renderer/screens/credit-history-screen/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import e from'./../../../ext/styled-components/dist/styled-components.browser.esm.js';import{textMDMedium as o,textSMMedium as i,textXLSemiBold as p,textXSMedium as t,textLGMedium as r}from"../../components/style/typography.js";var d,l,a,x,f,c,s,g,b,m,u,y,v,h,w,j=e.div(d||(d=n(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"],["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"]))),k=e.div(l||(l=n(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"]))),z=e.div(a||(a=n(["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"],["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"])),o),_=e.button(x||(x=n(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"],["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"]))),E=e.div(f||(f=n(["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"],["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"]))),$=e.div(c||(c=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-radius: 6px;\n  border: 1px solid #eef2f6;\n  background: #fff;\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  margin: 0 16px 24px 16px;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-radius: 6px;\n  border: 1px solid #eef2f6;\n  background: #fff;\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  margin: 0 16px 24px 16px;\n"]))),q=e.div(s||(s=n(["\n  ","\n  color: #121926;\n"],["\n  ","\n  color: #121926;\n"])),i),A=e.div(g||(g=n(["\n  ","\n  color: #121926;\n"],["\n  ","\n  color: #121926;\n"])),p),B=e.div(b||(b=n(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 16px;\n  margin-top: 4px;\n"],["\n  display: flex;\n  flex-direction: column;\n  padding: 0 16px;\n  margin-top: 4px;\n"]))),C=e.div(m||(m=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 12px 0 6px;\n  gap: 16px;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 12px 0 6px;\n  gap: 16px;\n"]))),D=e.div(u||(u=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"]))),F=e.div(y||(y=n(["\n  ","\n  color: #121926;\n"],["\n  ","\n  color: #121926;\n"])),i),G=e.div(v||(v=n(["\n  ","\n  color: #697586;\n"],["\n  ","\n  color: #697586;\n"])),t),H=e.div(h||(h=n(["\n  ","\n  color: ",";\n"],["\n  ","\n  color: ",";\n"])),r,function(n){return n.$isEarn?"#121926":"#697586"}),I=e.div(w||(w=n(["\n  height: 1px;\n  background-color: #eef2f6;\n  margin: 16px 0;\n  width: 100%;\n"],["\n  height: 1px;\n  background-color: #eef2f6;\n  margin: 16px 0;\n  width: 100%;\n"])));export{j as Container,E as Content,I as Divider,k as Header,C as HistoryItem,H as HistoryItemAmount,G as HistoryItemDate,D as HistoryItemLeft,F as HistoryItemTitle,B as HistoryList,_ as IconButton,$ as PointsSection,q as PointsTitle,A as PointsValue,z as Title};
+import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import e from"styled-components";import{textMDMedium as o,textSMMedium as i,textXLSemiBold as p,textXSMedium as r,textLGMedium as t}from"../../components/style/typography.js";var d,a,l,x,f,c,s,g,b,u,m,y,v,h,k,w=e.div(d||(d=n(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"],["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"]))),j=e.div(a||(a=n(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"]))),z=e.div(l||(l=n(["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"],["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"])),o),$=e.button(x||(x=n(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"],["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"]))),E=e.div(f||(f=n(["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"],["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"]))),R=e.div(c||(c=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-radius: ",";\n  border: 1px solid #eef2f6;\n  background: #fff;\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  margin: 0 16px 24px 16px;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-radius: ",";\n  border: 1px solid #eef2f6;\n  background: #fff;\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  margin: 0 16px 24px 16px;\n"])),function(n){var e=n.$borderRadius;return"".concat(e,"px")}),_=e.div(s||(s=n(["\n  ","\n  color: #121926;\n"],["\n  ","\n  color: #121926;\n"])),i),q=e.div(g||(g=n(["\n  ","\n  color: #121926;\n"],["\n  ","\n  color: #121926;\n"])),p),A=e.div(b||(b=n(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 16px;\n  margin-top: 4px;\n"],["\n  display: flex;\n  flex-direction: column;\n  padding: 0 16px;\n  margin-top: 4px;\n"]))),B=e.div(u||(u=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 12px 0 6px;\n  gap: 16px;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 12px 0 6px;\n  gap: 16px;\n"]))),C=e.div(m||(m=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"]))),D=e.div(y||(y=n(["\n  ","\n  color: #121926;\n"],["\n  ","\n  color: #121926;\n"])),i),F=e.div(v||(v=n(["\n  ","\n  color: #697586;\n"],["\n  ","\n  color: #697586;\n"])),r),G=e.div(h||(h=n(["\n  ","\n  color: ",";\n"],["\n  ","\n  color: ",";\n"])),t,function(n){return n.$isEarn?"#121926":"#697586"}),H=e.div(k||(k=n(["\n  height: 1px;\n  background-color: #eef2f6;\n  margin: 16px 0;\n  width: 100%;\n"],["\n  height: 1px;\n  background-color: #eef2f6;\n  margin: 16px 0;\n  width: 100%;\n"])));export{w as Container,E as Content,H as Divider,j as Header,B as HistoryItem,G as HistoryItemAmount,F as HistoryItemDate,C as HistoryItemLeft,D as HistoryItemTitle,A as HistoryList,$ as IconButton,R as PointsSection,_ as PointsTitle,q as PointsValue,z as Title};

package/build/renderer/screens/credit-spending-methods-screen/index.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react";import{useTranslation as n}from"react-i18next";import r from"../main-screen/spending-methods-section/index.js";import{ChevronLeft as l}from"../../../assets/icons/chevron-left.js";import{XClose as o}from"../../../assets/icons/x-close.js";import{Container as c,Header as m,IconButton as a,Title as i,Content as s,PointsSection as u,PointsTitle as d,PointsValue as E}from"./style.js";var f=t(function(t){var f=t.viewModel,p=t.onBack,v=t.onClose,x=n().t,h=f.user;return e.createElement(c,null,e.createElement(m,null,e.createElement(a,{onClick:p},e.createElement(l,null)),e.createElement(i,null,x("screens.creditSpendingMethods")),e.createElement(a,{onClick:v},e.createElement(o,null))),e.createElement(s,null,h&&e.createElement(u,null,e.createElement(d,null,x("header.earnedPoints")),e.createElement(E,null,h.totalPoint)),e.createElement(r,{viewModel:f,mode:"accordion",getActionProps:function(e){return null}})))});export{f as default};
+import{observer as e}from"mobx-react";import t from"react";import'./../../../ext/react-i18next/dist/es/context.js';import{useTranslation as n}from'./../../../ext/react-i18next/dist/es/useTranslation.js';import{ChevronLeft as o}from"../../../assets/icons/chevron-left.js";import{XClose as r}from"../../../assets/icons/x-close.js";import l from"../../components/count-up/index.js";import s from"../main-screen/spending-methods-section/index.js";import{Container as i,Header as a,IconButton as c,Title as m,Content as d,PointsSection as u,PointsTitle as p,PointsValue as f}from"./style.js";var E=e(function(e){var E=e.viewModel,v=e.onBack,x=e.onClose,j=n().t,g=E.user;return t.createElement(i,null,t.createElement(a,null,t.createElement(c,{onClick:v},t.createElement(o,null)),t.createElement(m,null,j("screens.creditSpendingMethods")),t.createElement(c,{onClick:x},t.createElement(r,null))),t.createElement(d,null,g&&t.createElement(u,{$borderRadius:E.loyaltyWidget.settings.cartBorderRadius},t.createElement(p,null,j("header.earnedPoints")),t.createElement(f,null,t.createElement(l,{end:g.totalPoint}))),t.createElement(s,{viewModel:E,mode:"accordion",methods:E.spendingMethods.slice().sort(function(e,t){return e.isAvailable===t.isAvailable?0:e.isAvailable?-1:1}),getActionProps:function(e){return null}})))});export{E as default};

package/build/renderer/screens/credit-spending-methods-screen/style.d.ts

@@ -3,6 +3,8 @@ export declare const Header: import("styled-components").StyledComponent<"div",
 export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {
+    $borderRadius: number;
+}, never>;
 export declare const PointsTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PointsValue: import("styled-components").StyledComponent<"div", any, {}, never>;

package/build/renderer/screens/credit-spending-methods-screen/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import o from'./../../../ext/styled-components/dist/styled-components.browser.esm.js';import{textMDMedium as e,textSMMedium as t,textXLSemiBold as r}from"../../components/style/typography.js";var p,i,d,f,a,x,l,s,c=o.div(p||(p=n(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"],["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"]))),g=o.div(i||(i=n(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"]))),b=o.div(d||(d=n(["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"],["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"])),e),m=o.button(f||(f=n(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"],["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"]))),u=o.div(a||(a=n(["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"],["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"]))),y=o.div(x||(x=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-radius: 6px;\n  border: 1px solid #eef2f6;\n  background: #fff;\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  margin: 0 16px 28px 16px;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-radius: 6px;\n  border: 1px solid #eef2f6;\n  background: #fff;\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  margin: 0 16px 28px 16px;\n"]))),v=o.div(l||(l=n(["\n  ","\n  color: #121926;\n"],["\n  ","\n  color: #121926;\n"])),t),j=o.div(s||(s=n(["\n  ","\n  color: #121926;\n"],["\n  ","\n  color: #121926;\n"])),r);export{c as Container,u as Content,g as Header,m as IconButton,y as PointsSection,v as PointsTitle,j as PointsValue,b as Title};
+import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import o from"styled-components";import{textMDMedium as e,textSMMedium as r,textXLSemiBold as t}from"../../components/style/typography.js";var i,p,d,f,a,x,c,l,s=o.div(i||(i=n(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"],["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"]))),g=o.div(p||(p=n(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"]))),b=o.div(d||(d=n(["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"],["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"])),e),u=o.button(f||(f=n(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"],["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"]))),m=o.div(a||(a=n(["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"],["\n  padding-top: 20px;\n  padding-bottom: 20px;\n  flex: 1;\n  overflow-y: auto;\n"]))),y=o.div(x||(x=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-radius: ",";\n  border: 1px solid #eef2f6;\n  background: #fff;\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  margin: 0 16px 28px 16px;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-radius: ",";\n  border: 1px solid #eef2f6;\n  background: #fff;\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  margin: 0 16px 28px 16px;\n"])),function(n){var o=n.$borderRadius;return"".concat(o,"px")}),v=o.div(c||(c=n(["\n  ","\n  color: #121926;\n"],["\n  ","\n  color: #121926;\n"])),r),k=o.div(l||(l=n(["\n  ","\n  color: #121926;\n"],["\n  ","\n  color: #121926;\n"])),t);export{s as Container,m as Content,g as Header,u as IconButton,y as PointsSection,v as PointsTitle,k as PointsValue,b as Title};

package/build/renderer/screens/loyalty-level-screen/index.js

@@ -1 +1 @@
-import{__spreadArray as e}from'./../../../ext/tslib/tslib.es6.mjs.js';import t,{useMemo as n}from"react";import{observer as l}from"mobx-react";import{useTranslation as r}from"react-i18next";import{ChevronLeft as o}from"../../../assets/icons/chevron-left.js";import{XClose as i}from"../../../assets/icons/x-close.js";import{Container as c,Header as a,IconButton as u,Title as m,Content as s,PointsSection as d,PointsText as p,PointsValue as E,ProgressBarContainer as f,ProgressBarFill as v,DescriptionText as y,TimelineContainer as x,TimelineItem as g,TimelineLine as P,CheckIconContainer as h,CurrentIndicator as q,CurrentIndicatorDot as R,UpcomingIndicator as L,TimelineContent as j,TimelineTitle as k,TimelineDescription as S,MultiplierSection as T,MultiplierValue as b}from"./style.js";import{Check as C}from"../../../assets/icons/check.js";var I=l(function(l){var I=l.viewModel,M=l.onBack,$=l.onClose,N=r().t,w=I.user,B=I.tiers,W=n(function(){return e([],B,!0).sort(function(e,t){return(e.pointsRequired||0)-(t.pointsRequired||0)})},[B]),_=n(function(){return(null==w?void 0:w.customerTierId)?W.findIndex(function(e){var t;return e.id===(null===(t=w.customerTierId)||void 0===t?void 0:t.id)}):-1},[W,null==w?void 0:w.customerTierId]);console.log("currentTierIndex",_);var z=n(function(){return w?-1===_?W.find(function(e){return(e.pointsRequired||0)>w.totalPoint})||W[0]:W[_+1]||null:null},[W,_,w]),A=n(function(){return w?z?0===(z.pointsRequired||0)?100:Math.min(w.totalPoint/(z.pointsRequired||1)*100,100):100:0},[w,z]),D=n(function(){return w&&z?Math.max(0,(z.pointsRequired||0)-w.totalPoint):0},[w,z]);return w?t.createElement(c,null,t.createElement(a,null,t.createElement(u,{onClick:M},t.createElement(o,null)),t.createElement(m,null,N("screens.loyaltyLevel")),t.createElement(u,{onClick:$},t.createElement(i,null))),t.createElement(s,null,t.createElement(d,null,t.createElement("div",null,t.createElement(p,null,N("header.earnedPoints")),t.createElement(E,null,w.totalPoint," ",N("common.points"))),t.createElement(f,null,t.createElement(v,{$percentage:A,$color:I.loyaltyWidget.header.background.bgColor||void 0})),t.createElement(y,null,z?N("screens.loyaltyLevelScreen.reachNextTier",{tierName:z.name,points:D}):N("screens.loyaltyLevelScreen.allTiersCompleted"))),t.createElement(x,null,W.map(function(e,n){var l="upcoming";_>-1?l=n<_?"completed":n===_?"current":"upcoming":w.totalPoint>=(e.pointsRequired||0)&&(l="completed");var r=n===W.length-1;return t.createElement(g,{key:e.id},t.createElement(P,{$isLast:r}),"completed"===l?t.createElement(h,null,t.createElement(C,null)):"current"===l?t.createElement(q,null,t.createElement(R,null)):t.createElement(L,null),t.createElement(j,null,t.createElement(k,{$status:l},e.name),t.createElement(S,{$status:l},e.pointsRequired||0," ",N("common.points")," ",N("screens.loyaltyLevelScreen.afterEarning")),(e.tierPointMultiplier||1)>1&&t.createElement(T,null,N("screens.loyaltyLevelScreen.multiplierPrefix")," ",t.createElement(b,null,e.tierPointMultiplier||1,"x")," ",N("screens.loyaltyLevelScreen.multiplierSuffix"))))})))):null});export{I as default};
+import{__spreadArray as e}from'./../../../ext/tslib/tslib.es6.mjs.js';import{observer as t}from"mobx-react";import n,{useMemo as r}from"react";import'./../../../ext/react-i18next/dist/es/context.js';import{useTranslation as l}from'./../../../ext/react-i18next/dist/es/useTranslation.js';import{XClose as o}from"../../../assets/icons/x-close.js";import{ChevronLeft as i}from"../../../assets/icons/chevron-left.js";import{Check as a}from"../../../assets/icons/check.js";import c from"../../components/count-up/index.js";import{Container as s,Header as u,IconButton as m,Title as d,Content as p,PointsSection as E,PointsText as f,PointsValue as y,ProgressBarContainer as v,ProgressBarFill as x,DescriptionText as g,TimelineContainer as R,TimelineItem as j,TimelineLine as P,CheckIconContainer as h,CurrentIndicator as q,CurrentIndicatorDot as b,UpcomingIndicator as L,TimelineContent as $,TimelineTitle as k,TimelineDescription as S,MultiplierSection as T,MultiplierValue as C}from"./style.js";var M=t(function(t){var M=t.viewModel,I=t.onBack,B=t.onClose,W=l().t,_=M.user,N=M.tiers,w=r(function(){return e([],N,!0).sort(function(e,t){return(e.pointsRequired||0)-(t.pointsRequired||0)})},[N]),z=r(function(){return(null==_?void 0:_.customerTierId)?w.findIndex(function(e){var t;return e.id===(null===(t=_.customerTierId)||void 0===t?void 0:t.id)}):-1},[w,null==_?void 0:_.customerTierId]),A=r(function(){return _?-1===z?w.find(function(e){return(e.pointsRequired||0)>_.totalPoint})||w[0]:w[z+1]||null:null},[w,z,_]),D=r(function(){return _?A?0===(A.pointsRequired||0)?100:Math.min(_.totalPoint/(A.pointsRequired||1)*100,100):100:0},[_,A]),F=r(function(){return _&&A?Math.max(0,(A.pointsRequired||0)-_.totalPoint):0},[_,A]);return _?n.createElement(s,null,n.createElement(u,null,n.createElement(m,{onClick:I},n.createElement(i,null)),n.createElement(d,null,W("screens.loyaltyLevel")),n.createElement(m,{onClick:B},n.createElement(o,null))),n.createElement(p,null,n.createElement(E,{$borderRadius:M.loyaltyWidget.settings.cartBorderRadius},n.createElement("div",null,n.createElement(f,null,W("header.earnedPoints")),n.createElement(y,null,n.createElement(c,{end:_.totalPoint})," ",W("common.points"))),n.createElement(v,null,n.createElement(x,{$percentage:D,$color:M.loyaltyWidget.header.background.bgColor||void 0})),n.createElement(g,null,A?W("screens.loyaltyLevelScreen.reachNextTier",{tierName:A.name,points:F}):W("screens.loyaltyLevelScreen.allTiersCompleted"))),n.createElement(R,null,w.map(function(e,t){var r="upcoming";z>-1?r=t<z?"completed":t===z?"current":"upcoming":_.totalPoint>=(e.pointsRequired||0)&&(r="completed");var l=t===w.length-1;return n.createElement(j,{key:e.id},n.createElement(P,{$isLast:l}),"completed"===r?n.createElement(h,null,n.createElement(a,null)):"current"===r?n.createElement(q,null,n.createElement(b,null)):n.createElement(L,null),n.createElement($,null,n.createElement(k,{$status:r},e.name),n.createElement(S,{$status:r},e.pointsRequired||0," ",W("common.points")," ",W("screens.loyaltyLevelScreen.afterEarning")),(e.tierPointMultiplier||1)>1&&n.createElement(T,{$borderRadius:M.loyaltyWidget.settings.cartBorderRadius},W("screens.loyaltyLevelScreen.multiplierPrefix")," ",n.createElement(C,null,e.tierPointMultiplier||1,"x")," ",W("screens.loyaltyLevelScreen.multiplierSuffix"))))})))):null});export{M as default};

package/build/renderer/screens/loyalty-level-screen/style.d.ts

@@ -3,7 +3,9 @@ export declare const Header: import("styled-components").StyledComponent<"div",
 export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {
+    $borderRadius: number;
+}, never>;
 export declare const PointsText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PointsValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -24,7 +26,9 @@ export declare const TimelineTitle: import("styled-components").StyledComponent<
 export declare const TimelineDescription: import("styled-components").StyledComponent<"div", any, {
     $status: "completed" | "current" | "upcoming";
 }, never>;
-export declare const MultiplierSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MultiplierSection: import("styled-components").StyledComponent<"div", any, {
+    $borderRadius: number;
+}, never>;
 export declare const MultiplierValue: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const CheckIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CurrentIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;

package/build/renderer/screens/loyalty-level-screen/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import e,{css as o}from'./../../../ext/styled-components/dist/styled-components.browser.esm.js';import{textMDMedium as i,textSM as t,textSMMedium as r,textSMSemiBold as d}from"../../components/style/typography.js";var a,p,l,x,c,s,f,g,u,b,h,m,y,v,k,w,j,B,$,z,A,C,G,E,_,F=e.div(a||(a=n(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"],["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"]))),L=e.div(p||(p=n(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"]))),q=e.div(l||(l=n(["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"],["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"])),i),D=e.button(x||(x=n(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"],["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"]))),H=e.div(c||(c=n(["\n  padding: 20px 16px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 24px;\n  flex: 1;\n"],["\n  padding: 20px 16px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 24px;\n  flex: 1;\n"]))),I=e.div(s||(s=n(["\n  display: flex;\n  width: 100%;\n  padding: 16px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 16px;\n  border-radius: 6px;\n  border: 1px solid var(--Gray-Blue-100, #eef2f6);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n"],["\n  display: flex;\n  width: 100%;\n  padding: 16px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 16px;\n  border-radius: 6px;\n  border: 1px solid var(--Gray-Blue-100, #eef2f6);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n"]))),J=e.div(f||(f=n(["\n  ","\n  color: #4B5565;\n  text-align: center;\n"],["\n  ","\n  color: #4B5565;\n  text-align: center;\n"])),t),K=e.div(g||(g=n(["\n  ","\n  color: #121926;\n  margin-top: 2px;\n  text-align: center;\n"],["\n  ","\n  color: #121926;\n  margin-top: 2px;\n  text-align: center;\n"])),i),M=e.div(u||(u=n(["\n  width: 100%;\n  height: 8px;\n  border-radius: 4px;\n  background: #eef2f6;\n  overflow: hidden;\n"],["\n  width: 100%;\n  height: 8px;\n  border-radius: 4px;\n  background: #eef2f6;\n  overflow: hidden;\n"]))),N=e.div(b||(b=n(["\n  width: ","%;\n  height: 100%;\n  border-radius: 4px;\n  background: linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0.5) 0%,\n      rgba(255, 255, 255, 0.5) 100%\n    ),\n    ",";\n  transition: width 0.3s ease-in-out;\n"],["\n  width: ","%;\n  height: 100%;\n  border-radius: 4px;\n  background: linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0.5) 0%,\n      rgba(255, 255, 255, 0.5) 100%\n    ),\n    ",";\n  transition: width 0.3s ease-in-out;\n"])),function(n){return n.$percentage},function(n){return n.$color||"#4F46E5"}),O=e.div(h||(h=n(["\n  color: #4b5565;\n  text-align: center;\n  ","\n"],["\n  color: #4b5565;\n  text-align: center;\n  ","\n"])),t),P=e.div(m||(m=n(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 0 6px;\n  box-sizing: border-box;\n"],["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 0 6px;\n  box-sizing: border-box;\n"]))),Q=e.div(y||(y=n(["\n  display: flex;\n  gap: 16px;\n  position: relative;\n  padding-bottom: 32px;\n\n  &:last-child {\n    padding-bottom: 0;\n  }\n"],["\n  display: flex;\n  gap: 16px;\n  position: relative;\n  padding-bottom: 32px;\n\n  &:last-child {\n    padding-bottom: 0;\n  }\n"]))),R=e.div(v||(v=n(["\n  position: absolute;\n  left: 10px; /* Center of the 20px icon */\n  top: 26px;\n  bottom: 0;\n  width: 1px;\n  background-color: #9aa4b2;\n  display: ",";\n"],["\n  position: absolute;\n  left: 10px; /* Center of the 20px icon */\n  top: 26px;\n  bottom: 0;\n  width: 1px;\n  background-color: #9aa4b2;\n  display: ",";\n"])),function(n){return n.$isLast?"none":"block"}),S=e.div(k||(k=n(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n"],["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n"]))),T=e.div(j||(j=n(["\n  ","\n  color: ",";\n\n  ","\n"],["\n  ","\n  color: ",";\n\n  ","\n"])),r,function(n){return"completed"===n.$status?"#697586":"#121926"},function(e){return"completed"===e.$status&&o(w||(w=n(["\n      text-decoration-line: line-through;\n    "],["\n      text-decoration-line: line-through;\n    "])))}),U=e.div($||($=n(["\n  ","\n  margin-top: 2px;\n  color: ","; /* Current #4B5565. Completed #9AA4B2 */\n\n  ","\n"],["\n  ","\n  margin-top: 2px;\n  color: ","; /* Current #4B5565. Completed #9AA4B2 */\n\n  ","\n"])),t,function(n){return"completed"===n.$status?"#9AA4B2":"#4B5565"},function(e){return"completed"===e.$status&&o(B||(B=n(["\n      text-decoration-line: line-through;\n    "],["\n      text-decoration-line: line-through;\n    "])))}),V=e.div(z||(z=n(["\n  padding: 8px 16px;\n  align-self: stretch;\n  border-radius: 6px;\n  background: var(--Gray-Blue-50, #f8fafc);\n  margin-top: 12px;\n  ","\n  color: #4B5565;\n"],["\n  padding: 8px 16px;\n  align-self: stretch;\n  border-radius: 6px;\n  background: var(--Gray-Blue-50, #f8fafc);\n  margin-top: 12px;\n  ","\n  color: #4B5565;\n"])),t),W=e.span(A||(A=n(["\n  ","\n  color: #5864E2;\n"],["\n  ","\n  color: #5864E2;\n"])),d),X=e.div(C||(C=n(["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n\n  border-radius: 10px;\n  background: rgba(73, 90, 255, 0.1);\n\n  svg {\n    color: #495aff;\n  }\n"],["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n\n  border-radius: 10px;\n  background: rgba(73, 90, 255, 0.1);\n\n  svg {\n    color: #495aff;\n  }\n"]))),Y=e.div(G||(G=n(["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n\n  border-radius: 10px;\n  border: 0.8px solid #5864e2;\n  background: #fff;\n"],["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n\n  border-radius: 10px;\n  border: 0.8px solid #5864e2;\n  background: #fff;\n"]))),Z=e.div(E||(E=n(["\n  width: 10px;\n  height: 10px;\n  flex-shrink: 0;\n\n  border-radius: 5px;\n  background: #5864e2;\n"],["\n  width: 10px;\n  height: 10px;\n  flex-shrink: 0;\n\n  border-radius: 5px;\n  background: #5864e2;\n"]))),nn=e.div(_||(_=n(["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  border-radius: 10px;\n  background: rgba(73, 90, 255, 0.1);\n"],["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  border-radius: 10px;\n  background: rgba(73, 90, 255, 0.1);\n"])));export{X as CheckIconContainer,F as Container,H as Content,Y as CurrentIndicator,Z as CurrentIndicatorDot,O as DescriptionText,L as Header,D as IconButton,V as MultiplierSection,W as MultiplierValue,I as PointsSection,J as PointsText,K as PointsValue,M as ProgressBarContainer,N as ProgressBarFill,P as TimelineContainer,S as TimelineContent,U as TimelineDescription,Q as TimelineItem,R as TimelineLine,T as TimelineTitle,q as Title,nn as UpcomingIndicator};
+import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import e,{css as o}from"styled-components";import{textMDMedium as i,textSM as t,textSMMedium as r,textSMSemiBold as d}from"../../components/style/typography.js";var a,p,l,c,x,f,s,g,u,b,h,m,y,v,k,w,B,j,$,z,A,C,G,E,R,F=e.div(a||(a=n(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"],["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: #ffffff;\n"]))),L=e.div(p||(p=n(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #eef2f6;\n  position: sticky;\n  top: 0;\n  background-color: #ffffff;\n  z-index: 10;\n"]))),_=e.div(l||(l=n(["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"],["\n  ","\n  color: #121926;\n  text-align: center;\n  flex: 1;\n"])),i),q=e.button(c||(c=n(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"],["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #697586;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"]))),D=e.div(x||(x=n(["\n  padding: 20px 16px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 24px;\n  flex: 1;\n"],["\n  padding: 20px 16px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 24px;\n  flex: 1;\n"]))),H=e.div(f||(f=n(["\n  display: flex;\n  width: 100%;\n  padding: 16px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 16px;\n  border-radius: ",";\n  border: 1px solid var(--Gray-Blue-100, #eef2f6);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n"],["\n  display: flex;\n  width: 100%;\n  padding: 16px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 16px;\n  border-radius: ",";\n  border: 1px solid var(--Gray-Blue-100, #eef2f6);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0 7px 2px 0 rgba(0, 0, 0, 0), 0 5px 2px 0 rgba(0, 0, 0, 0.01),\n    0 3px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03),\n    0 0 1px 0 rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n"])),function(n){var e=n.$borderRadius;return"".concat(e,"px")}),I=e.div(s||(s=n(["\n  ","\n  color: #4B5565;\n  text-align: center;\n"],["\n  ","\n  color: #4B5565;\n  text-align: center;\n"])),t),J=e.div(g||(g=n(["\n  ","\n  color: #121926;\n  margin-top: 2px;\n  text-align: center;\n"],["\n  ","\n  color: #121926;\n  margin-top: 2px;\n  text-align: center;\n"])),i),K=e.div(u||(u=n(["\n  width: 100%;\n  height: 8px;\n  border-radius: 4px;\n  background: #eef2f6;\n  overflow: hidden;\n"],["\n  width: 100%;\n  height: 8px;\n  border-radius: 4px;\n  background: #eef2f6;\n  overflow: hidden;\n"]))),M=e.div(b||(b=n(["\n  width: ","%;\n  height: 100%;\n  border-radius: 4px;\n  background: linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0.5) 0%,\n      rgba(255, 255, 255, 0.5) 100%\n    ),\n    ",";\n  transition: width 0.3s ease-in-out;\n"],["\n  width: ","%;\n  height: 100%;\n  border-radius: 4px;\n  background: linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0.5) 0%,\n      rgba(255, 255, 255, 0.5) 100%\n    ),\n    ",";\n  transition: width 0.3s ease-in-out;\n"])),function(n){return n.$percentage},function(n){return n.$color||"#4F46E5"}),N=e.div(h||(h=n(["\n  color: #4b5565;\n  text-align: center;\n  ","\n"],["\n  color: #4b5565;\n  text-align: center;\n  ","\n"])),t),O=e.div(m||(m=n(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 0 6px;\n  box-sizing: border-box;\n"],["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 0 6px;\n  box-sizing: border-box;\n"]))),P=e.div(y||(y=n(["\n  display: flex;\n  gap: 16px;\n  position: relative;\n  padding-bottom: 32px;\n\n  &:last-child {\n    padding-bottom: 0;\n  }\n"],["\n  display: flex;\n  gap: 16px;\n  position: relative;\n  padding-bottom: 32px;\n\n  &:last-child {\n    padding-bottom: 0;\n  }\n"]))),Q=e.div(v||(v=n(["\n  position: absolute;\n  left: 10px; /* Center of the 20px icon */\n  top: 26px;\n  bottom: 0;\n  width: 1px;\n  background-color: #9aa4b2;\n  display: ",";\n"],["\n  position: absolute;\n  left: 10px; /* Center of the 20px icon */\n  top: 26px;\n  bottom: 0;\n  width: 1px;\n  background-color: #9aa4b2;\n  display: ",";\n"])),function(n){return n.$isLast?"none":"block"}),S=e.div(k||(k=n(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n"],["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n"]))),T=e.div(B||(B=n(["\n  ","\n  color: ",";\n\n  ","\n"],["\n  ","\n  color: ",";\n\n  ","\n"])),r,function(n){return"completed"===n.$status?"#697586":"#121926"},function(e){return"completed"===e.$status&&o(w||(w=n(["\n      text-decoration-line: line-through;\n    "],["\n      text-decoration-line: line-through;\n    "])))}),U=e.div($||($=n(["\n  ","\n  margin-top: 2px;\n  color: ","; /* Current #4B5565. Completed #9AA4B2 */\n\n  ","\n"],["\n  ","\n  margin-top: 2px;\n  color: ","; /* Current #4B5565. Completed #9AA4B2 */\n\n  ","\n"])),t,function(n){return"completed"===n.$status?"#9AA4B2":"#4B5565"},function(e){return"completed"===e.$status&&o(j||(j=n(["\n      text-decoration-line: line-through;\n    "],["\n      text-decoration-line: line-through;\n    "])))}),V=e.div(z||(z=n(["\n  padding: 8px 16px;\n  align-self: stretch;\n  border-radius: ",";\n  background: var(--Gray-Blue-50, #f8fafc);\n  margin-top: 12px;\n  ","\n  color: #4B5565;\n"],["\n  padding: 8px 16px;\n  align-self: stretch;\n  border-radius: ",";\n  background: var(--Gray-Blue-50, #f8fafc);\n  margin-top: 12px;\n  ","\n  color: #4B5565;\n"])),function(n){var e=n.$borderRadius;return"".concat(e,"px")},t),W=e.span(A||(A=n(["\n  ","\n  color: #5864E2;\n"],["\n  ","\n  color: #5864E2;\n"])),d),X=e.div(C||(C=n(["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n\n  border-radius: 10px;\n  background: rgba(73, 90, 255, 0.1);\n\n  svg {\n    color: #495aff;\n  }\n"],["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n\n  border-radius: 10px;\n  background: rgba(73, 90, 255, 0.1);\n\n  svg {\n    color: #495aff;\n  }\n"]))),Y=e.div(G||(G=n(["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n\n  border-radius: 10px;\n  border: 0.8px solid #5864e2;\n  background: #fff;\n"],["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n\n  border-radius: 10px;\n  border: 0.8px solid #5864e2;\n  background: #fff;\n"]))),Z=e.div(E||(E=n(["\n  width: 10px;\n  height: 10px;\n  flex-shrink: 0;\n\n  border-radius: 5px;\n  background: #5864e2;\n"],["\n  width: 10px;\n  height: 10px;\n  flex-shrink: 0;\n\n  border-radius: 5px;\n  background: #5864e2;\n"]))),nn=e.div(R||(R=n(["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  border-radius: 10px;\n  background: rgba(73, 90, 255, 0.1);\n"],["\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  border-radius: 10px;\n  background: rgba(73, 90, 255, 0.1);\n"])));export{X as CheckIconContainer,F as Container,D as Content,Y as CurrentIndicator,Z as CurrentIndicatorDot,N as DescriptionText,L as Header,q as IconButton,V as MultiplierSection,W as MultiplierValue,H as PointsSection,I as PointsText,J as PointsValue,K as ProgressBarContainer,M as ProgressBarFill,O as TimelineContainer,S as TimelineContent,U as TimelineDescription,P as TimelineItem,Q as TimelineLine,T as TimelineTitle,_ as Title,nn as UpcomingIndicator};

package/build/renderer/screens/main-screen/earning-methods-section/index.d.ts

@@ -8,6 +8,7 @@ type SectionProps = {
     getActionProps?: (method: LoyaltyProgramEarningMethod) => {
         actionText: string;
         onClick: () => void;
+        loading?: boolean;
     } | null;
 };
 declare const EarningMethodsSection: React.FC<SectionProps>;

package/build/renderer/screens/main-screen/earning-methods-section/index.js

@@ -1 +1 @@
-import{__assign as e}from'./../../../../ext/tslib/tslib.es6.mjs.js';import t from"react";import{observer as o}from"mobx-react";import{useTranslation as i}from"react-i18next";import{EarningMethodTypeEnum as n}from"../../../../models/types/index.js";import{getEarningMethodTitle as r,getEarningMethodIcon as d}from"../../../../utils.js";import l from"../../../components/loyalty-method-card/index.js";import{getEarningMethodDescriptionV2 as s}from"../../../utils/loyalty-details.js";var a=o(function(e){var o=e.method,a=e.viewModel,m=e.mode,c=e.actionText,p=e.onClick,u=i(),g=u.t,f=u.i18n,x=a.loyaltyWidget,y=f.language,v=o.translations.find(function(e){return e.locale===y}),h=(null==v?void 0:v.description)||o.description||r(o),E=d(o.methodType,x.settings.widgetIconType),T=o.orderSettings,R=(null==T?void 0:T.productFilters)||[],C=o.methodType===n.ORDER_CREATE&&T&&(T.minOrderAmount>0||T.maxOrderAmount>0||R.length>0),M=C?"accordion":m,b="",j="";if(C){b=g("earningMethods.xPoints",{points:o.pointsEarned});var w=s(g,o,a);w&&(j=t.createElement("div",{style:{fontSize:"14px",color:"#475467",lineHeight:"20px",fontWeight:400}},w))}else b=s(g,o,a)||g("earningMethods.xPoints",{points:o.pointsEarned});var k=!!a.user&&o.methodType===n.CUSTOMER_REGISTER;return t.createElement(l,{title:h,description:b,icon:E,action:c&&p?{text:c,onClick:p}:void 0,isCompleted:k,mode:M,settings:{borderRadius:x.settings.cartBorderRadius,widgetIconType:x.settings.widgetIconType,button:x.button}},j)}),m=o(function(o){var i=o.viewModel,n=o.containerStyle,r=o.mode,d=void 0===r?"card":r,l=o.getActionProps,s=i.earningMethods;return t.createElement("div",{style:e({display:"flex",flexDirection:"column",gap:"12px",padding:"0 24px"},n)},s.map(function(e){var o=l?l(e):null;return t.createElement(a,{key:e.id,method:e,viewModel:i,mode:d,actionText:null==o?void 0:o.actionText,onClick:null==o?void 0:o.onClick})}))});export{m as default};
+import{__assign as e,__spreadArray as t}from'./../../../../ext/tslib/tslib.es6.mjs.js';import{observer as o}from"mobx-react";import i from"react";import'./../../../../ext/react-i18next/dist/es/context.js';import{useTranslation as n}from'./../../../../ext/react-i18next/dist/es/useTranslation.js';import{EarningMethodTypeEnum as r}from"../../../../models/types/index.js";import d from"../../../components/loyalty-method-card/index.js";import{getEarningMethodDescriptionV2 as s}from"../../../utils/loyalty-details.js";import{getEarningMethodTitle as l,getEarningMethodIcon as a}from"../../../../utils.js";var m=o(function(e){var t,o,m=e.method,c=e.viewModel,p=e.mode,u=e.actionText,g=e.onClick,v=e.isActionLoading,E=n(),f=E.t,y=E.i18n,x=c.loyaltyWidget,T=y.language,h=null===(t=m.translations)||void 0===t?void 0:t.find(function(e){return e.locale===T}),R=(null==h?void 0:h.description)||m.description||l(m),S=a(m.methodType,x.settings.widgetIconType),C=m.orderSettings,I=(null==C?void 0:C.productFilters)||[],j=m.methodType===r.ORDER_CREATE&&C&&(C.minOrderAmount>0||(null!==(o=C.maxOrderAmount)&&void 0!==o?o:0)>0||I.length>0),A=j?"accordion":p,M="",_="";if(j){M=f("earningMethods.xPoints",{points:m.pointsEarned});var b=s(f,m,c);b&&(_=i.createElement("div",{style:{fontSize:"14px",color:"#475467",lineHeight:"20px",fontWeight:400}},b))}else M=s(f,m,c)||f("earningMethods.xPoints",{points:m.pointsEarned});var k=!!c.user&&m.methodType===r.CUSTOMER_REGISTER||!!c.ikasEventUser&&m.methodType===r.ENABLE_SUBSCRIPTION&&"SUBSCRIBED"===c.ikasEventUser.subscriptionStatus;return i.createElement(d,{title:R,description:M,icon:S,action:u&&g?{text:u,onClick:g,loading:v}:void 0,isCompleted:k,mode:A,settings:{borderRadius:x.settings.cartBorderRadius,widgetIconType:x.settings.widgetIconType,button:x.button}},_)}),c=o(function(o){var n=o.viewModel,d=o.containerStyle,s=o.mode,l=void 0===s?"card":s,a=o.getActionProps,c=n.earningMethods;return i.createElement("div",{style:e({display:"flex",flexDirection:"column",gap:"12px",padding:"0 24px"},d)},t([],c,!0).sort(function(e,t){var o=function(e){return e===r.CUSTOMER_REGISTER?0:e===r.ENABLE_SUBSCRIPTION?1:2};return o(e.methodType)-o(t.methodType)}).map(function(e){var t=a?a(e):null;return i.createElement(m,{key:e.id,method:e,viewModel:n,mode:l,actionText:null==t?void 0:t.actionText,onClick:null==t?void 0:t.onClick,isActionLoading:null==t?void 0:t.loading})}))});export{c as default};

package/build/renderer/screens/main-screen/header/auth-user-section/index.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react";import{useTranslation as r}from"react-i18next";import{Container as n,TitleSection as l,RegisterText as o,RegisterDescription as m,Actions as a,HaveAccount as i,Link as c}from"./style.js";import u from"../../../../components/button/index.js";var d=t(function(t){var d=r().t,p=t.viewModel.loyaltyWidget.button;return e.createElement(n,null,e.createElement(l,null,e.createElement(o,null,d("header.register_title")),e.createElement(m,null,d("header.registerDescription"))),e.createElement(a,null,e.createElement(u,{button:p,fontSize:"textMDMedium",paddingSize:"medium"},d("header.registerButton")),e.createElement(i,null,d("header.haveAccount")," ",e.createElement(c,null,d("common.login")))))});export{d as default};
+import{observer as e}from"mobx-react";import t from"react";import'./../../../../../ext/react-i18next/dist/es/context.js';import{useTranslation as o}from'./../../../../../ext/react-i18next/dist/es/useTranslation.js';import{WidgetMode as n}from"../../../../../models/types/index.js";import r from"../../../../components/button/index.js";import{Container as i,TitleSection as l,RegisterText as c,RegisterDescription as a,Actions as m,HaveAccount as d,Link as s}from"./style.js";var u=e(function(e){var u=o().t,f=e.viewModel,p=f.loyaltyWidget,M=f.storeUrl,g=p.button;return t.createElement(i,null,t.createElement(l,null,t.createElement(c,null,u("header.register_title")),t.createElement(a,null,u("header.registerDescription"))),t.createElement(m,null,t.createElement(r,{button:g,fontSize:"textMDMedium",paddingSize:"medium",onClick:function(){M&&(e.viewModel.setWidgetMode(n.MINI_MODE),window.location.href="".concat(M,"/account/register"))}},u("header.registerButton")),t.createElement(d,null,u("header.haveAccount")," ",t.createElement(s,{onClick:function(){M&&(e.viewModel.setWidgetMode(n.MINI_MODE),window.location.href="".concat(M,"/account/login"))}},u("common.login")))))});export{u as default};

package/build/renderer/screens/main-screen/header/auth-user-section/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../../../ext/tslib/tslib.es6.mjs.js';import e from'./../../../../../ext/styled-components/dist/styled-components.browser.esm.js';import{textSM as o}from"../../../../components/style/typography.js";var i,t,l,p,r,c,s,x=e.div(i||(i=n(["\n  display: flex;\n  flex-direction: column;\n  padding: 20px 16px;\n  gap: 32px;\n  align-items: center;\n"],["\n  display: flex;\n  flex-direction: column;\n  padding: 20px 16px;\n  gap: 32px;\n  align-items: center;\n"]))),a=e.div(t||(t=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"]))),d=e.div(l||(l=n(["\n  color: #121926;\n  text-align: center;\n\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n"],["\n  color: #121926;\n  text-align: center;\n\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n"]))),f=e.div(p||(p=n(["\n  color: #4b5565;\n  text-align: center;\n  ","\n"],["\n  color: #4b5565;\n  text-align: center;\n  ","\n"])),o),g=e.div(r||(r=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"]))),m=e.span(c||(c=n(["\n  color: #4b5565;\n  text-align: center;\n  ","\n"],["\n  color: #4b5565;\n  text-align: center;\n  ","\n"])),o),y=e.div(s||(s=n(["\n  display: inline-block;\n  cursor: pointer;\n  color: #14141a;\n  font-weight: 500;\n"],["\n  display: inline-block;\n  cursor: pointer;\n  color: #14141a;\n  font-weight: 500;\n"])));export{g as Actions,x as Container,m as HaveAccount,y as Link,f as RegisterDescription,d as RegisterText,a as TitleSection};
+import{__makeTemplateObject as n}from'./../../../../../ext/tslib/tslib.es6.mjs.js';import e from"styled-components";import{textSM as i}from"../../../../components/style/typography.js";var o,l,t,p,r,c,x,a=e.div(o||(o=n(["\n  display: flex;\n  flex-direction: column;\n  padding: 20px 16px;\n  gap: 32px;\n  align-items: center;\n"],["\n  display: flex;\n  flex-direction: column;\n  padding: 20px 16px;\n  gap: 32px;\n  align-items: center;\n"]))),s=e.div(l||(l=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"]))),d=e.div(t||(t=n(["\n  color: #121926;\n  text-align: center;\n\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n"],["\n  color: #121926;\n  text-align: center;\n\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n"]))),f=e.div(p||(p=n(["\n  color: #4b5565;\n  text-align: center;\n  ","\n"],["\n  color: #4b5565;\n  text-align: center;\n  ","\n"])),i),g=e.div(r||(r=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"]))),m=e.span(c||(c=n(["\n  color: #4b5565;\n  text-align: center;\n  ","\n"],["\n  color: #4b5565;\n  text-align: center;\n  ","\n"])),i),y=e.div(x||(x=n(["\n  display: inline-block;\n  cursor: pointer;\n  color: #14141a;\n  font-weight: 500;\n"],["\n  display: inline-block;\n  cursor: pointer;\n  color: #14141a;\n  font-weight: 500;\n"])));export{g as Actions,a as Container,m as HaveAccount,y as Link,f as RegisterDescription,d as RegisterText,s as TitleSection};

package/build/renderer/screens/main-screen/header/index.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react";import{Container as r,TopSection as o,CloseButton as n,Content as i,Card as l}from"./style.js";import a from"./logo-section/index.js";import s from"./title-section/index.js";import c from"./auth-user-section/index.js";import m from"./user-logged-section/index.js";import{XClose as d}from"../../../../assets/icons/x-close.js";import{ImageTypeEnum as f}from"../../../../models/loyalty-widget/types/index.js";var u=t(function(t){var u=t.viewModel,g=t.onClose,p=t.onCardHeightChange,v=t.headerGap,h=u.loyaltyWidget,E=u.user,y=h.header.background;h.settings;var x=e.useRef(null);return e.useEffect(function(){if(p){var e=x.current;if(e){var t=function(){p(e.getBoundingClientRect().height)};if(t(),"undefined"!=typeof ResizeObserver){var r=new ResizeObserver(function(){t()});return r.observe(e),function(){r.disconnect()}}}}},[p]),e.createElement(r,null,e.createElement(o,{$headerBackground:y,$gap:v},h.header.logo.type===f.SHOW&&h.header.logo.src&&e.createElement(a,{logo:h.header.logo}),e.createElement(s,{layout:h}),e.createElement(n,{onClick:g},e.createElement(d,null))),e.createElement(i,null,e.createElement(l,{ref:x},E?e.createElement(m,{viewModel:u}):e.createElement(c,{viewModel:u}))))});export{u as default};
+import{observer as e}from"mobx-react";import t from"react";import{XClose as r}from"../../../../assets/icons/x-close.js";import{ImageTypeEnum as o}from"../../../../models/loyalty-widget/types/index.js";import n from"./auth-user-section/index.js";import i from"./logo-section/index.js";import l from"./title-section/index.js";import a from"./user-logged-section/index.js";import{Container as s,TopSection as c,CloseButton as m,Content as d,Card as u}from"./style.js";var f=e(function(e){var f,g=e.viewModel,p=e.onClose,v=e.onCardHeightChange,h=e.headerGap,y=g.loyaltyWidget,E=g.user,b=y.header.background,x=b.bgColor,j=b.type,C=(null===(f=b.image)||void 0===f?void 0:f.src)||null,R=t.useRef(null);return t.useEffect(function(){if(v){var e=R.current;if(e){var t=function(){v(Math.round(e.getBoundingClientRect().height))};if(t(),"undefined"!=typeof ResizeObserver){var r=new ResizeObserver(function(){t()});return r.observe(e),function(){r.disconnect()}}}}},[v]),t.createElement(s,null,t.createElement(c,{$bgColor:x,$bgType:j,$bgImageSrc:C,$gap:h},y.header.logo.type===o.SHOW&&y.header.logo.src&&t.createElement(i,{logo:y.header.logo}),t.createElement(l,{layout:y}),t.createElement(m,{onClick:p},t.createElement(r,null))),t.createElement(d,null,t.createElement(u,{ref:R,$borderRadius:y.settings.cartBorderRadius},E?t.createElement(a,{viewModel:g}):t.createElement(n,{viewModel:g}))))});export{f as default};

package/build/renderer/screens/main-screen/header/logo-section/index.js

@@ -1 +1 @@
-import r from"react";import{observer as t}from"mobx-react";import{Container as e,Logo as o}from"./style.js";var m=t(function(t){return r.createElement(e,null,r.createElement(o,{src:t.logo.src,alt:"Logo"}))});export{m as default};
+import{observer as r}from"mobx-react";import t from"react";import{Container as e,Logo as o}from"./style.js";var m=r(function(r){return t.createElement(e,null,t.createElement(o,{src:r.logo.src,alt:"Logo"}))});export{m as default};

package/build/renderer/screens/main-screen/header/logo-section/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../../../ext/tslib/tslib.es6.mjs.js';import e from'./../../../../../ext/styled-components/dist/styled-components.browser.esm.js';var t,i,s=e.div(t||(t=n(["\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"],["\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"]))),o=e.img(i||(i=n(["\n  max-width: 150px;\n  max-height: 30px;\n  object-fit: contain;\n"],["\n  max-width: 150px;\n  max-height: 30px;\n  object-fit: contain;\n"])));export{s as Container,o as Logo};
+import{__makeTemplateObject as n}from'./../../../../../ext/tslib/tslib.es6.mjs.js';import t from"styled-components";var e,i,p=t.div(e||(e=n(["\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"],["\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"]))),s=t.img(i||(i=n(["\n  max-width: 150px;\n  max-height: 30px;\n  object-fit: contain;\n"],["\n  max-width: 150px;\n  max-height: 30px;\n  object-fit: contain;\n"])));export{p as Container,s as Logo};

package/build/renderer/screens/main-screen/header/style.d.ts

@@ -1,12 +1,16 @@
-import { LoyaltyWidgetHeaderBackground } from "models/loyalty-widget/header/header-background";
+import { HeaderBackgroundTypeEnum } from "models/loyalty-widget/types";
 export declare const CARD_OVERLAP_TOP = 48;
 type TopSectionProps = {
-    $headerBackground: LoyaltyWidgetHeaderBackground;
+    $bgType: HeaderBackgroundTypeEnum;
+    $bgColor: string | null;
+    $bgImageSrc?: string | null;
     $gap?: number;
 };
-export declare const Container: import("styled-components").StyledComponent<"header", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TopSection: import("styled-components").StyledComponent<"div", any, TopSectionProps, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Card: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Card: import("styled-components").StyledComponent<"div", any, {
+    $borderRadius: number;
+}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/build/renderer/screens/main-screen/header/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../../ext/tslib/tslib.es6.mjs.js';import{HeaderBackgroundTypeEnum as e}from"../../../../models/loyalty-widget/types/index.js";import o,{css as r}from'./../../../../ext/styled-components/dist/styled-components.browser.esm.js';var i,t,p,a,d,l,s,x,c,g,b=48,u=o.header(i||(i=n(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n"],["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n"]))),f=o.div(s||(s=n(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: ",";\n  padding: 24px 20px ","px 24px;\n\n  ","\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: ",";\n  padding: 24px 20px ","px 24px;\n\n  ","\n"])),function(n){var e=n.$gap;return void 0!==e?"".concat(e,"px"):"56px"},48,function(o){var i=o.$headerBackground,s=i.type,x=i.bgColor,c=i.image;return s===e.IMAGE?(null==c?void 0:c.src)?r(p||(p=n(["\n        background-image: url(",");\n        background-position: center;\n        background-repeat: no-repeat;\n        background-size: cover;\n      "],["\n        background-image: url(",");\n        background-position: center;\n        background-repeat: no-repeat;\n        background-size: cover;\n      "])),c.src):r(t||(t=n([""],[""]))):x?s===e.GRADIENT?r(d||(d=n(["\n        background: radial-gradient(\n            92.35% 100% at 50% 0%,\n            rgba(255, 255, 255, 0.5) 0%,\n            rgba(0, 0, 0, 0.5) 100%\n          ),\n          ",";\n      "],["\n        background: radial-gradient(\n            92.35% 100% at 50% 0%,\n            rgba(255, 255, 255, 0.5) 0%,\n            rgba(0, 0, 0, 0.5) 100%\n          ),\n          ",";\n      "])),x):r(l||(l=n(["\n      background-color: ",";\n    "],["\n      background-color: ",";\n    "])),x):r(a||(a=n([""],[""])))}),m=o.div(x||(x=n(["\n  position: absolute;\n  left: 20px;\n  right: 20px;\n  top: calc(100% - ","px);\n  display: flex;\n  z-index: 1;\n"],["\n  position: absolute;\n  left: 20px;\n  right: 20px;\n  top: calc(100% - ","px);\n  display: flex;\n  z-index: 1;\n"])),48),y=o.div(c||(c=n(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: white;\n  border: 1px solid #eef2f6;\n  border-radius: 6px;\n  box-shadow: 0 5px 2px 0 rgba(0, 0, 0, 0.01), 0 3px 2px 0 rgba(0, 0, 0, 0.02),\n    0 1px 1px 0 rgba(0, 0, 0, 0.03), 0 0 1px 0 rgba(0, 0, 0, 0.04);\n"],["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: white;\n  border: 1px solid #eef2f6;\n  border-radius: 6px;\n  box-shadow: 0 5px 2px 0 rgba(0, 0, 0, 0.01), 0 3px 2px 0 rgba(0, 0, 0, 0.02),\n    0 1px 1px 0 rgba(0, 0, 0, 0.03), 0 0 1px 0 rgba(0, 0, 0, 0.04);\n"]))),v=o.div(g||(g=n(["\n  position: absolute;\n  right: 20px;\n  top: 24px;\n  display: flex;\n  padding: 4px;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  svg {\n    color: #f7f5ff;\n  }\n"],["\n  position: absolute;\n  right: 20px;\n  top: 24px;\n  display: flex;\n  padding: 4px;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  svg {\n    color: #f7f5ff;\n  }\n"])));export{b as CARD_OVERLAP_TOP,y as Card,v as CloseButton,u as Container,m as Content,f as TopSection};
+import{__makeTemplateObject as n}from'./../../../../ext/tslib/tslib.es6.mjs.js';import{HeaderBackgroundTypeEnum as e}from"../../../../models/loyalty-widget/types/index.js";import o,{css as r}from"styled-components";var i,t,p,a,d,l,x,c,s,g,b=48,f=o.div(i||(i=n(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n"],["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n"]))),u=o.div(x||(x=n(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: ",";\n  padding: 24px 20px ","px 24px;\n\n  ","\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: ",";\n  padding: 24px 20px ","px 24px;\n\n  ","\n"])),function(n){var e=n.$gap;return void 0!==e?"".concat(e,"px"):"56px"},48,function(o){var i=o.$bgType,x=o.$bgColor,c=o.$bgImageSrc;return i===e.IMAGE?c?r(p||(p=n(["\n        background-image: url(",");\n        background-position: center;\n        background-repeat: no-repeat;\n        background-size: cover;\n      "],["\n        background-image: url(",");\n        background-position: center;\n        background-repeat: no-repeat;\n        background-size: cover;\n      "])),c):r(t||(t=n([""],[""]))):x?i===e.GRADIENT?r(d||(d=n(["\n        background: radial-gradient(\n            92.35% 100% at 50% 0%,\n            rgba(255, 255, 255, 0.5) 0%,\n            rgba(0, 0, 0, 0.5) 100%\n          ),\n          ",";\n      "],["\n        background: radial-gradient(\n            92.35% 100% at 50% 0%,\n            rgba(255, 255, 255, 0.5) 0%,\n            rgba(0, 0, 0, 0.5) 100%\n          ),\n          ",";\n      "])),x):r(l||(l=n(["\n      background-color: ",";\n    "],["\n      background-color: ",";\n    "])),x):r(a||(a=n([""],[""])))}),m=o.div(c||(c=n(["\n  position: absolute;\n  left: 20px;\n  right: 20px;\n  top: calc(100% - ","px);\n  display: flex;\n  z-index: 1;\n"],["\n  position: absolute;\n  left: 20px;\n  right: 20px;\n  top: calc(100% - ","px);\n  display: flex;\n  z-index: 1;\n"])),48),v=o.div(s||(s=n(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: white;\n  border: 1px solid #eef2f6;\n  border-radius: ",";\n  box-shadow: 0 5px 2px 0 rgba(0, 0, 0, 0.01), 0 3px 2px 0 rgba(0, 0, 0, 0.02),\n    0 1px 1px 0 rgba(0, 0, 0, 0.03), 0 0 1px 0 rgba(0, 0, 0, 0.04);\n"],["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: white;\n  border: 1px solid #eef2f6;\n  border-radius: ",";\n  box-shadow: 0 5px 2px 0 rgba(0, 0, 0, 0.01), 0 3px 2px 0 rgba(0, 0, 0, 0.02),\n    0 1px 1px 0 rgba(0, 0, 0, 0.03), 0 0 1px 0 rgba(0, 0, 0, 0.04);\n"])),function(n){var e=n.$borderRadius;return"".concat(e,"px")}),y=o.div(g||(g=n(["\n  position: absolute;\n  right: 20px;\n  top: 24px;\n  display: flex;\n  padding: 4px;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  svg {\n    color: #f7f5ff;\n  }\n"],["\n  position: absolute;\n  right: 20px;\n  top: 24px;\n  display: flex;\n  padding: 4px;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  svg {\n    color: #f7f5ff;\n  }\n"])));export{b as CARD_OVERLAP_TOP,v as Card,y as CloseButton,f as Container,m as Content,u as TopSection};

package/build/renderer/screens/main-screen/header/title-section/index.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react";import{useTranslation as r}from"react-i18next";import{Container as o,LoyaltyProgramText as a,LoyaltyTitle as l}from"./style.js";var m=t(function(t){var m=r().t;return e.createElement(o,null,e.createElement(a,{$textColor:t.layout.header.textColor||"white"},m("header.title")),e.createElement(l,{$textColor:t.layout.header.textColor||"white"},m("header.subtitle")))});export{m as default};
+import{observer as e}from"mobx-react";import t from"react";import'./../../../../../ext/react-i18next/dist/es/context.js';import{useTranslation as r}from'./../../../../../ext/react-i18next/dist/es/useTranslation.js';import{Container as o,LoyaltyProgramText as a,LoyaltyTitle as l}from"./style.js";var i=e(function(e){var i=r().t;return t.createElement(o,null,t.createElement(a,{$textColor:e.layout.header.textColor||"white"},i("header.title")),t.createElement(l,{$textColor:e.layout.header.textColor||"white"},i("header.subtitle")))});export{i as default};

package/build/renderer/screens/main-screen/header/title-section/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../../../ext/tslib/tslib.es6.mjs.js';import o from'./../../../../../ext/styled-components/dist/styled-components.browser.esm.js';var t,e,i,l=o.div(t||(t=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 24px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 24px;\n"]))),r=o.div(e||(e=n(["\n  color: ",";\n  opacity: 0.6;\n\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px; /* 150% */\n"],["\n  color: ",";\n  opacity: 0.6;\n\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px; /* 150% */\n"])),function(n){return n.$textColor}),p=o.div(i||(i=n(["\n  color: ",";\n  font-size: 20.211px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 25.263px;\n  letter-spacing: -0.202px;\n"],["\n  color: ",";\n  font-size: 20.211px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 25.263px;\n  letter-spacing: -0.202px;\n"])),function(n){return n.$textColor});export{l as Container,r as LoyaltyProgramText,p as LoyaltyTitle};
+import{__makeTemplateObject as n}from'./../../../../../ext/tslib/tslib.es6.mjs.js';import t from"styled-components";var o,e,i,l=t.div(o||(o=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 24px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 24px;\n"]))),p=t.div(e||(e=n(["\n  color: ",";\n  opacity: 0.6;\n\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px; /* 150% */\n"],["\n  color: ",";\n  opacity: 0.6;\n\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px; /* 150% */\n"])),function(n){return n.$textColor}),r=t.div(i||(i=n(["\n  color: ",";\n  font-size: 20.211px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 25.263px;\n  letter-spacing: -0.202px;\n"],["\n  color: ",";\n  font-size: 20.211px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 25.263px;\n  letter-spacing: -0.202px;\n"])),function(n){return n.$textColor});export{l as Container,p as LoyaltyProgramText,r as LoyaltyTitle};

package/build/renderer/screens/main-screen/header/user-logged-section/index.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react";import{useTranslation as l}from"react-i18next";import{Container as r,TopRow as n,LeftSection as a,BadgeIconContainer as o,PointsContainer as m,Label as c,PointsValue as u,CurrentPoints as s,TotalPoints as i,RightSection as E,LevelBadge as d,BadgeText as f,ProgressBarContainer as L,ProgressBarFill as g}from"./style.js";import{BadgeIconTypeEnum as v}from"../../../../../models/loyalty-widget/types/index.js";import{BadgeLevel1 as p}from"../../../../../assets/badgeLevel1.js";import{BadgeLevel2 as b}from"../../../../../assets/badgeLevel2.js";import{BadgeLevel3 as y}from"../../../../../assets/badgeLevel3.js";import{BadgeLevel4 as j}from"../../../../../assets/badgeLevel4.js";var I=t(function(t){var I=t.viewModel,h=l().t,x=I.loyaltyWidget,V=I.user,_=x.settings;if(!V)return null;var w=V.totalPoint,M=V.customerTierId,T=(null==M?void 0:M.pointsRequired)||0,N=T>0?Math.min(w/T*100,100):0,P=e.useMemo(function(){var e=V.customerTierId;return e?"🏆  ".concat(e.name):"🏆  "},[_.badgeIconLevel,V.customerTierId]);return e.createElement(r,null,e.createElement(n,null,e.createElement(a,null,e.createElement(o,null,function(){switch(_.badgeIconLevel){case v.LEVEL_1:return e.createElement(p,null);case v.LEVEL_2:return e.createElement(b,null);case v.LEVEL_3:return e.createElement(y,null);case v.LEVEL_4:return e.createElement(j,null);default:return null}}()),e.createElement(m,null,e.createElement(c,null,h("header.earnedPoints")),e.createElement(u,null,e.createElement(s,null,w),e.createElement(i,null,"/ ",T)))),e.createElement(E,null,_.badgeIconLevel!==v.NONE&&e.createElement(d,null,e.createElement(f,null,P)))),e.createElement(L,null,e.createElement(g,{$percentage:N,$color:I.loyaltyWidget.header.background.bgColor||void 0})))});export{I as default};
+import{observer as e}from"mobx-react";import t from"react";import'./../../../../../ext/react-i18next/dist/es/context.js';import{useTranslation as l}from'./../../../../../ext/react-i18next/dist/es/useTranslation.js';import{BadgeLevel1 as n}from"../../../../../assets/badgeLevel1.js";import{BadgeLevel2 as r}from"../../../../../assets/badgeLevel2.js";import{BadgeLevel3 as a}from"../../../../../assets/badgeLevel3.js";import{BadgeLevel4 as o}from"../../../../../assets/badgeLevel4.js";import{BadgeIconTypeEnum as m}from"../../../../../models/loyalty-widget/types/index.js";import s from"../../../../components/count-up/index.js";import{Container as u,TopRow as c,LeftSection as i,BadgeIconContainer as d,PointsContainer as E,Label as p,PointsValue as f,CurrentPoints as g,TotalPoints as v,RightSection as L,LevelBadge as b,BadgeText as j,ProgressBarContainer as y,ProgressBarFill as x}from"./style.js";var I=e(function(e){var I=e.viewModel,_=l().t,h=I.loyaltyWidget,T=I.user,V=h.settings;if(!T)return null;var w=T.totalPoint,M=T.customerTierId,N=(null==M?void 0:M.pointsRequired)||0,P=N>0?Math.min(w/N*100,100):0,W=t.useMemo(function(){var e=T.customerTierId;return e?"🏆  ".concat(e.name):"🏆  "},[V.badgeIconLevel,T.customerTierId]);return t.createElement(u,null,t.createElement(c,null,t.createElement(i,null,t.createElement(d,null,function(){switch(V.badgeIconLevel){case m.LEVEL_1:return t.createElement(n,null);case m.LEVEL_2:return t.createElement(r,null);case m.LEVEL_3:return t.createElement(a,null);case m.LEVEL_4:return t.createElement(o,null);default:return null}}()),t.createElement(E,null,t.createElement(p,null,_("header.earnedPoints")),t.createElement(f,null,t.createElement(g,null,t.createElement(s,{end:w})),N>0&&t.createElement(v,null,"/ ",N)))),t.createElement(L,null,V.badgeIconLevel!==m.NONE&&!!(null==M?void 0:M.name.length)&&t.createElement(b,null,t.createElement(j,null,W)))),N>0&&t.createElement(y,null,t.createElement(x,{$percentage:P,$color:I.loyaltyWidget.header.background.bgColor||void 0})))});export{I as default};

package/build/renderer/screens/main-screen/header/user-logged-section/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../../../ext/tslib/tslib.es6.mjs.js';import e from'./../../../../../ext/styled-components/dist/styled-components.browser.esm.js';import{textSM as i,displayXSSemiBold as r,textLGSemiBold as a}from"../../../../components/style/typography.js";var t=e.div(b||(b=n(["\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  gap: 20px;\n  width: 100%;\n  box-sizing: border-box;\n"],["\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  gap: 20px;\n  width: 100%;\n  box-sizing: border-box;\n"]))),d=e.div(h||(h=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 12px;\n  width: 100%;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 12px;\n  width: 100%;\n"]))),p=e.div(u||(u=n(["\n  display: flex;\n  gap: 16px;\n  align-items: center;\n"],["\n  display: flex;\n  gap: 16px;\n  align-items: center;\n"]))),o=e.div(m||(m=n([""],[""]))),x=e.div(y||(y=n(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"],["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"]))),s=e.div(v||(v=n(["\n  color: #121926;\n  text-align: center;\n  ","\n"],["\n  color: #121926;\n  text-align: center;\n  ","\n"])),i),l=e.div(w||(w=n(["\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"],["\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"]))),g=e.span(j||(j=n(["\n  color: #121926;\n  ","\n"],["\n  color: #121926;\n  ","\n"])),r),f=e.span(k||(k=n(["\n  color: #9aa4b2;\n  ","\n"],["\n  color: #9aa4b2;\n  ","\n"])),a),c=e.div(B||(B=n(["\n  svg {\n    width: 40px;\n    height: 40px;\n  }\n"],["\n  svg {\n    width: 40px;\n    height: 40px;\n  }\n"])));e.div(z||(z=n(["\n  display: flex;\n  padding: 4px 10px;\n  align-items: center;\n  gap: 4px;\n  border-radius: 999px;\n  border: 1px solid var(--Gray-Blue-100, #eef2f6);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"],["\n  display: flex;\n  padding: 4px 10px;\n  align-items: center;\n  gap: 4px;\n  border-radius: 999px;\n  border: 1px solid var(--Gray-Blue-100, #eef2f6);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"])));var b,h,u,m,y,v,w,j,k,B,z,G,$,_,E,F=e.div(G||(G=n(["\n  display: flex;\n  padding: 4px 10px;\n  justify-content: center;\n  align-items: center;\n  gap: 6px;\n\n  border-radius: 8px;\n  border: 0.6px solid var(--Gray-Blue-300, #cdd5df);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0 1px 1px 0 rgba(38, 69, 109, 0.03),\n    0 1px 1px 0 rgba(38, 69, 109, 0.02), 0 2px 1px 0 rgba(38, 69, 109, 0.01),\n    0 -3px 1px 0 rgba(238, 242, 246, 0.5) inset;\n"],["\n  display: flex;\n  padding: 4px 10px;\n  justify-content: center;\n  align-items: center;\n  gap: 6px;\n\n  border-radius: 8px;\n  border: 0.6px solid var(--Gray-Blue-300, #cdd5df);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0 1px 1px 0 rgba(38, 69, 109, 0.03),\n    0 1px 1px 0 rgba(38, 69, 109, 0.02), 0 2px 1px 0 rgba(38, 69, 109, 0.01),\n    0 -3px 1px 0 rgba(238, 242, 246, 0.5) inset;\n"]))),q=e.span($||($=n(["\n  color: #364152;\n  text-align: center;\n\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n"],["\n  color: #364152;\n  text-align: center;\n\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n"]))),A=e.div(_||(_=n(["\n  width: 100%;\n  height: 8px;\n  border-radius: 4px;\n  background: #eef2f6;\n  overflow: hidden;\n"],["\n  width: 100%;\n  height: 8px;\n  border-radius: 4px;\n  background: #eef2f6;\n  overflow: hidden;\n"]))),C=e.div(E||(E=n(["\n  width: ","%;\n  height: 100%;\n\n  border-radius: 4px;\n  background: linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0.5) 0%,\n      rgba(255, 255, 255, 0.5) 100%\n    ),\n    ",";\n\n  transition: width 0.3s ease-in-out;\n"],["\n  width: ","%;\n  height: 100%;\n\n  border-radius: 4px;\n  background: linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0.5) 0%,\n      rgba(255, 255, 255, 0.5) 100%\n    ),\n    ",";\n\n  transition: width 0.3s ease-in-out;\n"])),function(n){return n.$percentage},function(n){return n.$color||"#4F46E5"});export{c as BadgeIconContainer,q as BadgeText,t as Container,g as CurrentPoints,s as Label,p as LeftSection,F as LevelBadge,x as PointsContainer,l as PointsValue,A as ProgressBarContainer,C as ProgressBarFill,o as RightSection,d as TopRow,f as TotalPoints};
+import{__makeTemplateObject as n}from'./../../../../../ext/tslib/tslib.es6.mjs.js';import e from"styled-components";import{textSM as i,displayXSSemiBold as a,textLGSemiBold as r}from"../../../../components/style/typography.js";var p=e.div(b||(b=n(["\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  gap: 20px;\n  width: 100%;\n  box-sizing: border-box;\n"],["\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  gap: 20px;\n  width: 100%;\n  box-sizing: border-box;\n"]))),t=e.div(h||(h=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 12px;\n  width: 100%;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 12px;\n  width: 100%;\n"]))),d=e.div(u||(u=n(["\n  display: flex;\n  gap: 16px;\n  align-items: center;\n"],["\n  display: flex;\n  gap: 16px;\n  align-items: center;\n"]))),x=e.div(m||(m=n([""],[""]))),o=e.div(y||(y=n(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"],["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"]))),l=e.div(v||(v=n(["\n  color: #121926;\n  text-align: center;\n  ","\n"],["\n  color: #121926;\n  text-align: center;\n  ","\n"])),i),s=e.div(w||(w=n(["\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"],["\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"]))),g=e.span(k||(k=n(["\n  color: #121926;\n  ","\n"],["\n  color: #121926;\n  ","\n"])),a),f=e.span(B||(B=n(["\n  color: #9aa4b2;\n  ","\n"],["\n  color: #9aa4b2;\n  ","\n"])),r),c=e.div(j||(j=n(["\n  svg {\n    width: 40px;\n    height: 40px;\n  }\n"],["\n  svg {\n    width: 40px;\n    height: 40px;\n  }\n"])));e.div(z||(z=n(["\n  display: flex;\n  padding: 4px 10px;\n  align-items: center;\n  gap: 4px;\n  border-radius: 999px;\n  border: 1px solid var(--Gray-Blue-100, #eef2f6);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"],["\n  display: flex;\n  padding: 4px 10px;\n  align-items: center;\n  gap: 4px;\n  border-radius: 999px;\n  border: 1px solid var(--Gray-Blue-100, #eef2f6);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"])));var b,h,u,m,y,v,w,k,B,j,z,G,$,E,F,_=e.div(G||(G=n(["\n  display: flex;\n  padding: 4px 10px;\n  justify-content: center;\n  align-items: center;\n  gap: 6px;\n\n  border-radius: 8px;\n  border: 0.6px solid var(--Gray-Blue-300, #cdd5df);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0 1px 1px 0 rgba(38, 69, 109, 0.03),\n    0 1px 1px 0 rgba(38, 69, 109, 0.02), 0 2px 1px 0 rgba(38, 69, 109, 0.01),\n    0 -3px 1px 0 rgba(238, 242, 246, 0.5) inset;\n"],["\n  display: flex;\n  padding: 4px 10px;\n  justify-content: center;\n  align-items: center;\n  gap: 6px;\n\n  border-radius: 8px;\n  border: 0.6px solid var(--Gray-Blue-300, #cdd5df);\n  background: var(--Basic-50, #fff);\n  box-shadow: 0 1px 1px 0 rgba(38, 69, 109, 0.03),\n    0 1px 1px 0 rgba(38, 69, 109, 0.02), 0 2px 1px 0 rgba(38, 69, 109, 0.01),\n    0 -3px 1px 0 rgba(238, 242, 246, 0.5) inset;\n"]))),q=e.span($||($=n(["\n  color: #364152;\n  text-align: center;\n\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n"],["\n  color: #364152;\n  text-align: center;\n\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n"]))),A=e.div(E||(E=n(["\n  width: 100%;\n  height: 8px;\n  border-radius: 4px;\n  background: #eef2f6;\n  overflow: hidden;\n"],["\n  width: 100%;\n  height: 8px;\n  border-radius: 4px;\n  background: #eef2f6;\n  overflow: hidden;\n"]))),C=e.div(F||(F=n(["\n  width: ","%;\n  height: 100%;\n\n  border-radius: 4px;\n  background: linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0.5) 0%,\n      rgba(255, 255, 255, 0.5) 100%\n    ),\n    ",";\n\n  transition: width 0.3s ease-in-out;\n"],["\n  width: ","%;\n  height: 100%;\n\n  border-radius: 4px;\n  background: linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0.5) 0%,\n      rgba(255, 255, 255, 0.5) 100%\n    ),\n    ",";\n\n  transition: width 0.3s ease-in-out;\n"])),function(n){return n.$percentage},function(n){return n.$color||"#4F46E5"});export{c as BadgeIconContainer,q as BadgeText,p as Container,g as CurrentPoints,l as Label,d as LeftSection,_ as LevelBadge,o as PointsContainer,s as PointsValue,A as ProgressBarContainer,C as ProgressBarFill,x as RightSection,t as TopRow,f as TotalPoints};

package/build/renderer/screens/main-screen/index.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react";import{useTranslation as o}from"react-i18next";import n from"./header/index.js";import r from"../../components/section-title/index.js";import i from"./earning-methods-section/index.js";import a from"./spending-methods-section/index.js";import m from"./program-info-section/index.js";import{Container as l,Content as s,Section as c}from"./style.js";import{CARD_OVERLAP_TOP as d}from"./header/style.js";import{EarningMethodTypeEnum as p}from"../../../models/types/index.js";import{ImageTypeEnum as f}from"../../../models/loyalty-widget/types/index.js";var g=t(function(t){var g=t.viewModel,u=t.onClose,h=t.onNavigate,E=o().t,x=e.useState(0),T=x[0],y=x[1],v=e.useState(56),M=v[0],j=v[1],C=Math.max(T-d+32,32),S=g.user,w=g.spendingMethods.length>0,_=!!S&&w;return e.createElement(l,null,e.createElement(n,{viewModel:g,onClose:u,onCardHeightChange:y,headerGap:M}),e.createElement(s,{$topPadding:C,onScroll:function(e){var t=g.loyaltyWidget.header.logo;if(t.type===f.SHOW&&t.src){var o=e.currentTarget.scrollTop,n=Math.max(16,56-o);j(n)}}},e.createElement(c,null,e.createElement(r,{style:{paddingTop:0}},E(_?"main_screen.spendingMethodsTitle":"main_screen.earningMethodsTitle")),_?e.createElement(a,{viewModel:g,mode:"card",getActionProps:function(e){return null}}):e.createElement(i,{viewModel:g,getActionProps:function(e){return e.methodType===p.CUSTOMER_REGISTER?{actionText:E("common.create"),onClick:function(){}}:e.methodType===p.ENABLE_SUBSCRIPTION?{actionText:E("common.allow"),onClick:function(){}}:null}})),e.createElement(c,null,e.createElement(r,{style:{paddingTop:0}},E("main_screen.programInfoTitle")),e.createElement(m,{viewModel:g,onNavigate:h}))))});export{g as default};
+import{__awaiter as e,__generator as t,__assign as o}from'./../../../ext/tslib/tslib.es6.mjs.js';import{observer as n}from"mobx-react";import i from"react";import'./../../../ext/react-i18next/dist/es/context.js';import{useTranslation as r}from'./../../../ext/react-i18next/dist/es/useTranslation.js';import{ImageTypeEnum as s}from"../../../models/loyalty-widget/types/index.js";import{EarningMethodTypeEnum as a,WidgetMode as l}from"../../../models/types/index.js";import c from"../../components/section-title/index.js";import d from"./earning-methods-section/index.js";import m from"./header/index.js";import{CARD_OVERLAP_TOP as u}from"./header/style.js";import p from"./program-info-section/index.js";import g from"./spending-methods-section/index.js";import{Container as f,Content as h,Section as v}from"./style.js";var E=n(function(n){var E=n.viewModel,M=n.onClose,T=n.onNavigate,x=r().t,b=i.useState(0),j=b[0],y=b[1],S=i.useState(56),w=S[0],C=S[1],_=Math.max(j-u+32,32);E.user;var k=E.shouldShowSpendingMethods,A=E.earningMethods.length>0,I=k||A;return i.createElement(f,null,i.createElement(m,{viewModel:E,onClose:M,onCardHeightChange:y,headerGap:w}),i.createElement(h,{$topPadding:_,onScroll:function(e){var t=E.loyaltyWidget.header.logo;if(t.type===s.SHOW&&t.src){var o=e.currentTarget.scrollTop,n=Math.max(16,Math.min(56,56-o));C(n)}}},I&&i.createElement(v,null,i.createElement(c,{style:{paddingTop:0}},x(k?"main_screen.spendingMethodsTitle":"main_screen.earningMethodsTitle")),k?i.createElement(g,{viewModel:E,mode:"accordion",methods:E.spendingMethods.filter(function(e){return e.isAvailable}),getActionProps:function(e){return null}}):i.createElement(d,{viewModel:E,getActionProps:function(n){return n.methodType===a.CUSTOMER_REGISTER?{actionText:x("common.create"),onClick:function(){E.storeUrl&&(E.setWidgetMode(l.MINI_MODE),window.location.href="".concat(E.storeUrl,"/account/register"))}}:n.methodType===a.ENABLE_SUBSCRIPTION?{actionText:x("common.allow"),onClick:function(){return e(void 0,void 0,void 0,function(){var e;return t(this,function(t){switch(t.label){case 0:return(null===(e=E.callbacks)||void 0===e?void 0:e.subscribeToMarketingNotifications)?(E.isActionLoading=!0,[4,E.callbacks.subscribeToMarketingNotifications()]):[3,2];case 1:t.sent()&&(E.ikasEventUser=o(o({},E.ikasEventUser),{subscriptionStatus:"SUBSCRIBED"}),E.userRefreshTrigger++),E.isActionLoading=!1,t.label=2;case 2:return[2]}})})},loading:E.isActionLoading}:null}})),i.createElement(v,null,i.createElement(c,{style:{paddingTop:0}},x("main_screen.programInfoTitle")),i.createElement(p,{viewModel:E,onNavigate:T}))))});export{E as default};

package/build/renderer/screens/main-screen/program-info-section/index.js

@@ -1 +1 @@
-import e from"react";import{useTranslation as n}from"react-i18next";import{observer as t}from"mobx-react";import{LoyaltyWidgetScreenTypeEnum as l}from"../../../../models/types/index.js";import{Container as r,GridContainer as o,SmallCard as m,SmallCardIconWrapper as a,SmallCardBottom as c,Title as i,ArrowWrapper as E,RowCard as u}from"./style.js";import{CouponPercent as s}from"../../../../assets/widget-icons/normal/couponPercent.js";import{MoneyAdd01 as d}from"../../../../assets/widget-icons/normal/moneyAdd01.js";var f=function(){return e.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7.5 15L12.5 10L7.5 5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"}))},p=t(function(t){var p=t.viewModel,_=t.onNavigate,C=n().t,v=!!p.user;return e.createElement(r,null,e.createElement(o,null,e.createElement(m,{onClick:function(){return null==_?void 0:_(l.CREDIT_EARNING_METHODS_SCREEN)}},e.createElement(a,null,e.createElement(d,null)),e.createElement(c,null,e.createElement(i,null,C("main_screen.earnPoints")),e.createElement(E,null,e.createElement(f,null)))),e.createElement(m,{onClick:function(){return null==_?void 0:_(l.CREDIT_SPENDING_METHODS_SCREEN)}},e.createElement(a,null,e.createElement(s,null)),e.createElement(c,null,e.createElement(i,null,C("main_screen.allRewards")),e.createElement(E,null,e.createElement(f,null))))),v&&e.createElement(e.Fragment,null,e.createElement(u,{onClick:function(){return null==_?void 0:_(l.LOYALTY_LEVEL_SCREEN)}},e.createElement(i,null,C("main_screen.tiers")),e.createElement(E,null,e.createElement(f,null))),e.createElement(u,{onClick:function(){return null==_?void 0:_(l.CREDIT_HISTORY_SCREEN)}},e.createElement(i,null,C("main_screen.pointHistory")),e.createElement(E,null,e.createElement(f,null)))))});export{p as default};
+import{observer as e}from"mobx-react";import t from"react";import'./../../../../ext/react-i18next/dist/es/context.js';import{useTranslation as n}from'./../../../../ext/react-i18next/dist/es/useTranslation.js';import{WidgetIconTypeEnum as r}from"../../../../models/loyalty-widget/types/index.js";import{LoyaltyWidgetScreenTypeEnum as l}from"../../../../models/types/index.js";import{getScreenIcon as o}from"../../../../utils.js";import{Container as i,GridContainer as a,SmallCard as s,SmallCardIconWrapper as c,SmallCardBottom as E,Title as m,ArrowWrapper as u,RowCard as d}from"./style.js";var R=function(){return t.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M7.5 15L12.5 10L7.5 5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"}))},_=e(function(e){var _=e.viewModel,g=e.onNavigate,N=n().t,y=_.user,T=!!y,p=_.loyaltyWidget.settings.widgetIconType;return t.createElement(i,null,t.createElement(a,null,t.createElement(s,{$borderRadius:_.loyaltyWidget.settings.cartBorderRadius,onClick:function(){return null==g?void 0:g(l.CREDIT_EARNING_METHODS_SCREEN)}},p!==r.NONE&&t.createElement(c,{$hasBgColor:p===r.ILLUSTRATION,$iconType:p},o(l.CREDIT_EARNING_METHODS_SCREEN,p)),t.createElement(E,null,t.createElement(m,null,N("main_screen.earnPoints")),t.createElement(u,null,t.createElement(R,null)))),t.createElement(s,{$borderRadius:_.loyaltyWidget.settings.cartBorderRadius,onClick:function(){return null==g?void 0:g(l.CREDIT_SPENDING_METHODS_SCREEN)}},p!==r.NONE&&t.createElement(c,{$hasBgColor:p===r.ILLUSTRATION,$iconType:p},o(l.CREDIT_SPENDING_METHODS_SCREEN,p)),t.createElement(E,null,t.createElement(m,null,N("main_screen.allRewards")),t.createElement(u,null,t.createElement(R,null))))),T&&t.createElement(t.Fragment,null,(null==y?void 0:y.customerTierId)&&t.createElement(d,{$borderRadius:_.loyaltyWidget.settings.cartBorderRadius,onClick:function(){return null==g?void 0:g(l.LOYALTY_LEVEL_SCREEN)}},t.createElement(m,null,N("main_screen.tiers")),t.createElement(u,null,t.createElement(R,null))),_.pointHistory.length>0&&t.createElement(d,{$borderRadius:_.loyaltyWidget.settings.cartBorderRadius,onClick:function(){return null==g?void 0:g(l.CREDIT_HISTORY_SCREEN)}},t.createElement(m,null,N("main_screen.pointHistory")),t.createElement(u,null,t.createElement(R,null)))))});export{_ as default};

package/build/renderer/screens/main-screen/program-info-section/style.d.ts

@@ -1,8 +1,16 @@
+import { WidgetIconTypeEnum } from "models/loyalty-widget/types";
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const GridContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SmallCard: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const SmallCardIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SmallCard: import("styled-components").StyledComponent<"button", any, {
+    $borderRadius: number;
+}, never>;
+export declare const SmallCardIconWrapper: import("styled-components").StyledComponent<"div", any, {
+    $hasBgColor: boolean;
+    $iconType: WidgetIconTypeEnum;
+}, never>;
 export declare const SmallCardBottom: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Title: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const RowCard: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const RowCard: import("styled-components").StyledComponent<"button", any, {
+    $borderRadius: number;
+}, never>;
 export declare const ArrowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/build/renderer/screens/main-screen/program-info-section/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../../ext/tslib/tslib.es6.mjs.js';import e from'./../../../../ext/styled-components/dist/styled-components.browser.esm.js';import{textSMMedium as i}from"../../../components/style/typography.js";var r,t,o,d,p,s,a,f,l=e.div(r||(r=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 0 24px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 0 24px;\n"]))),x=e.div(t||(t=n(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n"],["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n"]))),c=e.button(o||(o=n(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  padding-left: 14px;\n  gap: 12px;\n  position: relative;\n  border-radius: 12px;\n  border: 1px solid #eef2f6;\n  background: #fff;\n  cursor: pointer;\n  width: 100%;\n  align-items: flex-start;\n\n  &:hover {\n    background: #f8fafc;\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  padding-left: 14px;\n  gap: 12px;\n  position: relative;\n  border-radius: 12px;\n  border: 1px solid #eef2f6;\n  background: #fff;\n  cursor: pointer;\n  width: 100%;\n  align-items: flex-start;\n\n  &:hover {\n    background: #f8fafc;\n  }\n"]))),g=e.div(d||(d=n(["\n  display: flex;\n  width: 36px;\n  height: 36px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n  border: 1px solid #e3e8ef;\n  background: #fff;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  color: #4b5565;\n"],["\n  display: flex;\n  width: 36px;\n  height: 36px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n  border: 1px solid #e3e8ef;\n  background: #fff;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  color: #4b5565;\n"]))),u=e.div(p||(p=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n"]))),b=e.span(s||(s=n(["\n  color: #121926;\n  ","\n"],["\n  color: #121926;\n  ","\n"])),i),m=e.button(a||(a=n(["\n  display: flex;\n  padding: 12px 12px 12px 16px;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 12px;\n  border: 1px solid #eef2f6;\n  background: #fff;\n  cursor: pointer;\n  width: 100%;\n\n  &:hover {\n    background: #f8fafc;\n  }\n"],["\n  display: flex;\n  padding: 12px 12px 12px 16px;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 12px;\n  border: 1px solid #eef2f6;\n  background: #fff;\n  cursor: pointer;\n  width: 100%;\n\n  &:hover {\n    background: #f8fafc;\n  }\n"]))),y=e.div(f||(f=n(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #9AA4B2;\n"],["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #9AA4B2;\n"])));export{y as ArrowWrapper,l as Container,x as GridContainer,m as RowCard,c as SmallCard,u as SmallCardBottom,g as SmallCardIconWrapper,b as Title};
+import{__makeTemplateObject as n}from'./../../../../ext/tslib/tslib.es6.mjs.js';import e,{css as r}from"styled-components";import{textSMMedium as o}from"../../../components/style/typography.js";import{iconWrapperShape as i}from"../../../components/style/icon-wrapper.js";var d,t,p,a,f,s,l,c,x,g=e.div(d||(d=n(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 0 24px;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 0 24px;\n"]))),u=e.div(t||(t=n(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n"],["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n"]))),b=e.button(p||(p=n(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  padding-left: 14px;\n  gap: 12px;\n  position: relative;\n  border-radius: ",";\n  border: 1px solid #eef2f6;\n  background: #fff;\n  cursor: pointer;\n  width: 100%;\n  align-items: flex-start;\n\n  &:hover {\n    background: #f8fafc;\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  padding-left: 14px;\n  gap: 12px;\n  position: relative;\n  border-radius: ",";\n  border: 1px solid #eef2f6;\n  background: #fff;\n  cursor: pointer;\n  width: 100%;\n  align-items: flex-start;\n\n  &:hover {\n    background: #f8fafc;\n  }\n"])),function(n){var e=n.$borderRadius;return"".concat(e,"px")}),m=e.div(f||(f=n(["\n  ","\n  border: 1px solid #e3e8ef;\n  background: #fff;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  color: #4b5565;\n\n  ","\n"],["\n  ","\n  border: 1px solid #e3e8ef;\n  background: #fff;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  color: #4b5565;\n\n  ","\n"])),i,function(e){return e.$hasBgColor&&r(a||(a=n(["\n      padding: 10px;\n      background: #f6f6f6;\n      border: none;\n    "],["\n      padding: 10px;\n      background: #f6f6f6;\n      border: none;\n    "])))}),y=e.div(s||(s=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n"]))),h=e.span(l||(l=n(["\n  color: #121926;\n  ","\n"],["\n  color: #121926;\n  ","\n"])),o),v=e.button(c||(c=n(["\n  display: flex;\n  padding: 12px 12px 12px 16px;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: ",";\n  border: 1px solid #eef2f6;\n  background: #fff;\n  cursor: pointer;\n  width: 100%;\n\n  &:hover {\n    background: #f8fafc;\n  }\n"],["\n  display: flex;\n  padding: 12px 12px 12px 16px;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: ",";\n  border: 1px solid #eef2f6;\n  background: #fff;\n  cursor: pointer;\n  width: 100%;\n\n  &:hover {\n    background: #f8fafc;\n  }\n"])),function(n){var e=n.$borderRadius;return"".concat(e,"px")}),w=e.div(x||(x=n(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #9aa4b2;\n"],["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #9aa4b2;\n"])));export{w as ArrowWrapper,g as Container,u as GridContainer,v as RowCard,b as SmallCard,y as SmallCardBottom,m as SmallCardIconWrapper,h as Title};

package/build/renderer/screens/main-screen/spending-methods-section/dynamic-slider.js

@@ -1 +1 @@
-import{__makeTemplateObject as n,__awaiter as e,__generator as t}from'./../../../../ext/tslib/tslib.es6.mjs.js';import o,{useState as r,useEffect as i}from"react";import{observer as a}from"mobx-react";import{useTranslation as l}from"react-i18next";import s from'./../../../../ext/styled-components/dist/styled-components.browser.esm.js';import{textSM as d,Badge as p}from"../../../components/style/typography.js";import u from"../../../components/button/index.js";import{HeaderBackgroundTypeEnum as c}from"../../../../models/loyalty-widget/types/index.js";var f,m,b,g,x,h,v,y,w,k,E,$,j=s.div(f||(f=n(["\n  display: flex;\n  padding: 12px 16px 16px 16px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n  align-self: stretch;\n  border-radius: 6px;\n  border: 1px solid #eef2f6;\n  background: #f8fafc;\n"],["\n  display: flex;\n  padding: 12px 16px 16px 16px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n  align-self: stretch;\n  border-radius: 6px;\n  border: 1px solid #eef2f6;\n  background: #f8fafc;\n"]))),z=s.div(m||(m=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n"]))),C=s.div(b||(b=n(["\n  color: #364152;\n  ","\n"],["\n  color: #364152;\n  ","\n"])),d),I=s.div(g||(g=n(["\n  width: 100%;\n  position: relative;\n  padding-bottom: 16px; /* Space for markers */\n"],["\n  width: 100%;\n  position: relative;\n  padding-bottom: 16px; /* Space for markers */\n"]))),S=s.div(x||(x=n(["\n  position: relative;\n  width: 100%;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"],["\n  position: relative;\n  width: 100%;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"]))),M=s.div(h||(h=n(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 6px;\n  border-radius: 3px;\n  background-color: #e3e8ef;\n"],["\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 6px;\n  border-radius: 3px;\n  background-color: #e3e8ef;\n"]))),F=s.div(v||(v=n(["\n  position: absolute;\n  left: 0;\n  height: 6px;\n  width: ","%;\n  border-radius: 3px;\n  background: ",";\n"],["\n  position: absolute;\n  left: 0;\n  height: 6px;\n  width: ","%;\n  border-radius: 3px;\n  background: ",";\n"])),function(n){return n.$percentage},function(n){return n.$isGradient?"radial-gradient(92.35% 100% at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), ".concat(n.$bgColor):n.$bgColor}),L=s.div(y||(y=n(["\n  position: absolute;\n  left: ","%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: 2px solid ",";\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n  z-index: 2;\n  pointer-events: none; /* Let clicks pass through to input/container if needed, but input handles interaction */\n"],["\n  position: absolute;\n  left: ","%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: 2px solid ",";\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n  z-index: 2;\n  pointer-events: none; /* Let clicks pass through to input/container if needed, but input handles interaction */\n"])),function(n){return n.$left},function(n){return n.$bgColor}),P=s.input(w||(w=n(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n  z-index: 3;\n  margin: 0;\n"],["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n  z-index: 3;\n  margin: 0;\n"]))),B=s.div(k||(k=n(["\n  position: absolute;\n  top: 28px; /* Below the slider track/thumb */\n  left: 0;\n  right: 0;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n"],["\n  position: absolute;\n  top: 28px; /* Below the slider track/thumb */\n  left: 0;\n  right: 0;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n"]))),G=s.div(E||(E=n(["\n  font-size: 12px;\n  color: #9aa4b2;\n  font-weight: 400;\n  line-height: 18px;\n"],["\n  font-size: 12px;\n  color: #9aa4b2;\n  font-weight: 400;\n  line-height: 18px;\n"]))),N=s.div($||($=n(["\n  position: absolute;\n  left: ","%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #fff;\n  z-index: 1;\n"],["\n  position: absolute;\n  left: ","%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #fff;\n  z-index: 1;\n"])),function(n){return n.$left}),A=a(function(n){var a=n.viewModel,s=n.method,d=l().t,f=r(!1),m=f[0],b=f[1],g=a.user,x=a.loyaltyWidget,h=s.discountSettings;if(!g||!h)return null;var v=h.point,y=h.discountAmount||0;if(v<=0)return null;var w=Math.floor(g.totalPoint/v)*v,k=w>0?w:v,E=r(w),$=E[0],A=E[1];i(function(){$>w&&A(w)},[w]);var W=$/k*100,_=$/v*y,D=x.header.background.bgColor||"#7B61FF",R=x.header.background.type===c.GRADIENT,T=k/v,q=[];if(T>1&&T<20)for(var H=1;H<T;H++)q.push(H/T*100);var J=w>0;return o.createElement(o.Fragment,null,o.createElement(j,null,o.createElement(z,null,o.createElement(C,null,$," ",d("common.points")),o.createElement(p,null,Number(_).toFixed(2)," ",a.currency)),o.createElement(I,null,o.createElement(S,null,o.createElement(M,null,q.map(function(n,e){return o.createElement(N,{key:e,$left:n})})),o.createElement(F,{$percentage:W,$bgColor:D,$isGradient:R}),o.createElement(L,{$left:W,$bgColor:D}),o.createElement(P,{type:"range",min:0,max:k,step:v,value:$,onChange:function(n){var e=Number(n.target.value);A(e)},disabled:!J})),o.createElement(B,null,o.createElement(G,null,"0"),o.createElement(G,null,k)))),o.createElement(u,{button:x.button,fontSize:"textSMMedium",paddingSize:"medium",fullWidth:!0,disabled:0===$||m||!J,isLoading:m,onClick:function(){return e(void 0,void 0,void 0,function(){var n;return t(this,function(e){switch(e.label){case 0:if(!a.cartId||0===$)return[2];b(!0),e.label=1;case 1:return e.trys.push([1,,3,4]),[4,null===(n=a.callbacks)||void 0===n?void 0:n.useLoyaltyPoints({amount:_,cartId:a.cartId,loyaltyProgramId:s.loyaltyProgramId,loyaltySpendingMethodId:s.id})];case 2:return e.sent(),[3,4];case 3:return b(!1),[7];case 4:return[2]}})})}},d("common.convert")))});export{A as default};
+import{__makeTemplateObject as n,__awaiter as e,__generator as t}from'./../../../../ext/tslib/tslib.es6.mjs.js';import{observer as o}from"mobx-react";import r,{useState as i,useEffect as a}from"react";import'./../../../../ext/react-i18next/dist/es/context.js';import{useTranslation as l}from'./../../../../ext/react-i18next/dist/es/useTranslation.js';import s from"styled-components";import{HeaderBackgroundTypeEnum as d}from"../../../../models/loyalty-widget/types/index.js";import{LoyaltyWidgetScreenTypeEnum as p}from"../../../../models/types/index.js";import u from"../../../components/button/index.js";import{textSM as c,Badge as f}from"../../../components/style/typography.js";var m,g,x,b,h,v,y,w,k,E,$,j,C=s.div(m||(m=n(["\n  display: flex;\n  padding: 12px 16px 16px 16px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n  align-self: stretch;\n  border-radius: 6px;\n  border: 1px solid #eef2f6;\n  background: #f8fafc;\n"],["\n  display: flex;\n  padding: 12px 16px 16px 16px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n  align-self: stretch;\n  border-radius: 6px;\n  border: 1px solid #eef2f6;\n  background: #f8fafc;\n"]))),S=s.div(g||(g=n(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n"]))),z=s.div(x||(x=n(["\n  color: #364152;\n  ","\n"],["\n  color: #364152;\n  ","\n"])),c),I=s.div(b||(b=n(["\n  width: 100%;\n  position: relative;\n  padding-bottom: 16px; /* Space for markers */\n"],["\n  width: 100%;\n  position: relative;\n  padding-bottom: 16px; /* Space for markers */\n"]))),M=s.div(h||(h=n(["\n  position: relative;\n  width: 100%;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"],["\n  position: relative;\n  width: 100%;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"]))),N=s.div(v||(v=n(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 6px;\n  border-radius: 3px;\n  background-color: #e3e8ef;\n"],["\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 6px;\n  border-radius: 3px;\n  background-color: #e3e8ef;\n"]))),A=s.div(y||(y=n(["\n  position: absolute;\n  left: 0;\n  height: 6px;\n  width: ","%;\n  border-radius: 3px;\n  background: ",";\n"],["\n  position: absolute;\n  left: 0;\n  height: 6px;\n  width: ","%;\n  border-radius: 3px;\n  background: ",";\n"])),function(n){return n.$percentage},function(n){return n.$isGradient?"radial-gradient(92.35% 100% at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), ".concat(n.$bgColor):n.$bgColor}),R=s.div(w||(w=n(["\n  position: absolute;\n  left: ","%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: 2px solid ",";\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n  z-index: 2;\n  pointer-events: none; /* Let clicks pass through to input/container if needed, but input handles interaction */\n"],["\n  position: absolute;\n  left: ","%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: 2px solid ",";\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n  z-index: 2;\n  pointer-events: none; /* Let clicks pass through to input/container if needed, but input handles interaction */\n"])),function(n){return n.$left},function(n){return n.$bgColor}),_=s.input(k||(k=n(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n  z-index: 3;\n  margin: 0;\n"],["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n  z-index: 3;\n  margin: 0;\n"]))),L=s.div(E||(E=n(["\n  position: absolute;\n  top: 28px; /* Below the slider track/thumb */\n  left: 0;\n  right: 0;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n"],["\n  position: absolute;\n  top: 28px; /* Below the slider track/thumb */\n  left: 0;\n  right: 0;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n"]))),P=s.div($||($=n(["\n  font-size: 12px;\n  color: #9aa4b2;\n  font-weight: 400;\n  line-height: 18px;\n"],["\n  font-size: 12px;\n  color: #9aa4b2;\n  font-weight: 400;\n  line-height: 18px;\n"]))),T=s.div(j||(j=n(["\n  position: absolute;\n  left: ","%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #fff;\n  z-index: 1;\n"],["\n  position: absolute;\n  left: ","%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #fff;\n  z-index: 1;\n"])),function(n){return n.$left}),B=o(function(n){var o=n.viewModel,s=n.method,c=l().t,m=i(!1),g=m[0],x=m[1],b=o.user,h=o.loyaltyWidget,v=s.discountSettings;if(!b||!v)return null;var y=v.point,w=v.discountAmount||0;if(y<=0)return null;var k=Math.floor(b.totalPoint/y)*y,E=k>0?k:y,$=i(k),j=$[0],B=$[1];a(function(){j>k&&B(k)},[k]);var F=j/E*100,G=j/y*w,W=h.header.background.bgColor||"#7B61FF",D=h.header.background.type===d.GRADIENT,q=E/y,H=[];if(q>1&&q<20)for(var J=1;J<q;J++)H.push(J/q*100);var K=k>0&&!0===s.isAvailable;return r.createElement(r.Fragment,null,r.createElement(C,null,r.createElement(S,null,r.createElement(z,null,j," ",c("common.points")),r.createElement(f,null,o.formatCurrency(Number(G)))),r.createElement(I,null,r.createElement(M,null,r.createElement(N,null,H.map(function(n,e){return r.createElement(T,{key:e,$left:n})})),r.createElement(A,{$percentage:F,$bgColor:W,$isGradient:D}),r.createElement(R,{$left:F,$bgColor:W}),r.createElement(_,{type:"range",min:0,max:E,step:y,value:j,onChange:function(n){var e=Number(n.target.value);B(e)},disabled:!K})),r.createElement(L,null,r.createElement(P,null,"0"),r.createElement(P,null,E)))),r.createElement(u,{button:h.button,fontSize:"textSMMedium",paddingSize:"medium",fullWidth:!0,disabled:0===j||g||!K,isLoading:g,onClick:function(){return e(void 0,void 0,void 0,function(){var n;return t(this,function(e){switch(e.label){case 0:if(!o.cartId||0===j)return[2];x(!0),e.label=1;case 1:return e.trys.push([1,,3,4]),[4,null===(n=o.callbacks)||void 0===n?void 0:n.useLoyaltyPoints({amount:G,cartId:o.cartId,loyaltyProgramId:s.loyaltyProgramId,loyaltySpendingMethodId:s.id})];case 2:return e.sent()&&(o.userRefreshTrigger++,o.cartRefreshTrigger++,o.selectedScreen!==p.MAIN_SCREEN&&(o.selectedScreen=p.MAIN_SCREEN)),[3,4];case 3:return x(!1),[7];case 4:return[2]}})})}},c("common.convert")))});export{B as default};

package/build/renderer/screens/main-screen/spending-methods-section/index.d.ts

@@ -4,6 +4,7 @@ import { LoyaltyProgramSpendingMethod } from "models/loyalty-program-spending-me
 type SectionProps = {
     viewModel: LoyaltyWidgetViewModel;
     mode?: "card" | "accordion";
+    methods?: LoyaltyProgramSpendingMethod[];
     getActionProps?: (method: LoyaltyProgramSpendingMethod) => {
         actionText: string;
         onClick: () => void;