Uibranch

.github/workflows/generate-offlineresources.yaml

@@ -0,0 +1,44 @@
+name: Generate Screens offline resources for franklin channels
+
+on:
+  repository_dispatch:
+    types:
+      - resource-published
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v3
+      - run: |
+          echo "Status: ${{ github.event.client_payload.status }}"
+          echo "Path: ${{ github.event.client_payload.path }}"
+      - name: Sleep for 90 seconds assuming helix index will be updated before
+        run: sleep 90s
+        shell: bash
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '14'
+      - run: npm install
+      - name: Generate Screens Offline Resources
+        run: npm run generate-offlineresources helixManifest="/screens/internal/manifests" helixChannelsList="/screens/internal/channels"
+      - name: Commit files # transfer the generated manifest files back into the repository
+        run: |
+          git config --local user.name  ${{ github.actor }}
+          git config --local user.email "<>"
+          git add .
+          git commit -m "Generating Screens offline resources"
+      - name: Push changes  # push the generated Screens offline resources to your repo
+        uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          branch: main
+          force: true

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 .hlx/*
 coverage/*
 logs/*

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.md

@@ -1,9 +1,9 @@
-# Your Project's Title...
-Your project's description...
+# WKND Helix Screens 
+This repo is dedicated for screens usecase for wknd and delivered by franklin
 
 ## Environments
-- Preview: https://main--wknd--hlxsites.hlx.page/
-- Live: https://main--wknd--hlxsites.hlx.live/
+- Preview: https://main--wknd--hlxscreens.hlx.page/
+- Live: https://main--wknd--hlxscreens.hlx.live/
 
 ## Installation
 

blocks/aem-asset-selector/aem-asset-selector-util.js

@@ -0,0 +1,143 @@
+const AS_MFE = 'https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/assets-selectors.js';
+const IMS_ENV_STAGE = 'stg1';
+const IMS_ENV_PROD = 'prod';
+
+let imsInstance = null;
+let imsEnvironment;
+
+function loadScript(url, callback, type) {
+  const $head = document.querySelector('head');
+  const $script = document.createElement('script');
+  $script.src = url;
+  if (type) {
+    $script.setAttribute('type', type);
+  }
+  $head.append($script);
+  $script.onload = callback;
+  return $script;
+}
+
+function load(cfg) {
+  const imsProps = {
+    imsClientId: cfg['ims-client-id'],
+    imsScope: 'additional_info.projectedProductContext,openid,read_organizations,AdobeID,ab.manage',
+    redirectUrl: window.location.href,
+    modalMode: true,
+    imsEnvironment,
+    env: imsEnvironment.toUpperCase(),
+  };
+  // eslint-disable-next-line no-undef
+  const registeredTokenService = PureJSSelectors.registerAssetsSelectorsAuthService(imsProps);
+  imsInstance = registeredTokenService;
+}
+
+export function init(cfg, callback) {
+  if (cfg.environment.toUpperCase() === 'STAGE') {
+    imsEnvironment = IMS_ENV_STAGE;
+  } else if (cfg.environment.toUpperCase() === 'PROD') {
+    imsEnvironment = IMS_ENV_PROD;
+  } else {
+    throw new Error('Invalid environment setting!');
+  }
+
+  loadScript(AS_MFE, () => {
+    load(cfg);
+    if (callback) {
+      callback();
+    }
+  });
+}
+
+function onClose() {
+  const selectorDialog = document.getElementById('asset-selector-dialog');
+  selectorDialog.close();
+}
+
+async function setToClipboard(rennditionURL, mimetype) {
+  const response = await fetch(rennditionURL);
+  if (response.ok) {
+    let data;
+    if (mimetype.startsWith('image')) {
+      const blob = await response.blob();
+
+      // eslint-disable-next-line no-undef
+      data = [new ClipboardItem({ [blob.type]: blob })];
+    } else if (mimetype.startsWith('video')) {
+      const block = `
+      <table border='1'>
+        <tr>
+          <td>embed</td>
+        </tr>
+        <tr>
+          <td><a href=${rennditionURL}>${rennditionURL}</a></td>
+        </tr>
+      </table>
+      `;
+
+      data = [
+        // eslint-disable-next-line no-undef
+        new ClipboardItem({ 'text/html': new Blob([block], { type: 'text/html' }) }),
+      ];
+    } else {
+      throw new Error('Unsupported mimetype!');
+    }
+    await navigator.clipboard.write(data);
+  } else {
+    // eslint-disable-next-line no-alert
+    alert('Selected asset is not available for usage!!');
+  }
+}
+
+function handleSelection(selection) {
+  const selectedAsset = selection[0];
+  if (selectedAsset.reviewStatus !== 'approved') {
+    // eslint-disable-next-line no-alert
+    alert('Please select an approved asset only!!');
+  } else {
+    const { mimetype } = selectedAsset;
+    let deliveryUrl;
+    if (mimetype && mimetype.startsWith('image')) {
+      deliveryUrl = `https://${selection[0]['repo:repositoryId'].replace('author', 'delivery')}`
+        + `/adobe/dynamicmedia/deliver/${selection[0]['repo:assetId']}/asset.png`;
+      setToClipboard(deliveryUrl, mimetype);
+    } else if (mimetype && mimetype.startsWith('video')) {
+      // TODO: Determine DASH or HLS
+      deliveryUrl = `https://${selection[0]['repo:repositoryId'].replace('author', 'delivery')}`
+        + `/adobe/dynamicmedia/deliver/${selection[0]['repo:assetId']}/video.mpd`;
+      setToClipboard(deliveryUrl, mimetype);
+    } else {
+      // eslint-disable-next-line no-alert
+      alert('Please select an image or video asset only!!');
+    }
+  }
+  // onClose();
+}
+
+// eslint-disable-next-line no-unused-vars
+function handleNavigateToAsset(asset) {
+  // onClose();
+}
+
+export async function renderAssetSelectorWithImsFlow(cfg) {
+  const assetSelectorProps = {
+    repositoryId: cfg['repository-id'],
+    imsOrg: cfg['ims-org-id'],
+    onClose,
+    handleSelection,
+    handleNavigateToAsset,
+    env: cfg.environment.toUpperCase(),
+    apiKey: 'franklin',
+  };
+  const container = document.getElementById('asset-selector');
+  // eslint-disable-next-line no-undef
+  PureJSSelectors.registerAssetsSelectorsAuthService(container, assetSelectorProps, () => {
+    const assetSelectorDialog = document.getElementById('asset-selector-dialog');
+    assetSelectorDialog.showModal();
+  });
+}
+
+export async function logoutImsFlow() {
+  // eslint-disable-next-line no-console
+  console.log('Signing out...', imsInstance);
+  await imsInstance.signOut();
+}

blocks/aem-asset-selector/aem-asset-selector.css

@@ -0,0 +1,23 @@
+#asset-selector {
+    height: calc(100vh - 80px);
+    width: calc(100vw - 60px);
+    margin: -20px;
+}
+
+footer,
+header {
+    display: none;
+}
+
+.aem-asset-selector-container {
+    display: flex;
+}
+
+.action-container {
+    display: flex;
+    justify-content: space-around;
+}
+
+.action-container > button {
+    padding: 10px;
+}

blocks/aem-asset-selector/aem-asset-selector.js

@@ -0,0 +1,29 @@
+import { readBlockConfig } from '../../scripts/lib-franklin.js';
+import {
+  init, renderAssetSelectorWithImsFlow, logoutImsFlow,
+} from './aem-asset-selector-util.js';
+
+export default function decorate(block) {
+  const cfg = readBlockConfig(block);
+  block.textContent = '';
+  block.innerHTML = `
+    <h1>AEM Assets Selector</h1>
+    <div class="action-container">
+        <button id="as-cancel">Sign Out</button>
+        <button id="as-submit">Sign In</button>
+    </div>
+    <dialog id="asset-selector-dialog">
+        <div id="asset-selector" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
+        </div>
+    </dialog>
+    `;
+  block.querySelector('#as-submit').addEventListener('click', () => {
+    renderAssetSelectorWithImsFlow(cfg);
+  });
+
+  block.querySelector('#as-cancel').addEventListener('click', () => {
+    logoutImsFlow();
+  });
+
+  init(cfg);
+}

blocks/cart-button/cart-button.css

@@ -0,0 +1,26 @@
+.cart-button {
+    position: fixed;
+    right: 20px;
+    top: 0;
+    z-index: 9999;
+    background-color:  #ffea00; 
+    color: black;
+    cursor: pointer;
+    text-transform: uppercase;
+    font-size: 14px;
+    padding: 1em 2.5em;
+    font-weight: 600;
+    font-family: 'Source Sans Pro', 'helvetica neue', helvetica, ubuntu, roboto, noto, sans-serif;
+    display: inline-block;
+    box-sizing: border-box;
+    text-decoration: none;
+    border: 2px solid transparent;
+    text-align: center;
+    font-style: normal;
+    margin: 16px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-radius: 0;
+    line-height: 1.5;
+  }

blocks/cart-button/cart-button.js

@@ -0,0 +1,7 @@
+import { loadScript } from '../../scripts/lib-franklin.js';
+
+export default function decorate(block) {
+  [...block.firstElementChild.children][0].textContent = 'Cart';
+  [...block.firstElementChild.children][0].setAttribute('onclick', 'showCart()');
+}
+loadScript('/blocks/cart-button/delayed.js', { type: 'text/javascript', charset: 'UTF-8' });

blocks/cart-button/delayed.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-unused-vars, no-undef */
+function showCart() {
+  document.getElementById('qrCode').src = '/media_137228a68130147dd12ccbeea36029a54cf65c787.png#width=434&height=444';
+  // Show overlay
+  document.getElementById('qrOverlay').style.display = 'flex';
+  hideMoreDetailOverlay();
+}
+function hideCartOverlay() {
+  document.getElementById('qrOverlay').style.display = 'none';
+}
+function createCartOverLay() {
+  const QrDiv = document.createElement('div');
+  QrDiv.innerHTML = '<div class="overlay" id="qrOverlay"> <div class="overlay-content"> <span class="overlay-close" onclick="hideCartOverlay()">&#10006;</span> <h2>Order Here</h2> <img src="" alt="QR Code" id="qrCode" class="qr-code"></div></div>';
+  document.querySelector('main').append(QrDiv);
+  hideCartOverlay();
+}
+createCartOverLay();