@licklist/design 0.59.0-dev.9 → 0.60.0

package/dist/setting/dashboard/DashboardSettingForm.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("tslib"),t=require("react"),n=e(t),a=require("react-i18next"),o=e(require("react-bootstrap/Row")),l=e(require("react-bootstrap/Col")),i=require("react-bootstrap"),s=require("react-hook-form"),d=e(require("@licklist/plugins/dist/services/Form/HookFormService")),m=e(require("@licklist/plugins/dist/services/Form/FormErrorService")),c=e(require("react-bootstrap/Form")),u=require("@react-aria/utils"),v=require("../../static/switch/BooleanSwitch.js");require("../../static/index.js");var E=require("../../help/popover/HelpPopover.js"),p=require("./EventSettingForm.js"),b=require("./ProviderSettingForm.js");exports.DashboardSettingForm=function(e){var g,f,h,F=e.isLoading,I=void 0!==F&&F,S=e.defaultValues,q=void 0===S?{}:S,C=e.onSubmit,x=e.hasPermission,P=void 0===x||x,B=e.serverErrors,_=s.useForm({mode:"onChange",defaultValues:r.__assign({},q)}),L=_.register,O=_.handleSubmit,R=_.formState,y=R.errors,V=R.isValid,k=R.isDirty,j=_.setError,D=a.useTranslation(["Design","Validation"]).t;t.useEffect((function(){m.handleServerErrors(B,j)}),[B,j]);var w=u.useId(),G=u.useId(),H=u.useId(),M=u.useId(),N=u.useId(),A=u.useId(),U=[{id:1,value:D("groupItemsByOrder")}];return n.createElement(c,{className:"d-flex flex-column",noValidate:!0,onSubmit:O(C)},n.createElement(s.FormProvider,r.__assign({},_),n.createElement(o,null,n.createElement(l,{xs:12,sm:6},n.createElement(c.Group,{controlId:w},n.createElement(c.Label,null,D("notificationOnEachOrder")," ",n.createElement(E.HelpPopover,{variant:"info"},D("notificationOnEachOrderHelp"))),n.createElement(s.Controller,{render:function(e){var r=e.field,t=r.name,a=r.value,o=r.onChange;return n.createElement(v.BooleanSwitch,{name:t,value:Boolean(a),onChange:d.booleanAsNumber(o),disabled:I})},name:"notificationOnEachOrder",control:_.control})),n.createElement(c.Group,{controlId:G},n.createElement(c.Label,null,D("orderReportOnEventStart")," ",n.createElement(E.HelpPopover,{variant:"info"},D("orderReportOnEventStartHelp"))),n.createElement(s.Controller,{render:function(e){var r=e.field,t=r.name,a=r.value,o=r.onChange;return n.createElement(v.BooleanSwitch,{name:t,value:Boolean(a),onChange:d.booleanAsNumber(o),disabled:I})},name:"orderReportOnEventStart",control:_.control})),n.createElement(c.Group,{controlId:M},n.createElement(c.Label,null,D("hasUserVerification")),n.createElement(s.Controller,{render:function(e){var r=e.field,t=r.name,a=r.value,o=r.onChange;return n.createElement(v.BooleanSwitch,{name:t,value:Boolean(a),onChange:o,disabled:I})},name:"hasUserVerification",control:_.control})),n.createElement(c.Group,{controlId:N},n.createElement(c.Label,null,D("metaPixelId")),n.createElement(c.Control,r.__assign({type:"number"},L("metaPixelId",{minLength:{value:15,message:D("Validation:fieldMinLength",{attribute:D("metaPixelId"),min:15})}}),{isInvalid:Boolean(y.metaPixelId),disabled:I})),n.createElement(c.Control.Feedback,{type:"invalid"},null===(g=y.metaPixelId)||void 0===g?void 0:g.message))),n.createElement(l,{xs:12,sm:6},n.createElement(c.Group,{controlId:H},n.createElement(c.Label,null,D("orderReportFormat")),n.createElement(c.Control,r.__assign({as:"select"},L("orderReportFormat",{required:D("Validation:fieldRequired",{attribute:D("orderReportFormat")}),valueAsNumber:!0}),{name:"orderReportFormat",isInvalid:Boolean(y.orderReportFormat),disabled:I}),U.map((function(e){return n.createElement("option",{value:e.id,key:e.id},e.value)}))),n.createElement(c.Control.Feedback,{type:"invalid"},null===(f=y.orderReportFormat)||void 0===f?void 0:f.message)))),n.createElement(p.EventSettingForm,{isLoading:I}),n.createElement(b.ProviderSettingForm,{isLoading:I}),n.createElement(c.Group,{controlId:A},n.createElement(c.Label,null,D("eventDeadlineErrorMessage")),n.createElement(c.Control,r.__assign({},L("eventDeadlineErrorMessage"),{isInvalid:Boolean(y.eventDeadlineErrorMessage),disabled:I})),n.createElement(c.Control.Feedback,{type:"invalid"},null===(h=y.eventDeadlineErrorMessage)||void 0===h?void 0:h.message))),P&&n.createElement(i.Button,{type:"submit",disabled:I||!V||!k,className:"d-flex align-items-center align-self-end"},I&&n.createElement(i.Spinner,{animation:"border",size:"sm",role:"status","aria-hidden":"true",className:"mr-2"}),D("update")))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("tslib"),t=require("react"),a=e(t),n=require("react-i18next"),o=e(require("react-bootstrap/Row")),l=e(require("react-bootstrap/Col")),i=require("react-bootstrap"),s=require("react-hook-form"),d=e(require("@licklist/plugins/dist/services/Form/HookFormService")),m=e(require("@licklist/plugins/dist/services/Form/FormErrorService")),c=e(require("react-bootstrap/Form")),u=require("@react-aria/utils"),v=require("../../static/switch/BooleanSwitch.js");require("../../static/index.js");var E=require("../../help/popover/HelpPopover.js"),p=require("./EventSettingForm.js"),b=require("./ProviderSettingForm.js");exports.DashboardSettingForm=function(e){var f,g,h=e.isLoading,F=void 0!==h&&h,S=e.defaultValues,q=void 0===S?{}:S,I=e.onSubmit,C=e.hasPermission,x=void 0===C||C,P=e.serverErrors,B=s.useForm({mode:"onChange",defaultValues:r.__assign({},q)}),O=B.register,R=B.handleSubmit,L=B.formState,_=L.errors,y=L.isValid,V=L.isDirty,j=B.setError,k=n.useTranslation(["Design","Validation"]).t;t.useEffect((function(){m.handleServerErrors(P,j)}),[P,j]);var w=u.useId(),H=u.useId(),N=u.useId(),G=u.useId(),A=u.useId(),D=[{id:1,value:k("groupItemsByOrder")}];return a.createElement(c,{className:"d-flex flex-column",noValidate:!0,onSubmit:R(I)},a.createElement(s.FormProvider,r.__assign({},B),a.createElement(o,null,a.createElement(l,{xs:12,sm:6},a.createElement(c.Group,{controlId:w},a.createElement(c.Label,null,k("notificationOnEachOrder")," ",a.createElement(E.HelpPopover,{variant:"info"},k("notificationOnEachOrderHelp"))),a.createElement(s.Controller,{render:function(e){var r=e.field,t=r.name,n=r.value,o=r.onChange;return a.createElement(v.BooleanSwitch,{name:t,value:Boolean(n),onChange:d.booleanAsNumber(o),disabled:F})},name:"notificationOnEachOrder",control:B.control})),a.createElement(c.Group,{controlId:H},a.createElement(c.Label,null,k("orderReportOnEventStart")," ",a.createElement(E.HelpPopover,{variant:"info"},k("orderReportOnEventStartHelp"))),a.createElement(s.Controller,{render:function(e){var r=e.field,t=r.name,n=r.value,o=r.onChange;return a.createElement(v.BooleanSwitch,{name:t,value:Boolean(n),onChange:d.booleanAsNumber(o),disabled:F})},name:"orderReportOnEventStart",control:B.control})),a.createElement(c.Group,{controlId:G},a.createElement(c.Label,null,k("hasUserVerification")),a.createElement(s.Controller,{render:function(e){var r=e.field,t=r.name,n=r.value,o=r.onChange;return a.createElement(v.BooleanSwitch,{name:t,value:Boolean(n),onChange:o,disabled:F})},name:"hasUserVerification",control:B.control})),a.createElement(c.Group,{controlId:A},a.createElement(c.Label,null,k("metaPixelId")),a.createElement(c.Control,r.__assign({type:"number"},O("metaPixelId",{minLength:{value:15,message:k("Validation:fieldMinLength",{attribute:k("metaPixelId"),min:15})}}),{isInvalid:Boolean(_.metaPixelId),disabled:F})),a.createElement(c.Control.Feedback,{type:"invalid"},null===(f=_.metaPixelId)||void 0===f?void 0:f.message))),a.createElement(l,{xs:12,sm:6},a.createElement(c.Group,{controlId:N},a.createElement(c.Label,null,k("orderReportFormat")),a.createElement(c.Control,r.__assign({as:"select"},O("orderReportFormat",{required:k("Validation:fieldRequired",{attribute:k("orderReportFormat")}),valueAsNumber:!0}),{name:"orderReportFormat",isInvalid:Boolean(_.orderReportFormat),disabled:F}),D.map((function(e){return a.createElement("option",{value:e.id,key:e.id},e.value)}))),a.createElement(c.Control.Feedback,{type:"invalid"},null===(g=_.orderReportFormat)||void 0===g?void 0:g.message)))),a.createElement(p.EventSettingForm,{isLoading:F}),a.createElement(b.ProviderSettingForm,{isLoading:F})),x&&a.createElement(i.Button,{type:"submit",disabled:F||!y||!V,className:"d-flex align-items-center align-self-end"},F&&a.createElement(i.Spinner,{animation:"border",size:"sm",role:"status","aria-hidden":"true",className:"mr-2"}),k("update")))};

package/dist/static/manual-date-picker/ManualDatePicker.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("react-i18next"),n=require("react-bootstrap"),l=require("./constants/index.js");exports.ManualDatePicker=function(e){var t=e.isDisabled,o=e.day,i=e.setDay,u=e.month,c=e.setMonth,s=e.year,m=e.setYear,d=e.isRequred,v=void 0!==d&&d,p=r.useTranslation(["Validation","Design"]).t;return a.createElement(a.Fragment,null,a.createElement("div",{className:"custom-date-field-picker mr-4"},a.createElement(n.Form.Group,null,a.createElement(n.Form.Control,{value:o,as:"select",isInvalid:v&&!o,onChange:function(e){var t=e.target.value;i(t?Number(t):void 0)},disabled:t},a.createElement("option",{value:""},p("Design:dayShort")),l.DAYS_ARRAY.map((function(e){return a.createElement("option",{key:e,value:e},e)}))))),a.createElement("div",{className:"custom-date-field-picker mr-4"},a.createElement(n.Form.Group,null,a.createElement(n.Form.Control,{value:u,as:"select",isInvalid:v&&!u,onChange:function(e){var t=e.target.value;return c(t?Number(t):void 0)},disabled:t},a.createElement("option",{value:""},p("Design:monthShort")),l.MONTHS_ARRAY.map((function(e){return a.createElement("option",{key:e.key,value:e.value},e.key)}))))),a.createElement("div",{className:"custom-date-field-picker"},a.createElement(n.Form.Group,null,a.createElement(n.Form.Control,{value:s,as:"select",isInvalid:v&&!s,onChange:function(e){var t=e.target.value;return m(t?Number(t):void 0)},disabled:t},a.createElement("option",{value:""},p("Design:yearShort")),l.YEARS_ARRAY.map((function(e){return a.createElement("option",{key:e,value:e},e)}))))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("react-i18next"),n=require("react-bootstrap"),l=require("./constants/index.js");exports.ManualDatePicker=function(e){var t=e.isDisabled,o=e.day,i=e.setDay,u=e.month,c=e.setMonth,s=e.year,m=e.setYear,d=e.isRequred,v=void 0!==d&&d,p=r.useTranslation(["Validation","Design"]).t;return a.createElement(a.Fragment,null,a.createElement("div",{className:"custom-date-field-picker mr-4"},a.createElement(n.Form.Group,null,a.createElement(n.Form.Control,{value:o,as:"select",isInvalid:v&&!o,onChange:function(e){var t=e.target.value;i(t?Number(t):void 0)},disabled:t},a.createElement("option",{value:""},p("Design:dayShort")),l.DAYS_ARRAY.map((function(e){return a.createElement("option",{key:e,value:e},e)}))))),a.createElement("div",{className:"custom-date-field-picker mr-4"},a.createElement(n.Form.Group,null,a.createElement(n.Form.Control,{value:u,as:"select",isInvalid:v&&!u,onChange:function(e){var t=e.target.value;return c(t?Number(t):void 0)},disabled:t},a.createElement("option",{value:""},p("Design:monthShort")),l.MONTHS_ARRAY.map((function(e){return a.createElement("option",{key:e,value:e},e)}))))),a.createElement("div",{className:"custom-date-field-picker"},a.createElement(n.Form.Group,null,a.createElement(n.Form.Control,{value:s,as:"select",isInvalid:v&&!s,onChange:function(e){var t=e.target.value;return m(t?Number(t):void 0)},disabled:t},a.createElement("option",{value:""},p("Design:yearShort")),l.YEARS_ARRAY.map((function(e){return a.createElement("option",{key:e,value:e},e)}))))))};

package/dist/static/manual-date-picker/constants/index.d.ts

@@ -1,7 +1,4 @@
 export declare const DAYS_ARRAY: number[];
-export declare const MONTHS_ARRAY: {
-    key: string;
-    value: number;
-}[];
+export declare const MONTHS_ARRAY: number[];
 export declare const YEARS_ARRAY: number[];
 //# sourceMappingURL=index.d.ts.map

package/dist/static/manual-date-picker/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/static/manual-date-picker/constants/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,UAA+B,CAAC;AACvD,eAAO,MAAM,YAAY;;;GAA+B,CAAC;AACzD,eAAO,MAAM,WAAW,UAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/static/manual-date-picker/constants/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,UAA+B,CAAC;AACvD,eAAO,MAAM,YAAY,UAA+B,CAAC;AACzD,eAAO,MAAM,WAAW,UAAuB,CAAC"}

package/dist/static/manual-date-picker/constants/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../utils/index.js"),r=e.generateDatesArray(1,31,1),t=e.generateMonthsOptionsArray(),s=e.generateYearsArray();exports.DAYS_ARRAY=r,exports.MONTHS_ARRAY=t,exports.YEARS_ARRAY=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../utils/index.js"),r=e.generateDatesArray(1,31,1),t=e.generateDatesArray(1,12,1),s=e.generateYearsArray();exports.DAYS_ARRAY=r,exports.MONTHS_ARRAY=t,exports.YEARS_ARRAY=s;

package/dist/static/manual-date-picker/utils/index.d.ts

@@ -1,8 +1,4 @@
 export declare const generateDatesArray: (start: number, end: number, step: number) => number[];
-export declare const generateMonthsOptionsArray: () => {
-    key: string;
-    value: number;
-}[];
 export declare const generateYearsArray: () => number[];
 export declare const dateToSqlDate: (day: number, month: number, year: number) => string;
 //# sourceMappingURL=index.d.ts.map

package/dist/static/manual-date-picker/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/static/manual-date-picker/utils/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,UAAW,MAAM,OAAO,MAAM,QAAQ,MAAM,aAIxE,CAAC;AAEJ,eAAO,MAAM,0BAA0B;;;GASnC,CAAC;AAEL,eAAO,MAAM,kBAAkB,gBAQ9B,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,SAAS,MAAM,QAAQ,MAAM,WAUrE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/static/manual-date-picker/utils/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,UAAW,MAAM,OAAO,MAAM,QAAQ,MAAM,aAIxE,CAAC;AAEJ,eAAO,MAAM,kBAAkB,gBAQ9B,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,SAAS,MAAM,QAAQ,MAAM,WAUrE,CAAC"}

package/dist/static/manual-date-picker/utils/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.dateToSqlDate=function(r,t,e){var n=function(r){return r<10?"0".concat(r):r};return"".concat(e,"-").concat(n(t),"-").concat(n(r))},exports.generateDatesArray=function(r,t,e){return Array.from({length:(t-r)/e+1},(function(r,t){return 1+t*e}))},exports.generateMonthsOptionsArray=function(){return Array.from({length:12},(function(r,t){var e=t+1,n=String(e);return e<10&&(n="0".concat(n)),{key:n,value:e}}))},exports.generateYearsArray=function(){var r=(new Date).getFullYear()-100;return Array.from({length:100},(function(t,e){return r+e+1})).sort((function(r,t){return t-r}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.dateToSqlDate=function(r,t,e){var n=function(r){return r<10?"0".concat(r):r};return"".concat(e,"-").concat(n(t),"-").concat(n(r))},exports.generateDatesArray=function(r,t,e){return Array.from({length:(t-r)/e+1},(function(r,t){return 1+t*e}))},exports.generateYearsArray=function(){var r=(new Date).getFullYear()-100;return Array.from({length:100},(function(t,e){return r+e+1})).sort((function(r,t){return t-r}))};

package/dist/styles/activity-card/ListActivitiesCard.scss

@@ -5,7 +5,7 @@
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  height: 6rem;
+  height: 5rem;
   padding: 0.375rem;
   border: 2px solid transparent;
   border-radius: 0.5rem;

package/dist/styles/iframe-events/Card.scss

@@ -1,5 +1,4 @@
 @import "../snippet-templates/snippetVariables";
-@import "../themes//bookedit/variables";
 
 .iframe-event-card {
   position: relative;
@@ -19,27 +18,12 @@
     background-size: cover;
     background-position: center;
     cursor: pointer;
+    border: 1px solid transparent;
     border-radius: 0.5rem;
   }
 
   .card-body {
-    padding: 0.5rem 0 0.875rem 0;
-
-    @include media-breakpoint-down(sm) {
-      padding: 1rem 0;
-    }
-  }
-
-  &__info-icon {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-    background-color: "#ffffff";
-    border-radius: 1.5rem;
-    padding: 0 0.5rem;
-    font-size: 0.75rem;
-    font-weight: $white;
-    border: 1px solid $black;
+    padding: 0.5rem 0 0.875rem;
   }
 
   &__title {
@@ -49,7 +33,7 @@
     line-height: 1.25rem;
     cursor: pointer;
     margin-bottom: 0.5rem;
-    font-size: 0.95rem;
+    font-size: 1.125rem;
   }
 
   &__label {
@@ -98,8 +82,7 @@
         color: $snippet-elements-button-color;
         border: none;
         background-color: $snippet-elements-button-background-color;
-        box-shadow: 0 0 0 $input-btn-focus-width
-          $snippet-elements-button-background-color;
+        box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
       }
 
       &:disabled {
@@ -112,14 +95,14 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: 0.7;
+        opacity: .7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: 0.8;
+        opacity: .8;
       }
     }
   }
@@ -140,7 +123,7 @@
   }
 
   .card-text {
-    font-size: 0.82rem;
+    font-size: 0.875rem;
   }
 
   &.event-info {
@@ -219,6 +202,7 @@
 
   @media (max-width: 576px) {
     &.list-view {
+
       .card-image {
         margin-right: 0.5rem;
       }

package/dist/styles/iframe-events/PoweredBy.scss

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 0.75rem 0 2rem;
+    padding: 0 0.75rem;
     height: 2rem;
     width: 100%;
     font-size: 0.75rem;
@@ -27,4 +27,4 @@
       color: $blue;
     }
   }
-}
+}

package/dist/styles/iframe-external-modal/IframeExternalModal.scss

@@ -4,8 +4,7 @@ html[bkdt-scrollable="false"] {
   overflow: hidden !important;
 }
 
-body[bkdt-scrollable="false"] .bkdt-modal,
-body[bkdt-scrollable="false"] .bkdt-mask {
+body[bkdt-scrollable="false"] .bkdt-modal, body[bkdt-scrollable="false"] .bkdt-mask {
   display: block;
 }
 
@@ -16,7 +15,7 @@ body[bkdt-scrollable="false"] .bkdt-mask {
   width: 100%;
   height: 100%;
   z-index: 1000000;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0,0,0,0.5);
   display: none;
 }
 
@@ -83,7 +82,6 @@ body[bkdt-scrollable="false"] .bkdt-mask {
           width: 100%;
           height: 100%;
           max-width: 800px;
-          min-height: unset;
         }
       }
     }
@@ -100,7 +98,6 @@ body[bkdt-scrollable="false"] .bkdt-mask {
       .bkdt-modal-content {
         .bkdt-modal-body {
           height: 35rem;
-          max-height: 85vh;
         }
       }
     }

package/dist/styles/iframe-order-process/IframeOrderProcess.scss

@@ -57,6 +57,8 @@
 
 .payment-booking-summary {
   transition: $color-transition;
+  background-color: transparent;
+  border: 1px solid transparent;
   border-radius: $iframe-border-radius;
   font-weight: 400;
   font-size: 0.875rem;

package/dist/styles/iframe-page/Page.scss

@@ -21,7 +21,6 @@
 
   @include media-breakpoint-down(sm) {
     height: 100svh;
-    min-width: auto;
   }
 
   .header-block {

package/dist/styles/iframe-page/PageBody.scss

@@ -13,6 +13,9 @@
   .left-block {
     flex: 1;
     align-items: stretch;
+    border-radius: 0.5rem;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
     padding: 1rem;
     background-color: $snippet-page-body-left-block-background-color;
     border: 0;
@@ -31,6 +34,7 @@
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
+
       .title {
         color: $snippet-elements-body-color;
         margin: 0;
@@ -61,7 +65,7 @@
       overflow-x: hidden;
       scrollbar-width: thin;
       .iframe-event-card {
-        border-bottom: 1px solid $separator-color;
+        border-bottom: 2px solid $separator-color;
       }
 
       @include media-breakpoint-down(sm) {
@@ -110,7 +114,7 @@
       }
 
       .collapse {
-        max-height: calc(100vh - 15rem);
+        max-height: calc(100vh - 19rem);
         transition: none 0s ease 0s;
 
         &.show {
@@ -120,7 +124,7 @@
         }
 
         @include media-breakpoint-down(sm) {
-          max-height: 100%;
+          max-height: 7.5rem;
         }
       }
       .collapse-with-people-input {
@@ -146,14 +150,8 @@
     }
 
     .iframe-event-card {
-      border: none;
-
-      .card-image {
-        border-radius: 0;
-      }
-      .card-body {
-        padding-left: 1rem;
-      }
+      background-color: transparent;
+      border-color: transparent;
     }
 
     .price {
@@ -263,24 +261,3 @@
     }
   }
 }
-
-.event-list-page-body {
-  overflow: auto;
-  .left-block {
-    .navigation {
-      font-size: 1.125rem;
-      font-weight: 500;
-      padding-bottom: 2.625rem;
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      margin-top: 0.125rem;
-
-      .title {
-        position: absolute;
-        color: $snippet-elements-body-color;
-        margin: 0;
-      }
-    }
-  }
-}

package/dist/styles/iframe-page/PageHeader.scss

@@ -20,57 +20,55 @@ $base-height: 2.5rem;
       transition: $color-transition;
       border: 0;
     }
-  }
-}
-
-.iframe-page {
-  .button-wrapper {
-    background-color: $snippet-page-header-steps-close-button-background-color;
-    height: $base-height;
-    width: $base-height;
-    border-radius: $base-height;
-    transition: $color-transition;
 
-    .close-button {
-      font-size: 1.25rem;
-      width: $base-height;
+    .button-wrapper {
+      background-color: $snippet-page-header-steps-close-button-background-color;
       height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $snippet-page-header-steps-close-button-border-color;
+      width: $base-height;
+      border-radius: $base-height;
       transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+      .close-button {
+        font-size: 1.25rem;
+        width: $base-height;
+        height: $base-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $snippet-page-header-steps-close-button-border-color;
+        transition: $color-transition;
+
+        &:hover {
+          cursor: pointer;
+        }
       }
-    }
 
-    &.close-button {
-      margin-left: 1rem;
-    }
+      &.close-button {
+        margin-left: 1rem;
+      }
 
-    .back-button {
-      font-size: 2rem;
-      width: $base-height;
-      height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: lighter;
-      color: $snippet-page-header-steps-close-button-border-color;
-      transition: $color-transition;
+      .back-button {
+        font-size: 2rem;
+        width: $base-height;
+        height: $base-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        color: $snippet-page-header-steps-close-button-border-color;
+        transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+        &:hover {
+          cursor: pointer;
+        }
       }
-    }
 
-    &.back-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 1rem;
+      &.back-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+      }
     }
   }
 }

package/dist/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -47,127 +47,141 @@
           margin-left: 0.5rem;
         }
 
+        .ryft-payment-form {
+          .submit-button-wrapper {
+            margin: -1rem 0 1rem;
+
+            button {
+              width: 100%;
+            }
+          }
+          #mobile-pay-divider-container {
+            display: flex;
+            position: relative;
+            margin-bottom: 1rem;
+            #mobile-pay-divider-text {
+              margin-right: 1rem;
+              font-size: 0.875rem;
+              font-weight: 600;
+            }
+            #mobile-pay-divider {
+              width: 100%;
+              border-bottom: 1px #dfdfdf solid;
+              margin-bottom: 0.6rem;
+            }
+          }
+
+          #card-title-container {
+            height: auto;
+            border: none;
+            margin-bottom: 0.5rem;
+            text-align: left;
+            :first-child {
+              font-size: 1rem;
+              font-weight: 600;
+              margin-bottom: 1rem;
+            }
+
+            .form-label {
+              margin-bottom: 0.5rem;
+            }
+          }
+          .mobile-pay-title {
+            display: block;
+            font-weight: 600;
+            font-size: 1rem;
+            color: black;
+            padding: 0;
+            font-style: normal;
+            font-family: inherit;
+            margin-bottom: 1rem;
+          }
+        }
         .form {
           .input {
             border: 2px solid #525252 !important;
           }
         }
 
-        @include media-breakpoint-down(sm) {
-          .left-block-container {
-            max-height: 100%;
-            overflow: visible;
+        .ryft-payment-form {
+          @include media-breakpoint-up(md) {
+            .submit-button-wrapper {
+              max-width: 15.5rem;
+            }
+          }
+
+          // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
+          .ryft-pay-grid {
+            width: 100%;
+            max-width: 15.5rem;
+            margin-bottom: 1rem;
+          }
+          .ryft-pay-apple-pay-button {
+            border-radius: 0.25rem;
           }
         }
-      }
 
+        .divider {
+          display: none !important;
+        }
+      }
       @include media-breakpoint-down(sm) {
-        flex-direction: column-reverse;
-        overflow: scroll;
+        .left-block-container {
+          max-height: 100%;
+          overflow: visible;
+        }
+      }
+    }
 
-        @include media-breakpoint-down(sm) {
-          .left-block {
-            min-height: 100%;
-          }
-          .right-block {
-            margin: 0 auto;
-            width: 100%;
-            .children-wrapper {
-              .accordion {
-                .collapse {
-                  overflow: visible;
-                  overflow-x: unset;
-                  scrollbar-width: unset;
-                }
+    @include media-breakpoint-down(sm) {
+      flex-direction: column-reverse;
+      overflow: scroll;
+
+      @include media-breakpoint-down(sm) {
+        .left-block {
+          min-height: 100%;
+        }
+        .right-block {
+          margin: 0 auto;
+          width: 100%;
+          .children-wrapper {
+            .accordion {
+              .collapse {
+                overflow: visible;
+                overflow-x: unset;
+                scrollbar-width: unset;
               }
             }
           }
         }
       }
     }
-    ::-webkit-scrollbar {
-      display: none;
-      scrollbar-width: none;
-    }
   }
-}
-
-#ryft-threeDSMethodIframe {
-  display: none;
-}
-
-.ryft-payment-form {
-  .submit-button-wrapper {
-    margin: -1rem 0 1rem;
-
-    button {
-      width: 100%;
-    }
-  }
-  #mobile-pay-divider-container {
-    display: flex;
-    position: relative;
-    margin-bottom: 1rem;
-    #mobile-pay-divider-text {
-      margin-right: 1rem;
-      font-size: 0.875rem;
-      font-weight: 600;
-    }
-    #mobile-pay-divider {
-      width: 100%;
-      border-bottom: 1px #dfdfdf solid;
-      margin-bottom: 0.6rem;
-    }
-  }
-
-  #card-title-container {
-    height: auto;
-    border: none;
-    margin-bottom: 0.5rem;
-    text-align: left;
-    :first-child {
-      font-size: 1rem;
-      font-weight: 600;
-      margin-bottom: 1rem;
-    }
-
-    .form-label {
-      margin-bottom: 0.5rem;
-    }
-  }
-  .mobile-pay-title {
-    display: block;
-    font-weight: 600;
-    font-size: 1rem;
-    color: black;
-    padding: 0;
-    font-style: normal;
-    font-family: inherit;
-    margin-bottom: 1rem;
+  ::-webkit-scrollbar {
+    display: none;
+    scrollbar-width: none;
   }
 }
 
-@include media-breakpoint-up(md) {
-  .ryft-payment-form,
-  .iframe-payment-form {
-    position: relative;
-    max-height: 300px !important;
-    .submit-button-wrapper {
-      max-width: 15.5rem;
+@include media-breakpoint-down(md) {
+  .payment_link {
+    .page-body {
+      .left-block {
+        .left-block-container {
+          .ryft-payment-form {
+            position: relative;
+            max-height: 300px !important;
+            .ryft-pay-grid {
+              width: 100%;
+              max-width: 100%;
+            }
+          }
+        }
+      }
     }
   }
+}
 
-  // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
-  .ryft-pay-grid {
-    width: 100%;
-    max-width: 15.5rem;
-    margin-bottom: 1rem;
-  }
-  .ryft-pay-apple-pay-button {
-    border-radius: 0.25rem;
-  }
-
-  .divider {
-    display: none !important;
-  }
+#ryft-threeDSMethodIframe {
+  display: none;
 }

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14rem;
+      height: 14.25rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);