@internetarchive/ia-book-actions 0.0.5 → 0.0.6-4

package/demo/index.html

@@ -83,12 +83,7 @@
     import '../src/ia-book-actions.js';
     import {
       defaultLendingStatus,
-      canBrowse,
-      browsed,
       canBrowseAndBorrow,
-      browsedAndBorrow,
-      canBrowseAndBorrowod,
-      canBrowseAndJoinWaitlistForBorrow,
     } from '../src/assets/data/lending-get-status-service.js';
 
     const userid = '@neeraj-archive';
@@ -100,62 +95,76 @@
     // set defaultLendingStatus for unavailable (without borrowables) book
     iaBookActions.userid = '';
     iaBookActions.identifier = identifier;
+    iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
     iaBookActions.lendingStatus = canBrowseAndBorrow;
-    iaBookActions.bwbPurchaseUrl = 'sdf';
+    iaBookActions.bwbPurchaseUrl = '';
+    iaBookActions.barType = '';
+
+    let lendingStatus1 = iaBookActions.lendingStatus;
+
+    document.querySelectorAll('.titleBar input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        if (e.target.checked) {
+          iaBookActions.barType = 'title';
+        } else {
+          iaBookActions.barType = 'action';
+        }
+      });
+    });
 
     document.querySelectorAll('.userState input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
-        let lendingStatus1 = defaultLendingStatus;
         if (e.target.checked) {
           if (e.target.value === 'isAdmin') lendingStatus1.isAdmin = true;
           if (e.target.value === 'isLoggedIn') iaBookActions.userid = '@neeraj';
-        }
-        if (e.target.checked === false) {
+        } else {
           if (e.target.value === 'isAdmin') lendingStatus1.isAdmin = false;
           if (e.target.value === 'isLoggedIn') iaBookActions.userid = '';
         }
-          iaBookActions.lendingStatus = lendingStatus1;
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
       });
     });
 
-
     document.querySelectorAll('.printDisabled input[type=checkbox]').forEach((item) => {
-      const is_printdisabled = false;
-      const user_is_printdisabled = false;
       item.addEventListener('click', (e) => {
-        let lendingStatus1 = defaultLendingStatus;
-        if (e.target.value === 'is_printdisabled') {
-          lendingStatus1.is_printdisabled = true;
-        }
-        if (e.target.value === 'user_is_printdisabled') {
-          lendingStatus1.user_is_printdisabled = true;
+        if (e.target.checked) {
+          if (e.target.value === 'is_printdisabled') lendingStatus1.is_printdisabled = true;
+          if (e.target.value === 'user_is_printdisabled') lendingStatus1.user_is_printdisabled = true;
+        } else {
+          if (e.target.value === 'is_printdisabled') lendingStatus1.is_printdisabled = false;
+          if (e.target.value === 'user_is_printdisabled') lendingStatus1.user_is_printdisabled = false;
         }
 
-        if (lendingStatus1.user_is_printdisabled && lendingStatus1.is_printdisabled) {
-          iaBookActions.lendingStatus = lendingStatus1;
-        }
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
       });
     });
 
     document.querySelectorAll('.availableToBrowse input[type=radio]').forEach((item) => {
       item.addEventListener('click', (e) => {
-        let lendingStatus1 = defaultLendingStatus;
-
         if (e.target.value === 'user_has_browsed') {
           lendingStatus1.user_has_browsed = true;
           lendingStatus1.available_to_browse = false;
+          lendingStatus1.secondsLeftOnLoan = 10;
+          lendingStatus1.browsingExpired = false;
+        } else if(e.target.value === 'browsingExpired') {
+          lendingStatus1.user_has_browsed = true;
+          lendingStatus1.available_to_browse = false;
+          lendingStatus1.secondsLeftOnLoan = 0;
+          lendingStatus1.browsingExpired = true;
         } else if (e.target.value === 'available_to_browse') {
           lendingStatus1.available_to_browse = true;
           lendingStatus1.user_has_browsed = false;
         }
-        iaBookActions.lendingStatus = lendingStatus1;
+
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
       });
     });
 
     document.querySelectorAll('.availableToBorrow input[type=radio]').forEach((item) => {
       item.addEventListener('click', (e) => {
-        let lendingStatus1 = defaultLendingStatus;
-
         if (e.target.value === 'available_to_borrow') {
           lendingStatus1.available_to_borrow = true;
           lendingStatus1.user_on_waitlist = false;
@@ -178,7 +187,8 @@
           lendingStatus1.user_has_borrowed = true;
         }
 
-        iaBookActions.lendingStatus = lendingStatus1;
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
       });
     });
 
@@ -196,7 +206,18 @@
 
   <div>
     <fieldset>
-      <legend>Dev try for lending banner</legend>
+      <legend>Dev testing for book title bar</legend>
+        <table class="initial">
+          <tr>
+            <td class="titleBar">
+              <label><input type="checkbox" name="title" value="title" />Title Bar</label>
+            </td>
+          </tr>
+        </table>
+    </fieldset>
+
+    <fieldset>
+      <legend>Dev testing for book action bar</legend>
         <table class="initial">
           <tr>
             <td class="userState">
@@ -210,6 +231,7 @@
             <td class="availableToBrowse">
               <label><input type="radio" name="browse" value="available_to_browse" />available_to_browse</label>
               <label><input type="radio" name="browse" value="user_has_browsed" />user_has_browsed</label>
+              <label><input type="radio" name="browse" value="browsingExpired" />browsingExpired</label>
             </td>
             <td class="availableToBorrow">
               <label><input type="radio" name="borrow" value="available_to_borrow" />available_to_borrow</label>
@@ -218,7 +240,7 @@
               <label><input type="radio" name="borrow" value="user_has_borrowed" />user_has_borrowed</label>
             </td>
             <td class="purchase">
-              <label><input type="checkbox" name="purchase" value="purchase" />purchase (Click to reflect selection)</label>
+              <label><input type="checkbox" name="purchase" value="purchase" />purchase</label>
             </td>
 
             <td class="reflect">
@@ -229,30 +251,6 @@
             </td>
           </tr>
         </table>
-
-        <table class="mode" style="display: none;">
-        <tr>
-          <td>
-            <label><input type="radio" name="contact" value="canBrowse" />CanBrowse</label>
-          </td>
-          <td>
-            <label><input type="radio" name="contact" value="browsed" />browsed</label>
-          </td>
-          <td>
-            <label><input type="radio" name="contact" value="canBrowseAndBorrow" />canBrowseAndBorrow</label>
-          </td>
-          <td>
-            <label><input type="radio" name="contact" value="browsedAndBorrow" />browsedAndBorrow</label>
-          </td>
-          <td>
-            <label><input type="radio" name="contact" value="canBrowseAndBorrowod" />canBrowseAndBorrowod</label>
-          </td>
-          <td>
-            <label><input type="radio" name="contact"
-              id="canBrowseAndJoinWaitlistForBorrow" value="canBrowseAndJoinWaitlistForBorrow" />canBrowseAndJoinWaitlistForBorrow</label>
-          </td>
-        </tr>
-        </table>
     </fieldset>
   </div>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.5",
+  "version": "0.0.6-4",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",

package/src/assets/data/archive-logo.js

@@ -0,0 +1,32 @@
+import { html } from 'lit-element';
+
+export const archiveLogo = html`
+  <svg
+    class="ia-logo"
+    width="26"
+    height="26"
+    viewBox="0 0 27 30"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="logoTitleID logoDescID"
+  >
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">
+      A line drawing of the Internet Archive headquarters building façade.
+    </desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" fill="white">
+        <path
+          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
+          id="path-1"
+        ></path>
+      </mask>
+      <use fill="#FFFFFF" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" fill="#FFFFFF">
+        <path
+          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
+          id="swatch"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;

package/src/assets/data/lending-get-status-service.js

@@ -34,6 +34,7 @@ export const defaultLendingStatus = {
   users_on_waitlist: 0,
   // userid: "",
   bookUrl: '/details/practicalorganic00plim',
+  browsingExpired: false,
   daysLeftOnLoan: 0,
   isAdmin: false,
   isArchiveOrgLending: true,
@@ -47,7 +48,7 @@ export const defaultLendingStatus = {
   loanRecord: [],
   loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
   maxLoans: 10,
-  secondsLeftOnLoan: 0,
+  secondsLeftOnLoan: 10,
   shouldProtectImages: true,
   totalWaitlistCount: 0,
   userHasBorrowed: false,
@@ -58,139 +59,6 @@ export const defaultLendingStatus = {
   userWaitlistPosition: -1,
   userid: '@neeraj-archive',
 };
-
-export const canBrowse = {
-  active_borrows: 0,
-  active_browses: 0,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 1,
-  available_lendable_copies: 1,
-  available_to_borrow: false,
-  available_to_browse: true,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: null,
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: null,
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: false,
-  user_is_printdisabled: false,
-  user_loan_count: 0,
-  user_loan_record: [],
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: true,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 0,
-  loanRecord: [],
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 0,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: false,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
-export const browsed = {
-  active_borrows: 0,
-  active_browses: 1,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 0,
-  available_lendable_copies: 0,
-  available_to_borrow: false,
-  available_to_browse: false,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: '2021-07-30 09:57:40',
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: '2021-07-30 10:57:40',
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: true,
-  user_is_printdisabled: false,
-  user_loan_count: 1,
-  user_loan_record: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: false,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 1,
-  loanId: '1ca15f92d07dfdae3f7b1516084aec5d603800b8',
-  loanRecord: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  loanStartDate: '2021-07-30 09:57:40',
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 3591,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: true,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
 export const canBrowseAndBorrow = {
   active_borrows: 0,
   active_browses: 1,
@@ -261,206 +129,3 @@ export const canBrowseAndBorrow = {
   userWaitlistPosition: -1,
   userid: '@neeraj-archive',
 };
-
-export const browsedAndBorrow = {
-  active_borrows: 0,
-  active_browses: 1,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 0,
-  available_lendable_copies: 0,
-  available_to_borrow: true,
-  available_to_browse: true,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: '2021-07-30 09:57:40',
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: '2021-07-30 10:57:40',
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: true,
-  user_is_printdisabled: false,
-  user_loan_count: 1,
-  user_loan_record: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: false,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 1,
-  loanId: '1ca15f92d07dfdae3f7b1516084aec5d603800b8',
-  loanRecord: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  loanStartDate: '2021-07-30 09:57:40',
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 3591,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: true,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
-export const canBrowseAndBorrowod = {
-  active_borrows: 0,
-  active_browses: 1,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 0,
-  available_lendable_copies: 0,
-  available_to_borrow: true,
-  available_to_browse: true,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: '2021-07-30 09:57:40',
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: '2021-07-30 10:57:40',
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: true,
-  user_has_browsed: false,
-  user_is_printdisabled: false,
-  user_loan_count: 1,
-  user_loan_record: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: false,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 1,
-  loanId: '1ca15f92d07dfdae3f7b1516084aec5d603800b8',
-  loanRecord: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  loanStartDate: '2021-07-30 09:57:40',
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 3591,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: true,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
-export const canBrowseAndJoinWaitlistForBorrow = {
-  active_borrows: 1,
-  active_browses: 0,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 1,
-  available_lendable_copies: 1,
-  available_to_borrow: false,
-  available_to_browse: true,
-  available_to_waitlist: true,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: '2021-07-24 18:17:46',
-  last_browse: null,
-  last_waitlist: '2021-07-27 11:03:23',
-  max_borrowable_copies: 1,
-  max_browsable_copies: 2,
-  max_lendable_copies: 2,
-  next_borrow_expiration: '2021-08-02 18:29:41',
-  next_browse_expiration: null,
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: false,
-  user_is_printdisabled: false,
-  user_loan_count: 0,
-  user_loan_record: [],
-  user_on_waitlist: false,
-  users_on_waitlist: 2,
-  // userid: "",
-  bookUrl: '/details/worldletitutio0000vish',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: true,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 0,
-  loanRecord: [],
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 0,
-  shouldProtectImages: true,
-  totalWaitlistCount: 2,
-  userHasBorrowed: false,
-  userHasBrowsed: false,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};

package/src/assets/styles/collapsible-action-group.js

@@ -1,6 +1,11 @@
 import { css } from 'lit-element';
 
 export default css`
+  :host {
+    display: inline-flex;
+    height: 3.5rem;
+    padding: 1rem 0;
+  }
   .action-buttons {
     display: inline-flex;
     align-items: center;
@@ -13,7 +18,7 @@ export default css`
     transition: all 0.1s ease 0s;
     vertical-align: middle;
     padding: 0 1rem;
-    margin: 0px;
+    margin: 0 3px;
   }
   .primary,
   .secondary {
@@ -21,10 +26,7 @@ export default css`
   }
   .primary .initial {
     border-radius: 0.4rem 0 0 0.4rem;
-  }
-  .secondary .ia-button {
-    margin: 0 3px;
-    text-align: initial;
+    margin-right: 0;
   }
   .dropdown-content {
     position: absolute;
@@ -34,7 +36,7 @@ export default css`
     background: #2d2d2d;
     border-radius: 0.4rem;
     border: 1px solid var(--primaryCTABorder);
-    top: 3.5rem;
+    top: 3.4rem;
     left: 50%;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
@@ -54,21 +56,34 @@ export default css`
     height: 3rem;
     position: relative;
     padding: 0.6rem 1.2rem;
+    margin: 0;
+  }
+  .dropdown-content li .ia-button {
+    border-radius: 0;
   }
   .dropdown-content li .ia-button:hover {
     background: var(--primaryTextColor);
     color: rgb(45, 45, 45);
   }
+  .dropdown-content li:first-child .ia-button {
+    border-radius: 0.3rem 0.3rem 0 0;
+  }
+  .dropdown-content li:last-child .ia-button {
+    border-radius: 0;
+    border-radius: 0 0 0.3rem 0.3rem;
+  }
   .dropdown-content .purchase:hover svg g {
     fill: black;
   }
   .ia-button.down-arrow {
     border-radius: 0 0.4rem 0.4rem 0;
     padding: 0 0.6rem;
+    margin-left: 0;
   }
-  .action-loader {
+  .actionloader {
     vertical-align: middle;
     visibility: hidden;
+    padding: 0.9rem 0.2rem;
   }
   .close {
     display: none;
@@ -76,7 +91,6 @@ export default css`
   .open {
     display: block;
     z-index: 2;
-    border-top: 0;
   }
   .visible {
     display: inline-block;
@@ -115,9 +129,14 @@ export default css`
     display: initial;
     font-size: 1.4rem;
   }
-
   .unavailable {
     opacity: 0.7;
     pointer-events: none;
   }
+
+  .disabled {
+    opacity: 0.8;
+    pointer-events: none;
+    visibility: visible;
+  }
 `;