@aaravpos/appointment-booking-plugin 7.0.0 → 7.0.2

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.
@@ -1,2 +1,2 @@
1
1
  import { MainLayoutProps } from '../../../types';
2
- export default function MainLayout({ children, sidebar, renderButton, }: MainLayoutProps): import("react").JSX.Element;
2
+ export default function MainLayout({ children, sidebar, renderButton, isConfirm, handleSidebarOpen, isSidebarOpen }: MainLayoutProps): import("react").JSX.Element;
@@ -12,6 +12,7 @@ interface OrderSidebarProps {
12
12
  checkingConsent?: boolean;
13
13
  loading?: boolean;
14
14
  isBookingDisabled?: boolean;
15
+ handleSidebarOpen?: () => void;
15
16
  }
16
- export default function OrderSidebar({ buttonText, onButtonClick, showTaxesOnlyIfTime, showTip, tipPct, onTipChange, consentRequired, consentCompleted, totalConsents, checkingConsent, loading, isBookingDisabled, }: OrderSidebarProps): JSX.Element;
17
+ export default function OrderSidebar({ buttonText, onButtonClick, showTaxesOnlyIfTime, showTip, tipPct, onTipChange, consentRequired, consentCompleted, totalConsents, checkingConsent, loading, isBookingDisabled, handleSidebarOpen, }: OrderSidebarProps): JSX.Element;
17
18
  export {};
package/dist/styles.css CHANGED
@@ -954,7 +954,7 @@
954
954
  transition: all 0.2s ease;
955
955
  border-radius: 6px;
956
956
  position: absolute;
957
- bottom: 15px;
957
+ bottom: 20px;
958
958
  z-index: 50;
959
959
  display: flex;
960
960
  align-items: center;
@@ -1096,7 +1096,7 @@
1096
1096
  transition: all 0.2s ease;
1097
1097
  border-radius: 24px;
1098
1098
  position: absolute;
1099
- bottom: 15px;
1099
+ bottom: 8px;
1100
1100
  z-index: 50;
1101
1101
  display: flex;
1102
1102
  align-items: center;
@@ -1779,6 +1779,11 @@
1779
1779
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
1780
1780
  gap: 12px;
1781
1781
  }
1782
+ @media (max-width: 1024px) {
1783
+ .aaravpos-staff-grid {
1784
+ grid-template-columns: repeat(2, 1fr);
1785
+ }
1786
+ }
1782
1787
  .aaravpos-display-flex {
1783
1788
  display: flex;
1784
1789
  align-items: center;
@@ -3583,7 +3588,7 @@
3583
3588
  cursor: pointer;
3584
3589
  text-transform: uppercase;
3585
3590
  letter-spacing: 0.5px;
3586
- font-size: 16px;
3591
+ font-size: 12px;
3587
3592
  transition: all 0.2s ease;
3588
3593
  }
3589
3594
  .aaravpos-book-btn:hover {
@@ -3895,7 +3900,7 @@
3895
3900
  display: none;
3896
3901
  }
3897
3902
  .aaravpos-btn {
3898
- display: block;
3903
+ display: flex;
3899
3904
  }
3900
3905
  }
3901
3906
  @media (min-width: 1024px) {
@@ -3954,6 +3959,9 @@
3954
3959
  flex-direction: column;
3955
3960
  gap: 20px;
3956
3961
  }
3962
+ .aaravpos-btn {
3963
+ display: flex;
3964
+ }
3957
3965
  }
3958
3966
  @media (min-width: 1280px) {
3959
3967
  .aaravpos-title {
@@ -4267,6 +4275,20 @@
4267
4275
  cursor: pointer;
4268
4276
  user-select: none;
4269
4277
  }
4278
+ .booking-pro-card-header {
4279
+ display: flex;
4280
+ align-items: center;
4281
+ gap: 16px;
4282
+ width: 100%;
4283
+ }
4284
+ @media (max-width: 1024px) {
4285
+ .booking-pro-card {
4286
+ padding: 12px 8px;
4287
+ }
4288
+ .booking-pro-card-header {
4289
+ gap: 8px;
4290
+ }
4291
+ }
4270
4292
  .booking-pro-card:hover {
4271
4293
  border-color: rgba(0, 0, 0, 0.2);
4272
4294
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -4303,6 +4325,17 @@
4303
4325
  border: 1px solid rgba(0, 0, 0, 0.1);
4304
4326
  flex-shrink: 0;
4305
4327
  }
4328
+ @media (max-width: 1024px) {
4329
+ .booking-pro-avatar-circle {
4330
+ width: 36px;
4331
+ height: 36px;
4332
+ font-size: 12px;
4333
+ }
4334
+ .booking-pro-avatar-img {
4335
+ width: 36px;
4336
+ height: 36px;
4337
+ }
4338
+ }
4306
4339
  .booking-pro-info {
4307
4340
  flex: 1;
4308
4341
  min-width: 0;
@@ -4853,3 +4886,256 @@
4853
4886
  transform: rotate(360deg);
4854
4887
  }
4855
4888
  }
4889
+ @keyframes bookingSliderFadeIn {
4890
+ from {
4891
+ opacity: 0;
4892
+ }
4893
+ to {
4894
+ opacity: 1;
4895
+ }
4896
+ }
4897
+ @keyframes bookingSliderSlideUp {
4898
+ from {
4899
+ transform: translateY(100%);
4900
+ }
4901
+ to {
4902
+ transform: translateY(0);
4903
+ }
4904
+ }
4905
+ .booking-slider-backdrop {
4906
+ position: absolute;
4907
+ top: 0;
4908
+ right: 0;
4909
+ bottom: 0;
4910
+ left: 0;
4911
+ background-color: rgba(0, 0, 0, 0.5);
4912
+ z-index: 998;
4913
+ animation: bookingSliderFadeIn 0.2s ease-out forwards;
4914
+ }
4915
+ .booking-slider-sheet {
4916
+ position: absolute;
4917
+ bottom: 0;
4918
+ left: 0;
4919
+ right: 0;
4920
+ background-color: #ffffff;
4921
+ border-top-left-radius: 16px;
4922
+ border-top-right-radius: 16px;
4923
+ z-index: 999;
4924
+ max-height: 85vh;
4925
+ display: flex;
4926
+ flex-direction: column;
4927
+ box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
4928
+ border-top: 1px solid #f3f4f6;
4929
+ padding-bottom: env(safe-area-inset-bottom, 16px);
4930
+ animation: bookingSliderSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
4931
+ }
4932
+ @media (min-width: 1024px) {
4933
+ .booking-slider-backdrop, .booking-slider-sheet {
4934
+ display: none !important;
4935
+ }
4936
+ }
4937
+ .booking-slider-drag-handle-container {
4938
+ display: flex;
4939
+ justify-content: center;
4940
+ padding: 12px 0;
4941
+ }
4942
+ .booking-slider-drag-handle {
4943
+ width: 48px;
4944
+ height: 4px;
4945
+ background-color: #e5e7eb;
4946
+ border-radius: 9999px;
4947
+ }
4948
+ .booking-slider-header {
4949
+ padding: 0 16px 12px 16px;
4950
+ border-bottom: 1px solid #f3f4f6;
4951
+ display: flex;
4952
+ align-items: center;
4953
+ justify-content: space-between;
4954
+ }
4955
+ .booking-slider-header-text {
4956
+ text-align: left;
4957
+ }
4958
+ .booking-slider-title {
4959
+ font-family: var(--font-heading);
4960
+ font-size: 20px;
4961
+ text-transform: uppercase;
4962
+ letter-spacing: 0.05em;
4963
+ margin: 0;
4964
+ color: #111827;
4965
+ }
4966
+ .booking-slider-subtitle {
4967
+ font-size: 12px;
4968
+ color: rgba(0, 0, 0, 0.5);
4969
+ margin: 4px 0 0 0;
4970
+ }
4971
+ .booking-slider-close-btn {
4972
+ padding: 6px;
4973
+ border-radius: 9999px;
4974
+ transition: all 0.2s ease;
4975
+ border: none;
4976
+ background: transparent;
4977
+ cursor: pointer;
4978
+ display: flex;
4979
+ align-items: center;
4980
+ justify-content: center;
4981
+ color: #4b5563;
4982
+ }
4983
+ .booking-slider-close-btn:hover {
4984
+ background-color: #f3f4f6;
4985
+ color: #111827;
4986
+ }
4987
+ .booking-slider-list {
4988
+ flex: 1;
4989
+ overflow-y: auto;
4990
+ padding: 12px 16px;
4991
+ max-height: 50vh;
4992
+ display: flex;
4993
+ flex-direction: column;
4994
+ gap: 12px;
4995
+ }
4996
+ .booking-slider-item {
4997
+ display: flex;
4998
+ align-items: center;
4999
+ justify-content: space-between;
5000
+ border: 1px solid rgba(0, 0, 0, 0.15);
5001
+ border-radius: 8px;
5002
+ padding: 14px;
5003
+ transition: all 0.2s ease;
5004
+ background-color: #ffffff;
5005
+ cursor: pointer;
5006
+ }
5007
+ .booking-slider-item:hover {
5008
+ border-color: rgba(0, 0, 0, 0.25);
5009
+ background-color: #fcfcfc;
5010
+ }
5011
+ .booking-slider-item.active {
5012
+ border: 2px solid var(--btn-bg);
5013
+ background-color: rgba(215, 38, 61, 0.05);
5014
+ padding: 13px;
5015
+ }
5016
+ .booking-slider-item-content {
5017
+ flex: 1;
5018
+ min-width: 0;
5019
+ padding-right: 12px;
5020
+ text-align: left;
5021
+ }
5022
+ .booking-slider-item-name {
5023
+ font-weight: 700;
5024
+ font-size: 14px;
5025
+ white-space: nowrap;
5026
+ overflow: hidden;
5027
+ text-overflow: ellipsis;
5028
+ text-transform: uppercase;
5029
+ margin: 0 0 2px 0;
5030
+ color: #111827;
5031
+ }
5032
+ .booking-slider-item-desc {
5033
+ font-size: 11px;
5034
+ font-weight: 600;
5035
+ color: rgba(0, 0, 0, 0.4);
5036
+ white-space: nowrap;
5037
+ overflow: hidden;
5038
+ text-overflow: ellipsis;
5039
+ text-transform: uppercase;
5040
+ margin: 0 0 6px 0;
5041
+ }
5042
+ .booking-slider-item-meta {
5043
+ display: flex;
5044
+ align-items: center;
5045
+ gap: 12px;
5046
+ font-size: 12px;
5047
+ color: rgba(0, 0, 0, 0.6);
5048
+ }
5049
+ .booking-slider-item-price {
5050
+ font-family: var(--font-mono);
5051
+ font-weight: 600;
5052
+ display: flex;
5053
+ align-items: center;
5054
+ }
5055
+ .booking-slider-item-checkbox-wrapper {
5056
+ flex-shrink: 0;
5057
+ display: flex;
5058
+ align-items: center;
5059
+ }
5060
+ .booking-slider-checkbox {
5061
+ width: 20px;
5062
+ height: 20px;
5063
+ accent-color: var(--btn-bg);
5064
+ border-radius: 4px;
5065
+ cursor: pointer;
5066
+ }
5067
+ .booking-slider-empty-text {
5068
+ font-size: 14px;
5069
+ color: rgba(0, 0, 0, 0.4);
5070
+ text-align: center;
5071
+ padding: 32px 0;
5072
+ margin: 0;
5073
+ }
5074
+ .booking-slider-footer {
5075
+ padding: 16px;
5076
+ border-top: 1px solid #f3f4f6;
5077
+ background-color: #f9fafb;
5078
+ display: flex;
5079
+ gap: 12px;
5080
+ }
5081
+ .booking-slider-continue-btn {
5082
+ flex: 1;
5083
+ background-color: var(--btn-bg);
5084
+ color: #ffffff;
5085
+ padding: 12px;
5086
+ border-radius: 9999px;
5087
+ font-weight: 700;
5088
+ text-transform: uppercase;
5089
+ font-size: 12px;
5090
+ letter-spacing: 0.05em;
5091
+ cursor: pointer;
5092
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
5093
+ text-align: center;
5094
+ border: none;
5095
+ transition: background-color 0.2s ease, transform 0.1s ease;
5096
+ }
5097
+ .booking-slider-continue-btn:hover {
5098
+ background-color: var(--btn-bg-hover, #1f2937);
5099
+ }
5100
+ .booking-slider-continue-btn:active {
5101
+ transform: scale(0.98);
5102
+ }
5103
+ .aaravpos-mobile-action-wrapper {
5104
+ position: absolute;
5105
+ bottom: 20px;
5106
+ left: 0;
5107
+ right: 0;
5108
+ display: flex;
5109
+ align-items: center;
5110
+ justify-content: center;
5111
+ z-index: 50;
5112
+ padding: 0 16px;
5113
+ }
5114
+ @media (min-width: 1024px) {
5115
+ .aaravpos-mobile-action-wrapper {
5116
+ display: none !important;
5117
+ }
5118
+ }
5119
+ .aaravpos-cta-btn {
5120
+ padding: 12px 34px;
5121
+ font-size: 14px;
5122
+ position: relative;
5123
+ border-radius: 9999px;
5124
+ border: none;
5125
+ background-color: var(--btn-bg);
5126
+ color: #ffffff;
5127
+ font-family: var(--font-body);
5128
+ font-weight: 700;
5129
+ letter-spacing: 1.5px;
5130
+ text-transform: uppercase;
5131
+ cursor: pointer;
5132
+ transition: all 0.2s ease;
5133
+ }
5134
+ .aaravpos-cta-btn:hover {
5135
+ background-color: var(--btn-bg-hover);
5136
+ color: var(--btn-text-hover, #ffffff);
5137
+ }
5138
+ .aaravpos-cta-btn:disabled {
5139
+ background-color: #cccccc;
5140
+ cursor: not-allowed;
5141
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aaravpos/appointment-booking-plugin",
3
- "version": "7.0.0",
3
+ "version": "7.0.2",
4
4
  "description": "A React component library built with Tailwind CSS v4 and TypeScript",
5
5
  "type": "module",
6
6
  "packageManager": "pnpm@10.33.0",