fix: broken screens when access is granted from dashboard

package.json

@@ -39,7 +39,7 @@
     "deploy:github": "node ./scripts/deploy-github.js"
   },
   "dependencies": {
-    "@inplayer-org/inplayer.js": "^3.13.4",
+    "@inplayer-org/inplayer.js": "^3.13.5",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
     "dompurify": "^2.3.8",
@@ -142,4 +142,4 @@
     "flat": "^5.0.1",
     "json5": "^2.2.2"
   }
-}
+}

src/components/Payment/Payment.tsx

@@ -70,6 +70,8 @@ const Payment = ({
         return t('user:payment.daily_subscription');
       case 'week':
         return t('user:payment.weekly_subscription');
+      case 'granted':
+        return t('user:payment.granted_subscription');
       default:
         throw 'Unknown period';
     }
@@ -87,7 +89,7 @@ const Payment = ({
               <div className={styles.infoBox} key={activeSubscription.subscriptionId}>
                 <p>
                   <strong>{getTitle(activeSubscription.period)}</strong> <br />
-                  {activeSubscription.status === 'active'
+                  {activeSubscription.status === 'active' && activeSubscription.period !== 'granted'
                     ? t('user:payment.next_billing_date_on', { date: formatDate(activeSubscription.expiresAt) })
                     : t('user:payment.subscription_expires_on', { date: formatDate(activeSubscription.expiresAt) })}
                 </p>
@@ -96,7 +98,7 @@ const Payment = ({
                   <small>/{t(`account:periods.${activeSubscription.period}`)}</small>
                 </p>
               </div>
-              {activeSubscription.status === 'active' ? (
+              {activeSubscription.status === 'active' && activeSubscription.period !== 'granted' ? (
                 <Button label={t('user:payment.cancel_subscription')} onClick={onCancelSubscriptionClick} />
               ) : canRenewSubscription ? (
                 <Button label={t('user:payment.renew_subscription')} onClick={onRenewSubscriptionClick} />

src/i18n/locales/en_US/user.json

@@ -65,6 +65,7 @@
     "transactions": "Transactions",
     "weekly_subscription": "Weekly subscription",
     "price_payed_with_card": "Price payed with card",
-    "longer_than_usual": "Something is taking longer than usual. Please refresh the page in a few minutes..."
+    "longer_than_usual": "Something is taking longer than usual. Please refresh the page in a few minutes...",
+    "granted_subscription": "Granted subscription"
   }
 }

src/services/inplayer.subscription.service.ts

@@ -1,4 +1,4 @@
-import InPlayer, { Card, SubscriptionDetails as InplayerSubscription } from '@inplayer-org/inplayer.js';
+import InPlayer, { Card, GetItemAccessV1, SubscriptionDetails as InplayerSubscription } from '@inplayer-org/inplayer.js';
 
 import type { PaymentDetail, Subscription, Transaction, UpdateSubscription } from '#types/subscription';
 import type { Config } from '#types/Config';
@@ -26,9 +26,12 @@ export async function getActiveSubscription({ config }: { config: Config }) {
     if (hasAccess) {
       const { data } = await InPlayer.Subscription.getSubscriptions();
       const activeSubscription = data.collection.find((subscription: SubscriptionDetails) => subscription.item_id === assetId);
+
       if (activeSubscription) {
         return formatActiveSubscription(activeSubscription);
       }
+
+      return formatGrantedSubscription(hasAccess.data);
     }
     return null;
   } catch (error: unknown) {
@@ -108,27 +111,29 @@ const formatCardDetails = (card: Card & { card_type: string; account_id: number
 
 // TODO: fix PurchaseDetails type in InPlayer SDK
 const formatTransaction = (transaction: InPlayerPurchaseDetails): Transaction => {
+  const purchasedAmount = transaction?.purchased_amount?.toString() || '0';
+
   return {
-    transactionId: transaction.parent_resource_id,
+    transactionId: transaction.parent_resource_id || 'access granted',
     transactionDate: transaction.created_at,
-    offerId: transaction.purchased_access_fee_id?.toString(),
+    offerId: transaction.purchased_access_fee_id?.toString() || '/',
     offerType: transaction.type || '',
     offerTitle: transaction?.purchased_access_fee_description || '',
     offerPeriod: '',
-    transactionPriceExclTax: transaction.purchased_amount?.toString(),
-    transactionCurrency: transaction.purchased_currency,
-    discountedOfferPrice: transaction.purchased_amount?.toString(),
-    offerCurrency: transaction.purchased_currency,
-    offerPriceExclTax: transaction.purchased_amount?.toString(),
+    transactionPriceExclTax: purchasedAmount,
+    transactionCurrency: transaction.purchased_currency || 'EUR',
+    discountedOfferPrice: purchasedAmount,
+    offerCurrency: transaction.purchased_currency || 'EUR',
+    offerPriceExclTax: purchasedAmount,
     applicableTax: '0',
-    transactionPriceInclTax: transaction.purchased_amount?.toString(),
+    transactionPriceInclTax: purchasedAmount,
     customerId: transaction.customer_id?.toString(),
     customerEmail: transaction.consumer_email,
     customerLocale: '',
     customerCountry: 'en',
     customerIpCountry: '',
     customerCurrency: '',
-    paymentMethod: transaction.payment_method,
+    paymentMethod: transaction.payment_method || 'grant access',
   };
 };
 
@@ -165,3 +170,20 @@ const formatActiveSubscription = (subscription: SubscriptionDetails) => {
     unsubscribeUrl: subscription.unsubscribe_url,
   } as Subscription;
 };
+
+const formatGrantedSubscription = (subscription: GetItemAccessV1) => {
+  return {
+    subscriptionId: 0,
+    offerId: subscription.item.id.toString(),
+    status: 'active',
+    expiresAt: subscription.expires_at,
+    nextPaymentAt: subscription.expires_at,
+    nextPaymentPrice: 0,
+    nextPaymentCurrency: 'EUR',
+    paymentGateway: 'none',
+    paymentMethod: 'access granted',
+    offerTitle: subscription.item.title,
+    period: 'granted',
+    totalPrice: 0,
+  } as Subscription;
+};

types/subscription.d.ts

@@ -9,7 +9,7 @@ export type Subscription = {
   paymentGateway: string;
   paymentMethod: string;
   offerTitle: string;
-  period: 'day' | 'week' | 'month' | 'year';
+  period: 'day' | 'week' | 'month' | 'year' | 'granted';
   totalPrice: number;
   unsubscribeUrl?: string;
 };

yarn.lock

@@ -1557,10 +1557,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@inplayer-org/inplayer.js@^3.13.4":
-  version "3.13.4"
-  resolved "https://registry.yarnpkg.com/@inplayer-org/inplayer.js/-/inplayer.js-3.13.4.tgz#3ec294a8dd9f93cfc7762ce6fa0641a86a4086b9"
-  integrity sha512-iq8oN0ISHe1yPbrcUMYQmPxOINni6pdnSczzaSPWsmaS/Ch6k2EnXxu5tUY7QBjXErWFQNl1CKe3srzzy8mIlg==
+"@inplayer-org/inplayer.js@^3.13.5":
+  version "3.13.5"
+  resolved "https://registry.yarnpkg.com/@inplayer-org/inplayer.js/-/inplayer.js-3.13.5.tgz#b180cbbe72b92dd4bed02412a6256ceb8f0ac25f"
+  integrity sha512-Aa9TplN0MhdjayHSUsEM/4i6A8W7ow6NzdSufr9xn1wzy0kgmH+jFDq++eFArFn0fZ66zfDHAl0H9dS8RLQUgA==
   dependencies:
     aws-iot-device-sdk "^2.2.6"
     axios "^0.19.2"
@@ -3432,9 +3432,9 @@ core-js@^3.19.2:
   integrity sha512-1t+2a/d2lppW1gkLXx3pKPVGbBdxXAkqztvWb1EJ8oF8O2gIGiytzflNiFEehYwVK/t2ryUsGBoOFFvNx95mbg==
 
 core-js@^3.8.2:
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.27.1.tgz#23cc909b315a6bb4e418bf40a52758af2103ba46"
-  integrity sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww==
+  version "3.27.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.27.2.tgz#85b35453a424abdcacb97474797815f4d62ebbf7"
+  integrity sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w==
 
 core-util-is@~1.0.0:
   version "1.0.3"