@ikas/loyalty-widget-renderer 1.0.0-alpha.35 → 1.0.0-alpha.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/models/index.js +1 -1
- package/build/renderer/components/loyalty-method-card/index.js +1 -1
- package/build/renderer/index.js +1 -1
- package/build/renderer/screens/credit-history-screen/index.js +1 -1
- package/build/renderer/screens/credit-history-screen/style.d.ts +3 -1
- package/build/renderer/screens/credit-history-screen/style.js +1 -1
- package/build/renderer/screens/credit-spending-methods-screen/index.js +1 -1
- package/build/renderer/screens/credit-spending-methods-screen/style.d.ts +3 -1
- package/build/renderer/screens/credit-spending-methods-screen/style.js +1 -1
- package/build/renderer/screens/loyalty-level-screen/index.js +1 -1
- package/build/renderer/screens/loyalty-level-screen/style.d.ts +6 -2
- package/build/renderer/screens/loyalty-level-screen/style.js +1 -1
- package/build/renderer/screens/main-screen/header/index.js +1 -1
- package/build/renderer/screens/main-screen/header/style.d.ts +3 -1
- package/build/renderer/screens/main-screen/header/style.js +1 -1
- package/build/renderer/screens/main-screen/program-info-section/index.js +1 -1
- package/build/renderer/screens/main-screen/program-info-section/style.d.ts +6 -2
- package/build/renderer/screens/main-screen/program-info-section/style.js +1 -1
- package/build/renderer/style.js +1 -1
- package/build/storefront-widget-script-injector.iife.js +6 -6
- package/build/storefront-widget-script-injector.iife.js.map +1 -1
- package/package.json +1 -1
package/build/models/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{makeObservable as
|
|
1
|
+
import{__assign as e}from'./../ext/tslib/tslib.es6.mjs.js';import{makeObservable as t,observable as i,computed as s}from"mobx";import{LoyaltyWidget as r}from"./loyalty-widget/index.js";import{WidgetMode as o,LoyaltyWidgetScreenTypeEnum as n}from"./types/index.js";import{LoyaltyProgramSpendingMethod as d}from"./loyalty-program-spending-method/index.js";import{LoyaltyProgramEarningMethod as h}from"./loyalty-program-earning-method/index.js";import{LoyaltyCustomerInfo as c}from"./loyalty-customer-info/index.js";var a=function(){function a(a,l,g,p,u,M,y,m){void 0===a&&(a={}),this.userRefreshTrigger=0,this.cartRefreshTrigger=0,this.selectedScreen=a.selectedScreen||n.MAIN_SCREEN,this.currentWidgetMode=y?o.WIDGET_MODE:o.MINI_MODE,this.isMiniModeDescriptionClosed=a.isMiniModeDescriptionClosed||!1,this.isLoading=a.isLoading||!1,this.loyaltyWidget=a.loyaltyWidget instanceof r?a.loyaltyWidget:new r(a.loyaltyWidget),this.cdnURL=l,this.merchantId=g,this.storeUrl=M||a.storeUrl||"",this.currency=p,this.locale=u,this.isPreviewMode=y||!1,this.cartId=a.cartId||null,this.cartId=a.cartId||null,this.ikasEventUser=a.ikasEventUser||null,this.user=a.user?new c(a.user):null,this.earningMethods=a.earningMethods?a.earningMethods.map(function(e){return new h(e)}):[],this.spendingMethods=a.spendingMethods?a.spendingMethods.map(function(e){return new d(e)}):[],this.tiers=a.tiers?a.tiers:[],this.categories=a.categories?a.categories:[],this.products=a.products?a.products:[],this.brands=a.brands?a.brands:[],this.tags=a.tags?a.tags:[],this.pointHistory=a.pointHistory?a.pointHistory:[],this.callbacks=m||void 0,t(this,e(e({cartId:i},y?{}:{loyaltyWidget:i}),{isLoading:i,cdnURL:i,merchantId:i,storeUrl:i,currency:i,locale:i,selectedScreen:i,currentWidgetMode:i,isMiniModeDescriptionClosed:i,user:i,earningMethods:i,spendingMethods:i,tiers:i,categories:i,products:i,brands:i,tags:i,pointHistory:i,ikasEventUser:i,userRefreshTrigger:i,cartRefreshTrigger:i,shouldShowSpendingMethods:s}))}return Object.defineProperty(a.prototype,"shouldShowSpendingMethods",{get:function(){return!!this.user&&(!!this.user.customerTierId&&(!(this.user.totalPoint<=0)&&0!==this.spendingMethods.length))},enumerable:!1,configurable:!0}),a.prototype.setWidgetMode=function(e){this.currentWidgetMode=e,e!==o.WIDGET_MODE||this.isPreviewMode||(this.isMiniModeDescriptionClosed=!0)},a.prototype.closeMiniModeDescription=function(){this.isMiniModeDescriptionClosed=!0},a}();export{a as LoyaltyWidgetViewModel};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{useState as t}from"react";import{observer as n}from"mobx-react";import l from"../button/index.js";import{CheckCircleFill as
|
|
1
|
+
import e,{useState as t}from"react";import{observer as n}from"mobx-react";import{WidgetIconTypeEnum as i}from"../../../models/loyalty-widget/types/index.js";import l from"../button/index.js";import{CheckCircleFill as o}from"../../../assets/icons/check-circle-fill.js";import{ChevronLeft as r}from"../../../assets/icons/chevron-left.js";import{Container as c,Header as a,IconWrapper as m,Content as s,Title as d,Description as p,ArrowButton as u,AccordionWrapper as f,AccordionInner as E}from"./style.js";var y=n(function(n){var y=n.title,g=n.description,x=n.icon,$=n.action,b=n.isCompleted,v=n.mode,C=n.children,j=n.padding,k=n.settings,O=t(!1),h=O[0],w=O[1],I=!b&&(null==$?void 0:$.text)&&(null==$?void 0:$.onClick);return e.createElement(c,{$borderRadius:k.borderRadius,$isCompleted:b,$padding:j},e.createElement(a,{onClick:function(){"accordion"===v&&w(!h)},style:{cursor:"accordion"===v?"pointer":"default"}},k.widgetIconType!==i.NONE&&e.createElement(m,{$iconType:k.widgetIconType},x),e.createElement(s,null,e.createElement(d,null,y),e.createElement(p,null,g)),"card"===v?e.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},b&&e.createElement(o,null),I&&e.createElement(l,{button:k.button,paddingSize:"small",fontSize:"textSMMedium",onClick:$.onClick},$.text)):e.createElement(u,{$isOpen:h},e.createElement(r,null))),"accordion"===v&&e.createElement(f,{$isOpen:h},e.createElement(E,{$isOpen:h},C)))});export{y as default};
|
package/build/renderer/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as e,__generator as t,__spreadArray as n}from'./../ext/tslib/tslib.es6.mjs.js';import
|
|
1
|
+
import{__awaiter as e,__generator as t,__spreadArray as n}from'./../ext/tslib/tslib.es6.mjs.js';import o,{useState as r,useRef as i,useEffect as s}from"react";import{observer as c}from"mobx-react";import'./../ext/react-i18next/dist/es/context.js';import{I18nextProvider as l}from'./../ext/react-i18next/dist/es/I18nextProvider.js';import a from"./utils/i18n.js";import{WidgetMode as d,LoyaltyWidgetScreenTypeEnum as u,EarningMethodTypeEnum as f,LoyaltyProgramFilterTypeEnum as m,LoyaltyProgramMethodSpendingTypeEnum as E}from"../models/types/index.js";import{WidgetPositionEnum as v,LoyaltyWidgetLayoutTypeEnum as g}from"../models/loyalty-widget/types/index.js";import y from"./screens/main-screen/index.js";import p from"./screens/credit-spending-methods-screen/index.js";import T from"./screens/credit-earning-methods-screen/index.js";import h from"./screens/credit-history-screen/index.js";import R from"./screens/loyalty-level-screen/index.js";import C from"./components/mini-mode-button/index.js";import I from"./components/mini-mode-description/index.js";import{LoyaltyWidgetViewModel as M}from"../models/index.js";import{LoyaltyWidget as w}from"../models/loyalty-widget/index.js";import{LoyaltyProgramSpendingMethod as _}from"../models/loyalty-program-spending-method/index.js";import{LoyaltyCustomerInfo as b}from"../models/loyalty-customer-info/index.js";import{LoyaltyProgramEarningMethod as A}from"../models/loyalty-program-earning-method/index.js";import{LoyaltyProgramPointHistory as k}from"../models/loyalty-program-point-history/index.js";import{Container as S,MiniModeWrapper as O,Panel as N,ScreenWrapper as D}from"./style.js";var L=c(function(c){var L,P,x=c.config,j=r(function(){var e=x||window.ikasLoyaltyWidgetConfig;return new M({cartId:(null==e?void 0:e.cartId)||null,ikasEventUser:(null==e?void 0:e.userId)?{id:e.userId}:null},(null==e?void 0:e.cdnURL)||"",(null==e?void 0:e.merchantId)||"",(null==e?void 0:e.currency)||"",(null==e?void 0:e.locale)||"",(null==e?void 0:e.storeURL)||null,null==e?void 0:e.isPreviewMode,null==e?void 0:e.callbacks)})[0],U=i(!0);s(function(){var e=x||window.ikasLoyaltyWidgetConfig;(null==e?void 0:e.onViewModelInitialized)&&e.onViewModelInitialized(j)},[j,x]);var W=function(){return e(void 0,void 0,void 0,function(){var e,o,r,i,s;return t(this,function(t){switch(t.label){case 0:return j.callbacks?(e=new Set,o=new Set,r=new Set,i=new Set,j.earningMethods.forEach(function(t){var s,c;t.methodType===f.ORDER_CREATE&&n(n([],(null===(s=t.orderSettings)||void 0===s?void 0:s.productFilters)||[],!0),(null===(c=t.productSettings)||void 0===c?void 0:c.productFilters)||[],!0).forEach(function(t){t.type===m.PRODUCT_AND_VARIANT?t.idList.forEach(function(t){return e.add(t)}):t.type===m.CATEGORY?t.idList.forEach(function(e){return o.add(e)}):t.type===m.PRODUCT_BRAND?t.idList.forEach(function(e){return r.add(e)}):t.type===m.PRODUCT_TAG&&t.idList.forEach(function(e){return i.add(e)})})}),j.spendingMethods&&j.spendingMethods.forEach(function(t){var n,s;t.type===E.FREE_PRODUCT&&(null===(n=t.discountSettings)||void 0===n?void 0:n.freeProductId)&&e.add(t.discountSettings.freeProductId),null===(s=t.productFilters)||void 0===s||s.forEach(function(t){t.type===m.PRODUCT_AND_VARIANT?t.idList.forEach(function(t){return e.add(t)}):t.type===m.CATEGORY?t.idList.forEach(function(e){return o.add(e)}):t.type===m.PRODUCT_BRAND?t.idList.forEach(function(e){return r.add(e)}):t.type===m.PRODUCT_TAG&&t.idList.forEach(function(e){return i.add(e)})})}),s=[],e.size>0&&j.callbacks.getProducts&&s.push(j.callbacks.getProducts(Array.from(e)).then(function(e){return j.products=e})),o.size>0&&j.callbacks.getCategories&&s.push(j.callbacks.getCategories(Array.from(o)).then(function(e){return j.categories=e})),r.size>0&&j.callbacks.getBrands&&s.push(j.callbacks.getBrands(Array.from(r)).then(function(e){return j.brands=e})),i.size>0&&j.callbacks.getTags&&s.push(j.callbacks.getTags(Array.from(i)).then(function(e){return j.tags=e})),[4,Promise.all(s)]):[2];case 1:return t.sent(),[2]}})})};s(function(){console.log("*******INITIAL FETCH*******");e(void 0,void 0,void 0,function(){var e,n,o,r,i,s;return t(this,function(t){switch(t.label){case 0:if(!j.callbacks)return[3,6];t.label=1;case 1:return t.trys.push([1,4,5,6]),e=[j.callbacks.getLoyaltyWidget(),j.callbacks.listEarningMethods(),j.callbacks.listLoyaltyProgramTier({})],[4,Promise.all(e)];case 2:return n=t.sent(),o=n[0],r=n[1],i=n[2],console.log(" loyaltyWidget instanceof LoyaltyWidget",o instanceof w),j.loyaltyWidget=o instanceof w?o:new w(o||{}),j.earningMethods=r.map(function(e){return new A(e)}),j.tiers=i||[],[4,W()];case 3:return t.sent(),[3,6];case 4:return s=t.sent(),console.error("Failed to initialize loyalty data",s),[3,6];case 5:return U.current=!1,[7];case 6:return[2]}})})},[]),s(function(){if(console.log("******IKAS EVENTS EFFECT *******"),window.IkasEvents){var e="ikas-loyalty-widget-subscriber";try{window.IkasEvents.subscribe({id:e,callback:function(e){var t,n,o,r=e.type;if(console.log("Listening for Ikas Storefront Events",e),"CUSTOMER_LOGIN"===r){var i=null===(t=e.data)||void 0===t?void 0:t.customer;i&&(j.ikasEventUser=i)}else"CUSTOMER_LOGOUT"===r&&(j.ikasEventUser=null);if("ADD_TO_CART"===r||"REMOVE_FROM_CART"===r){var s=null===(o=null===(n=e.data)||void 0===n?void 0:n.cart)||void 0===o?void 0:o.id;s&&(j.cartId=s),["CUSTOMER_LOGIN","CUSTOMER_LOGOUT"].includes(r)?(j.userRefreshTrigger++,j.cartRefreshTrigger++):["ADD_TO_CART","REMOVE_FROM_CART"].includes(r)&&j.cartRefreshTrigger++}}})}catch(e){console.error("Failed to subscribe to IkasEvents",e)}return function(){var t;(null===(t=window.IkasEvents)||void 0===t?void 0:t.unsubscribe)&&window.IkasEvents.unsubscribe(e)}}},[j]),s(function(){console.log("*******USER DATA FETCH EFFECT*******");e(void 0,void 0,void 0,function(){var e,n,o,r,i;return t(this,function(t){switch(t.label){case 0:if(!j.callbacks||!(null===(i=j.ikasEventUser)||void 0===i?void 0:i.id))return[3,4];t.label=1;case 1:return t.trys.push([1,3,,4]),[4,Promise.all([j.callbacks.getLoyaltyCustomerInfo(),j.callbacks.listLoyaltyProgramPointHistory({})])];case 2:return e=t.sent(),n=e[0],o=e[1],j.user=n?new b(n):null,j.pointHistory=o?o.map(function(e){return new k(e)}):[],[3,4];case 3:return r=t.sent(),console.error("Failed to fetch user data",r),[3,4];case 4:return[2]}})})},[null===(L=j.ikasEventUser)||void 0===L?void 0:L.id,j.userRefreshTrigger]),s(function(){console.log("*******CART DATA FETCH EFFECT*******");e(void 0,void 0,void 0,function(){var e,n;return t(this,function(t){switch(t.label){case 0:if(console.log("fetchCartData",j.cartId),!j.callbacks)return[3,5];t.label=1;case 1:return t.trys.push([1,4,,5]),[4,j.callbacks.listSpendingMethodsByCartId(j.cartId)];case 2:return e=t.sent(),j.spendingMethods=e.map(function(e){return new _(e)}),[4,W()];case 3:return t.sent(),[3,5];case 4:return n=t.sent(),console.error("Failed to fetch cart data",n),[3,5];case 5:return[2]}})})},[j.cartId,j.cartRefreshTrigger]);var F=function(e){j.selectedScreen=e},G=function(){j.setWidgetMode(d.MINI_MODE),setTimeout(function(){j.selectedScreen=u.MAIN_SCREEN},300)};s(function(){return j.currentWidgetMode===d.WIDGET_MODE?document.body.style.overflow="hidden":document.body.style.overflow="",function(){document.body.style.overflow=""}},[j.currentWidgetMode]);var $=j.selectedScreen===u.MAIN_SCREEN,B=r(null),H=B[0],V=B[1];s(function(){j.selectedScreen!==u.MAIN_SCREEN&&V(j.selectedScreen)},[j.selectedScreen]);var z=$?H:j.selectedScreen,Y=j.loyaltyWidget.settings.position||v.RIGHT,K=j.loyaltyWidget.settings.type||g.DRAWER;return o.createElement(l,{i18n:a},o.createElement(S,{$layoutType:K,$widgetPosition:Y,$widgetMode:j.currentWidgetMode,$position:(null==x?void 0:x.position)||(null===(P=window.ikasLoyaltyWidgetConfig)||void 0===P?void 0:P.position)||"fixed",onClick:function(){j.currentWidgetMode===d.WIDGET_MODE&&G()}},o.createElement(O,{$isVisible:j.currentWidgetMode===d.MINI_MODE,$widgetPosition:Y},o.createElement(I,{viewModel:j}),o.createElement(C,{viewModel:j})),o.createElement(N,{$layoutType:K,$isOpen:j.currentWidgetMode===d.WIDGET_MODE,$widgetPosition:Y,onClick:function(e){return e.stopPropagation()}},o.createElement(D,{$isActive:$,$isMain:!0},o.createElement(y,{viewModel:j,onClose:G,onNavigate:F})),o.createElement(D,{$isActive:!$,$isMain:!1},function(){switch(z){case u.CREDIT_SPENDING_METHODS_SCREEN:return o.createElement(p,{viewModel:j,onBack:function(){return F(u.MAIN_SCREEN)},onClose:G});case u.CREDIT_EARNING_METHODS_SCREEN:return o.createElement(T,{viewModel:j,onBack:function(){return F(u.MAIN_SCREEN)},onClose:G});case u.CREDIT_HISTORY_SCREEN:return o.createElement(h,{viewModel:j,onBack:function(){return F(u.MAIN_SCREEN)},onClose:G});case u.LOYALTY_LEVEL_SCREEN:return o.createElement(R,{viewModel:j,onBack:function(){return F(u.MAIN_SCREEN)},onClose:G});default:return null}}()))))});export{L as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";import{observer as t}from"mobx-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{Container as
|
|
1
|
+
import e from"react";import{observer as t}from"mobx-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{Container as a,Header as o,IconButton as m,Title as c,Content as i,PointsSection as s,PointsTitle as u,PointsValue as d,HistoryList as E,HistoryItem as f,HistoryItemLeft as p,HistoryItemTitle as y,HistoryItemDate as h,HistoryItemAmount as x,Divider as j}from"./style.js";import{LoyaltyProgramPointHistoryTypeEnum as g}from"../../../models/types/index.js";var v=t(function(t){var v=t.viewModel,k=t.onBack,T=t.onClose,w=n().t,C=v.user,R=v.pointHistory,b=v.locale;return e.createElement(a,null,e.createElement(o,null,e.createElement(m,{onClick:k},e.createElement(l,null)),e.createElement(c,null,w("screens.creditHistory")),e.createElement(m,{onClick:T},e.createElement(r,null))),e.createElement(i,null,C&&e.createElement(s,{$borderRadius:v.loyaltyWidget.settings.cartBorderRadius},e.createElement(u,null,w("header.earnedPoints")),e.createElement(d,null,C.totalPoint)),e.createElement(E,null,R.map(function(t,n){var r=t.type===g.EARN;return e.createElement(e.Fragment,{key:t.id},e.createElement(f,null,e.createElement(p,null,e.createElement(y,null,w(r?"history.earnedTitle":"history.spentTitle")),e.createElement(h,null,function(e){if(!e)return"";try{return new Intl.DateTimeFormat(b,{day:"numeric",month:"long",year:"numeric"}).format(new Date(e))}catch(t){return e}}(t.createdAt))),e.createElement(x,{$isEarn:r},r?"":"-",t.amount)),n<R.length-1&&e.createElement(j,null))}))))});export{v as default};
|
|
@@ -3,7 +3,9 @@ export declare const Header: import("styled-components").StyledComponent<"div",
|
|
|
3
3
|
export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
4
|
export declare const IconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
5
5
|
export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
-
export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {
|
|
7
|
+
$borderRadius: number;
|
|
8
|
+
}, never>;
|
|
7
9
|
export declare const PointsTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
10
|
export declare const PointsValue: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
11
|
export declare const HistoryList: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";import{observer as t}from"mobx-react";import'./../../../ext/react-i18next/dist/es/context.js';import{useTranslation as n}from'./../../../ext/react-i18next/dist/es/useTranslation.js';import r from"../main-screen/spending-methods-section/index.js";import{ChevronLeft as o}from"../../../assets/icons/chevron-left.js";import{XClose as l}from"../../../assets/icons/x-close.js";import{Container as s,Header as
|
|
1
|
+
import e from"react";import{observer as t}from"mobx-react";import'./../../../ext/react-i18next/dist/es/context.js';import{useTranslation as n}from'./../../../ext/react-i18next/dist/es/useTranslation.js';import r from"../main-screen/spending-methods-section/index.js";import{ChevronLeft as o}from"../../../assets/icons/chevron-left.js";import{XClose as l}from"../../../assets/icons/x-close.js";import{Container as s,Header as i,IconButton as a,Title as c,Content as m,PointsSection as d,PointsTitle as u,PointsValue as p}from"./style.js";var E=t(function(t){var E=t.viewModel,f=t.onBack,x=t.onClose,j=n().t,g=E.user;return e.createElement(s,null,e.createElement(i,null,e.createElement(a,{onClick:f},e.createElement(o,null)),e.createElement(c,null,j("screens.creditSpendingMethods")),e.createElement(a,{onClick:x},e.createElement(l,null))),e.createElement(m,null,g&&e.createElement(d,{$borderRadius:E.loyaltyWidget.settings.cartBorderRadius},e.createElement(u,null,j("header.earnedPoints")),e.createElement(p,null,g.totalPoint)),e.createElement(r,{viewModel:E,mode:"accordion",getActionProps:function(e){return null}})))});export{E as default};
|
|
@@ -3,6 +3,8 @@ export declare const Header: import("styled-components").StyledComponent<"div",
|
|
|
3
3
|
export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
4
|
export declare const IconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
5
5
|
export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
-
export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {
|
|
7
|
+
$borderRadius: number;
|
|
8
|
+
}, never>;
|
|
7
9
|
export declare const PointsTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
10
|
export declare const PointsValue: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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 p,
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__spreadArray as e}from'./../../../ext/tslib/tslib.es6.mjs.js';import t,{useMemo as n}from"react";import{observer as
|
|
1
|
+
import{__spreadArray as e}from'./../../../ext/tslib/tslib.es6.mjs.js';import t,{useMemo as n}from"react";import{observer as r}from"mobx-react";import'./../../../ext/react-i18next/dist/es/context.js';import{useTranslation as l}from'./../../../ext/react-i18next/dist/es/useTranslation.js';import{ChevronLeft as o}from"../../../assets/icons/chevron-left.js";import{XClose as i}from"../../../assets/icons/x-close.js";import{Container as a,Header as c,IconButton as s,Title as u,Content as m,PointsSection as d,PointsText as p,PointsValue as E,ProgressBarContainer as f,ProgressBarFill as y,DescriptionText as v,TimelineContainer as g,TimelineItem as x,TimelineLine as R,CheckIconContainer as P,CurrentIndicator as h,CurrentIndicatorDot as j,UpcomingIndicator as q,TimelineContent as b,TimelineTitle as L,TimelineDescription as $,MultiplierSection as k,MultiplierValue as S}from"./style.js";import{Check as T}from"../../../assets/icons/check.js";var C=r(function(r){var C=r.viewModel,M=r.onBack,I=r.onClose,B=l().t,W=C.user,_=C.tiers,N=n(function(){return e([],_,!0).sort(function(e,t){return(e.pointsRequired||0)-(t.pointsRequired||0)})},[_]),w=n(function(){return(null==W?void 0:W.customerTierId)?N.findIndex(function(e){var t;return e.id===(null===(t=W.customerTierId)||void 0===t?void 0:t.id)}):-1},[N,null==W?void 0:W.customerTierId]),z=n(function(){return W?-1===w?N.find(function(e){return(e.pointsRequired||0)>W.totalPoint})||N[0]:N[w+1]||null:null},[N,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(a,null,t.createElement(c,null,t.createElement(s,{onClick:M},t.createElement(o,null)),t.createElement(u,null,B("screens.loyaltyLevel")),t.createElement(s,{onClick:I},t.createElement(i,null))),t.createElement(m,null,t.createElement(d,{$borderRadius:C.loyaltyWidget.settings.cartBorderRadius},t.createElement("div",null,t.createElement(p,null,B("header.earnedPoints")),t.createElement(E,null,W.totalPoint," ",B("common.points"))),t.createElement(f,null,t.createElement(y,{$percentage:A,$color:C.loyaltyWidget.header.background.bgColor||void 0})),t.createElement(v,null,z?B("screens.loyaltyLevelScreen.reachNextTier",{tierName:z.name,points:D}):B("screens.loyaltyLevelScreen.allTiersCompleted"))),t.createElement(g,null,N.map(function(e,n){var r="upcoming";w>-1?r=n<w?"completed":n===w?"current":"upcoming":W.totalPoint>=(e.pointsRequired||0)&&(r="completed");var l=n===N.length-1;return t.createElement(x,{key:e.id},t.createElement(R,{$isLast:l}),"completed"===r?t.createElement(P,null,t.createElement(T,null)):"current"===r?t.createElement(h,null,t.createElement(j,null)):t.createElement(q,null),t.createElement(b,null,t.createElement(L,{$status:r},e.name),t.createElement($,{$status:r},e.pointsRequired||0," ",B("common.points")," ",B("screens.loyaltyLevelScreen.afterEarning")),(e.tierPointMultiplier||1)>1&&t.createElement(k,{$borderRadius:C.loyaltyWidget.settings.cartBorderRadius},B("screens.loyaltyLevelScreen.multiplierPrefix")," ",t.createElement(S,null,e.tierPointMultiplier||1,"x")," ",B("screens.loyaltyLevelScreen.multiplierSuffix"))))})))):null});export{C as default};
|
|
@@ -3,7 +3,9 @@ export declare const Header: import("styled-components").StyledComponent<"div",
|
|
|
3
3
|
export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
4
|
export declare const IconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
5
5
|
export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
-
export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
export declare const PointsSection: import("styled-components").StyledComponent<"div", any, {
|
|
7
|
+
$borderRadius: number;
|
|
8
|
+
}, never>;
|
|
7
9
|
export declare const PointsText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
10
|
export declare const PointsValue: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
11
|
export declare const ProgressBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -24,7 +26,9 @@ export declare const TimelineTitle: import("styled-components").StyledComponent<
|
|
|
24
26
|
export declare const TimelineDescription: import("styled-components").StyledComponent<"div", any, {
|
|
25
27
|
$status: "completed" | "current" | "upcoming";
|
|
26
28
|
}, never>;
|
|
27
|
-
export declare const MultiplierSection: import("styled-components").StyledComponent<"div", any, {
|
|
29
|
+
export declare const MultiplierSection: import("styled-components").StyledComponent<"div", any, {
|
|
30
|
+
$borderRadius: number;
|
|
31
|
+
}, never>;
|
|
28
32
|
export declare const MultiplierValue: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
29
33
|
export declare const CheckIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
30
34
|
export declare const CurrentIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import e,{css as
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";import{observer as t}from"mobx-react";import{Container as
|
|
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 u}from"../../../../models/loyalty-widget/types/index.js";var f=t(function(t){var f,g=t.viewModel,p=t.onClose,v=t.onCardHeightChange,y=t.headerGap,E=g.loyaltyWidget,b=g.user,h=E.header.background,x=h.bgColor,j=h.type,C=(null===(f=h.image)||void 0===f?void 0:f.src)||null,R=e.useRef(null);return e.useEffect(function(){if(v){var e=R.current;if(e){var t=function(){v(e.getBoundingClientRect().height)};if(t(),"undefined"!=typeof ResizeObserver){var r=new ResizeObserver(function(){t()});return r.observe(e),function(){r.disconnect()}}}}},[v]),e.createElement(r,null,e.createElement(o,{$bgColor:x,$bgType:j,$bgImageSrc:C,$gap:y},E.header.logo.type===u.SHOW&&E.header.logo.src&&e.createElement(a,{logo:E.header.logo}),e.createElement(s,{layout:E}),e.createElement(n,{onClick:p},e.createElement(d,null))),e.createElement(i,null,e.createElement(l,{ref:R,$borderRadius:E.settings.cartBorderRadius},b?e.createElement(m,{viewModel:g}):e.createElement(c,{viewModel:g}))))});export{f as default};
|
|
@@ -9,6 +9,8 @@ type TopSectionProps = {
|
|
|
9
9
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
10
|
export declare const TopSection: import("styled-components").StyledComponent<"div", any, TopSectionProps, never>;
|
|
11
11
|
export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
|
-
export declare const Card: import("styled-components").StyledComponent<"div", any, {
|
|
12
|
+
export declare const Card: import("styled-components").StyledComponent<"div", any, {
|
|
13
|
+
$borderRadius: number;
|
|
14
|
+
}, never>;
|
|
13
15
|
export declare const CloseButton: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
14
16
|
export {};
|
|
@@ -1 +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
|
|
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"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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";import'./../../../../ext/react-i18next/dist/es/context.js';import{useTranslation as t}from'./../../../../ext/react-i18next/dist/es/useTranslation.js';import{observer as n}from"mobx-react";import{LoyaltyWidgetScreenTypeEnum as
|
|
1
|
+
import e from"react";import'./../../../../ext/react-i18next/dist/es/context.js';import{useTranslation as t}from'./../../../../ext/react-i18next/dist/es/useTranslation.js';import{observer as n}from"mobx-react";import{LoyaltyWidgetScreenTypeEnum as r}from"../../../../models/types/index.js";import{WidgetIconTypeEnum as l}from"../../../../models/loyalty-widget/types/index.js";import{Container as o,GridContainer as i,SmallCard as a,SmallCardIconWrapper as s,SmallCardBottom as c,Title as E,ArrowWrapper as m,RowCard as u}from"./style.js";import{getScreenIcon as d}from"../../../../utils.js";var R=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"}))},_=n(function(n){var _=n.viewModel,g=n.onNavigate,N=t().t,y=_.user,T=!!y,p=_.loyaltyWidget.settings.widgetIconType;return e.createElement(o,null,e.createElement(i,null,e.createElement(a,{$borderRadius:_.loyaltyWidget.settings.cartBorderRadius,onClick:function(){return null==g?void 0:g(r.CREDIT_EARNING_METHODS_SCREEN)}},p!==l.NONE&&e.createElement(s,{$hasBgColor:p===l.ILLUSTRATION,$iconType:p},d(r.CREDIT_EARNING_METHODS_SCREEN,p)),e.createElement(c,null,e.createElement(E,null,N("main_screen.earnPoints")),e.createElement(m,null,e.createElement(R,null)))),e.createElement(a,{$borderRadius:_.loyaltyWidget.settings.cartBorderRadius,onClick:function(){return null==g?void 0:g(r.CREDIT_SPENDING_METHODS_SCREEN)}},p!==l.NONE&&e.createElement(s,{$hasBgColor:p===l.ILLUSTRATION,$iconType:p},d(r.CREDIT_SPENDING_METHODS_SCREEN,p)),e.createElement(c,null,e.createElement(E,null,N("main_screen.allRewards")),e.createElement(m,null,e.createElement(R,null))))),T&&e.createElement(e.Fragment,null,(null==y?void 0:y.customerTierId)&&e.createElement(u,{$borderRadius:_.loyaltyWidget.settings.cartBorderRadius,onClick:function(){return null==g?void 0:g(r.LOYALTY_LEVEL_SCREEN)}},e.createElement(E,null,N("main_screen.tiers")),e.createElement(m,null,e.createElement(R,null))),_.pointHistory.length>0&&e.createElement(u,{$borderRadius:_.loyaltyWidget.settings.cartBorderRadius,onClick:function(){return null==g?void 0:g(r.CREDIT_HISTORY_SCREEN)}},e.createElement(E,null,N("main_screen.pointHistory")),e.createElement(m,null,e.createElement(R,null)))))});export{_ as default};
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { WidgetIconTypeEnum } from "models/loyalty-widget/types";
|
|
2
2
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
3
|
export declare const GridContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export declare const SmallCard: import("styled-components").StyledComponent<"button", any, {
|
|
4
|
+
export declare const SmallCard: import("styled-components").StyledComponent<"button", any, {
|
|
5
|
+
$borderRadius: number;
|
|
6
|
+
}, never>;
|
|
5
7
|
export declare const SmallCardIconWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
6
8
|
$hasBgColor: boolean;
|
|
7
9
|
$iconType: WidgetIconTypeEnum;
|
|
8
10
|
}, never>;
|
|
9
11
|
export declare const SmallCardBottom: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
12
|
export declare const Title: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
11
|
-
export declare const RowCard: import("styled-components").StyledComponent<"button", any, {
|
|
13
|
+
export declare const RowCard: import("styled-components").StyledComponent<"button", any, {
|
|
14
|
+
$borderRadius: number;
|
|
15
|
+
}, never>;
|
|
12
16
|
export declare const ArrowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__makeTemplateObject as n}from'./../../../../ext/tslib/tslib.es6.mjs.js';import e,{css as
|
|
1
|
+
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/style.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__makeTemplateObject as n}from'./../ext/tslib/tslib.es6.mjs.js';import t,{css as i}from"styled-components";import{WidgetPositionEnum as o,LoyaltyWidgetLayoutTypeEnum as e}from"../models/loyalty-widget/types/index.js";import{WidgetMode as r}from"../models/types/index.js";var a,s,p,x,d,
|
|
1
|
+
import{__makeTemplateObject as n}from'./../ext/tslib/tslib.es6.mjs.js';import t,{css as i}from"styled-components";import{WidgetPositionEnum as o,LoyaltyWidgetLayoutTypeEnum as e}from"../models/loyalty-widget/types/index.js";import{WidgetMode as r}from"../models/types/index.js";var a,s,p,x,d,u,f,l,h=t.div(a||(a=n(["\n position: ",";\n position: ",";\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n width: 100%;\n height: ",";\n max-height: ",";\n overflow: hidden; /* Prevent scrollbars from absolute children */\n background-color: ",";\n transition: background-color 0.3s ease-in-out;\n z-index: 2147483647;\n pointer-events: ",";\n\n /* Ensure children are clickable in Mini Mode */\n & > * {\n pointer-events: auto;\n }\n"],["\n position: ",";\n position: ",";\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n width: 100%;\n height: ",";\n max-height: ",";\n overflow: hidden; /* Prevent scrollbars from absolute children */\n background-color: ",";\n transition: background-color 0.3s ease-in-out;\n z-index: 2147483647;\n pointer-events: ",";\n\n /* Ensure children are clickable in Mini Mode */\n & > * {\n pointer-events: auto;\n }\n"])),function(n){return n.$position||"fixed"},function(n){return n.$position||"fixed"},function(n){return"absolute"===n.$position?"100%":"100vh"},function(n){return"absolute"===n.$position?"100%":"100vh"},function(n){return n.$widgetMode===r.MINI_MODE?"transparent":"rgba(0, 0, 0, 0.5)"},function(n){return n.$widgetMode===r.MINI_MODE?"none":"auto"}),m=t.div(x||(x=n(["\n position: absolute;\n top: 0;\n ","\n display: block;\n width: 100%;\n max-width: 380px;\n height: 100%;\n background-color: #ffffff;\n overflow: hidden;\n \n /* Animation props */\n transform: ",";\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-in-out;\n opacity: ",";\n pointer-events: ",";\n\n ","\n\n @media (max-width: 380px) {\n max-width: 100%;\n }\n"],["\n position: absolute;\n top: 0;\n ","\n display: block;\n width: 100%;\n max-width: 380px;\n height: 100%;\n background-color: #ffffff;\n overflow: hidden;\n \n /* Animation props */\n transform: ",";\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-in-out;\n opacity: ",";\n pointer-events: ",";\n\n ","\n\n @media (max-width: 380px) {\n max-width: 100%;\n }\n"])),function(n){return n.$widgetPosition===o.LEFT?"left: 0;":"right: 0;"},function(n){var t=n.$isOpen,i=n.$widgetPosition;return t?"translateX(0%)":i===o.LEFT?"translateX(-100%)":"translateX(100%)"},function(n){return n.$isOpen?1:0},function(n){return n.$isOpen?"auto":"none"},function(t){return t.$layoutType===e.DRAWER?i(s||(s=n(["\n border-radius: 0;\n box-shadow: -2px 0 8px rgba(36, 30, 30, 0.15);\n\n @media (max-width: 600px) {\n max-width: 100%;\n height: 100%;\n }\n "],["\n border-radius: 0;\n box-shadow: -2px 0 8px rgba(36, 30, 30, 0.15);\n\n @media (max-width: 600px) {\n max-width: 100%;\n height: 100%;\n }\n "]))):i(p||(p=n(["\n border-radius: 12px;\n box-shadow: 0 136px 38px 0 rgba(0, 0, 0, 0),\n 0 87px 35px 0 rgba(0, 0, 0, 0.01),\n 0 49px 29px 0 rgba(0, 0, 0, 0.02),\n 0 22px 22px 0 rgba(0, 0, 0, 0.04),\n 0 5px 12px 0 rgba(0, 0, 0, 0.04);\n max-height: min(850px, calc(100vh - 80px));\n margin: 40px 16px;\n\n @media (max-width: 600px) {\n top: 16px;\n bottom: 16px;\n left: 16px;\n right: 16px;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n }\n "],["\n border-radius: 12px;\n box-shadow: 0 136px 38px 0 rgba(0, 0, 0, 0),\n 0 87px 35px 0 rgba(0, 0, 0, 0.01),\n 0 49px 29px 0 rgba(0, 0, 0, 0.02),\n 0 22px 22px 0 rgba(0, 0, 0, 0.04),\n 0 5px 12px 0 rgba(0, 0, 0, 0.04);\n max-height: min(850px, calc(100vh - 80px));\n margin: 40px 16px;\n\n @media (max-width: 600px) {\n top: 16px;\n bottom: 16px;\n left: 16px;\n right: 16px;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n }\n "])))}),c=t.div(f||(f=n(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #ffffff;\n transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n overflow-y: auto;\n\n ","\n"],["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #ffffff;\n transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n overflow-y: auto;\n\n ","\n"])),function(t){var o=t.$isActive;return t.$isMain?i(d||(d=n(["\n transform: translateX(0%);\n z-index: 1;\n "],["\n transform: translateX(0%);\n z-index: 1;\n "]))):i(u||(u=n(["\n transform: translateX(",");\n z-index: 2;\n box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); \n "],["\n transform: translateX(",");\n z-index: 2;\n box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); \n "])),o?"0%":"100%")}),b=t.div(l||(l=n(["\n position: absolute;\n bottom: 20px;\n ","\n display: flex;\n flex-direction: column;\n align-items: ",";\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n opacity: ",";\n transform: ",";\n pointer-events: ",";\n"],["\n position: absolute;\n bottom: 20px;\n ","\n display: flex;\n flex-direction: column;\n align-items: ",";\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n opacity: ",";\n transform: ",";\n pointer-events: ",";\n"])),function(n){return n.$widgetPosition===o.LEFT?"left: 20px;":"right: 20px;"},function(n){return n.$widgetPosition===o.LEFT?"flex-start":"flex-end"},function(n){return n.$isVisible?1:0},function(n){return n.$isVisible?"translateY(0)":"translateY(10px)"},function(n){return n.$isVisible?"auto":"none"});export{h as Container,b as MiniModeWrapper,m as Panel,c as ScreenWrapper};
|