You are developing a program for a bank that needs to **calculate commission** based on the transaction type. Your task is to write a `switch` statement that will output the commission based on the type of incoming transaction.

Commission rates based on transaction type:

- `Payment`: 0.5%;
- `Transfer`: 1.2%;
- `Withdrawal`: 2.0%;
- `Deposit`: 0.0% (no commission).

Replace `___` with the necessary code to compile it. Don't hesitate to check the **hint and solution** to understand the task better.

let transactionType: string = "Transfer"; // You can change the operation type
let commission: number;

switch (transactionType) {
    case ___:
        ___ = 0.5;
        break;
    case ___:
        ___ = ___;
        break;
    case ___:
        ___ = ___;
        break;
    case ___:
        ___ = ___;
        break;
    ___:
        ___ = -1; // Handle unknown transaction types
}

console.log(`Commission for ${transactionType}: ${commission}%`);

<link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css"
/>
<link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/dracula.min.css"
/>


<link
        rel="stylesheet"
        href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/buttons-section/hint-solution-with-copyable-%26%3Dhighlighted-code.css"
/>

<div class="button-container">
  <button
          class="button"
          onclick="toggleBlock1('hint-block1', 'solution-block1')"
  >
    Hint
  </button>
  <button
          class="button"
          onclick="toggleBlock1('solution-block1', 'hint-block1')"
  >
    Solution
  </button>
</div>


<div id="hint-block1" class="block hint-styling-block">
  1. In each case, you need to write the string name of the operation, the list of which you can see in the task description. <br/>
  2. Inside the <code>case</code> block, assign the correct commission value to the variable for each type of operation. If the operation is unknown to you, the commission should be <code>-1</code>.<br/>
  3. Don't forget about the <code>default</code> block.
</div>

<div id="solution-block1" class="block solution-styling-block">
  
  <textarea id="code-1" class="language-typescript">
let transactionType: string = "Transfer";
let commission: number;

switch (transactionType) {
    case "Payment":
        commission = 0.5;
        break;
    case "Transfer":
        commission = 1.2;
        break;
    case "Withdrawal":
        commission = 2.0;
        break;
    case "Deposit":
        commission = 0.0;
        break;
    default:
        commission = -1; // Handle unknown transaction types
}

console.log(`Commission for ${transactionType}: ${commission}%`);</textarea>

  <button class="copy-button" onclick="handleClick1('code-1')">
    <svg
            width="20"
            height="20"
            x="0"
            y="0"
            viewBox="0 0 32 32"
            style="enable-background: new 0 0 512 512"
            xml:space="preserve"
            class=""
    >
      <g>
        <path
                d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
                fill="#a6b8e6"
                opacity="1"
                data-original="#000000"
                class=""
        ></path>
      </g>
    </svg>
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/clike/clike.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>

<script>
  function onPageLoad1() {
    var editor = CodeMirror.fromTextArea(document.getElementById("code-1"), {
      lineNumbers: true,
      mode: "text/x-scala",
      theme: "dracula",
    });

    // ----------> HIGHLIGHT <----------
    editor.markText(
            { line: 0, ch: 0 },
            { line: 0, ch: 0 },
            { className: "specific" }
    );

    // Initially hide both the hint and solution blocks
    hideBlock1("hint-block1");
    hideBlock1("solution-block1");
  }

  // Copy Button handler
  const handleClick1 = (codeBlock) => {
    const textarea = document.getElementById(codeBlock);
    const copiedText = textarea.value;

    navigator.clipboard.writeText(copiedText);

    Notiflix.Notify.Success("Copied to clipboard!", {
      timeout: 2000,
      width: "260px",
      position: "center-top",
      textColor: "#ff5549",
    });
  };

  // Function to toggle the visibility of a block
  const toggleBlock1 = (blockId) => {
    const block = document.getElementById(blockId);

    if (block.style.display === "none" || block.style.display === "") {
      hideBlock1("hint-block1");
      hideBlock1("solution-block1");
      showBlock1(blockId);
    } else {
      hideBlock1(blockId);
    }
  };

  // Function to show a block
  const showBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "block";
  };

  // Function to hide a block
  const hideBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "none";
  };

  const imgElement1 = document.createElement("img");
  imgElement1.src = "nonexistent-image";
  imgElement1.style.display = "none";
  imgElement1.onerror = onPageLoad1;

  document.body.appendChild(imgElement1);
</script>

Learn the most important TypeScript fundamentals for JavaScript developers. This concise course covers what TypeScript is, its syntax, how to declare variables, and how to use type annotations. Perfect for those new to typed JavaScript development and looking to quickly get started with TypeScript in modern frontend projects.

Challenge: Commission Calculator

Challenge: Commission Calculator